From 1e3766e2f113b440c566a20e2bfdf08c56470fed Mon Sep 17 00:00:00 2001
From: Kristian Feldsam <feldsam@gmail.com>
Date: Sat, 8 Apr 2023 15:03:49 +0200
Subject: [PATCH 01/14] [Web] revisited dark mode theme, enhanced colors

Signed-off-by: Kristian Feldsam <feldsam@gmail.com>
---
 data/web/css/themes/mailcow-darkmode.css | 303 ++++++++++++++---------
 1 file changed, 180 insertions(+), 123 deletions(-)

diff --git a/data/web/css/themes/mailcow-darkmode.css b/data/web/css/themes/mailcow-darkmode.css
index abaa7499..33016917 100644
--- a/data/web/css/themes/mailcow-darkmode.css
+++ b/data/web/css/themes/mailcow-darkmode.css
@@ -1,90 +1,123 @@
 body {
-    background-color: #414141;
-    color: #e0e0e0;
+    background-color: #1c1c1e;
+    color: #f2f2f7;
 }
 
 .card {
-    border: 1px solid #1c1c1c;
-    background-color: #3a3a3a;
+    border: 1px solid #2c2c2e;
+    background-color: #2c2c2e;
 }
+
 legend {
-    color: #f5f5f5;
+    color: #f2f2f7;
 }
+
 .card-header {
-    color: #bbb;
-    background-color: #2c2c2c;
+    color: #8e8e93;
+    background-color: #1c1c1e;
     border-color: transparent;
 }
+
 .btn-secondary, .paginate_button, .page-link, .btn-light {
-    color: #fff !important;
-    background-color: #7a7a7a !important;
-    border-color: #5c5c5c !important;
+    color: #f2f2f7 !important;
+    background-color: #5e5e5e !important;
+    border-color: #4c4c4e !important;
 }
+
 .btn-dark {
-  color: #000 !important;;
-  background-color: #f6f6f6 !important;;
-  border-color: #ddd !important;;
-}
-.btn-check:checked+.btn-secondary, .btn-check:active+.btn-secondary, .btn-secondary:active, .btn-secondary.active, .show>.btn-secondary.dropdown-toggle {
-    border-color: #7a7a7a !important;
-}
-.alert-secondary {
-    color: #fff !important;
-    background-color: #7a7a7a !important;
-    border-color: #5c5c5c !important;
-}
-.bg-secondary {
-    color: #fff !important;
-    background-color: #7a7a7a !important;
-}
-.alert-secondary, .alert-secondary a, .alert-secondary .alert-link {
-    color: #fff;
-}
-.page-item.active .page-link {
-    background-color: #158cba !important;
-    border-color: #127ba3 !important;
+    color: #f2f2f7 !important;
+    background-color: #242424 !important;
+    border-color: #1c1c1e !important;
 }
+
 .btn-secondary:focus, .btn-secondary:hover, .btn-group.open .dropdown-toggle.btn-secondary {
-    background-color: #7a7a7a;
-    border-color: #5c5c5c !important;
-    color: #fff;
+    background-color: #444444;
+    border-color: #4c4c4e !important;
+    color: #f2f2f7;
 }
+
+.btn-check:checked+.btn-secondary, .btn-check:active+.btn-secondary, .btn-secondary:active, .btn-secondary.active, .show>.btn-secondary.dropdown-toggle {
+    border-color: #5e5e5e !important;
+}
+
+.alert-secondary {
+    color: #f2f2f7 !important;
+    background-color: #5e5e5e !important;
+    border-color: #4c4c4e !important;
+}
+
+.bg-secondary {
+    color: #f2f2f7 !important;
+    background-color: #5e5e5e !important;
+}
+
+.alert-secondary, .alert-secondary a, .alert-secondary .alert-link {
+    color: #f2f2f7;
+}
+
+.page-item.active .page-link {
+    background-color: #3e3e3e !important;
+    border-color: #3e3e3e !important;
+}
+
+.btn-secondary:focus, .btn-secondary:hover, .btn-group.open .dropdown-toggle.btn-secondary {
+    background-color: #5e5e5e;
+    border-color: #4c4c4e !important;
+    color: #f2f2f7;
+}
+
 .btn-secondary:disabled, .btn-secondary.disabled {
-    border-color: #7a7a7a !important;
+    border-color: #5e5e5e !important;
 }
+
 .modal-content {
-    background-color: #414141;
+    background-color: #1c1c1e;
 }
+
 .modal-header {
-    border-bottom: 1px solid #161616;
+    border-bottom: 1px solid #2c2c2e;
 }
+
 .modal-title {
-    color: white;
+    color: #f2f2f7;
 }
+
 .modal .btn-close {
     filter: invert(1) grayscale(100%) brightness(200%);
 }
+
 .navbar.bg-light {
-    background-color: #222222 !important;
-    border-color: #181818;
+    background-color: #1c1c1e !important;
+    border-color: #2c2c2e;
 }
+
 .nav-link {
-    color: #ccc !important;
+    color: #8e8e93 !important;
 }
+
 .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
     background: none;
 }
+
+.nav-tabs, .nav-tabs .nav-link {
+    border-color: #444444 !important;
+}
+
 .nav-tabs .nav-link:not(.disabled):hover, .nav-tabs .nav-link:not(.disabled):focus, .nav-tabs .nav-link.active {
-    border-bottom-color: #414141;
+    border-bottom-color: #1c1c1e !important;
+}
+
+.card .nav-tabs .nav-link:not(.disabled):hover, .card .nav-tabs .nav-link:not(.disabled):focus, .card .nav-tabs .nav-link.active {
+    border-bottom-color: #2c2c2e !important;
 }
 
 .table, .table-striped>tbody>tr:nth-of-type(odd)>*, tbody tr {
-    color: #ccc !important;
+    color: #f2f2f7 !important;
 }
 
 .dropdown-menu {
-    background-color: #585858;
-    border: 1px solid #333;
+    background-color: #424242;
+    border: 1px solid #282828;
 }
 .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
     color: #fafafa;
@@ -97,7 +130,7 @@ legend {
     color: #d4d4d4 !important;
 }
 tbody tr {
-    color: #555;
+    color: #ccc;
 }
 .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
     color: #ccc;
@@ -106,18 +139,15 @@ tbody tr {
     color: #ccc;
 }
 .list-group-item {
-    background-color: #333;
+    background-color: #282828;
     border: 1px solid #555;
 }
 .table-striped>tbody>tr:nth-of-type(odd) {
-    background-color: #333;
+    background-color: #424242;
 }
 table.dataTable>tbody>tr.child ul.dtr-details>li {
     border-bottom: 1px solid rgba(255, 255, 255, 0.13);
 }
-tbody tr {
-    color: #ccc;
-}
 .label.label-last-login {
     color: #ccc !important;
     background-color: #555 !important;
@@ -133,20 +163,20 @@ div.numberedtextarea-number {
 }
 .well {
     border: 1px solid #555;
-    background-color: #333;
+    background-color: #282828;
 }
 pre {
     color: #ccc;
-    background-color: #333;
+    background-color: #282828;
     border: 1px solid #555;
 }
 input.form-control, textarea.form-control {
     color: #e2e2e2 !important;
-    background-color: #555 !important;
+    background-color: #424242 !important;
     border: 1px solid #999;
 }
 input.form-control:focus, textarea.form-control {
-    background-color: #555 !important;
+    background-color: #424242 !important;
 }
 input.form-control:disabled, textarea.form-disabled {
     color: #a8a8a8 !important;
@@ -154,16 +184,14 @@ input.form-control:disabled, textarea.form-disabled {
 }
 .input-group-addon {
     color: #ccc;
-    background-color: #555 !important;
+    background-color: #424242 !important;
     border: 1px solid #999;
 }
 .input-group-text {
     color: #ccc;
-    background-color: #242424;
+    background-color: #1c1c1c;
 }
 
-
-
 .list-group-item {
     color: #ccc;
 }
@@ -175,11 +203,11 @@ input.form-control:disabled, textarea.form-disabled {
 }
 .dropdown-item.active:hover {
     color: #fff !important;
-    background-color: #31b1e4;
+    background-color: #007aff;
 }
 .form-select {
     color: #e2e2e2!important;
-    background-color: #555!important;
+    background-color: #424242!important;
     border: 1px solid #999;
 }
 
@@ -191,31 +219,6 @@ input.form-control:disabled, textarea.form-disabled {
     color: #fff !important;
 }
 
-
-.table-secondary {
-    --bs-table-bg: #7a7a7a;
-    --bs-table-striped-bg: #e4e4e4;
-    --bs-table-striped-color: #000;
-    --bs-table-active-bg: #d8d8d8;
-    --bs-table-active-color: #000;
-    --bs-table-hover-bg: #dedede;
-    --bs-table-hover-color: #000;
-    color: #000;
-    border-color: #d8d8d8;
-}
-
-.table-light {
-    --bs-table-bg: #f6f6f6;
-    --bs-table-striped-bg: #eaeaea;
-    --bs-table-striped-color: #000;
-    --bs-table-active-bg: #dddddd;
-    --bs-table-active-color: #000;
-    --bs-table-hover-bg: #e4e4e4;
-    --bs-table-hover-color: #000;
-    color: #000;
-    border-color: #dddddd;
-}
-
 .form-control-plaintext {
     color: #e0e0e0;
 }
@@ -289,12 +292,12 @@ a:hover {
 }
 
 .tag-box {
-    background-color: #555;
-    border: 1px solid #999;
+    background-color: #282828;
+    border: 1px solid #555;
 }
 .tag-input {
     color: #fff;
-    background-color: #555;
+    background-color: #282828;
 }
 .tag-add {
     color: #ccc;
@@ -303,43 +306,20 @@ a:hover {
     color: #d1d1d1;
 }
 
-
-table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before:hover,
-table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before:hover {
-  background-color: #7a7a7a !important;
-}
-table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
-table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
-  background-color: #7a7a7a !important;
-  border: 1.5px solid #5c5c5c !important;
-  color: #fff !important;
-}
-table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before,
-table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before {
-  background-color: #949494;
-}
-table.dataTable.dtr-inline.collapsed>tbody>tr>td.child,
-table.dataTable.dtr-inline.collapsed>tbody>tr>th.child,
-table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty {
-  background-color: #444444;
-}
-
 .btn-check-label {
   color: #fff;
 }
 .btn-outline-secondary:hover {
-    background-color: #c3c3c3;
+    background-color: #5c5c5c;
 }
 .btn.btn-outline-secondary {
-  color: #fff !important;
+  color: #e0e0e0 !important;
   border-color: #7a7a7a !important;
 }
 .btn-check:checked+.btn-outline-secondary, .btn-check:active+.btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
-    background-color: #9b9b9b !important;
+    background-color: #7a7a7a !important;
 }
 
-
-
 .btn-input-missing,
 .btn-input-missing:hover,
 .btn-input-missing:active,
@@ -347,27 +327,104 @@ table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty {
 .btn-input-missing:active:hover,
 .btn-input-missing:active:focus {
   color: #fff !important;
-  background-color: #ff2f24 !important;
-  border-color: #e21207 !important;
+  background-color: #ff3b30 !important;
+  border-color: #ff3b30 !important;
 }
 
 .inputMissingAttr {
-    border-color: #FF4136 !important;
+    border-color: #ff4136 !important;
 }
 
-
 .list-group-details {
-    background: #444444;
+    background: #555;
 }
 .list-group-header {
-    background: #333;
+    background: #444;
 }
 
 span.mail-address-item {
-    background-color: #333;
+    background-color: #444;
     border-radius: 4px;
     border: 1px solid #555;
     padding: 2px 7px;
     display: inline-block;
     margin: 2px 6px 2px 0;
 }
+
+table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before:hover,
+table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before:hover {
+  background-color: #7a7a7a !important;
+}
+
+table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
+table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
+  background-color: #7a7a7a !important;
+  border: 1.5px solid #5c5c5c !important;
+  color: #e0e0e0 !important;
+}
+
+table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before,
+table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before {
+  background-color: #949494;
+}
+
+table.dataTable.dtr-inline.collapsed>tbody>tr>td.child,
+table.dataTable.dtr-inline.collapsed>tbody>tr>th.child,
+table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty {
+  background-color: #414141;
+}
+
+table.table, .table-striped>tbody>tr:nth-of-type(odd)>*, tbody tr {
+    color: #ccc !important;
+}
+
+.table-secondary {
+    --bs-table-bg: #282828;
+    --bs-table-striped-bg: #343434;
+    --bs-table-striped-color: #f2f2f7;
+    --bs-table-active-bg: #4c4c4c;
+    --bs-table-active-color: #f2f2f7;
+    --bs-table-hover-bg: #3a3a3a;
+    --bs-table-hover-color: #f2f2f7;
+    color: #ccc;
+    border-color: #3a3a3a;
+}
+
+.table-light {
+    --bs-table-bg: #3a3a3a;
+    --bs-table-striped-bg: #444444;
+    --bs-table-striped-color: #f2f2f7;
+    --bs-table-active-bg: #5c5c5c;
+    --bs-table-active-color: #f2f2f7;
+    --bs-table-hover-bg: #4c4c4c;
+    --bs-table-hover-color: #f2f2f7;
+    color: #ccc;
+    border-color: #4c4c4c;
+}
+
+.table-bordered {
+    border-color: #3a3a3a;
+}
+
+.table-bordered th,
+.table-bordered td {
+    border-color: #3a3a3a !important;
+}
+
+.table-bordered thead th,
+.table-bordered thead td {
+    border-bottom-width: 2px;
+}
+
+.table-striped>tbody>tr:nth-of-type(odd)>td,
+.table-striped>tbody>tr:nth-of-type(odd)>th {
+    background-color: #282828;
+}
+
+.table-hover>tbody>tr:hover {
+    background-color: #343434;
+}
+
+.table>:not(caption)>*>* {
+    border-color: #5c5c5c;
+}
\ No newline at end of file

From 1822d56efb00822ce194c513edfa3665e0d0beea Mon Sep 17 00:00:00 2001
From: Kristian Feldsam <feldsam@gmail.com>
Date: Fri, 1 Sep 2023 14:14:51 +0200
Subject: [PATCH 02/14] [Web] fixed new mailbox settings buttons styling

Signed-off-by: Kristian Feldsam <feldsam@gmail.com>

Fixed input with btn in input group styling

Signed-off-by: Kristian Feldsam <feldsam@gmail.com>
---
 data/web/css/build/014-mailcow.css       |  9 +++++++++
 data/web/css/themes/mailcow-darkmode.css | 10 +++++++---
 data/web/templates/edit/domain.twig      |  8 ++------
 data/web/templates/modals/mailbox.twig   | 18 +++++++++---------
 data/web/templates/user/Spamfilter.twig  |  8 ++------
 5 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/data/web/css/build/014-mailcow.css b/data/web/css/build/014-mailcow.css
index 374d484d..86c02ac7 100644
--- a/data/web/css/build/014-mailcow.css
+++ b/data/web/css/build/014-mailcow.css
@@ -370,3 +370,12 @@ button[aria-expanded='true'] > .caret {
 .btn-check:checked+.btn-outline-secondary, .btn-check:active+.btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
     background-color: #f0f0f0 !important;
 }
+.btn-check:checked+.btn-light, .btn-check:active+.btn-light, .btn-light:active, .btn-light.active, .show>.btn-light.dropdown-toggle {
+    color: #fff;
+    background-color: #555;
+    border-color: #4d4d4d;
+}
+.btn-check:checked+.btn-light:focus, .btn-check:active+.btn-light:focus, .btn-light:active:focus, .btn-light.active:focus, .show>.btn-light.dropdown-toggle:focus,
+.btn-check:focus+.btn-light, .btn-light:focus {
+    box-shadow: none;
+}
\ No newline at end of file
diff --git a/data/web/css/themes/mailcow-darkmode.css b/data/web/css/themes/mailcow-darkmode.css
index 33016917..ccba786b 100644
--- a/data/web/css/themes/mailcow-darkmode.css
+++ b/data/web/css/themes/mailcow-darkmode.css
@@ -71,11 +71,11 @@ legend {
 }
 
 .modal-content {
-    background-color: #1c1c1e;
+    background-color: #2c2c2e;
 }
 
 .modal-header {
-    border-bottom: 1px solid #2c2c2e;
+    border-bottom: 1px solid #999;
 }
 
 .modal-title {
@@ -319,7 +319,11 @@ a:hover {
 .btn-check:checked+.btn-outline-secondary, .btn-check:active+.btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
     background-color: #7a7a7a !important;
 }
-
+.btn-check:checked+.btn-light, .btn-check:active+.btn-light, .btn-light:active, .btn-light.active, .show>.btn-light.dropdown-toggle {
+    color: #f2f2f7 !important;
+    background-color: #242424 !important;
+    border-color: #1c1c1e !important;
+}
 .btn-input-missing,
 .btn-input-missing:hover,
 .btn-input-missing:active,
diff --git a/data/web/templates/edit/domain.twig b/data/web/templates/edit/domain.twig
index 0c424887..700445dd 100644
--- a/data/web/templates/edit/domain.twig
+++ b/data/web/templates/edit/domain.twig
@@ -166,9 +166,7 @@
         <form class="form-inline mb-4" data-id="add_wl_policy_domain">
           <div class="input-group" data-acl="{{ acl.spam_policy }}">
             <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
-            <span class="input-group-btn">
-                      <button class="btn btn-secondary" data-action="add_item" data-id="add_wl_policy_domain" data-api-url='add/domain-policy' data-api-attr='{"domain":"{{ domain }}","object_list":"wl"}' href="#">{{ lang.user.spamfilter_table_add }}</button>
-                    </span>
+            <button class="btn btn-secondary" data-action="add_item" data-id="add_wl_policy_domain" data-api-url='add/domain-policy' data-api-attr='{"domain":"{{ domain }}","object_list":"wl"}' href="#">{{ lang.user.spamfilter_table_add }}</button>
           </div>
         </form>
         <table id="wl_policy_domain_table" class="table table-striped dt-responsive w-100"></table>
@@ -185,9 +183,7 @@
         <form class="form-inline mb-4" data-id="add_bl_policy_domain">
           <div class="input-group" data-acl="{{ acl.spam_policy }}">
             <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
-            <span class="input-group-btn">
-                      <button class="btn btn-secondary" data-action="add_item" data-id="add_bl_policy_domain" data-api-url='add/domain-policy' data-api-attr='{"domain":"{{ domain }}","object_list":"bl"}' href="#">{{ lang.user.spamfilter_table_add }}</button>
-                    </span>
+            <button class="btn btn-secondary" data-action="add_item" data-id="add_bl_policy_domain" data-api-url='add/domain-policy' data-api-attr='{"domain":"{{ domain }}","object_list":"bl"}' href="#">{{ lang.user.spamfilter_table_add }}</button>
           </div>
         </form>
         <table id="bl_policy_domain_table" class="table table-striped dt-responsive w-100"></table>
diff --git a/data/web/templates/modals/mailbox.twig b/data/web/templates/modals/mailbox.twig
index 25185de0..aa98074b 100644
--- a/data/web/templates/modals/mailbox.twig
+++ b/data/web/templates/modals/mailbox.twig
@@ -78,16 +78,16 @@
             <div class="col-sm-10">
               <div class="btn-group">
                 <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_never" autocomplete="off" value="never">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_never">{{ lang.user.never }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_notification_never">{{ lang.user.never }}</label>
 
                 <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_hourly" autocomplete="off" value="hourly">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_hourly">{{ lang.user.hourly }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_notification_hourly">{{ lang.user.hourly }}</label>
 
                 <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_daily" autocomplete="off" value="daily">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_daily">{{ lang.user.daily }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_notification_daily">{{ lang.user.daily }}</label>
 
                 <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_weekly" autocomplete="off" value="weekly">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_weekly">{{ lang.user.weekly }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_notification_weekly">{{ lang.user.weekly }}</label>
               </div>
               <p class="text-muted"><small>{{ lang.user.quarantine_notification_info }}</small></p>
             </div>
@@ -97,13 +97,13 @@
             <div class="col-sm-10">
               <div class="btn-group">
                 <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_reject" autocomplete="off" value="reject">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_reject">{{ lang.user.q_reject }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_category_reject">{{ lang.user.q_reject }}</label>
                 
                 <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_add_header" autocomplete="off" value="add_header">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_add_header">{{ lang.user.q_add_header }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_category_add_header">{{ lang.user.q_add_header }}</label>
                 
                 <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_all" autocomplete="off" value="all">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_all">{{ lang.user.q_all }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_category_all">{{ lang.user.q_all }}</label>
               </div>
               <p class="text-muted"><small>{{ lang.user.quarantine_category_info }}</small></p>
             </div>
@@ -113,10 +113,10 @@
             <div class="col-sm-10">
               <div class="btn-group">
                 <input type="checkbox" class="btn-check" name="tls_enforce_in" id="tls_enforce_in" autocomplete="off" value="1">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="tls_enforce_in">{{ lang.user.tls_enforce_in }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="tls_enforce_in">{{ lang.user.tls_enforce_in }}</label>
                 
                 <input type="checkbox" class="btn-check" name="tls_enforce_out" id="tls_enforce_out" autocomplete="off" value="1">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="tls_enforce_out">{{ lang.user.tls_enforce_out }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="tls_enforce_out">{{ lang.user.tls_enforce_out }}</label>
               </div>
             </div>
           </div>
diff --git a/data/web/templates/user/Spamfilter.twig b/data/web/templates/user/Spamfilter.twig
index 144ead61..280b9003 100644
--- a/data/web/templates/user/Spamfilter.twig
+++ b/data/web/templates/user/Spamfilter.twig
@@ -45,9 +45,7 @@
           <form class="form-inline mb-4" data-id="add_wl_policy_mailbox">
             <div class="input-group" data-acl="{{ acl.spam_policy }}">
               <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
-              <span class="input-group-btn">
-                <button class="btn btn-secondary" data-action="add_item" data-id="add_wl_policy_mailbox" data-api-url='add/mailbox-policy' data-api-attr='{"username": {{ mailcow_cc_username|json_encode|raw }},"object_list":"wl"}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.user.spamfilter_table_add }}</button>
-              </span>
+              <button class="btn btn-secondary" data-action="add_item" data-id="add_wl_policy_mailbox" data-api-url='add/mailbox-policy' data-api-attr='{"username": {{ mailcow_cc_username|json_encode|raw }},"object_list":"wl"}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.user.spamfilter_table_add }}</button>
             </div>
           </form>
           <table id="wl_policy_mailbox_table" class="table table-striped dt-responsive w-100"></table>
@@ -69,9 +67,7 @@
           <form class="form-inline mb-4" data-id="add_bl_policy_mailbox">
             <div class="input-group" data-acl="{{ acl.spam_policy }}">
               <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
-              <span class="input-group-btn">
-                <button class="btn btn-secondary" data-action="add_item" data-id="add_bl_policy_mailbox" data-api-url='add/mailbox-policy' data-api-attr='{"username": {{ mailcow_cc_username|json_encode|raw }},"object_list":"bl"}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.user.spamfilter_table_add }}</button>
-              </span>
+              <button class="btn btn-secondary" data-action="add_item" data-id="add_bl_policy_mailbox" data-api-url='add/mailbox-policy' data-api-attr='{"username": {{ mailcow_cc_username|json_encode|raw }},"object_list":"bl"}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.user.spamfilter_table_add }}</button>
             </div>
           </form>
           <table id="bl_policy_mailbox_table" class="table table-striped dt-responsive w-100"></table>

From 6d9805109aa83b53fff3f08a17d0bd9ad323d9d9 Mon Sep 17 00:00:00 2001
From: Kristian Feldsam <feldsam@gmail.com>
Date: Fri, 1 Sep 2023 18:10:34 +0200
Subject: [PATCH 03/14] [Web] styling enhancements

Signed-off-by: Kristian Feldsam <feldsam@gmail.com>
---
 data/web/css/build/013-datatables.css         |  5 ----
 data/web/css/build/014-mailcow.css            | 13 +++++++++-
 data/web/css/themes/mailcow-darkmode.css      | 22 ++++++++++++++++-
 data/web/js/build/004-datatables.js           |  2 +-
 data/web/templates/admin/tab-config-dkim.twig |  6 ++---
 data/web/templates/admin/tab-config-f2b.twig  | 18 +++++++-------
 .../templates/admin/tab-config-fwdhosts.twig  |  2 +-
 data/web/templates/admin/tab-routing.twig     |  2 +-
 data/web/templates/edit/mailbox.twig          | 22 ++++++++---------
 data/web/templates/mailbox/tab-domains.twig   |  2 +-
 .../mailbox/tab-templates-domains.twig        |  4 ++--
 .../templates/mailbox/tab-templates-mbox.twig |  4 ++--
 data/web/templates/modals/mailbox.twig        | 18 +++++++-------
 .../web/templates/user/tab-user-settings.twig | 24 +++++++++----------
 14 files changed, 85 insertions(+), 59 deletions(-)

diff --git a/data/web/css/build/013-datatables.css b/data/web/css/build/013-datatables.css
index 13378460..57e2b6d9 100644
--- a/data/web/css/build/013-datatables.css
+++ b/data/web/css/build/013-datatables.css
@@ -42,11 +42,6 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before,
 table.dataTable td.dt-control:before {
     background-color: #979797 !important;
 }
-table.dataTable.dtr-inline.collapsed>tbody>tr>td.child, 
-table.dataTable.dtr-inline.collapsed>tbody>tr>th.child, 
-table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty {
-    background-color: #fbfbfb;
-}
 table.dataTable.table-striped>tbody>tr>td {
     vertical-align: middle;
 }
diff --git a/data/web/css/build/014-mailcow.css b/data/web/css/build/014-mailcow.css
index 86c02ac7..edc6b3d7 100644
--- a/data/web/css/build/014-mailcow.css
+++ b/data/web/css/build/014-mailcow.css
@@ -357,6 +357,7 @@ button[aria-expanded='true'] > .caret {
 }
 
 .progress {
+  height: 16px;
   background-color: #d5d5d5;
 }
 
@@ -370,12 +371,22 @@ button[aria-expanded='true'] > .caret {
 .btn-check:checked+.btn-outline-secondary, .btn-check:active+.btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
     background-color: #f0f0f0 !important;
 }
-.btn-check:checked+.btn-light, .btn-check:active+.btn-light, .btn-light:active, .btn-light.active, .show>.btn-light.dropdown-toggle {
+.btn-check:checked+.btn-light, .btn-check:active+.btn-light, .btn-light:active, .btn-light.active, .show>.btn-light.dropdown-toggle {    
     color: #fff;
     background-color: #555;
+    background-image: none;
     border-color: #4d4d4d;
 }
 .btn-check:checked+.btn-light:focus, .btn-check:active+.btn-light:focus, .btn-light:active:focus, .btn-light.active:focus, .show>.btn-light.dropdown-toggle:focus,
 .btn-check:focus+.btn-light, .btn-light:focus {
     box-shadow: none;
+}
+.btn-group>.btn:not(:last-of-type) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+.badge.bg-info > a,
+.badge.bg-danger > a {
+    color: #fff !important;
+    text-decoration: none;
 }
\ No newline at end of file
diff --git a/data/web/css/themes/mailcow-darkmode.css b/data/web/css/themes/mailcow-darkmode.css
index ccba786b..ea95df97 100644
--- a/data/web/css/themes/mailcow-darkmode.css
+++ b/data/web/css/themes/mailcow-darkmode.css
@@ -18,6 +18,10 @@ legend {
     border-color: transparent;
 }
 
+.card-body {
+    --bs-card-color: #bbb;
+}
+
 .btn-secondary, .paginate_button, .page-link, .btn-light {
     color: #f2f2f7 !important;
     background-color: #5e5e5e !important;
@@ -71,6 +75,7 @@ legend {
 }
 
 .modal-content {
+    --bs-modal-color: #bbb;
     background-color: #2c2c2e;
 }
 
@@ -79,7 +84,7 @@ legend {
 }
 
 .modal-title {
-    color: #f2f2f7;
+    color: #bbb;
 }
 
 .modal .btn-close {
@@ -431,4 +436,19 @@ table.table, .table-striped>tbody>tr:nth-of-type(odd)>*, tbody tr {
 
 .table>:not(caption)>*>* {
     border-color: #5c5c5c;
+    --bs-table-color-state:#bbb;
+    --bs-table-bg: #3a3a3a;
+}
+.text-muted {
+    --bs-secondary-color: #8e8e93;
+}
+input::placeholder {
+    color: #8e8e93 !important;
+}
+
+.form-select {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238e8e93' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+}
+.btn-light, .btn-light:hover {
+    background-image: none;
 }
\ No newline at end of file
diff --git a/data/web/js/build/004-datatables.js b/data/web/js/build/004-datatables.js
index 9ece8ea5..8c791713 100644
--- a/data/web/js/build/004-datatables.js
+++ b/data/web/js/build/004-datatables.js
@@ -15801,7 +15801,7 @@ DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, bu
 		paginationEl.empty();
 	}
 	else {
-		paginationEl = hostEl.html('<ul/>').children('ul').addClass('pagination');
+		paginationEl = hostEl.html('<ul/>').children('ul').addClass('pagination pagination-sm');
 	}
 
 	attach(
diff --git a/data/web/templates/admin/tab-config-dkim.twig b/data/web/templates/admin/tab-config-dkim.twig
index 96dccc66..857bfba2 100644
--- a/data/web/templates/admin/tab-config-dkim.twig
+++ b/data/web/templates/admin/tab-config-dkim.twig
@@ -114,7 +114,7 @@
         </div>
         <div class="row mb-4">
           <div class="col-12 col-md-6 col-lg-4 col-xl-3">
-            <select data-style="btn btn-secondary btn-sm" class="form-control" id="key_size" name="key_size" title="{{ lang.admin.dkim_key_length }}" required>
+            <select data-style="btn btn-light btn-sm" class="form-control" id="key_size" name="key_size" title="{{ lang.admin.dkim_key_length }}" required>
               <option data-subtext="bits">1024</option>
               <option data-subtext="bits">2048</option>
             </select>
@@ -159,7 +159,7 @@
           <div class="row mb-2">
             <label class="control-label col-sm-2 text-sm-end" for="from_domain">{{ lang.admin.dkim_from }}:</label>
             <div class="col-sm-10 col-md-6 col-lg-4 col-xl-3">
-              <select data-style="btn btn-secondary btn-sm"
+              <select data-style="btn btn-light btn-sm"
                       data-live-search="true"
                       data-id="dkim_duplicate"
                       title="{{ lang.admin.dkim_from_title }}"
@@ -175,7 +175,7 @@
             <div class="col-sm-10 col-md-6 col-lg-4 col-xl-3">
               <select
                 data-live-search="true"
-                data-style="btn btn-secondary btn-sm"
+                data-style="btn btn-light btn-sm"
                 data-id="dkim_duplicate"
                 title="{{ lang.admin.dkim_to_title }}"
                 name="to_domain" id="to_domain" class="full-width-select form-control" multiple required>
diff --git a/data/web/templates/admin/tab-config-f2b.twig b/data/web/templates/admin/tab-config-f2b.twig
index 4336591a..de4a7c63 100644
--- a/data/web/templates/admin/tab-config-f2b.twig
+++ b/data/web/templates/admin/tab-config-f2b.twig
@@ -92,28 +92,28 @@
       {% endif %}
       {% for active_ban in f2b_data.active_bans %}
         <p>
-          <span class="badge fs-5 bg-info py-0">
+          <span class="badge fs-7 bg-info">
             <i class="bi bi-funnel-fill"></i>
-            <a href="https://bgp.he.net/ip/{{ active_ban.ip }}" target="_blank" style="color:white">
+            <a href="https://bgp.he.net/ip/{{ active_ban.ip }}" target="_blank">
               {{ active_ban.network }}
             </a>
-            ({{ active_ban.banned_until }}) -
+            ({{ active_ban.banned_until }})
+          </span> -
             {% if active_ban.queued_for_unban == 0 %}
-            <a class="btn btn-lg btn-link p-0 text-info" data-action="edit_selected" data-item="{{ active_ban.network }}" data-id="f2b-quick" data-api-url='edit/fail2ban' data-api-attr='{"action":"unban"}' href="#">[{{ lang.admin.queue_unban }}]</a>
-            <a class="btn btn-lg btn-link p-0 text-info" data-action="edit_selected" data-item="{{ active_ban.network }}" data-id="f2b-quick" data-api-url='edit/fail2ban' data-api-attr='{"action":"whitelist"}' href="#">[whitelist]</a>
-            <a class="btn btn-lg btn-link p-0 text-info" data-action="edit_selected" data-item="{{ active_ban.network }}" data-id="f2b-quick" data-api-url='edit/fail2ban' data-api-attr='{"action":"blacklist"}' href="#">[blacklist (<b>needs restart</b>)]</a>
+            <a data-action="edit_selected" data-item="{{ active_ban.network }}" data-id="f2b-quick" data-api-url='edit/fail2ban' data-api-attr='{"action":"unban"}' href="#">[{{ lang.admin.queue_unban }}]</a>
+            <a data-action="edit_selected" data-item="{{ active_ban.network }}" data-id="f2b-quick" data-api-url='edit/fail2ban' data-api-attr='{"action":"whitelist"}' href="#">[whitelist]</a>
+            <a data-action="edit_selected" data-item="{{ active_ban.network }}" data-id="f2b-quick" data-api-url='edit/fail2ban' data-api-attr='{"action":"blacklist"}' href="#">[blacklist (<b>needs restart</b>)]</a>
             {% else %}
             <i>{{ lang.admin.unban_pending }}</i>
             {% endif %}
-          </span>
         </p>
       {% endfor %}
       <hr>
       {% for perm_ban in f2b_data.perm_bans %}
         <p>
-          <span class="badge fs-5 bg-danger" style="padding: 0.1em 0.4em 0.1em;">
+          <span class="badge fs-7 bg-danger">
             <i class="bi bi-funnel-fill"></i>
-            <a href="https://bgp.he.net/ip/{{ perm_ban.ip }}" target="_blank" style="color:white">
+            <a href="https://bgp.he.net/ip/{{ perm_ban.ip }}" target="_blank">
               {{ perm_ban.network }}
             </a>
           </span>
diff --git a/data/web/templates/admin/tab-config-fwdhosts.twig b/data/web/templates/admin/tab-config-fwdhosts.twig
index 31de2036..d3efddd8 100644
--- a/data/web/templates/admin/tab-config-fwdhosts.twig
+++ b/data/web/templates/admin/tab-config-fwdhosts.twig
@@ -9,7 +9,7 @@
     <div id="collapse-tab-config-fwdhosts" class="card-body collapse" data-bs-parent="#admin-content">
       <p style="margin-bottom:40px">{{ lang.admin.forwarding_hosts_hint }}</p>
       <table id="forwardinghoststable" class="table table-striped dt-responsive w-100"></table>
-      <div class="mass-actions-admin">
+      <div class="mass-actions-admin mb-4">
         <div class="btn-group btn-group-sm">
           <button type="button" id="toggle_multi_select_all" data-id="fwdhosts" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary">{{ lang.mailbox.toggle_all }}</button>
           <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
diff --git a/data/web/templates/admin/tab-routing.twig b/data/web/templates/admin/tab-routing.twig
index 5eca7eb1..c6e59601 100644
--- a/data/web/templates/admin/tab-routing.twig
+++ b/data/web/templates/admin/tab-routing.twig
@@ -55,7 +55,7 @@
     <div id="collapse-tab-maps" class="card-body collapse" data-bs-parent="#admin-content">
       <p style="margin-bottom:40px">{{ lang.admin.transports_hint|raw }}</p>
       <table id="transportstable" class="table table-striped dt-responsive w-100"></table>
-      <div class="mass-actions-admin">
+      <div class="mass-actions-admin mb-4">
         <div class="btn-group btn-group-sm">
           <button type="button" id="toggle_multi_select_all" data-id="transports" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary">{{ lang.mailbox.toggle_all }}</button>
           <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
diff --git a/data/web/templates/edit/mailbox.twig b/data/web/templates/edit/mailbox.twig
index f8cde7da..c08ff74f 100644
--- a/data/web/templates/edit/mailbox.twig
+++ b/data/web/templates/edit/mailbox.twig
@@ -109,25 +109,25 @@
         <label class="control-label col-sm-2">{{ lang.user.quarantine_notification }}</label>
         <div class="col-sm-10">
           <div class="btn-group" data-acl="{{ acl.quarantine_notification }}">
-            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light{% if quarantine_notification == 'never' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'never' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"never"}'>{{ lang.user.never }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light{% if quarantine_notification == 'hourly' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'hourly' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"hourly"}'>{{ lang.user.hourly }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light{% if quarantine_notification == 'daily' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'daily' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"daily"}'>{{ lang.user.daily }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light{% if quarantine_notification == 'weekly' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'weekly' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_notification"
@@ -141,19 +141,19 @@
         <label class="control-label col-sm-2">{{ lang.user.quarantine_category }}</label>
         <div class="col-sm-10">
           <div class="btn-group" data-acl="{{ acl.quarantine_category }}">
-            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-light{% if quarantine_category == 'reject' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if quarantine_category == 'reject' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_category"
             data-api-url='edit/quarantine_category'
             data-api-attr='{"quarantine_category":"reject"}'>{{ lang.user.q_reject }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-light{% if quarantine_category == 'add_header' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if quarantine_category == 'add_header' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_category"
             data-api-url='edit/quarantine_category'
             data-api-attr='{"quarantine_category":"add_header"}'>{{ lang.user.q_add_header }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-light{% if quarantine_category == 'all' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if quarantine_category == 'all' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailbox }}"
             data-id="quarantine_category"
@@ -167,13 +167,13 @@
         <label class="control-label col-sm-2" for="sender_acl">{{ lang.user.tls_policy }}</label>
         <div class="col-sm-10">
           <div class="btn-group" data-acl="{{ acl.tls_policy }}">
-            <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-light{% if get_tls_policy.tls_enforce_in == '1' %} btn-dark"{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline{% if get_tls_policy.tls_enforce_in == '1' %} btn-dark{% else %} btn-light{% endif %}"
               data-action="edit_selected"
               data-item="{{ mailbox }}"
               data-id="tls_policy"
               data-api-url='edit/tls_policy'
               data-api-attr='{"tls_enforce_in": {% if get_tls_policy.tls_enforce_in == '1' %}0{% else %}1{% endif %} }'>{{ lang.user.tls_enforce_in }}</button>
-            <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-light{% if get_tls_policy.tls_enforce_out == '1' %} btn-dark"{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline{% if get_tls_policy.tls_enforce_out == '1' %} btn-dark{% else %} btn-light{% endif %}"
               data-action="edit_selected"
               data-item="{{ mailbox }}"
               data-id="tls_policy"
@@ -234,7 +234,7 @@
           </select>
         </div>
       </div>
-      <div class="row">
+      <div class="row mt-2">
         <div class="offset-sm-2 col-sm-10">
           <div class="checkbox">
             <label><input type="checkbox" value="1" name="force_pw_update"{% if result.attributes.force_pw_update == '1' %} checked{% endif %}> {{ lang.edit.force_pw_update }}</label>
@@ -252,7 +252,7 @@
         </div>
       </div>
       {% endif %}
-      <div class="row mb-2">
+      <div class="row mt-2 mb-2">
         <div class="offset-sm-2 col-sm-10">
           <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editmailbox" data-item="{{ result.username }}" data-api-url='edit/mailbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
         </div>
diff --git a/data/web/templates/mailbox/tab-domains.twig b/data/web/templates/mailbox/tab-domains.twig
index a30438d1..8b2d61b7 100644
--- a/data/web/templates/mailbox/tab-domains.twig
+++ b/data/web/templates/mailbox/tab-domains.twig
@@ -28,7 +28,7 @@
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-collapse="domain_table">{{ lang.datatables.collapse_all }}</a></li>
           </ul>
           {% if mailcow_cc_role == 'admin' %}
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain }}</a>
+          <button class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#addDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain }}</button>
           {% endif %}
         </div>
       </div>
diff --git a/data/web/templates/mailbox/tab-templates-domains.twig b/data/web/templates/mailbox/tab-templates-domains.twig
index 64e72ce4..c339aaf0 100644
--- a/data/web/templates/mailbox/tab-templates-domains.twig
+++ b/data/web/templates/mailbox/tab-templates-domains.twig
@@ -24,7 +24,7 @@
             {% endif %}
           </ul>
           {% if mailcow_cc_role == 'admin' %}
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</a>
+          <button class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#addDomainTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</button>
           {% endif %}
         </div>
       </div>
@@ -42,7 +42,7 @@
             {% endif %}
           </ul>
           {% if mailcow_cc_role == 'admin' %}
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</a>
+          <button class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</button>
           {% endif %}
         </div>
       </div>
diff --git a/data/web/templates/mailbox/tab-templates-mbox.twig b/data/web/templates/mailbox/tab-templates-mbox.twig
index f71eb7fd..631394bb 100644
--- a/data/web/templates/mailbox/tab-templates-mbox.twig
+++ b/data/web/templates/mailbox/tab-templates-mbox.twig
@@ -24,7 +24,7 @@
             {% endif %}
           </ul>
           {% if mailcow_cc_role == 'admin' %}
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addMailboxTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</a>
+          <button class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#addMailboxTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</button>
           {% endif %}
         </div>
       </div>
@@ -42,7 +42,7 @@
             {% endif %}
           </ul>
           {% if mailcow_cc_role == 'admin' %}
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addMailboxTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</a>
+          <button class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#addMailboxTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</button>
           {% endif %}
         </div>
       </div>
diff --git a/data/web/templates/modals/mailbox.twig b/data/web/templates/modals/mailbox.twig
index aa98074b..44ba149f 100644
--- a/data/web/templates/modals/mailbox.twig
+++ b/data/web/templates/modals/mailbox.twig
@@ -248,16 +248,16 @@
             <div class="col-sm-10">
               <div class="btn-group">
                 <input type="radio" class="btn-check" name="quarantine_notification" id="template_quarantine_notification_never" autocomplete="off" value="never">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_quarantine_notification_never">{{ lang.user.never }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_quarantine_notification_never">{{ lang.user.never }}</label>
 
                 <input type="radio" class="btn-check" name="quarantine_notification" id="template_quarantine_notification_hourly" autocomplete="off" value="hourly">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_quarantine_notification_hourly">{{ lang.user.hourly }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_quarantine_notification_hourly">{{ lang.user.hourly }}</label>
 
                 <input type="radio" class="btn-check" name="quarantine_notification" id="template_quarantine_notification_daily" autocomplete="off" value="daily">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_quarantine_notification_daily">{{ lang.user.daily }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_quarantine_notification_daily">{{ lang.user.daily }}</label>
 
                 <input type="radio" class="btn-check" name="quarantine_notification" id="template_quarantine_notification_weekly" autocomplete="off" value="weekly">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_quarantine_notification_weekly">{{ lang.user.weekly }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_quarantine_notification_weekly">{{ lang.user.weekly }}</label>
               </div>
               <p class="text-muted"><small>{{ lang.user.quarantine_notification_info }}</small></p>
             </div>
@@ -267,13 +267,13 @@
             <div class="col-sm-10">
               <div class="btn-group">
                 <input type="radio" class="btn-check" name="quarantine_category" id="template_quarantine_category_reject" autocomplete="off" value="reject" >
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_quarantine_category_reject">{{ lang.user.q_reject }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_quarantine_category_reject">{{ lang.user.q_reject }}</label>
                 
                 <input type="radio" class="btn-check" name="quarantine_category" id="template_quarantine_category_add_header" autocomplete="off" value="add_header">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_quarantine_category_add_header">{{ lang.user.q_add_header }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_quarantine_category_add_header">{{ lang.user.q_add_header }}</label>
                 
                 <input type="radio" class="btn-check" name="quarantine_category" id="template_quarantine_category_all" autocomplete="off" value="all">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_quarantine_category_all">{{ lang.user.q_all }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_quarantine_category_all">{{ lang.user.q_all }}</label>
               </div>
               <p class="text-muted"><small>{{ lang.user.quarantine_category_info }}</small></p>
             </div>
@@ -283,10 +283,10 @@
             <div class="col-sm-10">
               <div class="btn-group">
                 <input type="checkbox" class="btn-check" name="tls_enforce_in" id="template_tls_enforce_in" autocomplete="off" value="1">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_tls_enforce_in">{{ lang.user.tls_enforce_in }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_tls_enforce_in">{{ lang.user.tls_enforce_in }}</label>
                 
                 <input type="checkbox" class="btn-check" name="tls_enforce_out" id="template_tls_enforce_out" autocomplete="off" value="1">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_tls_enforce_out">{{ lang.user.tls_enforce_out }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_tls_enforce_out">{{ lang.user.tls_enforce_out }}</label>
               </div>
             </div>
           </div>
diff --git a/data/web/templates/user/tab-user-settings.twig b/data/web/templates/user/tab-user-settings.twig
index 3a2ee5ff..3fe0db33 100644
--- a/data/web/templates/user/tab-user-settings.twig
+++ b/data/web/templates/user/tab-user-settings.twig
@@ -12,19 +12,19 @@
         <div class="col-sm-3 col-12 text-sm-end text-start text-xs-bold mb-4">{{ lang.user.tag_handling }}:</div>
         <div class="col-sm-9 col-12">
           <div class="btn-group" data-acl="{{ acl.delimiter_action }}">
-            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-light{% if get_tagging_options == 'subfolder' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if get_tagging_options == 'subfolder' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="delimiter_action"
             data-api-url='edit/delimiter_action'
             data-api-attr='{"tagged_mail_handler":"subfolder"}'>{{ lang.user.tag_in_subfolder }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-light{% if get_tagging_options == 'subject' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if get_tagging_options == 'subject' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="delimiter_action"
             data-api-url='edit/delimiter_action'
             data-api-attr='{"tagged_mail_handler":"subject"}'>{{ lang.user.tag_in_subject }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-light{% if get_tagging_options == 'none' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if get_tagging_options == 'none' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="delimiter_action"
@@ -40,13 +40,13 @@
         <div class="col-sm-3 col-12 text-sm-end text-start text-xs-bold mb-4">{{ lang.user.tls_policy }}:</div>
         <div class="col-sm-9 col-12">
           <div class="btn-group" data-acl="{{ acl.tls_policy }}">
-            <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-light{% if get_tls_policy.tls_enforce_in == '1' %} btn-dark"{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline{% if get_tls_policy.tls_enforce_in == '1' %} btn-dark"{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="tls_policy"
             data-api-url='edit/tls_policy'
             data-api-attr='{"tls_enforce_in": {% if get_tls_policy.tls_enforce_in == '1' %}0{% else %}1{% endif %} }'>{{ lang.user.tls_enforce_in }}</button>
-            <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-light{% if get_tls_policy.tls_enforce_out == '1' %} btn-dark"{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline{% if get_tls_policy.tls_enforce_out == '1' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="tls_policy"
@@ -61,25 +61,25 @@
         <div class="col-sm-3 col-12 text-sm-end text-start text-xs-bold mb-4">{{ lang.user.quarantine_notification }}:</div>
         <div class="col-sm-9 col-12">
           <div class="btn-group" data-acl="{{ acl.quarantine_notification }}">
-            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light{% if quarantine_notification == 'never' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'never' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"never"}'>{{ lang.user.never }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light{% if quarantine_notification == 'hourly' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'hourly' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"hourly"}'>{{ lang.user.hourly }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light{% if quarantine_notification == 'daily' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'daily' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"daily"}'>{{ lang.user.daily }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light{% if quarantine_notification == 'weekly' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'weekly' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_notification"
@@ -93,19 +93,19 @@
         <div class="col-sm-3 col-12 text-sm-end text-start text-xs-bold mb-4">{{ lang.user.quarantine_category }}:</div>
         <div class="col-sm-9 col-12">
           <div class="btn-group" data-acl="{{ acl.quarantine_category }}">
-            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-light{% if quarantine_category == 'reject' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if quarantine_category == 'reject' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_category"
             data-api-url='edit/quarantine_category'
             data-api-attr='{"quarantine_category":"reject"}'>{{ lang.user.q_reject }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-light{% if quarantine_category == 'add_header' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if quarantine_category == 'add_header' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_category"
             data-api-url='edit/quarantine_category'
             data-api-attr='{"quarantine_category":"add_header"}'>{{ lang.user.q_add_header }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-light{% if quarantine_category == 'all' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if quarantine_category == 'all' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_category"

From 8e5323023a1ffd4f05477663f229b064a6c1e787 Mon Sep 17 00:00:00 2001
From: Kristian Feldsam <feldsam@gmail.com>
Date: Sat, 2 Sep 2023 10:17:00 +0200
Subject: [PATCH 04/14] [Web] checkbox styling

Signed-off-by: Kristian Feldsam <feldsam@gmail.com>
---
 data/web/js/site/admin.js                     |  14 +-
 data/web/js/site/edit.js                      |   8 +-
 data/web/js/site/mailbox.js                   |  28 ++--
 data/web/js/site/quarantine.js                |   2 +-
 data/web/js/site/queue.js                     |   2 +-
 data/web/js/site/user.js                      |  26 ++--
 .../templates/admin/tab-config-admins.twig    |   8 +-
 .../templates/admin/tab-config-customize.twig |   2 +-
 data/web/templates/admin/tab-config-dkim.twig |  10 +-
 .../admin/tab-config-password-policy.twig     |   2 +-
 .../templates/admin/tab-config-rsettings.twig |   2 +-
 .../admin/tab-globalfilter-regex.twig         |   2 +-
 data/web/templates/admin/tab-routing.twig     |   4 +-
 data/web/templates/admin/tab-sys-mails.twig   |   2 +-
 data/web/templates/edit/admin.twig            |   8 +-
 data/web/templates/edit/alias.twig            |  20 +--
 data/web/templates/edit/aliasdomain.twig      |   4 +-
 data/web/templates/edit/app-passwd.twig       |   4 +-
 data/web/templates/edit/bcc.twig              |   4 +-
 data/web/templates/edit/domain-templates.twig |  16 +--
 data/web/templates/edit/domain.twig           |  22 +--
 data/web/templates/edit/domainadmin.twig      |   8 +-
 data/web/templates/edit/filter.twig           |   4 +-
 .../web/templates/edit/mailbox-templates.twig |  20 +--
 data/web/templates/edit/mailbox.twig          |  22 +--
 data/web/templates/edit/recipient_map.twig    |   4 +-
 data/web/templates/edit/relayhost.twig        |   4 +-
 data/web/templates/edit/resource.twig         |   4 +-
 data/web/templates/edit/syncjob.twig          |  28 ++--
 data/web/templates/edit/tls_policy_map.twig   |   4 +-
 data/web/templates/edit/transport.twig        |   8 +-
 data/web/templates/modals/admin.twig          |  12 +-
 data/web/templates/modals/mailbox.twig        | 136 +++++++++---------
 data/web/templates/modals/user.twig           |  32 ++---
 data/web/templates/user/Pushover.twig         |  12 +-
 35 files changed, 244 insertions(+), 244 deletions(-)

diff --git a/data/web/js/site/admin.js b/data/web/js/site/admin.js
index 07dfed8c..252da9a1 100644
--- a/data/web/js/site/admin.js
+++ b/data/web/js/site/admin.js
@@ -517,7 +517,7 @@ jQuery(function($){
         if (item.used_by_mailboxes == '') { item.in_use_by = item.used_by_domains; }
         else if (item.used_by_domains == '') { item.in_use_by = item.used_by_mailboxes; }
         else { item.in_use_by = item.used_by_mailboxes + '<hr style="margin:5px 0px 5px 0px;">' + item.used_by_domains; }
-        item.chkbox = '<input type="checkbox" data-id="rlyhosts" name="multi_select" value="' + item.id + '" />';
+        item.chkbox = '<input type="checkbox" class="form-check-input" data-id="rlyhosts" name="multi_select" value="' + item.id + '" />';
       });
     } else if (table == 'transportstable') {
       $.each(data, function (i, item) {
@@ -532,11 +532,11 @@ jQuery(function($){
           '<a href="/edit/transport/' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
           '<a href="#" data-action="delete_selected" data-id="single-transport" data-api-url="delete/transport" data-item="' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
           '</div>';
-        item.chkbox = '<input type="checkbox" data-id="transports" name="multi_select" value="' + item.id + '" />';
+        item.chkbox = '<input type="checkbox" class="form-check-input" data-id="transports" name="multi_select" value="' + item.id + '" />';
       });
     } else if (table == 'queuetable') {
       $.each(data, function (i, item) {
-        item.chkbox = '<input type="checkbox" data-id="mailqitems" name="multi_select" value="' + item.queue_id + '" />';
+        item.chkbox = '<input type="checkbox" class="form-check-input" data-id="mailqitems" name="multi_select" value="' + item.queue_id + '" />';
         rcpts = $.map(item.recipients, function(i) {
           return escapeHtml(i);
         });
@@ -550,7 +550,7 @@ jQuery(function($){
         item.action = '<div class="btn-group">' +
           '<a href="#" data-action="delete_selected" data-id="single-fwdhost" data-api-url="delete/fwdhost" data-item="' + encodeURI(item.host) + '" class="btn btn-xs btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
           '</div>';
-        item.chkbox = '<input type="checkbox" data-id="fwdhosts" name="multi_select" value="' + item.host + '" />';
+        item.chkbox = '<input type="checkbox" class="form-check-input" data-id="fwdhosts" name="multi_select" value="' + item.host + '" />';
       });
     } else if (table == 'oauth2clientstable') {
       $.each(data, function (i, item) {
@@ -560,13 +560,13 @@ jQuery(function($){
           '</div>';
         item.scope = "profile";
         item.grant_types = 'refresh_token password authorization_code';
-        item.chkbox = '<input type="checkbox" data-id="oauth2_clients" name="multi_select" value="' + item.id + '" />';
+        item.chkbox = '<input type="checkbox" class="form-check-input" data-id="oauth2_clients" name="multi_select" value="' + item.id + '" />';
       });
     } else if (table == 'domainadminstable') {
       $.each(data, function (i, item) {
         item.selected_domains = escapeHtml(item.selected_domains);
         item.selected_domains = item.selected_domains.toString().replace(/,/g, "<br>");
-        item.chkbox = '<input type="checkbox" data-id="domain_admins" name="multi_select" value="' + item.username + '" />';
+        item.chkbox = '<input type="checkbox" class="form-check-input" data-id="domain_admins" name="multi_select" value="' + item.username + '" />';
         item.action = '<div class="btn-group">' +
           '<a href="/edit/domainadmin/' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
           '<a href="#" data-action="delete_selected" data-id="single-domain-admin" data-api-url="delete/domain-admin" data-item="' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
@@ -580,7 +580,7 @@ jQuery(function($){
         } else {
           item.usr = item.username;
         }
-        item.chkbox = '<input type="checkbox" data-id="admins" name="multi_select" value="' + item.username + '" />';
+        item.chkbox = '<input type="checkbox" class="form-check-input" data-id="admins" name="multi_select" value="' + item.username + '" />';
         item.action = '<div class="btn-group">' +
           '<a href="/edit/admin/' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
           '<a href="#" data-action="delete_selected" data-id="single-admin" data-api-url="delete/admin" data-item="' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
diff --git a/data/web/js/site/edit.js b/data/web/js/site/edit.js
index 4680bdfa..cd938cd8 100644
--- a/data/web/js/site/edit.js
+++ b/data/web/js/site/edit.js
@@ -93,10 +93,10 @@ jQuery(function($){
         dataSrc: function(data){
           $.each(data, function (i, item) {
             if (!validateEmail(item.object)) {
-              item.chkbox = '<input type="checkbox" data-id="policy_wl_domain" name="multi_select" value="' + item.prefid + '" />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" data-id="policy_wl_domain" name="multi_select" value="' + item.prefid + '" />';
             }
             else {
-              item.chkbox = '<input type="checkbox" disabled title="' + lang_user.spamfilter_table_domain_policy + '" />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" disabled title="' + lang_user.spamfilter_table_domain_policy + '" />';
             }
           });
 
@@ -154,10 +154,10 @@ jQuery(function($){
         dataSrc: function(data){
           $.each(data, function (i, item) {
             if (!validateEmail(item.object)) {
-              item.chkbox = '<input type="checkbox" data-id="policy_bl_domain" name="multi_select" value="' + item.prefid + '" />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" data-id="policy_bl_domain" name="multi_select" value="' + item.prefid + '" />';
             }
             else {
-              item.chkbox = '<input type="checkbox" disabled tooltip="' + lang_user.spamfilter_table_domain_policy + '" />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" disabled tooltip="' + lang_user.spamfilter_table_domain_policy + '" />';
             }
           });
 
diff --git a/data/web/js/site/mailbox.js b/data/web/js/site/mailbox.js
index 3ddeea94..50ce59df 100644
--- a/data/web/js/site/mailbox.js
+++ b/data/web/js/site/mailbox.js
@@ -466,7 +466,7 @@ jQuery(function($){
 
             item.def_quota_for_mbox = humanFileSize(item.def_quota_for_mbox);
             item.max_quota_for_mbox = humanFileSize(item.max_quota_for_mbox);
-            item.chkbox = '<input type="checkbox" data-id="domain" name="multi_select" value="' + encodeURIComponent(item.domain_name) + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="domain" name="multi_select" value="' + encodeURIComponent(item.domain_name) + '" />';
             item.action = '<div class="btn-group">';
             if (role == "admin") {
               item.action += '<a href="/edit/domain/' + encodeURIComponent(item.domain_name) + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
@@ -650,7 +650,7 @@ jQuery(function($){
         url: "/api/v1/get/domain/template/all",
         dataSrc: function(json){
           $.each(json, function (i, item) {
-            item.chkbox = '<input type="checkbox" data-id="domain_template" name="multi_select" value="' + encodeURIComponent(item.id) + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="domain_template" name="multi_select" value="' + encodeURIComponent(item.id) + '" />';
 
             item.attributes.def_quota_for_mbox = humanFileSize(item.attributes.def_quota_for_mbox);
             item.attributes.max_quota_for_mbox = humanFileSize(item.attributes.max_quota_for_mbox);
@@ -880,7 +880,7 @@ jQuery(function($){
               }
             }
             */
-            item.chkbox = '<input type="checkbox" data-id="mailbox" name="multi_select" value="' + encodeURIComponent(item.username) + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="mailbox" name="multi_select" value="' + encodeURIComponent(item.username) + '" />';
             if (item.attributes.passwd_update != '0') {
               var last_pw_change = new Date(item.attributes.passwd_update.replace(/-/g, "/"));
               item.last_pw_change = last_pw_change.toLocaleDateString(undefined, {year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit"});
@@ -1148,7 +1148,7 @@ jQuery(function($){
         url: "/api/v1/get/mailbox/template/all",
         dataSrc: function(json){
           $.each(json, function (i, item) {
-            item.chkbox = '<input type="checkbox" data-id="mailbox_template" name="multi_select" value="' + encodeURIComponent(item.id) + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="mailbox_template" name="multi_select" value="' + encodeURIComponent(item.id) + '" />';
 
             item.template = escapeHtml(item.template);
             if (item.attributes.rl_frame === "s"){
@@ -1381,7 +1381,7 @@ jQuery(function($){
               '<a href="/edit/resource/' + encodeURIComponent(item.name) + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
               '<a href="#" data-action="delete_selected" data-id="single-resource" data-api-url="delete/resource" data-item="' + item.name + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
-            item.chkbox = '<input type="checkbox" data-id="resource" name="multi_select" value="' + encodeURIComponent(item.name) + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="resource" name="multi_select" value="' + encodeURIComponent(item.name) + '" />';
             item.name = escapeHtml(item.name);
             item.description = escapeHtml(item.description);
           });
@@ -1521,7 +1521,7 @@ jQuery(function($){
               '<a href="/edit/bcc/' + item.id + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
               '<a href="#" data-action="delete_selected" data-id="single-bcc" data-api-url="delete/bcc" data-item="' + item.id + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
-            item.chkbox = '<input type="checkbox" data-id="bcc" name="multi_select" value="' + item.id + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="bcc" name="multi_select" value="' + item.id + '" />';
             item.local_dest = escapeHtml(item.local_dest);
             item.bcc_dest = escapeHtml(item.bcc_dest);
             if (item.type == 'sender') {
@@ -1635,7 +1635,7 @@ jQuery(function($){
               '<a href="/edit/recipient_map/' + item.id + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
               '<a href="#" data-action="delete_selected" data-id="single-recipient_map" data-api-url="delete/recipient_map" data-item="' + item.id + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
-            item.chkbox = '<input type="checkbox" data-id="recipient_map" name="multi_select" value="' + item.id + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="recipient_map" name="multi_select" value="' + item.id + '" />';
           });
 
           return json;
@@ -1737,7 +1737,7 @@ jQuery(function($){
               '<a href="/edit/tls_policy_map/' + item.id + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
               '<a href="#" data-action="delete_selected" data-id="single-tls-policy-map" data-api-url="delete/tls-policy-map" data-item="' + item.id + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
-            item.chkbox = '<input type="checkbox" data-id="tls-policy-map" name="multi_select" value="' + item.id + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="tls-policy-map" name="multi_select" value="' + item.id + '" />';
           });
 
           return json;
@@ -1835,7 +1835,7 @@ jQuery(function($){
               '<a href="/edit/alias/' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
               '<a href="#" data-action="delete_selected" data-id="single-alias" data-api-url="delete/alias" data-item="' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
-            item.chkbox = '<input type="checkbox" data-id="alias" name="multi_select" value="' + encodeURIComponent(item.id) + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="alias" name="multi_select" value="' + encodeURIComponent(item.id) + '" />';
             item.goto = escapeHtml(item.goto.replace(/,/g, " "));
             if (item.public_comment !== null) {
               item.public_comment = escapeHtml(item.public_comment);
@@ -1958,7 +1958,7 @@ jQuery(function($){
     table.on('responsive-resize', function (e, datatable, columns){
       hideTableExpandCollapseBtn('#tab-mbox-aliases', '#alias_table');
     });
-    
+
     table.on( 'draw', function (){
         $('#alias_table [data-bs-toggle="tooltip"]').tooltip();
     });
@@ -1995,7 +1995,7 @@ jQuery(function($){
               '<a href="#" data-action="delete_selected" data-id="single-alias-domain" data-api-url="delete/alias-domain" data-item="' + encodeURIComponent(item.alias_domain) + '" class="btn btn-sm btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '<a href="#dnsInfoModal" class="btn btn-sm btn-xs-third btn-info" data-bs-toggle="modal" data-domain="' + encodeURIComponent(item.alias_domain) + '"><i class="bi bi-globe2"></i> DNS</a></div>' +
               '</div>';
-            item.chkbox = '<input type="checkbox" data-id="alias-domain" name="multi_select" value="' + encodeURIComponent(item.alias_domain) + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="alias-domain" name="multi_select" value="' + encodeURIComponent(item.alias_domain) + '" />';
             if(item.parent_is_backupmx == '1') {
               item.target_domain = '<span><a href="/edit/domain/' + item.target_domain + '">' + item.target_domain + '</a> <div class="badge fs-6 bg-warning">' + lang.alias_domain_backupmx + '</div></span>';
             } else {
@@ -2096,7 +2096,7 @@ jQuery(function($){
               '<a href="/edit/syncjob/' + item.id + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
               '<a href="#" data-action="delete_selected" data-id="single-syncjob" data-api-url="delete/syncjob" data-item="' + item.id + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
-            item.chkbox = '<input type="checkbox" data-id="syncjob" name="multi_select" value="' + item.id + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="syncjob" name="multi_select" value="' + item.id + '" />';
             if (item.is_running == 1) {
               item.is_running = '<span id="active-script" class="badge fs-6 bg-success">' + lang.running + '</span>';
             } else {
@@ -2250,7 +2250,7 @@ jQuery(function($){
               '<a href="/edit/filter/' + item.id + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
               '<a href="#" data-action="delete_selected" data-id="single-filter" data-api-url="delete/filter" data-item="' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
-            item.chkbox = '<input type="checkbox" data-id="filter_item" name="multi_select" value="' + item.id + '" />'
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="filter_item" name="multi_select" value="' + item.id + '" />'
           });
 
           return json;
@@ -2344,7 +2344,7 @@ jQuery(function($){
           }
         });
       })
-      
+
       observer.observe(element_object);
     });
   }
diff --git a/data/web/js/site/quarantine.js b/data/web/js/site/quarantine.js
index 18d7a1d5..8d7f2225 100644
--- a/data/web/js/site/quarantine.js
+++ b/data/web/js/site/quarantine.js
@@ -77,7 +77,7 @@ jQuery(function($){
               '<a href="#" data-item="' + encodeURI(item.id) + '" class="btn btn-xs btn-info show_qid_info"><i class="bi bi-file-earmark-text"></i> ' + lang.show_item + '</a>' +
               '</div>';
             }
-            item.chkbox = '<input type="checkbox" data-id="qitems" name="multi_select" value="' + item.id + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="qitems" name="multi_select" value="' + item.id + '" />';
           });
 
           return data;
diff --git a/data/web/js/site/queue.js b/data/web/js/site/queue.js
index f37884a6..26c15091 100644
--- a/data/web/js/site/queue.js
+++ b/data/web/js/site/queue.js
@@ -48,7 +48,7 @@ jQuery(function($){
       url: "/api/v1/get/mailq/all",
       dataSrc: function(data){
         $.each(data, function (i, item) {
-          item.chkbox = '<input type="checkbox" data-id="mailqitems" name="multi_select" value="' + item.queue_id + '" />';
+          item.chkbox = '<input type="checkbox" class="form-check-input" data-id="mailqitems" name="multi_select" value="' + item.queue_id + '" />';
           rcpts = $.map(item.recipients, function(i) {
             return escapeHtml(i);
           });
diff --git a/data/web/js/site/user.js b/data/web/js/site/user.js
index 2227e0b0..088321cd 100644
--- a/data/web/js/site/user.js
+++ b/data/web/js/site/user.js
@@ -127,7 +127,7 @@ jQuery(function($){
     }
   }
 
-  
+
   function createSortableDate(td, cellData, date_string = false) {
     if (date_string)
       var date = new Date(cellData);
@@ -169,11 +169,11 @@ jQuery(function($){
               item.action = '<div class="btn-group">' +
                 '<a href="#" data-action="delete_selected" data-id="single-tla" data-api-url="delete/time_limited_alias" data-item="' + encodeURIComponent(item.address) + '" class="btn btn-xs btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
                 '</div>';
-              item.chkbox = '<input type="checkbox" data-id="tla" name="multi_select" value="' + encodeURIComponent(item.address) + '" />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" data-id="tla" name="multi_select" value="' + encodeURIComponent(item.address) + '" />';
               item.address = escapeHtml(item.address);
             }
             else {
-              item.chkbox = '<input type="checkbox" disabled />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" disabled />';
               item.action = '<span>-</span>';
             }
           });
@@ -263,11 +263,11 @@ jQuery(function($){
                 '<a href="/edit/syncjob/' + item.id + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
                 '<a href="#" data-action="delete_selected" data-id="single-syncjob" data-api-url="delete/syncjob" data-item="' + item.id + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
                 '</div>';
-              item.chkbox = '<input type="checkbox" data-id="syncjob" name="multi_select" value="' + item.id + '" />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" data-id="syncjob" name="multi_select" value="' + item.id + '" />';
             }
             else {
               item.action = '<span>-</span>';
-              item.chkbox = '<input type="checkbox" disabled />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" disabled />';
             }
             if (item.is_running == 1) {
               item.is_running = '<span id="active-script" class="badge fs-6 bg-success">' + lang.running + '</span>';
@@ -420,11 +420,11 @@ jQuery(function($){
                 '<a href="/edit/app-passwd/' + item.id + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
                 '<a href="#" data-action="delete_selected" data-id="single-apppasswd" data-api-url="delete/app-passwd" data-item="' + item.id + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
                 '</div>';
-              item.chkbox = '<input type="checkbox" data-id="apppasswd" name="multi_select" value="' + item.id + '" />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" data-id="apppasswd" name="multi_select" value="' + item.id + '" />';
             }
             else {
               item.action = '<span>-</span>';
-              item.chkbox = '<input type="checkbox" disabled />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" disabled />';
             }
           });
 
@@ -503,13 +503,13 @@ jQuery(function($){
           console.log(data);
           $.each(data, function (i, item) {
             if (validateEmail(item.object)) {
-              item.chkbox = '<input type="checkbox" data-id="policy_wl_mailbox" name="multi_select" value="' + item.prefid + '" />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" data-id="policy_wl_mailbox" name="multi_select" value="' + item.prefid + '" />';
             }
             else {
-              item.chkbox = '<input type="checkbox" disabled title="' + lang.spamfilter_table_domain_policy + '" />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" disabled title="' + lang.spamfilter_table_domain_policy + '" />';
             }
             if (acl_data.spam_policy === 0) {
-              item.chkbox = '<input type="checkbox" disabled />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" disabled />';
             }
           });
 
@@ -574,13 +574,13 @@ jQuery(function($){
           console.log(data);
           $.each(data, function (i, item) {
             if (validateEmail(item.object)) {
-              item.chkbox = '<input type="checkbox" data-id="policy_bl_mailbox" name="multi_select" value="' + item.prefid + '" />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" data-id="policy_bl_mailbox" name="multi_select" value="' + item.prefid + '" />';
             }
             else {
-              item.chkbox = '<input type="checkbox" disabled tooltip="' + lang.spamfilter_table_domain_policy + '" />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" disabled tooltip="' + lang.spamfilter_table_domain_policy + '" />';
             }
             if (acl_data.spam_policy === 0) {
-              item.chkbox = '<input type="checkbox" disabled />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" disabled />';
             }
           });
 
diff --git a/data/web/templates/admin/tab-config-admins.twig b/data/web/templates/admin/tab-config-admins.twig
index f33067f6..b672b815 100644
--- a/data/web/templates/admin/tab-config-admins.twig
+++ b/data/web/templates/admin/tab-config-admins.twig
@@ -146,7 +146,7 @@
                   <div class="row mb-2">
                     <div class="offset-sm-3 col-sm-9">
                       <label>
-                        <input type="checkbox" name="skip_ip_check" id="skip_ip_check_ro" {% if api.ro.skip_ip_check %}checked{% endif %}> {{ lang.admin.api_skip_ip_check }}
+                        <input type="checkbox" class="form-check-input" name="skip_ip_check" id="skip_ip_check_ro" {% if api.ro.skip_ip_check %}checked{% endif %}> {{ lang.admin.api_skip_ip_check }}
                       </label>
                     </div>
                   </div>
@@ -159,7 +159,7 @@
                   <div class="row mb-2">
                     <div class="offset-sm-3 col-sm-9">
                       <label>
-                        <input type="checkbox" name="active" {% if api.ro.active %}checked{% endif %}> {{ lang.admin.activate_api }}
+                        <input type="checkbox" class="form-check-input" name="active" {% if api.ro.active %}checked{% endif %}> {{ lang.admin.activate_api }}
                       </label>
                     </div>
                   </div>
@@ -191,7 +191,7 @@
                   <div class="row mb-2">
                     <div class="offset-sm-3 col-sm-9">
                       <label>
-                        <input type="checkbox" name="skip_ip_check" id="skip_ip_check_rw" {% if api.rw.skip_ip_check %}checked{% endif %}> {{ lang.admin.api_skip_ip_check }}
+                        <input type="checkbox" class="form-check-input" name="skip_ip_check" id="skip_ip_check_rw" {% if api.rw.skip_ip_check %}checked{% endif %}> {{ lang.admin.api_skip_ip_check }}
                       </label>
                     </div>
                   </div>
@@ -204,7 +204,7 @@
                   <div class="row mb-2">
                     <div class="offset-sm-3 col-sm-9">
                       <label>
-                        <input type="checkbox" name="active" {% if api.rw.active %}checked{% endif %}> {{ lang.admin.activate_api }}
+                        <input type="checkbox" class="form-check-input" name="active" {% if api.rw.active %}checked{% endif %}> {{ lang.admin.activate_api }}
                       </label>
                     </div>
                   </div>
diff --git a/data/web/templates/admin/tab-config-customize.twig b/data/web/templates/admin/tab-config-customize.twig
index e458eeb3..88d1c664 100644
--- a/data/web/templates/admin/tab-config-customize.twig
+++ b/data/web/templates/admin/tab-config-customize.twig
@@ -111,7 +111,7 @@
               </div>
             </div>
             <p><textarea class="form-control" id="ui_announcement_text" name="ui_announcement_text" rows="7">{{ ui_texts.ui_announcement_text }}</textarea></p>
-            <div class="checkbox">
+            <div class="form-check">
               <label>
                 <input type="checkbox" name="ui_announcement_active" class="form-check-input" {% if ui_texts.ui_announcement_active == 1 %}checked{% endif %}> {{ lang.admin.ui_header_announcement_active }}
               </label>
diff --git a/data/web/templates/admin/tab-config-dkim.twig b/data/web/templates/admin/tab-config-dkim.twig
index 857bfba2..85c6dc6a 100644
--- a/data/web/templates/admin/tab-config-dkim.twig
+++ b/data/web/templates/admin/tab-config-dkim.twig
@@ -20,7 +20,7 @@
       {% for domain, domain_data in dkim_domains %}
         {% if domain_data.dkim %}
           <div class="row collapse show dkim_key_valid">
-            <div class="col-md-1"><input type="checkbox" data-id="dkim" name="multi_select" value="{{ domain }}"></div>
+            <div class="col-md-1"><input type="checkbox" class="form-check-input" data-id="dkim" name="multi_select" value="{{ domain }}"></div>
             <div class="col-md-3">
               <p>{{ lang.admin.domain }}: <strong>{{ domain }}</strong>
               <p class="dkim-label"><span class="badge fs-6 bg-success">{{ lang.admin.dkim_key_valid }}</span></p>
@@ -31,7 +31,7 @@
             <div class="col-md-8">
               <textarea class="form-control" rows="6" readonly>{{ domain_data.dkim.dkim_txt }}</textarea>
               <small>
-                <i class="bi bi-arrow-return-right"></i> 
+                <i class="bi bi-arrow-return-right"></i>
                 <a href="#" data-bs-toggle="modal" data-bs-target="#showDKIMprivKey" id="dkim_priv" data-priv-key="{{ domain_data.dkim.privkey }}"> {{ lang.admin.dkim_private_key }}</a>
               </small>
             </div>
@@ -50,7 +50,7 @@
         {% for alias_domain, alias_domain_data in domain_data.alias_domains %}
           {% if alias_domain_data.dkim %}
             <div class="row collapse in dkim_key_valid">
-              <div class="col-md-1"><input type="checkbox" data-id="dkim" name="multi_select" value="{{ alias_domain }}"></div>
+              <div class="col-md-1"><input type="checkbox" class="form-check-input" data-id="dkim" name="multi_select" value="{{ alias_domain }}"></div>
               <div class="col-md-2 offset-md-1">
                 <p><small>↳ Alias-Domain: <strong>{{ alias_domain }}</strong></small>
                 <p class="dkim-label"><span class="badge fs-6 bg-success">{{ lang.admin.dkim_key_valid }}</span></p>
@@ -78,7 +78,7 @@
       {% endfor %}
       {% for blind, data in dkim_blind_domains|filter(data => data.dkim is not null) %}
         <div class="row collapse in dkim_key_unused">
-          <div class="col-md-1"><input type="checkbox" data-id="dkim" name="multi_select" value="{{ blind }}"></div>
+          <div class="col-md-1"><input type="checkbox" class="form-check-input" data-id="dkim" name="multi_select" value="{{ blind }}"></div>
           <div class="col-md-3">
             <p>{{ lang.admin.domain }}: <strong>{{ blind }}</strong>
             <p class="dkim-label"><span class="badge fs-6 bg-warning">{{ lang.admin.dkim_key_unused }}</span></p>
@@ -143,7 +143,7 @@
           </div>
           <div class="mb-2">
             <label>
-              <input type="checkbox" name="overwrite_existing" value="1"> {{ lang.admin.dkim_overwrite_key }}
+              <input type="checkbox" class="form-check-input" name="overwrite_existing" value="1"> {{ lang.admin.dkim_overwrite_key }}
             </label>
           </div>
           <button class="btn btn-sm d-block d-sm-inline btn-secondary" data-action="add_item" data-id="dkim_import" data-api-url='add/dkim_import' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.import }}</button>
diff --git a/data/web/templates/admin/tab-config-password-policy.twig b/data/web/templates/admin/tab-config-password-policy.twig
index dd77f3a3..8209ba54 100644
--- a/data/web/templates/admin/tab-config-password-policy.twig
+++ b/data/web/templates/admin/tab-config-password-policy.twig
@@ -21,7 +21,7 @@
             <div class="row mb-2">
               <div class="offset-sm-3 col-sm-9">
                 <label>
-                  <input type="checkbox" name="{{ name }}" id="{{ name }}" value="1" {% if value == 1 %}checked{% endif %}> {{ lang.admin['password_policy_'~name] }}
+                  <input type="checkbox" class="form-check-input" name="{{ name }}" id="{{ name }}" value="1" {% if value == 1 %}checked{% endif %}> {{ lang.admin['password_policy_'~name] }}
                 </label>
               </div>
             </div>
diff --git a/data/web/templates/admin/tab-config-rsettings.twig b/data/web/templates/admin/tab-config-rsettings.twig
index bf529632..38b0d593 100644
--- a/data/web/templates/admin/tab-config-rsettings.twig
+++ b/data/web/templates/admin/tab-config-rsettings.twig
@@ -57,7 +57,7 @@
                       </div>
                       <div class="mt-4 mb-2">
                         <label>
-                          <input type="checkbox" name="active" value="1" {% if rsetting.details.active %}checked{% endif %}> {{ lang.admin.active }}
+                          <input type="checkbox" class="form-check-input" name="active" value="1" {% if rsetting.details.active %}checked{% endif %}> {{ lang.admin.active }}
                         </label>
                       </div>
                       <button class="btn btn-sm btn-success" data-action="edit_selected" data-item="{{ rsetting.details.id }}" data-id="rsettings" data-api-url='edit/rsetting' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
diff --git a/data/web/templates/admin/tab-globalfilter-regex.twig b/data/web/templates/admin/tab-globalfilter-regex.twig
index 086ce533..386cffc1 100644
--- a/data/web/templates/admin/tab-globalfilter-regex.twig
+++ b/data/web/templates/admin/tab-globalfilter-regex.twig
@@ -12,7 +12,7 @@
         <div class="row">
           <div class="offset-sm-2 col-sm-10">
             <label>
-              <input type="checkbox" id="show_rspamd_global_filters"> {{ lang.admin.rspamd_global_filters_agree }}
+              <input type="checkbox" class="form-check-input" id="show_rspamd_global_filters"> {{ lang.admin.rspamd_global_filters_agree }}
             </label>
           </div>
         </div>
diff --git a/data/web/templates/admin/tab-routing.twig b/data/web/templates/admin/tab-routing.twig
index c6e59601..07d97955 100644
--- a/data/web/templates/admin/tab-routing.twig
+++ b/data/web/templates/admin/tab-routing.twig
@@ -90,12 +90,12 @@
             </div>
             <div class="mb-2">
               <label>
-                <input type="checkbox" name="is_mx_based" value="1"> {{ lang.admin.lookup_mx|raw }}
+                <input type="checkbox" class="form-check-input" name="is_mx_based" value="1"> {{ lang.admin.lookup_mx|raw }}
               </label>
             </div>
             <div class="mb-4">
               <label>
-                <input type="checkbox" name="active" value="1"> {{ lang.admin.active }}
+                <input type="checkbox" class="form-check-input" name="active" value="1"> {{ lang.admin.active }}
               </label>
             </div>
             <p class="text-muted">{{ lang.admin.credentials_transport_warning|raw }}</p>
diff --git a/data/web/templates/admin/tab-sys-mails.twig b/data/web/templates/admin/tab-sys-mails.twig
index 1b842ff8..105151f7 100644
--- a/data/web/templates/admin/tab-sys-mails.twig
+++ b/data/web/templates/admin/tab-sys-mails.twig
@@ -60,7 +60,7 @@
         <div class="row mb-2">
           <div class="offset-sm-2 col-sm-10">
             <label>
-              <input type="checkbox" id="mass_disarm"> {{ lang.admin.activate_send }}
+              <input type="checkbox" class="form-check-input" id="mass_disarm"> {{ lang.admin.activate_send }}
             </label>
           </div>
         </div>
diff --git a/data/web/templates/edit/admin.twig b/data/web/templates/edit/admin.twig
index 8806b068..e2c6f66e 100644
--- a/data/web/templates/edit/admin.twig
+++ b/data/web/templates/edit/admin.twig
@@ -27,15 +27,15 @@
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+      <div class="form-check">
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
-        <label><input type="checkbox" value="1" name="disable_tfa"> {{ lang.tfa.disable_tfa }}</label>
+      <div class="form-check">
+        <label><input type="checkbox" class="form-check-input" value="1" name="disable_tfa"> {{ lang.tfa.disable_tfa }}</label>
       </div>
     </div>
   </div>
diff --git a/data/web/templates/edit/alias.twig b/data/web/templates/edit/alias.twig
index 83a3760c..48d19617 100644
--- a/data/web/templates/edit/alias.twig
+++ b/data/web/templates/edit/alias.twig
@@ -19,19 +19,19 @@
     <label class="control-label col-sm-2" for="goto">{{ lang.edit.target_address|raw }}</label>
     <div class="col-sm-10">
       <textarea id="textarea_alias_goto" class="form-control mb-4" autocapitalize="none" autocorrect="off" rows="10" id="goto" name="goto" required>{{ goto|replace({',': ', '}) }}</textarea>
-      <div class="checkbox">
-        <label><input class="goto_checkbox" type="checkbox" value="1" name="goto_null"{% if result.goto == 'null@localhost' %} checked{% endif %}> {{ lang.add.goto_null }}</label>
+      <div class="form-check">
+        <label><input class="form-check-input goto_checkbox" type="checkbox" value="1" name="goto_null"{% if result.goto == 'null@localhost' %} checked{% endif %}> {{ lang.add.goto_null }}</label>
       </div>
-      <div class="checkbox">
-        <label><input class="goto_checkbox" type="checkbox" value="1" name="goto_spam"{% if result.goto == 'spam@localhost' %} checked{% endif %}> {{ lang.add.goto_spam|raw }}</label>
+      <div class="form-check">
+        <label><input class="form-check-input goto_checkbox" type="checkbox" value="1" name="goto_spam"{% if result.goto == 'spam@localhost' %} checked{% endif %}> {{ lang.add.goto_spam|raw }}</label>
       </div>
-      <div class="checkbox">
-        <label><input class="goto_checkbox" type="checkbox" value="1" name="goto_ham"{% if result.goto == 'ham@localhost' %} checked{% endif %}> {{ lang.add.goto_ham|raw }}</label>
+      <div class="form-check">
+        <label><input class="form-check-input goto_checkbox" type="checkbox" value="1" name="goto_ham"{% if result.goto == 'ham@localhost' %} checked{% endif %}> {{ lang.add.goto_ham|raw }}</label>
       </div>
       {% if not skip_sogo %}
       <hr>
-      <div class="checkbox">
-        <label><input type="checkbox" value="1" name="sogo_visible"{% if result.sogo_visible == '1' %} checked{% endif %}> {{ lang.edit.sogo_visible }}</label>
+      <div class="form-check">
+        <label><input type="checkbox" class="form-check-input" value="1" name="sogo_visible"{% if result.sogo_visible == '1' %} checked{% endif %}> {{ lang.edit.sogo_visible }}</label>
       </div>
       <p class="text-muted">{{ lang.edit.sogo_visible_info }}</p>
       {% endif %}
@@ -53,8 +53,8 @@
   <hr>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+      <div class="form-check">
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
diff --git a/data/web/templates/edit/aliasdomain.twig b/data/web/templates/edit/aliasdomain.twig
index 808d128e..e2ecd487 100644
--- a/data/web/templates/edit/aliasdomain.twig
+++ b/data/web/templates/edit/aliasdomain.twig
@@ -17,8 +17,8 @@
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+      <div class="form-check">
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
diff --git a/data/web/templates/edit/app-passwd.twig b/data/web/templates/edit/app-passwd.twig
index fcd9d049..46dc648d 100644
--- a/data/web/templates/edit/app-passwd.twig
+++ b/data/web/templates/edit/app-passwd.twig
@@ -26,8 +26,8 @@
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+      <div class="form-check">
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
diff --git a/data/web/templates/edit/bcc.twig b/data/web/templates/edit/bcc.twig
index f7d0c5ca..fb7a538a 100644
--- a/data/web/templates/edit/bcc.twig
+++ b/data/web/templates/edit/bcc.twig
@@ -24,8 +24,8 @@
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+      <div class="form-check">
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
diff --git a/data/web/templates/edit/domain-templates.twig b/data/web/templates/edit/domain-templates.twig
index 5a0cbb69..c58693b2 100644
--- a/data/web/templates/edit/domain-templates.twig
+++ b/data/web/templates/edit/domain-templates.twig
@@ -64,16 +64,16 @@
     </div>
     <div class="row">
       <div class="offset-sm-2 col-sm-10">
-        <div class="checkbox">
-          <label><input type="checkbox" value="1" name="gal"{% if template.attributes.gal == '1' %} checked{% endif %}> {{ lang.edit.gal }}</label>
+        <div class="form-check">
+          <label><input type="checkbox" class="form-check-input" value="1" name="gal"{% if template.attributes.gal == '1' %} checked{% endif %}> {{ lang.edit.gal }}</label>
           <small class="text-muted">{{ lang.edit.gal_info|raw }}</small>
         </div>
       </div>
     </div>
     <div class="row mb-2">
       <div class="offset-sm-2 col-sm-10">
-        <div class="checkbox">
-          <label><input type="checkbox" value="1" name="active"{% if template.attributes.active == '1' %} checked{% endif %}{% if mailcow_cc_role != 'admin' %} disabled{% endif %}> {{ lang.edit.active }}</label>
+        <div class="form-check">
+          <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if template.attributes.active == '1' %} checked{% endif %}{% if mailcow_cc_role != 'admin' %} disabled{% endif %}> {{ lang.edit.active }}</label>
         </div>
       </div>
     </div>
@@ -111,12 +111,12 @@
     <div class="row mb-2">
       <label class="control-label col-sm-2">{{ lang.edit.backup_mx_options }}</label>
       <div class="col-sm-10">
-        <div class="checkbox">
-          <label><input type="checkbox" value="1" name="backupmx"{% if template.attributes.backupmx == '1' %} checked{% endif %}> {{ lang.edit.relay_domain }}</label>
+        <div class="form-check">
+          <label><input type="checkbox" class="form-check-input" value="1" name="backupmx"{% if template.attributes.backupmx == '1' %} checked{% endif %}> {{ lang.edit.relay_domain }}</label>
           <br>
-          <label><input type="checkbox" value="1" name="relay_all_recipients"{% if template.attributes.relay_all_recipients == '1' %} checked{% endif %}> {{ lang.edit.relay_all }}</label>
+          <label><input type="checkbox" class="form-check-input" value="1" name="relay_all_recipients"{% if template.attributes.relay_all_recipients == '1' %} checked{% endif %}> {{ lang.edit.relay_all }}</label>
           <p>{{ lang.edit.relay_all_info|raw }}</p>
-          <label><input type="checkbox" value="1" name="relay_unknown_only"{% if template.attributes.relay_unknown_only == '1' %} checked{% endif %}> {{ lang.edit.relay_unknown_only }}</label>
+          <label><input type="checkbox" class="form-check-input" value="1" name="relay_unknown_only"{% if template.attributes.relay_unknown_only == '1' %} checked{% endif %}> {{ lang.edit.relay_unknown_only }}</label>
           <br>
           <p>{{ lang.edit.relay_transport_info|raw }}</p>
         </div>
diff --git a/data/web/templates/edit/domain.twig b/data/web/templates/edit/domain.twig
index 700445dd..4ba25cf7 100644
--- a/data/web/templates/edit/domain.twig
+++ b/data/web/templates/edit/domain.twig
@@ -29,7 +29,7 @@
           <div class="form-control tag-box">
             {% for tag in domain_details.tags %}
               <span data-action='delete_selected' data-item="{{ tag|url_encode }}" data-id="domain_tag_{{ tag }}" data-api-url='delete/domain/tag/{{ domain }}' class="badge bg-primary tag-badge btn-badge">
-                <i class="bi bi-tag-fill"></i> 
+                <i class="bi bi-tag-fill"></i>
                 {{ tag }}
               </span>
             {% endfor %}
@@ -91,12 +91,12 @@
       <div class="row mb-2">
         <label class="control-label col-sm-2">{{ lang.edit.backup_mx_options }}</label>
         <div class="col-sm-10">
-          <div class="checkbox">
-            <label><input type="checkbox" value="1" name="backupmx"{% if result.backupmx == '1' %} checked{% endif %}> {{ lang.edit.relay_domain }}</label>
+          <div class="form-check">
+            <label><input type="checkbox" class="form-check-input" value="1" name="backupmx"{% if result.backupmx == '1' %} checked{% endif %}> {{ lang.edit.relay_domain }}</label>
             <br>
-            <label><input type="checkbox" value="1" name="relay_all_recipients"{% if result.relay_all_recipients == '1' %} checked{% endif %}> {{ lang.edit.relay_all }}</label>
+            <label><input type="checkbox" class="form-check-input" value="1" name="relay_all_recipients"{% if result.relay_all_recipients == '1' %} checked{% endif %}> {{ lang.edit.relay_all }}</label>
             <p>{{ lang.edit.relay_all_info|raw }}</p>
-            <label><input type="checkbox" value="1" name="relay_unknown_only"{% if result.relay_unknown_only == '1' %} checked{% endif %}> {{ lang.edit.relay_unknown_only }}</label>
+            <label><input type="checkbox" class="form-check-input" value="1" name="relay_unknown_only"{% if result.relay_unknown_only == '1' %} checked{% endif %}> {{ lang.edit.relay_unknown_only }}</label>
             <br>
             <p>{{ lang.edit.relay_transport_info|raw }}</p>
             <hr style="margin:25px 0px 0px 0px">
@@ -106,8 +106,8 @@
       {% endif %}
       <div class="row">
         <div class="offset-sm-2 col-sm-10">
-          <div class="checkbox">
-            <label><input type="checkbox" value="1" name="gal"{% if result.gal == '1' %} checked{% endif %}> {{ lang.edit.gal }}</label>
+          <div class="form-check">
+            <label><input type="checkbox" class="form-check-input" value="1" name="gal"{% if result.gal == '1' %} checked{% endif %}> {{ lang.edit.gal }}</label>
             <small class="text-muted">{{ lang.edit.gal_info|raw }}</small>
           </div>
         </div>
@@ -115,8 +115,8 @@
       <hr>
       <div class="row mb-2">
         <div class="offset-sm-2 col-sm-10">
-          <div class="checkbox">
-            <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}{% if mailcow_cc_role != 'admin' %} disabled{% endif %}> {{ lang.edit.active }}</label>
+          <div class="form-check">
+            <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}{% if mailcow_cc_role != 'admin' %} disabled{% endif %}> {{ lang.edit.active }}</label>
           </div>
         </div>
       </div>
@@ -211,8 +211,8 @@
           </div>
           <div class="row mb-4">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="active"{% if quota_notification_bcc.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if quota_notification_bcc.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
               </div>
             </div>
           </div>
diff --git a/data/web/templates/edit/domainadmin.twig b/data/web/templates/edit/domainadmin.twig
index d241fa53..2c40faaa 100644
--- a/data/web/templates/edit/domainadmin.twig
+++ b/data/web/templates/edit/domainadmin.twig
@@ -40,15 +40,15 @@
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+      <div class="form-check">
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
-        <label><input type="checkbox" value="1" name="disable_tfa"> {{ lang.tfa.disable_tfa }}</label>
+      <div class="form-check">
+        <label><input type="checkbox" class="form-check-input" value="1" name="disable_tfa"> {{ lang.tfa.disable_tfa }}</label>
       </div>
     </div>
   </div>
diff --git a/data/web/templates/edit/filter.twig b/data/web/templates/edit/filter.twig
index ff4ac4ee..124ecaf7 100644
--- a/data/web/templates/edit/filter.twig
+++ b/data/web/templates/edit/filter.twig
@@ -28,8 +28,8 @@
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+      <div class="form-check">
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
diff --git a/data/web/templates/edit/mailbox-templates.twig b/data/web/templates/edit/mailbox-templates.twig
index fea99bdd..28f45b56 100644
--- a/data/web/templates/edit/mailbox-templates.twig
+++ b/data/web/templates/edit/mailbox-templates.twig
@@ -9,8 +9,8 @@
     <input type="hidden" value="default" name="sender_acl">
     <input type="hidden" value="0" name="force_pw_update">
     <input type="hidden" value="0" name="sogo_access">
-    <input type="hidden" value="0" name="protocol_access">     
-         
+    <input type="hidden" value="0" name="protocol_access">
+
     <div class="row mb-4">
       <label class="control-label col-sm-2" for="template">{{ lang.mailbox.template }}</label>
       <div class="col-sm-10">
@@ -61,10 +61,10 @@
         <div class="btn-group">
           <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_reject" autocomplete="off" value="reject" {% if template.attributes.quarantine_category == 'reject' %}checked{% endif %}>
           <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_reject">{{ lang.user.q_reject }}</label>
-          
+
           <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_add_header" autocomplete="off" value="add_header" {% if template.attributes.quarantine_category == 'add_header' %}checked{% endif %}>
           <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_add_header">{{ lang.user.q_add_header }}</label>
-          
+
           <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_all" autocomplete="off" value="all" {% if template.attributes.quarantine_category == 'all' %}checked{% endif %}>
           <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_all">{{ lang.user.q_all }}</label>
         </div>
@@ -77,7 +77,7 @@
         <div class="btn-group">
           <input type="checkbox" class="btn-check" name="tls_enforce_in" id="tls_enforce_in" autocomplete="off" value="1" {% if template.attributes.tls_enforce_in == '1' %}checked{% endif %}>
           <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="tls_enforce_in">{{ lang.user.tls_enforce_in }}</label>
-          
+
           <input type="checkbox" class="btn-check" name="tls_enforce_out" id="tls_enforce_out" autocomplete="off" value="1" {% if template.attributes.tls_enforce_out == '1' %}checked{% endif %}>
           <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="tls_enforce_out">{{ lang.user.tls_enforce_out }}</label>
         </div>
@@ -97,7 +97,7 @@
     <div class="row mb-4">
       <label class="control-label col-sm-2">ACL</label>
       <div class="col-sm-10">
-        <select id="template_user_acl" name="acl" size="10" multiple class="form-control">                  
+        <select id="template_user_acl" name="acl" size="10" multiple class="form-control">
           <option value="spam_alias" {% if template.attributes.acl_spam_alias == '1' %} selected{% endif %}>{{ lang.acl["spam_alias"] }}</option>
           <option value="tls_policy" {% if template.attributes.acl_tls_policy == '1' %} selected{% endif %}>{{ lang.acl["tls_policy"] }}</option>
           <option value="spam_score" {% if template.attributes.acl_spam_score == '1' %} selected{% endif %}>{{ lang.acl["spam_score"] }}</option>
@@ -140,8 +140,8 @@
     </div>
     <div class="row">
       <div class="offset-sm-2 col-sm-10">
-        <div class="checkbox">
-          <label><input type="checkbox" value="1" name="force_pw_update"{% if template.attributes.force_pw_update == '1' %} checked{% endif %}> {{ lang.edit.force_pw_update }}</label>
+        <div class="form-check">
+          <label><input type="checkbox" class="form-check-input" value="1" name="force_pw_update"{% if template.attributes.force_pw_update == '1' %} checked{% endif %}> {{ lang.edit.force_pw_update }}</label>
           <small class="text-muted">{{ lang.edit.force_pw_update_info|format(ui_texts.main_name) }}</small>
         </div>
       </div>
@@ -149,8 +149,8 @@
     {% if not skip_sogo %}
     <div class="row">
       <div class="offset-sm-2 col-sm-10">
-        <div class="checkbox">
-          <label><input type="checkbox" value="1" name="sogo_access"{% if template.attributes.sogo_access == '1' %} checked{% endif %}> {{ lang.edit.sogo_access }}</label>
+        <div class="form-check">
+          <label><input type="checkbox" class="form-check-input" value="1" name="sogo_access"{% if template.attributes.sogo_access == '1' %} checked{% endif %}> {{ lang.edit.sogo_access }}</label>
           <small class="text-muted">{{ lang.edit.sogo_access_info }}</small>
         </div>
       </div>
diff --git a/data/web/templates/edit/mailbox.twig b/data/web/templates/edit/mailbox.twig
index c08ff74f..c020cb0a 100644
--- a/data/web/templates/edit/mailbox.twig
+++ b/data/web/templates/edit/mailbox.twig
@@ -28,7 +28,7 @@
           <div class="form-control tag-box">
             {% for tag in mailbox_details.tags %}
               <span data-action='delete_selected' data-item="{{ tag }}" data-id="mailbox_tag_{{ tag }}" data-api-url='delete/mailbox/tag/{{ mailbox }}' class="badge bg-primary tag-badge btn-badge">
-                <i class="bi bi-tag-fill"></i> 
+                <i class="bi bi-tag-fill"></i>
                 {{ tag }}
               </span>
             {% endfor %}
@@ -236,8 +236,8 @@
       </div>
       <div class="row mt-2">
         <div class="offset-sm-2 col-sm-10">
-          <div class="checkbox">
-            <label><input type="checkbox" value="1" name="force_pw_update"{% if result.attributes.force_pw_update == '1' %} checked{% endif %}> {{ lang.edit.force_pw_update }}</label>
+          <div class="form-check">
+            <label><input type="checkbox" class="form-check-input" value="1" name="force_pw_update"{% if result.attributes.force_pw_update == '1' %} checked{% endif %}> {{ lang.edit.force_pw_update }}</label>
             <small class="text-muted">{{ lang.edit.force_pw_update_info|format(ui_texts.main_name) }}</small>
           </div>
         </div>
@@ -245,8 +245,8 @@
       {% if not skip_sogo %}
       <div data-acl="{{ acl.sogo_access }}" class="row">
         <div class="offset-sm-2 col-sm-10">
-          <div class="checkbox">
-            <label><input type="checkbox" value="1" name="sogo_access"{% if result.attributes.sogo_access == '1' %} checked{% endif %}> {{ lang.edit.sogo_access }}</label>
+          <div class="form-check">
+            <label><input type="checkbox" class="form-check-input" value="1" name="sogo_access"{% if result.attributes.sogo_access == '1' %} checked{% endif %}> {{ lang.edit.sogo_access }}</label>
             <small class="text-muted">{{ lang.edit.sogo_access_info }}</small>
           </div>
         </div>
@@ -329,8 +329,8 @@
                 </div>
               </div>
               <div class="col-sm-12">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="active"{% if pushover_data.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if pushover_data.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
               </div>
             </div>
             <div class="col-sm-12">
@@ -343,11 +343,11 @@
               <div id="po_advanced" class="collapse">
                 <label for="text">{{ lang.edit.pushover_sender_regex }}</label>
                 <input type="text" class="form-control mt-2" name="senders_regex" value="{{ pushover_data.senders_regex }}" placeholder="/(.*@example\.org$|^foo@example\.com$)/i" regex="true">
-                <div class="checkbox mt-4">
-                  <label><input type="checkbox" value="1" name="evaluate_x_prio"{% if pushover_data.attributes.evaluate_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_evaluate_x_prio|raw }}</label>
+                <div class="form-check mt-4">
+                  <label><input type="checkbox" class="form-check-input" value="1" name="evaluate_x_prio"{% if pushover_data.attributes.evaluate_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_evaluate_x_prio|raw }}</label>
                 </div>
-                <div class="checkbox mt-2">
-                  <label><input type="checkbox" value="1" name="only_x_prio"{% if pushover_data.attributes.only_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_only_x_prio|raw }}</label>
+                <div class="form-check mt-2">
+                  <label><input type="checkbox" class="form-check-input" value="1" name="only_x_prio"{% if pushover_data.attributes.only_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_only_x_prio|raw }}</label>
                 </div>
               </div>
             </div>
diff --git a/data/web/templates/edit/recipient_map.twig b/data/web/templates/edit/recipient_map.twig
index 9af30a3b..c7f3493c 100644
--- a/data/web/templates/edit/recipient_map.twig
+++ b/data/web/templates/edit/recipient_map.twig
@@ -22,8 +22,8 @@
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+      <div class="form-check">
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
diff --git a/data/web/templates/edit/relayhost.twig b/data/web/templates/edit/relayhost.twig
index c6689816..31871707 100644
--- a/data/web/templates/edit/relayhost.twig
+++ b/data/web/templates/edit/relayhost.twig
@@ -26,8 +26,8 @@
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+      <div class="form-check">
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
diff --git a/data/web/templates/edit/resource.twig b/data/web/templates/edit/resource.twig
index 4ba65bd2..7fdc556e 100644
--- a/data/web/templates/edit/resource.twig
+++ b/data/web/templates/edit/resource.twig
@@ -38,8 +38,8 @@
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+      <div class="form-check">
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
diff --git a/data/web/templates/edit/syncjob.twig b/data/web/templates/edit/syncjob.twig
index d2172e64..40ae00fc 100644
--- a/data/web/templates/edit/syncjob.twig
+++ b/data/web/templates/edit/syncjob.twig
@@ -101,50 +101,50 @@
     </div>
     <div class="row mb-2">
       <div class="offset-sm-2 col-sm-10">
-        <div class="checkbox">
-          <label><input type="checkbox" value="1" name="delete2duplicates"{% if result.delete2duplicates == '1' %} checked{% endif %}> {{ lang.edit.delete2duplicates }} (--delete2duplicates)</label>
+        <div class="form-check">
+          <label><input type="checkbox" class="form-check-input" value="1" name="delete2duplicates"{% if result.delete2duplicates == '1' %} checked{% endif %}> {{ lang.edit.delete2duplicates }} (--delete2duplicates)</label>
         </div>
       </div>
     </div>
     <div class="row mb-2">
       <div class="offset-sm-2 col-sm-10">
-        <div class="checkbox">
-          <label><input type="checkbox" value="1" name="delete1"{% if result.delete1 == '1' %} checked{% endif %}> {{ lang.edit.delete1 }} (--delete1)</label>
+        <div class="form-check">
+          <label><input type="checkbox" class="form-check-input" value="1" name="delete1"{% if result.delete1 == '1' %} checked{% endif %}> {{ lang.edit.delete1 }} (--delete1)</label>
         </div>
       </div>
     </div>
     <div class="row mb-2">
       <div class="offset-sm-2 col-sm-10">
-        <div class="checkbox">
-          <label><input type="checkbox" value="1" name="delete2"{% if result.delete2 == '1' %} checked{% endif %}> {{ lang.edit.delete2 }} (--delete2)</label>
+        <div class="form-check">
+          <label><input type="checkbox" class="form-check-input" value="1" name="delete2"{% if result.delete2 == '1' %} checked{% endif %}> {{ lang.edit.delete2 }} (--delete2)</label>
         </div>
       </div>
     </div>
     <div class="row mb-2">
       <div class="offset-sm-2 col-sm-10">
-        <div class="checkbox">
-          <label><input type="checkbox" value="1" name="automap"{% if result.automap == '1' %} checked{% endif %}> {{ lang.edit.automap }} (--automap)</label>
+        <div class="form-check">
+          <label><input type="checkbox" class="form-check-input" value="1" name="automap"{% if result.automap == '1' %} checked{% endif %}> {{ lang.edit.automap }} (--automap)</label>
         </div>
       </div>
     </div>
     <div class="row mb-2">
       <div class="offset-sm-2 col-sm-10">
-        <div class="checkbox">
-          <label><input type="checkbox" value="1" name="skipcrossduplicates"{% if result.skipcrossduplicates == '1' %} checked{% endif %}> {{ lang.edit.skipcrossduplicates }} (--skipcrossduplicates)</label>
+        <div class="form-check">
+          <label><input type="checkbox" class="form-check-input" value="1" name="skipcrossduplicates"{% if result.skipcrossduplicates == '1' %} checked{% endif %}> {{ lang.edit.skipcrossduplicates }} (--skipcrossduplicates)</label>
         </div>
       </div>
     </div>
     <div class="row mb-2">
       <div class="offset-sm-2 col-sm-10">
-        <div class="checkbox">
-          <label><input type="checkbox" value="1" name="subscribeall"{% if result.subscribeall == '1' %} checked{% endif %}> {{ lang.add.subscribeall }} (--subscribeall)</label>
+        <div class="form-check">
+          <label><input type="checkbox" class="form-check-input" value="1" name="subscribeall"{% if result.subscribeall == '1' %} checked{% endif %}> {{ lang.add.subscribeall }} (--subscribeall)</label>
         </div>
       </div>
     </div>
     <div class="row mb-4">
       <div class="offset-sm-2 col-sm-10">
-        <div class="checkbox">
-          <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+        <div class="form-check">
+          <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
         </div>
       </div>
     </div>
diff --git a/data/web/templates/edit/tls_policy_map.twig b/data/web/templates/edit/tls_policy_map.twig
index 199bbfef..aa89575b 100644
--- a/data/web/templates/edit/tls_policy_map.twig
+++ b/data/web/templates/edit/tls_policy_map.twig
@@ -32,8 +32,8 @@
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+      <div class="form-check">
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
diff --git a/data/web/templates/edit/transport.twig b/data/web/templates/edit/transport.twig
index 2fc461f6..4aedb53d 100644
--- a/data/web/templates/edit/transport.twig
+++ b/data/web/templates/edit/transport.twig
@@ -32,15 +32,15 @@
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
-        <label><input type="checkbox" value="1" name="is_mx_based"{% if result.is_mx_based == '1' %} checked{% endif %}> {{ lang.edit.lookup_mx|raw }}</label>
+      <div class="form-check">
+        <label><input type="checkbox" class="form-check-input" value="1" name="is_mx_based"{% if result.is_mx_based == '1' %} checked{% endif %}> {{ lang.edit.lookup_mx|raw }}</label>
       </div>
     </div>
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+      <div class="form-check">
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
diff --git a/data/web/templates/modals/admin.twig b/data/web/templates/modals/admin.twig
index 15971e59..2271ca7f 100644
--- a/data/web/templates/modals/admin.twig
+++ b/data/web/templates/modals/admin.twig
@@ -22,8 +22,8 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.admin.active }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.admin.active }}</label>
               </div>
             </div>
           </div>
@@ -81,8 +81,8 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.admin.active }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.admin.active }}</label>
               </div>
             </div>
           </div>
@@ -181,8 +181,8 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.admin.active }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.admin.active }}</label>
               </div>
             </div>
           </div>
diff --git a/data/web/templates/modals/mailbox.twig b/data/web/templates/modals/mailbox.twig
index 44ba149f..e59d630a 100644
--- a/data/web/templates/modals/mailbox.twig
+++ b/data/web/templates/modals/mailbox.twig
@@ -98,10 +98,10 @@
               <div class="btn-group">
                 <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_reject" autocomplete="off" value="reject">
                 <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_category_reject">{{ lang.user.q_reject }}</label>
-                
+
                 <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_add_header" autocomplete="off" value="add_header">
                 <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_category_add_header">{{ lang.user.q_add_header }}</label>
-                
+
                 <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_all" autocomplete="off" value="all">
                 <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_category_all">{{ lang.user.q_all }}</label>
               </div>
@@ -114,7 +114,7 @@
               <div class="btn-group">
                 <input type="checkbox" class="btn-check" name="tls_enforce_in" id="tls_enforce_in" autocomplete="off" value="1">
                 <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="tls_enforce_in">{{ lang.user.tls_enforce_in }}</label>
-                
+
                 <input type="checkbox" class="btn-check" name="tls_enforce_out" id="tls_enforce_out" autocomplete="off" value="1">
                 <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="tls_enforce_out">{{ lang.user.tls_enforce_out }}</label>
               </div>
@@ -176,8 +176,8 @@
           </div>
           <div class="row">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="force_pw_update" id="force_pw_update"> {{ lang.edit.force_pw_update }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="force_pw_update" id="force_pw_update"> {{ lang.edit.force_pw_update }}</label>
                 <small class="text-muted">{{ lang.edit.force_pw_update_info|format(ui_texts.main_name) }}</small>
               </div>
             </div>
@@ -185,8 +185,8 @@
           {% if not skip_sogo %}
           <div class="row">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="sogo_access" id="sogo_access"> {{ lang.edit.sogo_access }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="sogo_access" id="sogo_access"> {{ lang.edit.sogo_access }}</label>
                 <small class="text-muted">{{ lang.edit.sogo_access_info }}</small>
               </div>
             </div>
@@ -216,7 +216,7 @@
           <input type="hidden" value="default" name="sender_acl">
           <input type="hidden" value="0" name="force_pw_update">
           <input type="hidden" value="0" name="sogo_access">
-          <input type="hidden" value="0" name="protocol_access">     
+          <input type="hidden" value="0" name="protocol_access">
 
           <div class="row mb-4">
             <label class="control-label col-sm-2 text-sm-end text-sm-end" for="template">{{ lang.mailbox.template }}</label>
@@ -268,10 +268,10 @@
               <div class="btn-group">
                 <input type="radio" class="btn-check" name="quarantine_category" id="template_quarantine_category_reject" autocomplete="off" value="reject" >
                 <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_quarantine_category_reject">{{ lang.user.q_reject }}</label>
-                
+
                 <input type="radio" class="btn-check" name="quarantine_category" id="template_quarantine_category_add_header" autocomplete="off" value="add_header">
                 <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_quarantine_category_add_header">{{ lang.user.q_add_header }}</label>
-                
+
                 <input type="radio" class="btn-check" name="quarantine_category" id="template_quarantine_category_all" autocomplete="off" value="all">
                 <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_quarantine_category_all">{{ lang.user.q_all }}</label>
               </div>
@@ -284,7 +284,7 @@
               <div class="btn-group">
                 <input type="checkbox" class="btn-check" name="tls_enforce_in" id="template_tls_enforce_in" autocomplete="off" value="1">
                 <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_tls_enforce_in">{{ lang.user.tls_enforce_in }}</label>
-                
+
                 <input type="checkbox" class="btn-check" name="tls_enforce_out" id="template_tls_enforce_out" autocomplete="off" value="1">
                 <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_tls_enforce_out">{{ lang.user.tls_enforce_out }}</label>
               </div>
@@ -304,7 +304,7 @@
           <div class="row mb-4">
             <label class="control-label col-sm-2 text-sm-end text-sm-end">ACL</label>
             <div class="col-sm-10">
-              <select id="template_user_acl" name="acl" size="10" multiple class="form-control">                  
+              <select id="template_user_acl" name="acl" size="10" multiple class="form-control">
                 <option value="spam_alias" selected>{{ lang.acl["spam_alias"] }}</option>
                 <option value="tls_policy" selected>{{ lang.acl["tls_policy"] }}</option>
                 <option value="spam_score" selected>{{ lang.acl["spam_score"] }}</option>
@@ -347,8 +347,8 @@
           </div>
           <div class="row">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="force_pw_update"> {{ lang.edit.force_pw_update }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="force_pw_update"> {{ lang.edit.force_pw_update }}</label>
                 <small class="text-muted">{{ lang.edit.force_pw_update_info|format(ui_texts.main_name) }}</small>
               </div>
             </div>
@@ -356,8 +356,8 @@
           {% if not skip_sogo %}
           <div class="row">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="sogo_access"> {{ lang.edit.sogo_access }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="sogo_access"> {{ lang.edit.sogo_access }}</label>
                 <small class="text-muted">{{ lang.edit.sogo_access_info }}</small>
               </div>
             </div>
@@ -445,8 +445,8 @@
           {% if not skip_sogo %}
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" id="addDomain_gal" value="1" name="gal" checked> {{ lang.edit.gal }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" id="addDomain_gal" value="1" name="gal" checked> {{ lang.edit.gal }}</label>
                 <small class="text-muted">{{ lang.edit.gal_info|raw }}</small>
               </div>
             </div>
@@ -454,8 +454,8 @@
           {% endif %}
           <div class="row mb-4">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" id="addDomain_active" value="1" name="active" checked> {{ lang.add.active }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" id="addDomain_active" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
@@ -491,12 +491,12 @@
           <div class="row mb-4">
             <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.add.backup_mx_options }}</label>
             <div class="col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" id="addDomain_relay_domain" value="1" name="backupmx"> {{ lang.add.relay_domain }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" id="addDomain_relay_domain" value="1" name="backupmx"> {{ lang.add.relay_domain }}</label>
                 <br>
-                <label><input type="checkbox" id="addDomain_relay_all" value="1" name="relay_all_recipients"> {{ lang.add.relay_all }}</label>
+                <label><input type="checkbox" class="form-check-input" id="addDomain_relay_all" value="1" name="relay_all_recipients"> {{ lang.add.relay_all }}</label>
                 <p>{{ lang.add.relay_all_info|raw }}</p>
-                <label><input type="checkbox" id="addDomain_relay_unknown_only" value="1" name="relay_unknown_only"> {{ lang.add.relay_unknown_only }}</label>
+                <label><input type="checkbox" class="form-check-input" id="addDomain_relay_unknown_only" value="1" name="relay_unknown_only"> {{ lang.add.relay_unknown_only }}</label>
                 <br>
                 <p>{{ lang.add.relay_transport_info|raw }}</p>
               </div>
@@ -584,16 +584,16 @@
           </div>
           <div class="row">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="gal" checked> {{ lang.add.gal }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="gal" checked> {{ lang.add.gal }}</label>
                 <small class="text-muted">{{ lang.add.gal_info|raw }}</small>
               </div>
             </div>
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
@@ -633,12 +633,12 @@
           <div class="row mb-2">
             <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.edit.backup_mx_options }}</label>
             <div class="col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="backupmx"> {{ lang.edit.relay_domain }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="backupmx"> {{ lang.edit.relay_domain }}</label>
                 <br>
-                <label><input type="checkbox" value="1" name="relay_all_recipients"> {{ lang.edit.relay_all }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="relay_all_recipients"> {{ lang.edit.relay_all }}</label>
                 <p>{{ lang.edit.relay_all_info|raw }}</p>
-                <label><input type="checkbox" value="1" name="relay_unknown_only"> {{ lang.edit.relay_unknown_only }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="relay_unknown_only"> {{ lang.edit.relay_unknown_only }}</label>
                 <br>
                 <p>{{ lang.edit.relay_transport_info|raw }}</p>
               </div>
@@ -708,8 +708,8 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
@@ -746,19 +746,19 @@
             <div class="col-sm-10">
               <textarea id="textarea_alias_goto" autocorrect="off" autocapitalize="none" class="form-control" rows="5" id="goto" name="goto" required></textarea>
               <p>{{ lang.add.target_address_info|raw }}</p>
-              <div class="checkbox">
-                <label><input class="goto_checkbox" type="checkbox" value="1" name="goto_null"> {{ lang.add.goto_null }}</label>
+              <div class="form-check">
+                <label><input class="form-check-input goto_checkbox" type="checkbox" value="1" name="goto_null"> {{ lang.add.goto_null }}</label>
               </div>
-              <div class="checkbox">
-                <label><input class="goto_checkbox" type="checkbox" value="1" name="goto_spam"> {{ lang.add.goto_spam|raw }}</label>
+              <div class="form-check">
+                <label><input class="form-check-input goto_checkbox" type="checkbox" value="1" name="goto_spam"> {{ lang.add.goto_spam|raw }}</label>
               </div>
-              <div class="checkbox">
-                <label><input class="goto_checkbox" type="checkbox" value="1" name="goto_ham"> {{ lang.add.goto_ham|raw }}</label>
+              <div class="form-check">
+                <label><input class="form-check-input goto_checkbox" type="checkbox" value="1" name="goto_ham"> {{ lang.add.goto_ham|raw }}</label>
               </div>
               {% if not skip_sogo %}
               <hr>
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="sogo_visible" checked> {{ lang.edit.sogo_visible }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="sogo_visible" checked> {{ lang.edit.sogo_visible }}</label>
               </div>
               <p class="text-muted">{{ lang.edit.sogo_visible_info }}</p>
               {% endif %}
@@ -766,8 +766,8 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
@@ -811,8 +811,8 @@
           </div>
           <div class="row mb-4">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
@@ -967,50 +967,50 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="delete2duplicates" checked> {{ lang.add.delete2duplicates }} (--delete2duplicates)</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="delete2duplicates" checked> {{ lang.add.delete2duplicates }} (--delete2duplicates)</label>
               </div>
             </div>
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="delete1"> {{ lang.add.delete1 }} (--delete1)</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="delete1"> {{ lang.add.delete1 }} (--delete1)</label>
               </div>
             </div>
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="delete2"> {{ lang.add.delete2 }} (--delete2)</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="delete2"> {{ lang.add.delete2 }} (--delete2)</label>
               </div>
             </div>
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="automap" checked> {{ lang.add.automap }} (--automap)</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="automap" checked> {{ lang.add.automap }} (--automap)</label>
               </div>
             </div>
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="skipcrossduplicates"> {{ lang.add.skipcrossduplicates }} (--skipcrossduplicates)</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="skipcrossduplicates"> {{ lang.add.skipcrossduplicates }} (--skipcrossduplicates)</label>
               </div>
             </div>
           </div>
           <div class="row mb-4">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="subscribeall" checked> {{ lang.add.subscribeall }} (--subscribeall)</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="subscribeall" checked> {{ lang.add.subscribeall }} (--subscribeall)</label>
               </div>
             </div>
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
@@ -1068,8 +1068,8 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
@@ -1121,8 +1121,8 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
@@ -1162,8 +1162,8 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
@@ -1218,8 +1218,8 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
diff --git a/data/web/templates/modals/user.twig b/data/web/templates/modals/user.twig
index 8c96397f..96605f70 100644
--- a/data/web/templates/modals/user.twig
+++ b/data/web/templates/modals/user.twig
@@ -127,50 +127,50 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="delete2duplicates" checked> {{ lang.add.delete2duplicates }} (--delete2duplicates)</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="delete2duplicates" checked> {{ lang.add.delete2duplicates }} (--delete2duplicates)</label>
               </div>
             </div>
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="delete1"> {{ lang.add.delete1 }} (--delete1)</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="delete1"> {{ lang.add.delete1 }} (--delete1)</label>
               </div>
             </div>
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="delete2"> {{ lang.add.delete2 }} (--delete2)</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="delete2"> {{ lang.add.delete2 }} (--delete2)</label>
               </div>
             </div>
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="automap" checked> {{ lang.add.automap }} (--automap)</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="automap" checked> {{ lang.add.automap }} (--automap)</label>
               </div>
             </div>
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="skipcrossduplicates"> {{ lang.add.skipcrossduplicates }} (--skipcrossduplicates)</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="skipcrossduplicates"> {{ lang.add.skipcrossduplicates }} (--skipcrossduplicates)</label>
               </div>
             </div>
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="subscribeall" checked> {{ lang.add.subscribeall }} (--subscribeall)</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="subscribeall" checked> {{ lang.add.subscribeall }} (--subscribeall)</label>
               </div>
             </div>
           </div>
           <div class="row mb-4">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
@@ -228,8 +228,8 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+              <div class="form-check">
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
diff --git a/data/web/templates/user/Pushover.twig b/data/web/templates/user/Pushover.twig
index 61c91ea6..acc019ca 100644
--- a/data/web/templates/user/Pushover.twig
+++ b/data/web/templates/user/Pushover.twig
@@ -80,8 +80,8 @@
               </div>
             </div>
             <div class="col-sm-12">
-                <div class="checkbox">
-                  <label><input type="checkbox" value="1" name="active"{% if pushover_data.active == '1' %} checked{% endif %}> {{ lang.user.active }}</label>
+                <div class="form-check">
+                  <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if pushover_data.active == '1' %} checked{% endif %}> {{ lang.user.active }}</label>
                 </div>
               </div>
               <div class="col-sm-12">
@@ -95,11 +95,11 @@
                   <div class="form-group">
                     <label for="text">{{ lang.user.pushover_sender_regex }}</label>
                     <input type="text" class="form-control mb-4" name="senders_regex" value="{{ pushover_data.senders_regex }}" placeholder="/(.*@example\.org$|^foo@example\.com$)/i" regex="true">
-                    <div class="checkbox">
-                      <label><input type="checkbox" value="1" name="evaluate_x_prio"{% if pushover_data.attributes.evaluate_x_prio == '1' %} checked{% endif %}> {{ lang.user.pushover_evaluate_x_prio|raw }}</label>
+                    <div class="form-check">
+                      <label><input type="checkbox" class="form-check-input" value="1" name="evaluate_x_prio"{% if pushover_data.attributes.evaluate_x_prio == '1' %} checked{% endif %}> {{ lang.user.pushover_evaluate_x_prio|raw }}</label>
                     </div>
-                    <div class="checkbox">
-                      <label><input type="checkbox" value="1" name="only_x_prio"{% if pushover_data.attributes.only_x_prio == '1' %} checked{% endif %}> {{ lang.user.pushover_only_x_prio|raw }}</label>
+                    <div class="form-check">
+                      <label><input type="checkbox" class="form-check-input" value="1" name="only_x_prio"{% if pushover_data.attributes.only_x_prio == '1' %} checked{% endif %}> {{ lang.user.pushover_only_x_prio|raw }}</label>
                     </div>
                   </div>
                 </div>

From e4e8abb1b9f04b6852d2b64e8ae99476d27ee11a Mon Sep 17 00:00:00 2001
From: Kristian Feldsam <feldsam@gmail.com>
Date: Sun, 3 Sep 2023 12:31:59 +0200
Subject: [PATCH 05/14] [Web] Ratelimit settings as input group

Signed-off-by: Kristian Feldsam <feldsam@gmail.com>
---
 data/web/edit.php                             | 12 +--
 data/web/templates/edit/aliasdomain.twig      |  4 +-
 data/web/templates/edit/domain-templates.twig | 13 ++--
 data/web/templates/edit/domain.twig           | 20 +++--
 .../web/templates/edit/mailbox-templates.twig |  9 +--
 data/web/templates/edit/mailbox.twig          | 20 +++--
 data/web/templates/modals/mailbox.twig        | 73 +++++++++----------
 7 files changed, 80 insertions(+), 71 deletions(-)

diff --git a/data/web/edit.php b/data/web/edit.php
index 09db796d..55bc050d 100644
--- a/data/web/edit.php
+++ b/data/web/edit.php
@@ -59,20 +59,22 @@ if (isset($_SESSION['mailcow_cc_role'])) {
           ];
       }
     }
-    elseif (isset($_GET["template"])){
-      $domain_template = mailbox('get', 'domain_templates', $_GET["template"]);
+    elseif (isset($_GET['template'])){
+      $domain_template = mailbox('get', 'domain_templates', $_GET['template']);
       if ($domain_template){
         $template_data = [
-          'template' => $domain_template
+          'template' => $domain_template,
+          'rl' => ['frame' => $domain_template['attributes']['rl_frame']],
         ];
         $template = 'edit/domain-templates.twig';
         $result = true;
       }
       else {
-        $mailbox_template = mailbox('get', 'mailbox_templates', $_GET["template"]);
+        $mailbox_template = mailbox('get', 'mailbox_templates', $_GET['template']);
         if ($mailbox_template){
           $template_data = [
-            'template' => $mailbox_template
+            'template' => $mailbox_template,
+            'rl' => ['frame' => $mailbox_template['attributes']['rl_frame']],
           ];
           $template = 'edit/mailbox-templates.twig';
           $result = true;
diff --git a/data/web/templates/edit/aliasdomain.twig b/data/web/templates/edit/aliasdomain.twig
index e2ecd487..fe262d1b 100644
--- a/data/web/templates/edit/aliasdomain.twig
+++ b/data/web/templates/edit/aliasdomain.twig
@@ -31,10 +31,12 @@
 <hr>
 <form data-id="domratelimit" class="form-inline well" method="post">
   <label class="control-label mb-2">{{ lang.acl.ratelimit }}</label>
-  <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
+  <div class="input-group mb-4">
+    <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
   <select name="rl_frame" class="form-control">
     {% include 'mailbox/rl-frame.twig' %}
   </select>
+  </div>
   <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="domratelimit" data-item="{{ alias_domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
 </form>
 {% if dkim %}
diff --git a/data/web/templates/edit/domain-templates.twig b/data/web/templates/edit/domain-templates.twig
index c58693b2..8b4b428b 100644
--- a/data/web/templates/edit/domain-templates.twig
+++ b/data/web/templates/edit/domain-templates.twig
@@ -81,13 +81,12 @@
     <div class="row">
       <label class="control-label col-sm-2">{{ lang.edit.ratelimit }}</label>
       <div class="col-sm-10">
-        <input name="rl_value" type="number" value="{{ template.attributes.rl_value }}" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
-        <select name="rl_frame" class="form-control">
-          <option value="s"{% if template.attributes.rl_frame == 's' %} selected{% endif %}>{{ lang.ratelimit.second }}</option>
-          <option value="m"{% if template.attributes.rl_frame == 'm' %} selected{% endif %}>{{ lang.ratelimit.minute }}</option>
-          <option value="h"{% if template.attributes.rl_frame == 'h' %} selected{% endif %}>{{ lang.ratelimit.hour }}</option>
-          <option value="d"{% if template.attributes.rl_frame == 'd' %} selected{% endif %}>{{ lang.ratelimit.day }}</option>
-        </select>
+        <div class="input-group">
+          <input name="rl_value" type="number" value="{{ template.attributes.rl_value }}" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
+          <select name="rl_frame" class="form-control">
+          {% include 'mailbox/rl-frame.twig' %}
+          </select>
+        </div>
       </div>
     </div>
     {% endif %}
diff --git a/data/web/templates/edit/domain.twig b/data/web/templates/edit/domain.twig
index 4ba25cf7..a5c8b6d6 100644
--- a/data/web/templates/edit/domain.twig
+++ b/data/web/templates/edit/domain.twig
@@ -145,14 +145,20 @@
     {% endif %}
   </div>
   <div id="dratelimit" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-ratelimit">
-    <form data-id="domratelimit" class="form-inline well" method="post">
-      <div class="row">
-        <div class="col-12">
-          <label class="control-label mb-2">{{ lang.edit.ratelimit }}</label>
-          <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
-          <select name="rl_frame" class="form-control">
+    <form data-id="domratelimit" class="well" method="post">
+      <div class="row mb-2">
+        <label class="control-label col-sm-2">{{ lang.edit.ratelimit }}</label>
+        <div class="col-sm-10">
+          <div class="input-group">
+            <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control placeholder="{{ lang.ratelimit.disabled }}">
+            <select name="rl_frame" class="form-control">
             {% include 'mailbox/rl-frame.twig' %}
-          </select>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="row mb-2">
+        <div class="offset-sm-2 col-sm-10">
           <button data-acl="{{ acl.ratelimit }}" class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="domratelimit" data-item="{{ domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
         </div>
       </div>
diff --git a/data/web/templates/edit/mailbox-templates.twig b/data/web/templates/edit/mailbox-templates.twig
index 28f45b56..d4949a3a 100644
--- a/data/web/templates/edit/mailbox-templates.twig
+++ b/data/web/templates/edit/mailbox-templates.twig
@@ -118,14 +118,13 @@
     <div class="row mb-4">
       <label class="control-label col-sm-2">{{ lang.acl.ratelimit }}</label>
       <div class="col-sm-10">
+        <div class="input-group">
         <input name="rl_value" type="number" autocomplete="off" value="{{ template.attributes.rl_value }}" class="form-control mb-2" placeholder="{{ lang.ratelimit.disabled }}">
         <select name="rl_frame" class="form-control">
-          <option value="s"{% if template.attributes.rl_frame == 's' %} selected{% endif %}>{{ lang.ratelimit.second }}</option>
-          <option value="m"{% if template.attributes.rl_frame == 'm' %} selected{% endif %}>{{ lang.ratelimit.minute }}</option>
-          <option value="h"{% if template.attributes.rl_frame == 'h' %} selected{% endif %}>{{ lang.ratelimit.hour }}</option>
-          <option value="d"{% if template.attributes.rl_frame == 'd' %} selected{% endif %}>{{ lang.ratelimit.day }}</option>
+          {% include 'mailbox/rl-frame.twig' %}
         </select>
-        <p class="text-muted mt-3">{{ lang.edit.mbox_rl_info }}</p>
+        </div>
+        <p class="text-muted mt-1">{{ lang.edit.mbox_rl_info }}</p>
       </div>
     </div>
     <hr>
diff --git a/data/web/templates/edit/mailbox.twig b/data/web/templates/edit/mailbox.twig
index c020cb0a..76cc45bb 100644
--- a/data/web/templates/edit/mailbox.twig
+++ b/data/web/templates/edit/mailbox.twig
@@ -379,18 +379,24 @@
     </form>
   </div>
   <div id="mrl" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-rl">
-    <form data-id="mboxratelimit" class="form-inline well" method="post">
-      <div class="row">
-        <div class="col-sm-1">
+    <form data-id="mboxratelimit" class="well" method="post">
+      <div class="row mb-2">
+        <div class="col-sm-2">
           <p class="text-muted">{{ lang.acl.ratelimit }}</p>
         </div>
         <div class="col-sm-10">
-          <input name="rl_value" type="number" autocomplete="off" value="{{ rl.value }}" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
-          <select name="rl_frame" class="form-control">
+          <div class="input-group">
+            <input name="rl_value" type="number" autocomplete="off" value="{{ rl.value }}" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
+            <select name="rl_frame" class="form-control">
             {% include 'mailbox/rl-frame.twig' %}
-          </select>
+            </select>
+          </div>
+        </div>  
+      </div>
+      <div class="row mb-2">
+        <div class="offset-sm-2 col-sm-10">  
           <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="mboxratelimit" data-item="{{ mailbox }}" data-api-url='edit/rl-mbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
-          <p class="text-muted mt-3">{{ lang.edit.mbox_rl_info }}</p>
+          <p class="text-muted mt-2">{{ lang.edit.mbox_rl_info }}</p>
         </div>
       </div>
     </form>
diff --git a/data/web/templates/modals/mailbox.twig b/data/web/templates/modals/mailbox.twig
index e59d630a..07c9d10f 100644
--- a/data/web/templates/modals/mailbox.twig
+++ b/data/web/templates/modals/mailbox.twig
@@ -155,14 +155,13 @@
           <div class="row mb-4">
             <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.acl.ratelimit }}</label>
             <div class="col-sm-10">
-              <input name="rl_value" id="rl_value" type="number" autocomplete="off" value="" class="form-control mb-2" placeholder="{{ lang.ratelimit.disabled }}">
-              <select name="rl_frame" id="rl_frame" class="form-control">
-                <option value="s">{{ lang.ratelimit.second }}</option>
-                <option value="m">{{ lang.ratelimit.minute }}</option>
-                <option value="h">{{ lang.ratelimit.hour }}</option>
-                <option value="d">{{ lang.ratelimit.day }}</option>
-              </select>
-              <p class="text-muted mt-3">{{ lang.edit.mbox_rl_info }}</p>
+              <div class="input-group">
+                <input name="rl_value" id="rl_value" type="number" autocomplete="off" value="" class="form-control mb-2" placeholder="{{ lang.ratelimit.disabled }}">
+                <select name="rl_frame" id="rl_frame" class="form-control">
+                {% include 'mailbox/rl-frame.twig' %}
+                </select>
+              </div>
+              <p class="text-muted mt-1">{{ lang.edit.mbox_rl_info }}</p>
             </div>
           </div>
           <div class="row mb-2">
@@ -325,14 +324,13 @@
           <div class="row mb-4">
             <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.acl.ratelimit }}</label>
             <div class="col-sm-10">
-              <input name="rl_value" type="number" autocomplete="off" value="" class="form-control mb-2" placeholder="{{ lang.ratelimit.disabled }}">
-              <select name="rl_frame" class="form-control">
-                <option value="s">{{ lang.ratelimit.second }}</option>
-                <option value="m">{{ lang.ratelimit.minute }}</option>
-                <option value="h">{{ lang.ratelimit.hour }}</option>
-                <option value="d">{{ lang.ratelimit.day }}</option>
-              </select>
-              <p class="text-muted mt-3">{{ lang.edit.mbox_rl_info }}</p>
+              <div class="input-group">
+                <input name="rl_value" type="number" autocomplete="off" value="" class="form-control mb-2" placeholder="{{ lang.ratelimit.disabled }}">
+                <select name="rl_frame" class="form-control">
+                {% include 'mailbox/rl-frame.twig' %}
+                </select>
+              </div>
+              <p class="text-muted mt-1">{{ lang.edit.mbox_rl_info }}</p>
             </div>
           </div>
           <hr>
@@ -462,13 +460,13 @@
           <hr>
           <div class="row mb-4">
             <label class="control-label col-sm-2 text-sm-end" for="rl_frame">{{ lang.acl.ratelimit }}</label>
-            <div class="col-sm-7">
-              <input name="rl_value" id="addDomain_rl_value" type="number" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
-            </div>
-            <div class="col-sm-3">
-              <select name="rl_frame" id="addDomain_rl_frame" class="form-control">
-              {% include 'mailbox/rl-frame.twig' %}
-              </select>
+            <div class="col-sm-10">
+              <div class="input-group">
+                <input name="rl_value" id="addDomain_rl_value" type="number" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
+                <select name="rl_frame" id="addDomain_rl_frame" class="form-control">
+                {% include 'mailbox/rl-frame.twig' %}
+                </select>
+              </div>
             </div>
           </div>
           <hr>
@@ -600,16 +598,13 @@
           <hr>
           <div class="row">
             <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.edit.ratelimit }}</label>
-            <div class="col-sm-7">
-              <input name="rl_value" type="number" value="" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
-            </div>
-            <div class="col-sm-3">
-              <select name="rl_frame" class="form-control">
-                <option value="s">{{ lang.ratelimit.second }}</option>
-                <option value="m">{{ lang.ratelimit.minute }}</option>
-                <option value="h">{{ lang.ratelimit.hour }}</option>
-                <option value="d">{{ lang.ratelimit.day }}</option>
-              </select>
+            <div class="col-sm-10">
+              <div class="input-group">
+                <input name="rl_value" type="number" value="" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
+                <select name="rl_frame" class="form-control">
+                {% include 'mailbox/rl-frame.twig' %}
+                </select>
+              </div>
             </div>
           </div>
           {% endif %}
@@ -819,13 +814,13 @@
           <hr>
           <div class="row mb-2">
             <label class="control-label col-sm-2 text-sm-end" for="rl_frame">{{ lang.acl.ratelimit }}</label>
-            <div class="col-sm-7">
-              <input name="rl_value" type="number" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
-            </div>
-            <div class="col-sm-3">
-              <select name="rl_frame" class="form-control">
+            <div class="col-sm-10">
+              <div class="input-group">
+                <input name="rl_value" type="number" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
+                <select name="rl_frame" class="form-control">
                 {% include 'mailbox/rl-frame.twig' %}
-              </select>
+                </select>
+              </div>
             </div>
           </div>
           <hr>

From f059db54d0c27ac419b41eb8b070d1455ff0d210 Mon Sep 17 00:00:00 2001
From: Kristian Feldsam <feldsam@gmail.com>
Date: Sun, 3 Sep 2023 12:32:47 +0200
Subject: [PATCH 06/14] [Web] edit mailbox template - fixed settigns buttons
 styling

Signed-off-by: Kristian Feldsam <feldsam@gmail.com>
---
 .../web/templates/edit/mailbox-templates.twig | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/data/web/templates/edit/mailbox-templates.twig b/data/web/templates/edit/mailbox-templates.twig
index d4949a3a..f606bd45 100644
--- a/data/web/templates/edit/mailbox-templates.twig
+++ b/data/web/templates/edit/mailbox-templates.twig
@@ -41,16 +41,16 @@
       <div class="col-sm-10">
         <div class="btn-group">
           <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_never" autocomplete="off" value="never" {% if template.attributes.quarantine_notification == 'never' %}checked{% endif %}>
-          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_never">{{ lang.user.never }}</label>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_notification_never">{{ lang.user.never }}</label>
 
           <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_hourly" autocomplete="off" value="hourly" {% if template.attributes.quarantine_notification == 'hourly' %}checked{% endif %}>
-          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_hourly">{{ lang.user.hourly }}</label>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_notification_hourly">{{ lang.user.hourly }}</label>
 
           <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_daily" autocomplete="off" value="daily" {% if template.attributes.quarantine_notification == 'daily' %}checked{% endif %}>
-          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_daily">{{ lang.user.daily }}</label>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_notification_daily">{{ lang.user.daily }}</label>
 
           <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_weekly" autocomplete="off" value="weekly" {% if template.attributes.quarantine_notification == 'weekly' %}checked{% endif %}>
-          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_weekly">{{ lang.user.weekly }}</label>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_notification_weekly">{{ lang.user.weekly }}</label>
         </div>
         <p class="text-muted"><small>{{ lang.user.quarantine_notification_info }}</small></p>
       </div>
@@ -60,13 +60,13 @@
       <div class="col-sm-10">
         <div class="btn-group">
           <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_reject" autocomplete="off" value="reject" {% if template.attributes.quarantine_category == 'reject' %}checked{% endif %}>
-          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_reject">{{ lang.user.q_reject }}</label>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_category_reject">{{ lang.user.q_reject }}</label>
 
           <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_add_header" autocomplete="off" value="add_header" {% if template.attributes.quarantine_category == 'add_header' %}checked{% endif %}>
-          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_add_header">{{ lang.user.q_add_header }}</label>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_category_add_header">{{ lang.user.q_add_header }}</label>
 
           <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_all" autocomplete="off" value="all" {% if template.attributes.quarantine_category == 'all' %}checked{% endif %}>
-          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_all">{{ lang.user.q_all }}</label>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_category_all">{{ lang.user.q_all }}</label>
         </div>
         <p class="text-muted"><small>{{ lang.user.quarantine_category_info }}</small></p>
       </div>
@@ -76,10 +76,10 @@
       <div class="col-sm-10">
         <div class="btn-group">
           <input type="checkbox" class="btn-check" name="tls_enforce_in" id="tls_enforce_in" autocomplete="off" value="1" {% if template.attributes.tls_enforce_in == '1' %}checked{% endif %}>
-          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="tls_enforce_in">{{ lang.user.tls_enforce_in }}</label>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="tls_enforce_in">{{ lang.user.tls_enforce_in }}</label>
 
           <input type="checkbox" class="btn-check" name="tls_enforce_out" id="tls_enforce_out" autocomplete="off" value="1" {% if template.attributes.tls_enforce_out == '1' %}checked{% endif %}>
-          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="tls_enforce_out">{{ lang.user.tls_enforce_out }}</label>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="tls_enforce_out">{{ lang.user.tls_enforce_out }}</label>
         </div>
       </div>
     </div>
@@ -119,10 +119,10 @@
       <label class="control-label col-sm-2">{{ lang.acl.ratelimit }}</label>
       <div class="col-sm-10">
         <div class="input-group">
-        <input name="rl_value" type="number" autocomplete="off" value="{{ template.attributes.rl_value }}" class="form-control mb-2" placeholder="{{ lang.ratelimit.disabled }}">
-        <select name="rl_frame" class="form-control">
+          <input name="rl_value" type="number" autocomplete="off" value="{{ template.attributes.rl_value }}" class="form-control mb-2" placeholder="{{ lang.ratelimit.disabled }}">
+          <select name="rl_frame" class="form-control">
           {% include 'mailbox/rl-frame.twig' %}
-        </select>
+          </select>
         </div>
         <p class="text-muted mt-1">{{ lang.edit.mbox_rl_info }}</p>
       </div>

From bb69f399760cdb3fa27e0d33624ce4b92a29a5b0 Mon Sep 17 00:00:00 2001
From: Kristian Feldsam <feldsam@gmail.com>
Date: Sun, 3 Sep 2023 12:33:29 +0200
Subject: [PATCH 07/14] =?UTF-8?q?[Web]=20domain=20and=20alias=20domain=20e?=
 =?UTF-8?q?dit=20-=20translated=20dkim=20=E2=80=9Cdomain=E2=80=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Kristian Feldsam <feldsam@gmail.com>
---
 data/web/templates/edit/aliasdomain.twig | 2 +-
 data/web/templates/edit/domain.twig      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/data/web/templates/edit/aliasdomain.twig b/data/web/templates/edit/aliasdomain.twig
index fe262d1b..fc6b5ee1 100644
--- a/data/web/templates/edit/aliasdomain.twig
+++ b/data/web/templates/edit/aliasdomain.twig
@@ -43,7 +43,7 @@
 <hr>
 <div class="row">
   <div class="col-12 col-sm-2">
-    <p>Domain: <strong>{{ result.alias_domain }}</strong> ({{ dkim.dkim_selector }}._domainkey)</p>
+    <p>{{ lang.add.domain }}: <strong>{{ result.alias_domain }}</strong> ({{ dkim.dkim_selector }}._domainkey)</p>
   </div>
   <div class="col-12 col-sm-10">
     <pre class="p-2">{{ dkim.dkim_txt }}</pre>
diff --git a/data/web/templates/edit/domain.twig b/data/web/templates/edit/domain.twig
index a5c8b6d6..3da44b5c 100644
--- a/data/web/templates/edit/domain.twig
+++ b/data/web/templates/edit/domain.twig
@@ -136,7 +136,7 @@
     <hr>
     <div class="row">
       <div class="col-12 col-sm-2">
-        <p>Domain: <strong>{{ result.domain_name }}</strong> ({{ dkim.dkim_selector }}._domainkey)</p>
+        <p>{{ lang.add.domain }}: <strong>{{ result.domain_name }}</strong> ({{ dkim.dkim_selector }}._domainkey)</p>
       </div>
       <div class="col-12 col-sm-10">
         <pre class="p-2">{{ dkim.dkim_txt }}</pre>

From d48193fd0e11837a6c09da95b476cbe841f473fa Mon Sep 17 00:00:00 2001
From: Kristian Feldsam <feldsam@gmail.com>
Date: Sun, 3 Sep 2023 12:33:58 +0200
Subject: [PATCH 08/14] [Web] edit object - added space after heaading

Signed-off-by: Kristian Feldsam <feldsam@gmail.com>
---
 data/web/templates/edit/aliasdomain.twig | 6 +++---
 data/web/templates/edit/syncjob.twig     | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/data/web/templates/edit/aliasdomain.twig b/data/web/templates/edit/aliasdomain.twig
index fc6b5ee1..540326e8 100644
--- a/data/web/templates/edit/aliasdomain.twig
+++ b/data/web/templates/edit/aliasdomain.twig
@@ -2,7 +2,7 @@
 
 {% block inner_content %}
 {% if result %}
-<h4>{{ lang.edit.edit_alias_domain }}</h4>
+<h4 class="mb-4">{{ lang.edit.edit_alias_domain }}</h4>
 <form class="form-horizontal" data-id="editaliasdomain" role="form" method="post">
   <input type="hidden" value="0" name="active">
   <div class="row mb-2">
@@ -33,9 +33,9 @@
   <label class="control-label mb-2">{{ lang.acl.ratelimit }}</label>
   <div class="input-group mb-4">
     <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
-  <select name="rl_frame" class="form-control">
+    <select name="rl_frame" class="form-control">
     {% include 'mailbox/rl-frame.twig' %}
-  </select>
+    </select>
   </div>
   <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="domratelimit" data-item="{{ alias_domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
 </form>
diff --git a/data/web/templates/edit/syncjob.twig b/data/web/templates/edit/syncjob.twig
index 40ae00fc..6f6cdeda 100644
--- a/data/web/templates/edit/syncjob.twig
+++ b/data/web/templates/edit/syncjob.twig
@@ -2,7 +2,7 @@
 
 {% block inner_content %}
 {% if result %}
-  <h4>{{ lang.edit.syncjob }}</h4>
+  <h4 class="mb-4">{{ lang.edit.syncjob }}</h4>
   <form class="form-horizontal" data-id="editsyncjob" role="form" method="post">
     <input type="hidden" value="0" name="delete2duplicates">
     <input type="hidden" value="0" name="delete1">

From 1b7cc830caea787520f032c30b10e993d64e4ee9 Mon Sep 17 00:00:00 2001
From: Kristian Feldsam <feldsam@gmail.com>
Date: Sun, 3 Sep 2023 12:36:03 +0200
Subject: [PATCH 09/14] [Web] standarize select box dropdown buttons

Signed-off-by: Kristian Feldsam <feldsam@gmail.com>
---
 data/web/templates/edit/domain-templates.twig | 2 +-
 data/web/templates/modals/mailbox.twig        | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/data/web/templates/edit/domain-templates.twig b/data/web/templates/edit/domain-templates.twig
index 8b4b428b..825e6674 100644
--- a/data/web/templates/edit/domain-templates.twig
+++ b/data/web/templates/edit/domain-templates.twig
@@ -100,7 +100,7 @@
     <div class="row mb-4">
       <label class="control-label col-sm-2" for="key_size">{{ lang.admin.dkim_key_length }}</label>
       <div class="col-sm-10">
-        <select data-style="btn btn-secondary btn-sm" class="form-control" id="key_size" name="key_size">
+        <select data-style="btn btn-light" class="form-control" id="key_size" name="key_size">
           <option value="1024" data-subtext="bits" {% if template.attributes.key_size == 1024 %} selected{% endif %}>1024</option>
           <option value="2048" data-subtext="bits" {% if template.attributes.key_size == 2048 %} selected{% endif %}>2048</option>
         </select>
diff --git a/data/web/templates/modals/mailbox.twig b/data/web/templates/modals/mailbox.twig
index 07c9d10f..8e4878ae 100644
--- a/data/web/templates/modals/mailbox.twig
+++ b/data/web/templates/modals/mailbox.twig
@@ -479,7 +479,7 @@
           <div class="row mb-4">
             <label class="control-label col-sm-2 text-sm-end text-sm-end" for="key_size">{{ lang.admin.dkim_key_length }}</label>
             <div class="col-sm-10">
-              <select data-style="btn btn-secondary btn-sm" class="form-control" id="key_size" name="key_size">
+              <select data-style="btn btn-light" class="form-control" id="key_size" name="key_size">
                 <option data-subtext="bits" value="1024">1024</option>
                 <option data-subtext="bits" value="2048" selected>2048</option>
               </select>
@@ -618,7 +618,7 @@
           <div class="row mb-4">
             <label class="control-label col-sm-2 text-sm-end text-sm-end" for="key_size">{{ lang.admin.dkim_key_length }}</label>
             <div class="col-sm-10">
-              <select data-style="btn btn-secondary btn-sm" class="form-control" id="key_size" name="key_size">
+              <select data-style="btn btn-light" class="form-control" id="key_size" name="key_size">
                 <option data-subtext="bits">1024</option>
                 <option data-subtext="bits" selected>2048</option>
               </select>
@@ -833,7 +833,7 @@
           <div class="row mb-4">
             <label class="control-label col-sm-2 text-sm-end" for="key_size2">{{ lang.admin.dkim_key_length }}</label>
             <div class="col-sm-10">
-              <select data-style="btn btn-secondary btn-sm" class="form-control" id="key_size2" name="key_size">
+              <select data-style="btn btn-light" class="form-control" id="key_size2" name="key_size">
                 <option data-subtext="bits">1024</option>
                 <option data-subtext="bits" selected>2048</option>
               </select>

From 633ebe5e8dca0cd8b064a4897b911d58143afe87 Mon Sep 17 00:00:00 2001
From: Kristian Feldsam <feldsam@gmail.com>
Date: Sun, 3 Sep 2023 12:36:33 +0200
Subject: [PATCH 10/14] [Web] fixed add domain save action button group styling

Signed-off-by: Kristian Feldsam <feldsam@gmail.com>
---
 data/web/templates/modals/mailbox.twig | 1 -
 1 file changed, 1 deletion(-)

diff --git a/data/web/templates/modals/mailbox.twig b/data/web/templates/modals/mailbox.twig
index 8e4878ae..1f96851f 100644
--- a/data/web/templates/modals/mailbox.twig
+++ b/data/web/templates/modals/mailbox.twig
@@ -506,7 +506,6 @@
               {% if not skip_sogo %}
               <button class="btn btn-xs-lg btn-xs-half d-block d-sm-inline btn-secondary" data-action="add_item" data-id="add_domain" data-api-url='add/domain' data-api-attr='{"tags": []}' href="#">{{ lang.add.add_domain_only }}</button>
               <button class="btn btn-xs-lg btn-xs-half d-block d-sm-inline btn-secondary" data-action="add_item" data-id="add_domain" data-api-url='add/domain' data-api-attr='{"restart_sogo":"1", "tags": []}' href="#">{{ lang.add.add_domain_restart }}</button>
-              <div class="clearfix visible-xs"></div>
               {% else %}
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_domain" data-api-url='add/domain' data-api-attr='{"tags": []}' href="#">{{ lang.add.add }}</button>
               {% endif %}

From 871ae5d7d285b216021e782ab57ab403d2dfd194 Mon Sep 17 00:00:00 2001
From: Kristian Feldsam <feldsam@gmail.com>
Date: Sun, 3 Sep 2023 18:34:20 +0200
Subject: [PATCH 11/14] [Web] mobile devices styling fixes and enhancements

Signed-off-by: Kristian Feldsam <feldsam@gmail.com>
---
 data/web/css/build/015-responsive.css         | 15 +++-
 data/web/js/build/013-mailcow.js              |  2 +-
 data/web/js/site/admin.js                     | 30 ++++----
 data/web/js/site/mailbox.js                   | 68 +++++++++----------
 .../templates/admin/tab-config-admins.twig    |  8 +--
 data/web/templates/admin/tab-config-f2b.twig  |  7 +-
 .../templates/admin/tab-config-rsettings.twig |  8 ++-
 data/web/templates/fido2.twig                 |  4 +-
 data/web/templates/index.twig                 | 24 +++----
 data/web/templates/mailbox/tab-bcc.twig       | 16 ++---
 .../templates/mailbox/tab-domain-aliases.twig |  8 +--
 data/web/templates/mailbox/tab-domains.twig   |  8 +--
 data/web/templates/mailbox/tab-filters.twig   | 16 ++---
 data/web/templates/mailbox/tab-mailboxes.twig |  8 +--
 .../templates/mailbox/tab-mbox-aliases.twig   | 10 +--
 data/web/templates/mailbox/tab-resources.twig |  8 +--
 data/web/templates/mailbox/tab-syncjobs.twig  |  8 +--
 .../mailbox/tab-templates-domains.twig        | 12 ++--
 .../templates/mailbox/tab-templates-mbox.twig | 12 ++--
 .../web/templates/mailbox/tab-tls-policy.twig |  8 +--
 20 files changed, 148 insertions(+), 132 deletions(-)

diff --git a/data/web/css/build/015-responsive.css b/data/web/css/build/015-responsive.css
index a626a384..57ce8023 100644
--- a/data/web/css/build/015-responsive.css
+++ b/data/web/css/build/015-responsive.css
@@ -38,7 +38,7 @@
 
 
 @media (max-width: 767px) {
-  .responsive-tabs .tab-pane {
+  .responsive-tabs .tab-pane:not(.rsettings) {
       display: block !important;
       opacity: 1;
   }
@@ -206,6 +206,19 @@
   .senders-mw220 {
     max-width: 100% !important;
   }
+  
+  table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
+  table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before,
+  table.dataTable td.dt-control:before {
+      height: 2rem;
+      width: 2rem;
+      line-height: 2rem;
+      margin-top: -15px;
+  }
+  
+  li .dtr-data {
+      padding: 0;
+  }
 }
 
 @media (max-width: 350px) {
diff --git a/data/web/js/build/013-mailcow.js b/data/web/js/build/013-mailcow.js
index e659915b..6291c8b4 100644
--- a/data/web/js/build/013-mailcow.js
+++ b/data/web/js/build/013-mailcow.js
@@ -121,7 +121,7 @@ $(document).ready(function() {
         if (lastTab) {
           $('[data-bs-target="#' + lastTab + '"]').click();
           var tab = $('[id^="' + lastTab + '"]');
-          $(tab).find('.card-body.collapse').collapse('show');
+          $(tab).find('.card-body.collapse:first').collapse('show');
         }
       });
   })();
diff --git a/data/web/js/site/admin.js b/data/web/js/site/admin.js
index 252da9a1..80da6416 100644
--- a/data/web/js/site/admin.js
+++ b/data/web/js/site/admin.js
@@ -510,9 +510,9 @@ jQuery(function($){
     if (table == 'relayhoststable') {
       $.each(data, function (i, item) {
         item.action = '<div class="btn-group">' +
-          '<a href="#" data-bs-toggle="modal" data-bs-target="#testTransportModal" data-transport-id="' + encodeURI(item.id) + '" data-transport-type="sender-dependent" class="btn btn-xs btn-xs-third btn-secondary"><i class="bi bi-caret-right-fill"></i> Test</a>' +
-          '<a href="/edit/relayhost/' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-          '<a href="#" data-action="delete_selected" data-id="single-rlyhost" data-api-url="delete/relayhost" data-item="' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+          '<a href="#" data-bs-toggle="modal" data-bs-target="#testTransportModal" data-transport-id="' + encodeURI(item.id) + '" data-transport-type="sender-dependent" class="btn btn-xs btn-xs-lg btn-xs-third btn-secondary"><i class="bi bi-caret-right-fill"></i> Test</a>' +
+          '<a href="/edit/relayhost/' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-lg btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+          '<a href="#" data-action="delete_selected" data-id="single-rlyhost" data-api-url="delete/relayhost" data-item="' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-lg btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
           '</div>';
         if (item.used_by_mailboxes == '') { item.in_use_by = item.used_by_domains; }
         else if (item.used_by_domains == '') { item.in_use_by = item.used_by_mailboxes; }
@@ -528,9 +528,9 @@ jQuery(function($){
           item.username = '<i style="color:#' + intToRGB(hashCode(item.nexthop)) + ';" class="bi bi-square-fill"></i> ' + item.username;
         }
         item.action = '<div class="btn-group">' +
-          '<a href="#" data-bs-toggle="modal" data-bs-target="#testTransportModal" data-transport-id="' + encodeURI(item.id) + '" data-transport-type="transport-map" class="btn btn-xs btn-xs-third btn-secondary"><i class="bi bi-caret-right-fill"></i> Test</a>' +
-          '<a href="/edit/transport/' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-          '<a href="#" data-action="delete_selected" data-id="single-transport" data-api-url="delete/transport" data-item="' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+          '<a href="#" data-bs-toggle="modal" data-bs-target="#testTransportModal" data-transport-id="' + encodeURI(item.id) + '" data-transport-type="transport-map" class="btn btn-xs btn-xs-lg btn-xs-third btn-secondary"><i class="bi bi-caret-right-fill"></i> Test</a>' +
+          '<a href="/edit/transport/' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-lg btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+          '<a href="#" data-action="delete_selected" data-id="single-transport" data-api-url="delete/transport" data-item="' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-lg btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
           '</div>';
         item.chkbox = '<input type="checkbox" class="form-check-input" data-id="transports" name="multi_select" value="' + item.id + '" />';
       });
@@ -542,21 +542,21 @@ jQuery(function($){
         });
         item.recipients = rcpts.join('<hr style="margin:1px!important">');
         item.action = '<div class="btn-group">' +
-          '<a href="#" data-bs-toggle="modal" data-bs-target="#showQueuedMsg" data-queue-id="' + encodeURI(item.queue_id) + '" class="btn btn-xs btn-secondary">' + lang.queue_show_message + '</a>' +
+          '<a href="#" data-bs-toggle="modal" data-bs-target="#showQueuedMsg" data-queue-id="' + encodeURI(item.queue_id) + '" class="btn btn-xs btn-xs-lg btn-secondary">' + lang.queue_show_message + '</a>' +
           '</div>';
       });
     } else if (table == 'forwardinghoststable') {
       $.each(data, function (i, item) {
         item.action = '<div class="btn-group">' +
-          '<a href="#" data-action="delete_selected" data-id="single-fwdhost" data-api-url="delete/fwdhost" data-item="' + encodeURI(item.host) + '" class="btn btn-xs btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+          '<a href="#" data-action="delete_selected" data-id="single-fwdhost" data-api-url="delete/fwdhost" data-item="' + encodeURI(item.host) + '" class="btn btn-xs btn-xs-lg btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
           '</div>';
         item.chkbox = '<input type="checkbox" class="form-check-input" data-id="fwdhosts" name="multi_select" value="' + item.host + '" />';
       });
     } else if (table == 'oauth2clientstable') {
       $.each(data, function (i, item) {
         item.action = '<div class="btn-group">' +
-          '<a href="/edit.php?oauth2client=' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-          '<a href="#" data-action="delete_selected" data-id="single-oauth2-client" data-api-url="delete/oauth2-client" data-item="' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+          '<a href="/edit.php?oauth2client=' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+          '<a href="#" data-action="delete_selected" data-id="single-oauth2-client" data-api-url="delete/oauth2-client" data-item="' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
           '</div>';
         item.scope = "profile";
         item.grant_types = 'refresh_token password authorization_code';
@@ -568,9 +568,9 @@ jQuery(function($){
         item.selected_domains = item.selected_domains.toString().replace(/,/g, "<br>");
         item.chkbox = '<input type="checkbox" class="form-check-input" data-id="domain_admins" name="multi_select" value="' + item.username + '" />';
         item.action = '<div class="btn-group">' +
-          '<a href="/edit/domainadmin/' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-          '<a href="#" data-action="delete_selected" data-id="single-domain-admin" data-api-url="delete/domain-admin" data-item="' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
-          '<a href="/index.php?duallogin=' + encodeURIComponent(item.username) + '" class="btn btn-xs btn-xs-third btn-success"><i class="bi bi-person-fill"></i> Login</a>' +
+          '<a href="/edit/domainadmin/' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-lg btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+          '<a href="#" data-action="delete_selected" data-id="single-domain-admin" data-api-url="delete/domain-admin" data-item="' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-lg btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+          '<a href="/index.php?duallogin=' + encodeURIComponent(item.username) + '" class="btn btn-xs btn-xs-lg btn-xs-third btn-success"><i class="bi bi-person-fill"></i> Login</a>' +
           '</div>';
       });
     } else if (table == 'adminstable') {
@@ -582,8 +582,8 @@ jQuery(function($){
         }
         item.chkbox = '<input type="checkbox" class="form-check-input" data-id="admins" name="multi_select" value="' + item.username + '" />';
         item.action = '<div class="btn-group">' +
-          '<a href="/edit/admin/' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-          '<a href="#" data-action="delete_selected" data-id="single-admin" data-api-url="delete/admin" data-item="' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+          '<a href="/edit/admin/' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+          '<a href="#" data-action="delete_selected" data-id="single-admin" data-api-url="delete/admin" data-item="' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
           '</div>';
       });
     }
diff --git a/data/web/js/site/mailbox.js b/data/web/js/site/mailbox.js
index 50ce59df..b258a42e 100644
--- a/data/web/js/site/mailbox.js
+++ b/data/web/js/site/mailbox.js
@@ -469,13 +469,13 @@ jQuery(function($){
             item.chkbox = '<input type="checkbox" class="form-check-input" data-id="domain" name="multi_select" value="' + encodeURIComponent(item.domain_name) + '" />';
             item.action = '<div class="btn-group">';
             if (role == "admin") {
-              item.action += '<a href="/edit/domain/' + encodeURIComponent(item.domain_name) + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-                '<a href="#" data-action="delete_selected" data-id="single-domain" data-api-url="delete/domain" data-item="' + encodeURIComponent(item.domain_name) + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
-                  '<a href="#dnsInfoModal" class="btn btn-sm btn-info" data-bs-toggle="modal" data-domain="' + encodeURIComponent(item.domain_name) + '"><i class="bi bi-globe2"></i> DNS</a></div>';
+              item.action += '<a href="/edit/domain/' + encodeURIComponent(item.domain_name) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+                '<a href="#" data-action="delete_selected" data-id="single-domain" data-api-url="delete/domain" data-item="' + encodeURIComponent(item.domain_name) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+                  '<a href="#dnsInfoModal" class="btn btn-sm btn-xs-lg btn-info" data-bs-toggle="modal" data-domain="' + encodeURIComponent(item.domain_name) + '"><i class="bi bi-globe2"></i> DNS</a></div>';
             }
             else {
-              item.action += '<a href="/edit/domain/' + encodeURIComponent(item.domain_name) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#dnsInfoModal" class="btn btn-xs btn-xs-half btn-info" data-bs-toggle="modal" data-domain="' + encodeURIComponent(item.domain_name) + '"><i class="bi bi-globe2"></i> DNS</a></div>';
+              item.action += '<a href="/edit/domain/' + encodeURIComponent(item.domain_name) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="#dnsInfoModal" class="btn btn-sm btn-xs-lg btn-xs-half btn-info" data-bs-toggle="modal" data-domain="' + encodeURIComponent(item.domain_name) + '"><i class="bi bi-globe2"></i> DNS</a></div>';
             }
 
             if (Array.isArray(item.tags)){
@@ -671,13 +671,13 @@ jQuery(function($){
 
             if (item.template.toLowerCase() == "default"){
               item.action = '<div class="btn-group">' +
-              '<a href="/edit/template/' + encodeURIComponent(item.id) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="/edit/template/' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
               '</div>';
             }
             else {
               item.action = '<div class="btn-group">' +
-              '<a href="/edit/template/' + encodeURIComponent(item.id) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="single-template" data-api-url="delete/domain/template" data-item="' + encodeURIComponent(item.id) + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="/edit/template/' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="single-template" data-api-url="delete/domain/template" data-item="' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
             }
 
@@ -912,18 +912,18 @@ jQuery(function($){
             if (acl_data.login_as === 1) {
 
               item.action = '<div class="btn-group">' +
-              '<a href="/edit/mailbox/' + encodeURIComponent(item.username) + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="single-mailbox" data-api-url="delete/mailbox" data-item="' + encodeURIComponent(item.username) + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
-              '<a href="/index.php?duallogin=' + encodeURIComponent(item.username) + '" class="login_as btn btn-sm btn-xs-half btn-success"><i class="bi bi-person-fill"></i> Login</a>';
+              '<a href="/edit/mailbox/' + encodeURIComponent(item.username) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="single-mailbox" data-api-url="delete/mailbox" data-item="' + encodeURIComponent(item.username) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="/index.php?duallogin=' + encodeURIComponent(item.username) + '" class="login_as btn btn-sm btn-xs-lg btn-xs-half btn-success"><i class="bi bi-person-fill"></i> Login</a>';
               if (ALLOW_ADMIN_EMAIL_LOGIN) {
-                item.action += '<a href="/sogo-auth.php?login=' + encodeURIComponent(item.username) + '" class="login_as btn btn-sm btn-xs-half btn-primary" target="_blank"><i class="bi bi-envelope-fill"></i> SOGo</a>';
+                item.action += '<a href="/sogo-auth.php?login=' + encodeURIComponent(item.username) + '" class="login_as btn btn-sm btn-xs-lg btn-xs-half btn-primary" target="_blank"><i class="bi bi-envelope-fill"></i> SOGo</a>';
               }
               item.action += '</div>';
             }
             else {
             item.action = '<div class="btn-group">' +
-              '<a href="/edit/mailbox/' + encodeURIComponent(item.username) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="single-mailbox" data-api-url="delete/mailbox" data-item="' + encodeURIComponent(item.username) + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="/edit/mailbox/' + encodeURIComponent(item.username) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="single-mailbox" data-api-url="delete/mailbox" data-item="' + encodeURIComponent(item.username) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
             }
             item.in_use = {
@@ -1190,13 +1190,13 @@ jQuery(function($){
 
             if (item.template.toLowerCase() == "default"){
               item.action = '<div class="btn-group">' +
-                '<a href="/edit/template/' + encodeURIComponent(item.id) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+                '<a href="/edit/template/' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
                 '</div>';
             }
             else {
               item.action = '<div class="btn-group">' +
-                '<a href="/edit/template/' + encodeURIComponent(item.id) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-                '<a href="#" data-action="delete_selected" data-id="single-template" data-api-url="delete/mailbox/template" data-item="' + encodeURIComponent(item.id) + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+                '<a href="/edit/template/' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+                '<a href="#" data-action="delete_selected" data-id="single-template" data-api-url="delete/mailbox/template" data-item="' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
                 '</div>';
             }
 
@@ -1378,8 +1378,8 @@ jQuery(function($){
               item.multiple_bookings = '<span id="active-script" class="badge fs-6 bg-danger">' + lang.booking_custom_short + ' (' + item.multiple_bookings + ')</span>';
             }
             item.action = '<div class="btn-group">' +
-              '<a href="/edit/resource/' + encodeURIComponent(item.name) + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="single-resource" data-api-url="delete/resource" data-item="' + item.name + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="/edit/resource/' + encodeURIComponent(item.name) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="single-resource" data-api-url="delete/resource" data-item="' + item.name + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
             item.chkbox = '<input type="checkbox" class="form-check-input" data-id="resource" name="multi_select" value="' + encodeURIComponent(item.name) + '" />';
             item.name = escapeHtml(item.name);
@@ -1518,8 +1518,8 @@ jQuery(function($){
         dataSrc: function(json){
           $.each(json, function (i, item) {
             item.action = '<div class="btn-group">' +
-              '<a href="/edit/bcc/' + item.id + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="single-bcc" data-api-url="delete/bcc" data-item="' + item.id + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="/edit/bcc/' + item.id + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="single-bcc" data-api-url="delete/bcc" data-item="' + item.id + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
             item.chkbox = '<input type="checkbox" class="form-check-input" data-id="bcc" name="multi_select" value="' + item.id + '" />';
             item.local_dest = escapeHtml(item.local_dest);
@@ -1632,8 +1632,8 @@ jQuery(function($){
             item.recipient_map_old = escapeHtml(item.recipient_map_old);
             item.recipient_map_new = escapeHtml(item.recipient_map_new);
             item.action = '<div class="btn-group">' +
-              '<a href="/edit/recipient_map/' + item.id + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="single-recipient_map" data-api-url="delete/recipient_map" data-item="' + item.id + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="/edit/recipient_map/' + item.id + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="single-recipient_map" data-api-url="delete/recipient_map" data-item="' + item.id + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
             item.chkbox = '<input type="checkbox" class="form-check-input" data-id="recipient_map" name="multi_select" value="' + item.id + '" />';
           });
@@ -1734,8 +1734,8 @@ jQuery(function($){
               item.parameters = '<code>' + escapeHtml(item.parameters) + '</code>';
             }
             item.action = '<div class="btn-group">' +
-              '<a href="/edit/tls_policy_map/' + item.id + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="single-tls-policy-map" data-api-url="delete/tls-policy-map" data-item="' + item.id + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="/edit/tls_policy_map/' + item.id + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="single-tls-policy-map" data-api-url="delete/tls-policy-map" data-item="' + item.id + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
             item.chkbox = '<input type="checkbox" class="form-check-input" data-id="tls-policy-map" name="multi_select" value="' + item.id + '" />';
           });
@@ -1832,8 +1832,8 @@ jQuery(function($){
         dataSrc: function(json){
           $.each(json, function (i, item) {
             item.action = '<div class="btn-group">' +
-              '<a href="/edit/alias/' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="single-alias" data-api-url="delete/alias" data-item="' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="/edit/alias/' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="single-alias" data-api-url="delete/alias" data-item="' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
             item.chkbox = '<input type="checkbox" class="form-check-input" data-id="alias" name="multi_select" value="' + encodeURIComponent(item.id) + '" />';
             item.goto = escapeHtml(item.goto.replace(/,/g, " "));
@@ -1991,9 +1991,9 @@ jQuery(function($){
             item.alias_domain = escapeHtml(item.alias_domain);
 
             item.action = '<div class="btn-group">' +
-              '<a href="/edit/aliasdomain/' + encodeURIComponent(item.alias_domain) + '" class="btn btn-sm btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="single-alias-domain" data-api-url="delete/alias-domain" data-item="' + encodeURIComponent(item.alias_domain) + '" class="btn btn-sm btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
-              '<a href="#dnsInfoModal" class="btn btn-sm btn-xs-third btn-info" data-bs-toggle="modal" data-domain="' + encodeURIComponent(item.alias_domain) + '"><i class="bi bi-globe2"></i> DNS</a></div>' +
+              '<a href="/edit/aliasdomain/' + encodeURIComponent(item.alias_domain) + '" class="btn btn-sm btn-xs-lg btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="single-alias-domain" data-api-url="delete/alias-domain" data-item="' + encodeURIComponent(item.alias_domain) + '" class="btn btn-sm btn-xs-lg btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="#dnsInfoModal" class="btn btn-sm btn-xs-lg btn-xs-third btn-info" data-bs-toggle="modal" data-domain="' + encodeURIComponent(item.alias_domain) + '"><i class="bi bi-globe2"></i> DNS</a></div>' +
               '</div>';
             item.chkbox = '<input type="checkbox" class="form-check-input" data-id="alias-domain" name="multi_select" value="' + encodeURIComponent(item.alias_domain) + '" />';
             if(item.parent_is_backupmx == '1') {
@@ -2093,8 +2093,8 @@ jQuery(function($){
             }
             item.server_w_port = escapeHtml(item.user1) + '@' + escapeHtml(item.host1) + ':' + escapeHtml(item.port1);
             item.action = '<div class="btn-group">' +
-              '<a href="/edit/syncjob/' + item.id + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="single-syncjob" data-api-url="delete/syncjob" data-item="' + item.id + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="/edit/syncjob/' + item.id + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="single-syncjob" data-api-url="delete/syncjob" data-item="' + item.id + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
             item.chkbox = '<input type="checkbox" class="form-check-input" data-id="syncjob" name="multi_select" value="' + item.id + '" />';
             if (item.is_running == 1) {
@@ -2247,8 +2247,8 @@ jQuery(function($){
             item.script_data = '<pre class="text-break" style="margin:0px">' + escapeHtml(item.script_data) + '</pre>'
             item.filter_type = '<div class="badge fs-6 bg-secondary">' + item.filter_type.charAt(0).toUpperCase() + item.filter_type.slice(1).toLowerCase() + '</div>'
             item.action = '<div class="btn-group">' +
-              '<a href="/edit/filter/' + item.id + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="single-filter" data-api-url="delete/filter" data-item="' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="/edit/filter/' + item.id + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="single-filter" data-api-url="delete/filter" data-item="' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
             item.chkbox = '<input type="checkbox" class="form-check-input" data-id="filter_item" name="multi_select" value="' + item.id + '" />'
           });
diff --git a/data/web/templates/admin/tab-config-admins.twig b/data/web/templates/admin/tab-config-admins.twig
index b672b815..44342af4 100644
--- a/data/web/templates/admin/tab-config-admins.twig
+++ b/data/web/templates/admin/tab-config-admins.twig
@@ -122,8 +122,8 @@
                     </div>
                   </div>
                   <div class="row mb-4">
-                    <div class="offset-sm-2 col-sm-9">
-                      <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-item="cors" data-api-url="edit/cors" data-id="editcors" data-action="edit_selected" href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
+                    <div class="offset-sm-2 col-sm-9 d-grid d-sm-block">
+                      <button class="btn btn-sm btn-xs-lg btn-success" data-item="cors" data-api-url="edit/cors" data-id="editcors" data-action="edit_selected" href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
                     </div>
                   </div>
                 </form>
@@ -166,8 +166,8 @@
                   <div class="row mb-2">
                     <div class="offset-sm-3 col-sm-9">
                       <div class="btn-group">
-                        <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-success" name="admin_api[ro]" type="submit" href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
-                        <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary admin-ays-dialog" name="admin_api_regen_key[ro]" type="submit" href="#" {% if not api.ro.api_key %}disabled{% endif %}>{{ lang.admin.regen_api_key }}</button>
+                        <button class="btn btn-sm btn-xs-lg btn-xs-half d-block d-sm-inline btn-success" name="admin_api[ro]" type="submit" href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
+                        <button class="btn btn-sm btn-xs-lg btn-xs-half d-block d-sm-inline btn-secondary admin-ays-dialog" name="admin_api_regen_key[ro]" type="submit" href="#" {% if not api.ro.api_key %}disabled{% endif %}>{{ lang.admin.regen_api_key }}</button>
                       </div>
                     </div>
                   </div>
diff --git a/data/web/templates/admin/tab-config-f2b.twig b/data/web/templates/admin/tab-config-f2b.twig
index de4a7c63..a353f7fa 100644
--- a/data/web/templates/admin/tab-config-f2b.twig
+++ b/data/web/templates/admin/tab-config-f2b.twig
@@ -92,13 +92,14 @@
       {% endif %}
       {% for active_ban in f2b_data.active_bans %}
         <p>
-          <span class="badge fs-7 bg-info">
+          <span class="badge fs-7 bg-info d-block d-sm-inline-block">
             <i class="bi bi-funnel-fill"></i>
             <a href="https://bgp.he.net/ip/{{ active_ban.ip }}" target="_blank">
               {{ active_ban.network }}
             </a>
             ({{ active_ban.banned_until }})
-          </span> -
+          </span>
+          <span class="d-none d-sm-inline"> - </span>
             {% if active_ban.queued_for_unban == 0 %}
             <a data-action="edit_selected" data-item="{{ active_ban.network }}" data-id="f2b-quick" data-api-url='edit/fail2ban' data-api-attr='{"action":"unban"}' href="#">[{{ lang.admin.queue_unban }}]</a>
             <a data-action="edit_selected" data-item="{{ active_ban.network }}" data-id="f2b-quick" data-api-url='edit/fail2ban' data-api-attr='{"action":"whitelist"}' href="#">[whitelist]</a>
@@ -111,7 +112,7 @@
       <hr>
       {% for perm_ban in f2b_data.perm_bans %}
         <p>
-          <span class="badge fs-7 bg-danger">
+          <span class="badge fs-7 bg-danger d-block d-sm-inline-block">
             <i class="bi bi-funnel-fill"></i>
             <a href="https://bgp.he.net/ip/{{ perm_ban.ip }}" target="_blank">
               {{ perm_ban.network }}
diff --git a/data/web/templates/admin/tab-config-rsettings.twig b/data/web/templates/admin/tab-config-rsettings.twig
index 38b0d593..439e55a3 100644
--- a/data/web/templates/admin/tab-config-rsettings.twig
+++ b/data/web/templates/admin/tab-config-rsettings.twig
@@ -44,7 +44,7 @@
                   <p class="text-muted">{{ lang.admin.rsetting_no_selection }}</p>
                 </div>
                 {% for rsetting in rsettings %}
-                  <div id="settings_tab{{ rsetting.details.id }}" class="tab-pane">
+                  <div id="settings_tab{{ rsetting.details.id }}" class="tab-pane rsettings">
                     <form class="form" data-id="rsettings" role="form" method="post">
                       <input type="hidden" name="active" value="0">
                       <div>
@@ -60,8 +60,10 @@
                           <input type="checkbox" class="form-check-input" name="active" value="1" {% if rsetting.details.active %}checked{% endif %}> {{ lang.admin.active }}
                         </label>
                       </div>
-                      <button class="btn btn-sm btn-success" data-action="edit_selected" data-item="{{ rsetting.details.id }}" data-id="rsettings" data-api-url='edit/rsetting' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
-                      <button class="btn btn-sm btn-danger" data-action="delete_selected" data-item="{{ rsetting.details.id }}" data-id="rsettings" data-api-url="delete/rsetting" data-api-attr='{}' href="#">{{ lang.admin.remove }}</button>
+                      <div class="btn-group">
+                      <button class="btn btn-sm btn-xs-lg btn-success" data-action="edit_selected" data-item="{{ rsetting.details.id }}" data-id="rsettings" data-api-url='edit/rsetting' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
+                      <button class="btn btn-sm btn-xs-lg btn-danger" data-action="delete_selected" data-item="{{ rsetting.details.id }}" data-id="rsettings" data-api-url="delete/rsetting" data-api-attr='{}' href="#">{{ lang.admin.remove }}</button>
+                      </div>
                     </form>
                   </div>
                 {% endfor %}
diff --git a/data/web/templates/fido2.twig b/data/web/templates/fido2.twig
index c29cd8f2..6157aef7 100644
--- a/data/web/templates/fido2.twig
+++ b/data/web/templates/fido2.twig
@@ -15,10 +15,10 @@
         <form style="display:inline;" method="post">
           <input type="hidden" name="unset_fido2_key" value="{{ key_info.cid }}">
           <div class="btn-group">
-            <a href="#" class="btn btn-xs btn-secondary" data-cid="{{ key_info.cid }}" data-subject="{{ key_info.subject|base64_encode }}" data-bs-toggle="modal" data-bs-target="#fido2ChangeFn">
+            <a href="#" class="btn btn-sm btn-xs-lg btn-secondary" data-cid="{{ key_info.cid }}" data-subject="{{ key_info.subject|base64_encode }}" data-bs-toggle="modal" data-bs-target="#fido2ChangeFn">
               <i class="bi bi-pencil-fill"></i> {{ lang.fido2.rename }}
             </a>
-            <a href="#" onClick='return confirm("{{ lang.admin.ays }}")?$(this).closest("form").submit():"";' class="btn btn-xs btn-danger">
+            <a href="#" onClick='return confirm("{{ lang.admin.ays }}")?$(this).closest("form").submit():"";' class="btn btn-sm btn-xs-lg btn-danger">
               <i class="bi bi-trash"></i> {{ lang.admin.remove }}
             </a>
           </div>
diff --git a/data/web/templates/index.twig b/data/web/templates/index.twig
index 45054b5f..99c6073e 100644
--- a/data/web/templates/index.twig
+++ b/data/web/templates/index.twig
@@ -37,11 +37,14 @@
               <input name="pass_user" type="password" id="pass_user" class="form-control" placeholder="{{ lang.login.password }}" required="" autocomplete="current-password">
             </div>
           </div>
-          <div class="d-flex mt-4" style="position: relative">
-            <button type="submit" class="btn btn-xs-lg btn-success" value="Login">{{ lang.login.login }}</button>
-            <button type="button" class="btn btn-xs-lg btn-success ms-2" id="fido2-login"><i class="bi bi-shield-fill-check"></i> {{ lang.login.fido2_webauthn }}</button>
+          <div class="d-flex justify-content-between mt-4" style="position: relative">
+            <div class="d-grid gap-2 d-sm-block">
+              <button type="submit" class="btn btn-xs-lg btn-success" value="Login">{{ lang.login.login }}</button>
+              <button type="button" class="btn btn-xs-lg btn-success" id="fido2-login"><i class="bi bi-shield-fill-check"></i> {{ lang.login.fido2_webauthn }}</button>
+            </div>
             {% if not oauth2_request %}
-            <button type="button" {% if available_languages|length == 1 %}disabled="true"{% endif %} class="btn btn-xs-lg btn-secondary ms-auto dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <div class="d-grid d-sm-block">
+            <button type="button" {% if available_languages|length == 1 %}disabled="true"{% endif %} class="btn btn-secondary ms-auto dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <span class="flag-icon flag-icon-{{ mailcow_locale[-2:] }}"></span>
             </button>
             <ul class="dropdown-menu ms-auto login">
@@ -53,6 +56,7 @@
                 </li>
               {% endfor %}
             </ul>
+            </div>
             {% endif %}
           </div>
         </form>
@@ -62,19 +66,15 @@
         <div class="my-4" id="fido2-alerts"></div>
         {% if not oauth2_request and (mailcow_apps or app_links) %}
         <legend><i class="bi bi-link-45deg"></i> {{ ui_texts.apps_name|raw }}</legend><hr />
-        <div class="my-2 d-flex flex-wrap apps">
+        <div class="my-2 d-grid gap-2 d-sm-block apps">
           {% for app in mailcow_apps %}
             {% if not skip_sogo or not is_uri('SOGo', app.link) %}
-            <div class="m-2">
-              <a href="{{ app.link }}" role="button" {% if app.description %}title="{{ app.description }}"{% endif %} class="btn btn-primary btn-block">{{ app.name }}</a>
-            </div>
-          {% endif %}
+              <a href="{{ app.link }}" role="button" {% if app.description %}title="{{ app.description }}"{% endif %} class="btn btn-primary">{{ app.name }}</a>
+            {% endif %}
           {% endfor %}
           {% for row in app_links %}
             {% for key, val in row %}
-              <div class="m-2">
-                <a href="{{ val }}" role="button" class="btn btn-primary btn-block">{{ key }}</a>
-              </div>
+              <a href="{{ val }}" role="button" class="btn btn-primary">{{ key }}</a>
             {% endfor %}
           {% endfor %}
         </div>
diff --git a/data/web/templates/mailbox/tab-bcc.twig b/data/web/templates/mailbox/tab-bcc.twig
index 25844e48..eedb04b2 100644
--- a/data/web/templates/mailbox/tab-bcc.twig
+++ b/data/web/templates/mailbox/tab-bcc.twig
@@ -11,7 +11,7 @@
       </div>
     </div>
     <div id="collapse-tab-bcc" class="card-body collapse" data-bs-parent="#mail-content">
-      <div class="mass-actions-mailbox mb-4">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group" data-acl="{{ acl.bcc_maps }}">
           <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="bcc" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
           <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
@@ -34,8 +34,8 @@
       <table id="bcc_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox mt-4">
         <div class="btn-group" data-acl="{{ acl.bcc_maps }}">
-          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="bcc" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="bcc" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" data-action="edit_selected" data-id="bcc" data-api-url='edit/bcc' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
             <li><a class="dropdown-item" data-action="edit_selected" data-id="bcc" data-api-url='edit/bcc' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
@@ -48,7 +48,7 @@
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-expand="bcc_table">{{ lang.datatables.expand_all }}</a></li>
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-collapse="bcc_table">{{ lang.datatables.collapse_all }}</a></li>
           </ul>
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addBCCModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_bcc_entry }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addBCCModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_bcc_entry }}</a>
         </div>
       </div>
     </div>
@@ -65,7 +65,7 @@
       </div>
     </div>
     <div id="collapse-tab-bcc-filters" class="card-body collapse" data-bs-parent="#mail-content">
-      <div class="mass-actions-mailbox mb-4">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group">
           <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="recipient_map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
           <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
@@ -85,8 +85,8 @@
       <table id="recipient_map_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox mt-4">
         <div class="btn-group">
-          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="recipient_map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="recipient_map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" data-action="edit_selected" data-id="recipient_map" data-api-url='edit/recipient_map' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
             <li><a class="dropdown-item" data-action="edit_selected" data-id="recipient_map" data-api-url='edit/recipient_map' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
@@ -96,7 +96,7 @@
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-expand="recipient_map_table">{{ lang.datatables.expand_all }}</a></li>
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-collapse="recipient_map_table">{{ lang.datatables.collapse_all }}</a></li>
           </ul>
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addRecipientMapModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_recipient_map_entry }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addRecipientMapModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_recipient_map_entry }}</a>
         </div>
       </div>
     </div>
diff --git a/data/web/templates/mailbox/tab-domain-aliases.twig b/data/web/templates/mailbox/tab-domain-aliases.twig
index 6cefd093..4bbfbbe5 100644
--- a/data/web/templates/mailbox/tab-domain-aliases.twig
+++ b/data/web/templates/mailbox/tab-domain-aliases.twig
@@ -11,7 +11,7 @@
       </div>
     </div>
     <div id="collapse-tab-domain-aliases" class="card-body collapse" data-bs-parent="#mail-content">
-      <div class="mass-actions-mailbox mb-4">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group">
           <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="alias-domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
           <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
@@ -30,8 +30,8 @@
       <table id="aliasdomain_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox mt-4">
         <div class="btn-group">
-          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="alias-domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="alias-domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" data-action="edit_selected" data-id="alias-domain" data-api-url='edit/alias-domain' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
             <li><a class="dropdown-item" data-action="edit_selected" data-id="alias-domain" data-api-url='edit/alias-domain' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
@@ -41,7 +41,7 @@
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-expand="aliasdomain_table">{{ lang.datatables.expand_all }}</a></li>
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-collapse="aliasdomain_table">{{ lang.datatables.collapse_all }}</a></li>
           </ul>
-          <a class="btn btn-sm btn-success" href="#" data-acl="{{ acl.alias_domains }}" data-bs-toggle="modal" data-bs-target="#addAliasDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain_alias }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-success" href="#" data-acl="{{ acl.alias_domains }}" data-bs-toggle="modal" data-bs-target="#addAliasDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain_alias }}</a>
         </div>
       </div>
     </div>
diff --git a/data/web/templates/mailbox/tab-domains.twig b/data/web/templates/mailbox/tab-domains.twig
index 8b2d61b7..49cb89b6 100644
--- a/data/web/templates/mailbox/tab-domains.twig
+++ b/data/web/templates/mailbox/tab-domains.twig
@@ -12,7 +12,7 @@
     </div>
     <div id="collapse-tab-domains" class="card-body collapse show" data-bs-parent="#mail-content">
       {#<div class="mass-actions-mailbox" data-actions-header="true"></div>#}      
-      <div class="mass-actions-mailbox mb-4">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group">
           <button class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
           <button class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
@@ -35,8 +35,8 @@
       <table id="domain_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox mt-4">
         <div class="btn-group">
-          <button class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
-          <button class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
+          <button class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
+          <button class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
           <ul class="dropdown-menu">
             {% if mailcow_cc_role == 'admin' %}
               <li><a class="dropdown-item" data-action="edit_selected" data-id="domain" data-api-url='edit/domain' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
@@ -49,7 +49,7 @@
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-collapse="domain_table">{{ lang.datatables.collapse_all }}</a></li>
           </ul>
           {% if mailcow_cc_role == 'admin' %}
-            <button class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain }}</button>
+            <button class="btn btn-sm btn-xs-lg btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain }}</button>
           {% endif %}
         </div>
       </div>
diff --git a/data/web/templates/mailbox/tab-filters.twig b/data/web/templates/mailbox/tab-filters.twig
index 203d3911..8ccff27a 100644
--- a/data/web/templates/mailbox/tab-filters.twig
+++ b/data/web/templates/mailbox/tab-filters.twig
@@ -11,7 +11,7 @@
       </div>
     </div>
     <div id="collapse-tab-filters" class="card-body collapse" data-bs-parent="#mail-content">
-      <div class="mass-actions-mailbox mb-4">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group" data-acl="{{ acl.filters }}">
           <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="filter_item" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
           <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
@@ -34,8 +34,8 @@
       <table id="filter_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox mt-4 mb-4">
         <div class="btn-group" data-acl="{{ acl.filters }}">
-          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="filter_item" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="filter_item" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
             <li><a class="dropdown-item" data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
@@ -48,7 +48,7 @@
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-expand="filter_table">{{ lang.datatables.expand_all }}</a></li>
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-collapse="filter_table">{{ lang.datatables.collapse_all }}</a></li>
           </ul>
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addFilterModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_filter }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addFilterModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_filter }}</a>
         </div>
       </div>
       <div class="{% if mailcow_cc_role != 'admin' %}hidden{% endif %}">
@@ -64,8 +64,8 @@
               <div class="row mt-2">
                 <div class="col-sm-10 add_filter_btns">
                   <div class="btn-group">
-                    <button class="btn btn-sm btn-xs-half btn-secondary validate_sieve" href="#">{{ lang.add.validate }}</button>
-                    <button class="btn btn-sm btn-xs-half btn-success add_sieve_script" data-action="add_item" data-id="add_prefilter" data-api-url='add/global-filter' data-api-attr='{"filter_type":"prefilter"}' href="#" disabled><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
+                    <button class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary validate_sieve" href="#">{{ lang.add.validate }}</button>
+                    <button class="btn btn-sm btn-xs-lg btn-xs-half btn-success add_sieve_script" data-action="add_item" data-id="add_prefilter" data-api-url='add/global-filter' data-api-attr='{"filter_type":"prefilter"}' href="#" disabled><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
                   </div>
                 </div>
               </div>
@@ -82,8 +82,8 @@
               <div class="row mt-2">
                 <div class="col-sm-10 add_filter_btns">
                   <div class="btn-group">
-                    <button class="btn btn-sm btn-xs-half btn-secondary validate_sieve" href="#">{{ lang.add.validate }}</button>
-                    <button class="btn btn-sm btn-xs-half btn-success add_sieve_script" data-action="add_item" data-id="add_postfilter" data-api-url='add/global-filter' data-api-attr='{"filter_type":"postfilter"}' href="#" disabled><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
+                    <button class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary validate_sieve" href="#">{{ lang.add.validate }}</button>
+                    <button class="btn btn-sm btn-xs-lg btn-xs-half btn-success add_sieve_script" data-action="add_item" data-id="add_postfilter" data-api-url='add/global-filter' data-api-attr='{"filter_type":"postfilter"}' href="#" disabled><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
                   </div>
                 </div>
               </div>
diff --git a/data/web/templates/mailbox/tab-mailboxes.twig b/data/web/templates/mailbox/tab-mailboxes.twig
index 9b827989..fce7d627 100644
--- a/data/web/templates/mailbox/tab-mailboxes.twig
+++ b/data/web/templates/mailbox/tab-mailboxes.twig
@@ -11,7 +11,7 @@
       </div>
     </div>
     <div id="collapse-tab-mailboxes" class="card-body collapse" data-bs-parent="#mail-content">
-      <div class="mass-actions-mailbox mb-4">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group d-flex d-lg-none">
           <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
           <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
@@ -128,8 +128,8 @@
       <table id="mailbox_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox mt-4">
         <div class="btn-group d-flex d-lg-none">
-          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu">
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-expand="mailbox_table">{{ lang.datatables.expand_all }}</a></li>
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-collapse="mailbox_table">{{ lang.datatables.collapse_all }}</a></li>
@@ -173,7 +173,7 @@
             <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"sieve_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
             <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"sieve_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
           </ul>
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addMailboxModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_mailbox }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addMailboxModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_mailbox }}</a>
         </div>
         <div class="btn-group d-none d-lg-flex">
           <a class="btn btn-sm btn-secondary" id="toggle_multi_select_all" data-id="mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
diff --git a/data/web/templates/mailbox/tab-mbox-aliases.twig b/data/web/templates/mailbox/tab-mbox-aliases.twig
index 7035ac21..02b5b6d0 100644
--- a/data/web/templates/mailbox/tab-mbox-aliases.twig
+++ b/data/web/templates/mailbox/tab-mbox-aliases.twig
@@ -11,7 +11,7 @@
       </div>
     </div>
     <div id="collapse-tab-mbox-aliases" class="card-body collapse" data-bs-parent="#mail-content">
-      <div class="mass-actions-mailbox mb-4">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group">
           <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="alias" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
           <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
@@ -37,8 +37,8 @@
       <table id="alias_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox mt-4">
         <div class="btn-group">
-          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="alias" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="alias" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu top33">
             <li><a class="dropdown-item" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
             <li><a class="dropdown-item" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
@@ -53,8 +53,8 @@
             <li><a class="dropdown-item" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"sogo_visible":"0"}' href="#">{{ lang.mailbox.sogo_visible_n }}</a></li>
             {% endif %}
           </ul>
-          <a class="btn btn-sm btn-secondary" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"expand_alias":true}' ><i class="bi bi-arrows-angle-expand"></i> {{ lang.mailbox.add_alias_expand }}</a>
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addAliasModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_alias }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-secondary" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"expand_alias":true}' ><i class="bi bi-arrows-angle-expand"></i> {{ lang.mailbox.add_alias_expand }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addAliasModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_alias }}</a>
         </div>
       </div>
     </div>
diff --git a/data/web/templates/mailbox/tab-resources.twig b/data/web/templates/mailbox/tab-resources.twig
index b23231f2..34728eda 100644
--- a/data/web/templates/mailbox/tab-resources.twig
+++ b/data/web/templates/mailbox/tab-resources.twig
@@ -11,7 +11,7 @@
       </div>
     </div>
     <div id="collapse-tab-resources" class="card-body collapse" data-bs-parent="#mail-content">      
-      <div class="mass-actions-mailbox mb-4">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group">
           <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="resource" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
           <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
@@ -34,8 +34,8 @@
       <table id="resource_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox mt-4">
         <div class="btn-group">
-          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="resource" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="resource" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" data-action="edit_selected" data-id="resource" data-api-url='edit/resource' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
             <li><a class="dropdown-item" data-action="edit_selected" data-id="resource" data-api-url='edit/resource' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
@@ -45,7 +45,7 @@
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-expand="resource_table">{{ lang.datatables.expand_all }}</a></li>
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-collapse="resource_table">{{ lang.datatables.collapse_all }}</a></li>
           </ul>
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addResourceModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_resource }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addResourceModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_resource }}</a>
         </div>
       </div>
     </div>
diff --git a/data/web/templates/mailbox/tab-syncjobs.twig b/data/web/templates/mailbox/tab-syncjobs.twig
index d634d40b..bfd8eefb 100644
--- a/data/web/templates/mailbox/tab-syncjobs.twig
+++ b/data/web/templates/mailbox/tab-syncjobs.twig
@@ -11,7 +11,7 @@
       </div>
     </div>
     <div id="collapse-tab-syncjobs" class="card-body collapse" data-bs-parent="#mail-content">
-      <div class="mass-actions-mailbox mb-4">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group" data-acl="{{ acl.syncjobs }}">
           <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="syncjob" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
           <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
@@ -32,8 +32,8 @@
       <table id="sync_job_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox mt-4">
         <div class="btn-group" data-acl="{{ acl.syncjobs }}">
-          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="syncjob" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="syncjob" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" data-action="edit_selected" data-id="syncjob" data-api-url='edit/syncjob' data-api-attr='{"last_run":"","success":""}' href="#">{{ lang.mailbox.last_run_reset }}</a></li>
             <li><hr class="dropdown-divider"></li>
@@ -45,7 +45,7 @@
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-expand="sync_job_table">{{ lang.datatables.expand_all }}</a></li>
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-collapse="sync_job_table">{{ lang.datatables.collapse_all }}</a></li>
           </ul>
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addSyncJobModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.user.create_syncjob }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addSyncJobModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.user.create_syncjob }}</a>
         </div>
       </div>
     </div>
diff --git a/data/web/templates/mailbox/tab-templates-domains.twig b/data/web/templates/mailbox/tab-templates-domains.twig
index c339aaf0..f3c6a678 100644
--- a/data/web/templates/mailbox/tab-templates-domains.twig
+++ b/data/web/templates/mailbox/tab-templates-domains.twig
@@ -1,4 +1,4 @@
-<div class="tab-pane fade show" id="tab-templates-domains" role="tabpanel" aria-labelledby="tab-templates-domains">
+<div class="tab-pane fade" id="tab-templates-domains" role="tabpanel" aria-labelledby="tab-templates-domains">
   <div class="card mb-4">
     <div class="card-header d-flex fs-5">
       <button class="btn d-sm-block d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-templates-domains" data-bs-toggle="collapse" aria-controls="collapse-tab-templates-domains">
@@ -10,8 +10,8 @@
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_templates_domain_table" data-table="templates_domain_table">{{ lang.admin.refresh }}</button>
       </div>
     </div>
-    <div id="collapse-tab-templates-domains" class="card-body collapse show" data-bs-parent="#mail-content">  
-      <div class="mass-actions-mailbox mb-4">
+    <div id="collapse-tab-templates-domains" class="card-body collapse" data-bs-parent="#mail-content">  
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group">
           <button class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="domain_template" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
           <button class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
@@ -31,8 +31,8 @@
       <table id="templates_domain_table" class="table table-striped dt-responsive w-100"></table>  
       <div class="mass-actions-mailbox mt-4">
         <div class="btn-group">
-          <button class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="domain_template" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
-          <button class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
+          <button class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="domain_template" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
+          <button class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
           <ul class="dropdown-menu">
             {% if mailcow_cc_role == 'admin' %}
               <li><a class="dropdown-item" data-action="delete_selected" data-id="domain_template" data-api-url='delete/domain/template' href="#">{{ lang.mailbox.remove }}</a></li>
@@ -42,7 +42,7 @@
             {% endif %}
           </ul>
           {% if mailcow_cc_role == 'admin' %}
-          <button class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</button>
+          <button class="btn btn-sm btn-xs-lg btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</button>
           {% endif %}
         </div>
       </div>
diff --git a/data/web/templates/mailbox/tab-templates-mbox.twig b/data/web/templates/mailbox/tab-templates-mbox.twig
index 631394bb..71edb9d3 100644
--- a/data/web/templates/mailbox/tab-templates-mbox.twig
+++ b/data/web/templates/mailbox/tab-templates-mbox.twig
@@ -1,4 +1,4 @@
-<div class="tab-pane fade show" id="tab-templates-mbox" role="tabpanel" aria-labelledby="tab-templates-mbox">
+<div class="tab-pane fade" id="tab-templates-mbox" role="tabpanel" aria-labelledby="tab-templates-mbox">
   <div class="card mb-4">
     <div class="card-header d-flex fs-5">
       <button class="btn d-sm-block d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-templates-mbox" data-bs-toggle="collapse" aria-controls="collapse-tab-templates-mbox">
@@ -10,8 +10,8 @@
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_templates_mbox_table" data-table="templates_mbox_table">{{ lang.admin.refresh }}</button>
       </div>
     </div>
-    <div id="collapse-tab-templates-mbox" class="card-body collapse show" data-bs-parent="#mail-content">
-      <div class="mass-actions-mailbox mb-4">
+    <div id="collapse-tab-templates-mbox" class="card-body collapse" data-bs-parent="#mail-content">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group">
           <button class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="mailbox_template" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
           <button class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
@@ -31,8 +31,8 @@
       <table id="templates_mbox_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox mt-4">
         <div class="btn-group">
-          <button class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="mailbox_template" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
-          <button class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
+          <button class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="mailbox_template" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
+          <button class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
           <ul class="dropdown-menu">
             {% if mailcow_cc_role == 'admin' %}
               <li><a class="dropdown-item" data-action="delete_selected" data-id="mailbox_template" data-api-url='delete/mailbox/template' href="#">{{ lang.mailbox.remove }}</a></li>
@@ -42,7 +42,7 @@
             {% endif %}
           </ul>
           {% if mailcow_cc_role == 'admin' %}
-          <button class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#addMailboxTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</button>
+          <button class="btn btn-sm btn-xs-lg btn-success" data-bs-toggle="modal" data-bs-target="#addMailboxTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</button>
           {% endif %}
         </div>
       </div>
diff --git a/data/web/templates/mailbox/tab-tls-policy.twig b/data/web/templates/mailbox/tab-tls-policy.twig
index 64bce55f..3195b754 100644
--- a/data/web/templates/mailbox/tab-tls-policy.twig
+++ b/data/web/templates/mailbox/tab-tls-policy.twig
@@ -11,7 +11,7 @@
       </div>
     </div>
     <div id="collapse-tab-tls-policy" class="card-body collapse" data-bs-parent="#mail-content">
-      <div class="mass-actions-mailbox mb-4">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group">
           <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="tls-policy-map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
           <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
@@ -31,8 +31,8 @@
       <table id="tls_policy_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox mt-4">
         <div class="btn-group">
-          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="tls-policy-map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="tls-policy-map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" data-action="edit_selected" data-id="tls-policy-map" data-api-url='edit/tls-policy-map' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
             <li><a class="dropdown-item" data-action="edit_selected" data-id="tls-policy-map" data-api-url='edit/tls-policy-map' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
@@ -42,7 +42,7 @@
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-expand="tls_policy_table">{{ lang.datatables.expand_all }}</a></li>
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-collapse="tls_policy_table">{{ lang.datatables.collapse_all }}</a></li>
           </ul>
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addTLSPolicyMapAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_tls_policy_map }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addTLSPolicyMapAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_tls_policy_map }}</a>
         </div>
       </div>
     </div>

From d0ba061f7a79119ec2b191772ce8f0ab14af22e5 Mon Sep 17 00:00:00 2001
From: Kristian Feldsam <feldsam@gmail.com>
Date: Sun, 3 Sep 2023 18:35:24 +0200
Subject: [PATCH 12/14] [Web] mobile devices - scroll window to opened tab

This feature was in versions before BS5

Signed-off-by: Kristian Feldsam <feldsam@gmail.com>
---
 data/web/js/build/013-mailcow.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/data/web/js/build/013-mailcow.js b/data/web/js/build/013-mailcow.js
index 6291c8b4..ead4934e 100644
--- a/data/web/js/build/013-mailcow.js
+++ b/data/web/js/build/013-mailcow.js
@@ -125,6 +125,17 @@ $(document).ready(function() {
         }
       });
   })();
+  
+  // responsive tabs, scroll to opened tab
+  $(document).on("shown.bs.collapse shown.bs.tab", function (e) {
+	  var target = $(e.target);
+	  if($(window).width() <= 767) {
+		  var offset = target.offset().top - 60;
+		  $("html, body").stop().animate({
+		    scrollTop: offset
+		  }, 100);
+	  }
+  });
 
   // IE fix to hide scrollbars when table body is empty
   $('tbody').filter(function (index) {

From db9562e84375c3b1343f9cc773bdf3185383e9ff Mon Sep 17 00:00:00 2001
From: Kristian Feldsam <feldsam@gmail.com>
Date: Sun, 3 Sep 2023 19:05:16 +0200
Subject: [PATCH 13/14] [Web] mailboxes - remove tab dropdown, if not admin

there are no domain and mailbox templates available, so no need to have dropdown in tabs

Signed-off-by: Kristian Feldsam <feldsam@gmail.com>
---
 data/web/templates/mailbox.twig | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/data/web/templates/mailbox.twig b/data/web/templates/mailbox.twig
index 2f0a12bf..b61896d7 100644
--- a/data/web/templates/mailbox.twig
+++ b/data/web/templates/mailbox.twig
@@ -3,20 +3,28 @@
 {% block content %}
 <div id="mail-content" class="responsive-tabs">
   <ul class="nav nav-tabs" role="tablist">
+    {% if mailcow_cc_role == 'admin' %}
     <li class="nav-item dropdown" role="presentation">
       <a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.domains }}</a>
       <ul class="dropdown-menu">
         <li><button class="dropdown-item" aria-selected="false" aria-controls="tab-domains" role="tab" data-bs-toggle="tab" data-bs-target="#tab-domains">{{ lang.mailbox.domains }}</button></li>
-        <li><button class="dropdown-item {% if mailcow_cc_role != 'admin' %} d-none{% endif %}" aria-selected="false" aria-controls="tab-templates-domains" role="tab" data-bs-toggle="tab" data-bs-target="#tab-templates-domains">{{ lang.mailbox.templates }}</button></li>
+        <li><button class="dropdown-item" aria-selected="false" aria-controls="tab-templates-domains" role="tab" data-bs-toggle="tab" data-bs-target="#tab-templates-domains">{{ lang.mailbox.templates }}</button></li>
       </ul>
     </li>
+    {% else %}
+    <li class="nav-item" role="presentation"><button class="nav-link" aria-controls="tab-domains" role="tab" data-bs-toggle="tab" data-bs-target="#tab-domains">{{ lang.mailbox.domains }}</button></li>
+    {% endif %}
+    {% if mailcow_cc_role == 'admin' %}
     <li class="nav-item dropdown" role="presentation">
       <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.mailboxes }}</a>
       <ul class="dropdown-menu">
         <li><button class="dropdown-item" aria-selected="false" aria-controls="tab-mailboxes" role="tab" data-bs-toggle="tab" data-bs-target="#tab-mailboxes">{{ lang.mailbox.mailboxes }}</button></li>
-        <li><button class="dropdown-item {% if mailcow_cc_role != 'admin' %} d-none{% endif %}" aria-selected="false" aria-controls="tab-templates-mbox" role="tab" data-bs-toggle="tab" data-bs-target="#tab-templates-mbox">{{ lang.mailbox.templates }}</button></li>
+        <li><button class="dropdown-item" aria-selected="false" aria-controls="tab-templates-mbox" role="tab" data-bs-toggle="tab" data-bs-target="#tab-templates-mbox">{{ lang.mailbox.templates }}</button></li>
       </ul>
     </li>
+    {% else %}
+    <li class="nav-item" role="presentation"><button class="nav-link" aria-controls="tab-mailboxes" role="tab" data-bs-toggle="tab" data-bs-target="#tab-mailboxes">{{ lang.mailbox.mailboxes }}</button></li>
+    {% endif %}
     <li class="nav-item" role="presentation"><button class="nav-link" aria-controls="tab-resources" role="tab" data-bs-toggle="tab" data-bs-target="#tab-resources">{{ lang.mailbox.resources }}</button></li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.aliases }}</a>
@@ -35,9 +43,13 @@
     <div class="col-md-12">
       <div class="tab-content" style="padding-top:20px">
         {% include 'mailbox/tab-domains.twig' %}
+        {% if mailcow_cc_role == 'admin' %}
         {% include 'mailbox/tab-templates-domains.twig' %}
+        {% endif %}
         {% include 'mailbox/tab-mailboxes.twig' %}
+        {% if mailcow_cc_role == 'admin' %}
         {% include 'mailbox/tab-templates-mbox.twig' %}
+        {% endif %}
         {% include 'mailbox/tab-resources.twig' %}
         {% include 'mailbox/tab-domain-aliases.twig' %}
         {% include 'mailbox/tab-mbox-aliases.twig' %}

From 9ffa8100548451597d680b623dfd61dbd6fae474 Mon Sep 17 00:00:00 2001
From: Kristian Feldsam <feldsam@gmail.com>
Date: Sun, 3 Sep 2023 19:41:06 +0200
Subject: [PATCH 14/14] [Web] Edit Domain/Mailbox - added collapsible tabs for
 mobile devices

Signed-off-by: Kristian Feldsam <feldsam@gmail.com>
---
 data/web/templates/edit/domain.twig  | 478 +++++++++-------
 data/web/templates/edit/mailbox.twig | 820 ++++++++++++++-------------
 2 files changed, 687 insertions(+), 611 deletions(-)

diff --git a/data/web/templates/edit/domain.twig b/data/web/templates/edit/domain.twig
index 3da44b5c..9b3ee6ef 100644
--- a/data/web/templates/edit/domain.twig
+++ b/data/web/templates/edit/domain.twig
@@ -2,235 +2,273 @@
 
 {% block inner_content %}
 {% if result %}
-<ul class="nav nav-tabs" role="tablist">
-  <li role="presentation" class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#dedit">{{ lang.edit.domain }}</button></li>
-  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#dratelimit">{{ lang.edit.ratelimit }}</button></li>
-  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#dspamfilter">{{ lang.edit.spam_filter }}</button></li>
-  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#dqwbcc">{{ lang.edit.quota_warning_bcc }}</button></li>
-</ul>
-<hr>
-<div class="tab-content">
-  <div id="dedit" class="tab-pane fade show active" role="tabpanel" aria-labelledby="domain-edit">
-    <form data-id="editdomain" class="form-horizontal" role="form" method="post">
-      <input type="hidden" value="0" name="active">
-      <input type="hidden" value="0" name="backupmx">
-      <input type="hidden" value="0" name="gal">
-      <input type="hidden" value="0" name="relay_all_recipients">
-      <input type="hidden" value="0" name="relay_unknown_only">
-      <div class="row mb-2" data-acl="{{ acl.domain_desc }}">
-        <label class="control-label col-sm-2" for="description">{{ lang.edit.description }}</label>
-        <div class="col-sm-10">
-          <input type="text" class="form-control" name="description" value="{{ result.description }}">
+<div id="domain-content" class="responsive-tabs">
+    <ul class="nav nav-tabs" role="tablist">
+      <li role="presentation" class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#dedit">{{ lang.edit.domain }}</button></li>
+      <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#dratelimit">{{ lang.edit.ratelimit }}</button></li>
+      <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#dspamfilter">{{ lang.edit.spam_filter }}</button></li>
+      <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#dqwbcc">{{ lang.edit.quota_warning_bcc }}</button></li>
+    </ul>
+    <hr class="d-none d-md-block">
+    <div class="tab-content">
+      <div id="dedit" class="tab-pane fade show active" role="tabpanel" aria-labelledby="domain-edit">
+        <div class="card mb-4">
+            <div class="card-header d-flex d-md-none fs-5">
+              <button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-dedit" data-bs-toggle="collapse" aria-controls="collapse-tab-dedit">
+                {{ lang.edit.domain }} <span class="badge bg-info table-lines"></span>
+              </button>
+            </div>
+            <div id="collapse-tab-dedit" class="card-body collapse show" data-bs-parent="#domain-content">
+                <form data-id="editdomain" class="form-horizontal" role="form" method="post">
+                  <input type="hidden" value="0" name="active">
+                  <input type="hidden" value="0" name="backupmx">
+                  <input type="hidden" value="0" name="gal">
+                  <input type="hidden" value="0" name="relay_all_recipients">
+                  <input type="hidden" value="0" name="relay_unknown_only">
+                  <div class="row mb-2" data-acl="{{ acl.domain_desc }}">
+                    <label class="control-label col-sm-2" for="description">{{ lang.edit.description }}</label>
+                    <div class="col-sm-10">
+                      <input type="text" class="form-control" name="description" value="{{ result.description }}">
+                    </div>
+                  </div>
+                  <div class="row mb-4">
+                    <label class="control-label col-sm-2">{{ lang.add.tags }}</label>
+                    <div class="col-sm-10">
+                      <div class="form-control tag-box">
+                        {% for tag in domain_details.tags %}
+                          <span data-action='delete_selected' data-item="{{ tag|url_encode }}" data-id="domain_tag_{{ tag }}" data-api-url='delete/domain/tag/{{ domain }}' class="badge bg-primary tag-badge btn-badge">
+                            <i class="bi bi-tag-fill"></i>
+                            {{ tag }}
+                          </span>
+                        {% endfor %}
+                        <input type="text" class="tag-input">
+                        <span class="btn tag-add"><i class="bi bi-plus-lg"></i></span>
+                        <input type="hidden" value="" name="tags" class="tag-values" />
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row mb-2">
+                    <label class="control-label col-sm-2" for="relayhost">{{ lang.edit.relayhost }}</label>
+                    <div class="col-sm-10">
+                      <select data-acl="{{ acl.domain_relayhost }}" data-live-search="true" id="relayhost" name="relayhost" class="form-control">
+                        {% for rlyhost in rlyhosts %}
+                          <option
+                            style="{% if rlyhost.active != '1' %}background: #ff4136; color: #fff{% endif %}"
+                            {% if result.relayhost == rlyhost.id %} selected{% endif %}
+                            value="{{ rlyhost.id }}">
+                            ID {{ rlyhost.id }}: {{ rlyhost.hostname }} ({{ rlyhost.username }})
+                          </option>
+                        {% endfor %}
+                        <option value=""{% if not result.relayhost %} selected{% endif %}>
+                          {{ lang.edit.none_inherit }}
+                        </option>
+                      </select>
+                    </div>
+                  </div>
+                  {% if mailcow_cc_role == 'admin' %}
+                  <div class="row mb-2">
+                    <label class="control-label col-sm-2" for="aliases">{{ lang.edit.max_aliases }}</label>
+                    <div class="col-sm-10">
+                      <input type="number" class="form-control" name="aliases" value="{{ result.max_num_aliases_for_domain }}">
+                    </div>
+                  </div>
+                  <div class="row mb-2">
+                    <label class="control-label col-sm-2" for="mailboxes">{{ lang.edit.max_mailboxes }}</label>
+                    <div class="col-sm-10">
+                      <input type="number" class="form-control" name="mailboxes" value="{{ result.max_num_mboxes_for_domain }}">
+                    </div>
+                  </div>
+                  <div class="row mb-2">
+                    <label class="control-label col-sm-2" for="defquota">{{ lang.edit.mailbox_quota_def }}</label>
+                    <div class="col-sm-10">
+                      <input type="number" class="form-control" name="defquota" value="{{ (result.def_quota_for_mbox / 1048576) }}">
+                    </div>
+                  </div>
+                  <div class="row mb-2">
+                    <label class="control-label col-sm-2" for="maxquota">{{ lang.edit.max_quota }}</label>
+                    <div class="col-sm-10">
+                      <input type="number" class="form-control" name="maxquota" value="{{ (result.max_quota_for_mbox / 1048576) }}">
+                    </div>
+                  </div>
+                  <div class="row mb-4">
+                    <label class="control-label col-sm-2" for="quota">{{ lang.edit.domain_quota }}</label>
+                    <div class="col-sm-10">
+                      <input type="number" class="form-control" name="quota" value="{{ (result.max_quota_for_domain / 1048576) }}">
+                    </div>
+                  </div>
+                  <div class="row mb-2">
+                    <label class="control-label col-sm-2">{{ lang.edit.backup_mx_options }}</label>
+                    <div class="col-sm-10">
+                      <div class="form-check">
+                        <label><input type="checkbox" class="form-check-input" value="1" name="backupmx"{% if result.backupmx == '1' %} checked{% endif %}> {{ lang.edit.relay_domain }}</label>
+                        <br>
+                        <label><input type="checkbox" class="form-check-input" value="1" name="relay_all_recipients"{% if result.relay_all_recipients == '1' %} checked{% endif %}> {{ lang.edit.relay_all }}</label>
+                        <p>{{ lang.edit.relay_all_info|raw }}</p>
+                        <label><input type="checkbox" class="form-check-input" value="1" name="relay_unknown_only"{% if result.relay_unknown_only == '1' %} checked{% endif %}> {{ lang.edit.relay_unknown_only }}</label>
+                        <br>
+                        <p>{{ lang.edit.relay_transport_info|raw }}</p>
+                        <hr style="margin:25px 0px 0px 0px">
+                      </div>
+                    </div>
+                  </div>
+                  {% endif %}
+                  <div class="row">
+                    <div class="offset-sm-2 col-sm-10">
+                      <div class="form-check">
+                        <label><input type="checkbox" class="form-check-input" value="1" name="gal"{% if result.gal == '1' %} checked{% endif %}> {{ lang.edit.gal }}</label>
+                        <small class="text-muted">{{ lang.edit.gal_info|raw }}</small>
+                      </div>
+                    </div>
+                  </div>
+                  <hr>
+                  <div class="row mb-2">
+                    <div class="offset-sm-2 col-sm-10">
+                      <div class="form-check">
+                        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}{% if mailcow_cc_role != 'admin' %} disabled{% endif %}> {{ lang.edit.active }}</label>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row mb-2">
+                    <div class="offset-sm-2 col-sm-10">
+                      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editdomain" data-item="{{ domain }}" data-api-url='edit/domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="offset-sm-2 col-sm-10">
+                      <small class="fst-italic d-block">{{ lang.edit.created_on }}: {{ result.created }}</small>
+                      <small class="fst-italic d-block">{{ lang.edit.last_modified }}: {{ result.modified }}</small>
+                    </div>
+                  </div>
+                </form>
+                {% if dkim %}
+                <hr>
+                <div class="row">
+                  <div class="col-12 col-sm-2">
+                    <p>{{ lang.add.domain }}: <strong>{{ result.domain_name }}</strong> ({{ dkim.dkim_selector }}._domainkey)</p>
+                  </div>
+                  <div class="col-12 col-sm-10">
+                    <pre class="p-2">{{ dkim.dkim_txt }}</pre>
+                  </div>
+                </div>
+                {% endif %}
+            </div>
         </div>
       </div>
-      <div class="row mb-4">
-        <label class="control-label col-sm-2">{{ lang.add.tags }}</label>
-        <div class="col-sm-10">
-          <div class="form-control tag-box">
-            {% for tag in domain_details.tags %}
-              <span data-action='delete_selected' data-item="{{ tag|url_encode }}" data-id="domain_tag_{{ tag }}" data-api-url='delete/domain/tag/{{ domain }}' class="badge bg-primary tag-badge btn-badge">
-                <i class="bi bi-tag-fill"></i>
-                {{ tag }}
-              </span>
-            {% endfor %}
-            <input type="text" class="tag-input">
-            <span class="btn tag-add"><i class="bi bi-plus-lg"></i></span>
-            <input type="hidden" value="" name="tags" class="tag-values" />
-          </div>
+      <div id="dratelimit" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-ratelimit">
+        <div class="card mb-4">
+            <div class="card-header d-flex d-md-none fs-5">
+              <button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-ratelimit" data-bs-toggle="collapse" aria-controls="collapse-tab-ratelimit">
+                {{ lang.edit.ratelimit }} <span class="badge bg-info table-lines"></span>
+              </button>
+            </div>
+            <div id="collapse-tab-ratelimit" class="card-body collapse" data-bs-parent="#domain-content">
+                <form data-id="domratelimit" class="well" method="post">
+                  <div class="row mb-2">
+                    <label class="control-label col-sm-2">{{ lang.edit.ratelimit }}</label>
+                    <div class="col-sm-10">
+                      <div class="input-group">
+                        <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control placeholder="{{ lang.ratelimit.disabled }}">
+                        <select name="rl_frame" class="form-control">
+                        {% include 'mailbox/rl-frame.twig' %}
+                        </select>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row mb-2">
+                    <div class="offset-sm-2 col-sm-10">
+                      <button data-acl="{{ acl.ratelimit }}" class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="domratelimit" data-item="{{ domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
+                    </div>
+                  </div>
+                </form>
+            </div>
         </div>
       </div>
-      <div class="row mb-2">
-        <label class="control-label col-sm-2" for="relayhost">{{ lang.edit.relayhost }}</label>
-        <div class="col-sm-10">
-          <select data-acl="{{ acl.domain_relayhost }}" data-live-search="true" id="relayhost" name="relayhost" class="form-control">
-            {% for rlyhost in rlyhosts %}
-              <option
-                style="{% if rlyhost.active != '1' %}background: #ff4136; color: #fff{% endif %}"
-                {% if result.relayhost == rlyhost.id %} selected{% endif %}
-                value="{{ rlyhost.id }}">
-                ID {{ rlyhost.id }}: {{ rlyhost.hostname }} ({{ rlyhost.username }})
-              </option>
-            {% endfor %}
-            <option value=""{% if not result.relayhost %} selected{% endif %}>
-              {{ lang.edit.none_inherit }}
-            </option>
-          </select>
+      <div id="dspamfilter" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-spamfilter">
+        <div class="card mb-4">
+            <div class="card-header d-flex d-md-none fs-5">
+              <button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-spamfilter" data-bs-toggle="collapse" aria-controls="collapse-tab-spamfilter">
+                {{ lang.edit.spam_filter }} <span class="badge bg-info table-lines"></span>
+              </button>
+            </div>
+            <div id="collapse-tab-spamfilter" class="card-body collapse" data-bs-parent="#domain-content">
+                <div class="row">
+                  <div class="col-sm-6">
+                    <h4>{{ lang.user.spamfilter_wl }}</h4>
+                    <p>{{ lang.user.spamfilter_wl_desc|raw }}</p>
+                    <form class="form-inline mb-4" data-id="add_wl_policy_domain">
+                      <div class="input-group" data-acl="{{ acl.spam_policy }}">
+                        <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
+                        <button class="btn btn-secondary" data-action="add_item" data-id="add_wl_policy_domain" data-api-url='add/domain-policy' data-api-attr='{"domain":"{{ domain }}","object_list":"wl"}' href="#">{{ lang.user.spamfilter_table_add }}</button>
+                      </div>
+                    </form>
+                    <table id="wl_policy_domain_table" class="table table-striped dt-responsive w-100"></table>
+                    <div class="mass-actions-user">
+                      <div class="btn-group" data-acl="{{ acl.spam_policy }}">
+                        <a class="btn btn-xs-half d-block d-sm-inline btn-sm btn-secondary" id="toggle_multi_select_all" data-id="policy_wl_domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+                        <a class="btn btn-xs-half d-block d-sm-inline btn-sm btn-danger" data-action="delete_selected" data-id="policy_wl_domain" data-api-url='delete/domain-policy' href="#">{{ lang.mailbox.remove }}</a>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-sm-6">
+                    <h4>{{ lang.user.spamfilter_bl }}</h4>
+                    <p>{{ lang.user.spamfilter_bl_desc|raw }}</p>
+                    <form class="form-inline mb-4" data-id="add_bl_policy_domain">
+                      <div class="input-group" data-acl="{{ acl.spam_policy }}">
+                        <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
+                        <button class="btn btn-secondary" data-action="add_item" data-id="add_bl_policy_domain" data-api-url='add/domain-policy' data-api-attr='{"domain":"{{ domain }}","object_list":"bl"}' href="#">{{ lang.user.spamfilter_table_add }}</button>
+                      </div>
+                    </form>
+                    <table id="bl_policy_domain_table" class="table table-striped dt-responsive w-100"></table>
+                    <div class="mass-actions-user">
+                      <div class="btn-group" data-acl="{{ acl.spam_policy }}">
+                        <a class="btn btn-xs-half d-block d-sm-inline btn-sm btn-secondary" id="toggle_multi_select_all" data-id="policy_bl_domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+                        <a class="btn btn-xs-half d-block d-sm-inline btn-sm btn-danger" data-action="delete_selected" data-id="policy_bl_domain" data-api-url='delete/domain-policy' href="#">{{ lang.mailbox.remove }}</a></li>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+            </div>
         </div>
       </div>
-      {% if mailcow_cc_role == 'admin' %}
-      <div class="row mb-2">
-        <label class="control-label col-sm-2" for="aliases">{{ lang.edit.max_aliases }}</label>
-        <div class="col-sm-10">
-          <input type="number" class="form-control" name="aliases" value="{{ result.max_num_aliases_for_domain }}">
-        </div>
-      </div>
-      <div class="row mb-2">
-        <label class="control-label col-sm-2" for="mailboxes">{{ lang.edit.max_mailboxes }}</label>
-        <div class="col-sm-10">
-          <input type="number" class="form-control" name="mailboxes" value="{{ result.max_num_mboxes_for_domain }}">
-        </div>
-      </div>
-      <div class="row mb-2">
-        <label class="control-label col-sm-2" for="defquota">{{ lang.edit.mailbox_quota_def }}</label>
-        <div class="col-sm-10">
-          <input type="number" class="form-control" name="defquota" value="{{ (result.def_quota_for_mbox / 1048576) }}">
-        </div>
-      </div>
-      <div class="row mb-2">
-        <label class="control-label col-sm-2" for="maxquota">{{ lang.edit.max_quota }}</label>
-        <div class="col-sm-10">
-          <input type="number" class="form-control" name="maxquota" value="{{ (result.max_quota_for_mbox / 1048576) }}">
-        </div>
-      </div>
-      <div class="row mb-4">
-        <label class="control-label col-sm-2" for="quota">{{ lang.edit.domain_quota }}</label>
-        <div class="col-sm-10">
-          <input type="number" class="form-control" name="quota" value="{{ (result.max_quota_for_domain / 1048576) }}">
-        </div>
-      </div>
-      <div class="row mb-2">
-        <label class="control-label col-sm-2">{{ lang.edit.backup_mx_options }}</label>
-        <div class="col-sm-10">
-          <div class="form-check">
-            <label><input type="checkbox" class="form-check-input" value="1" name="backupmx"{% if result.backupmx == '1' %} checked{% endif %}> {{ lang.edit.relay_domain }}</label>
-            <br>
-            <label><input type="checkbox" class="form-check-input" value="1" name="relay_all_recipients"{% if result.relay_all_recipients == '1' %} checked{% endif %}> {{ lang.edit.relay_all }}</label>
-            <p>{{ lang.edit.relay_all_info|raw }}</p>
-            <label><input type="checkbox" class="form-check-input" value="1" name="relay_unknown_only"{% if result.relay_unknown_only == '1' %} checked{% endif %}> {{ lang.edit.relay_unknown_only }}</label>
-            <br>
-            <p>{{ lang.edit.relay_transport_info|raw }}</p>
-            <hr style="margin:25px 0px 0px 0px">
-          </div>
-        </div>
-      </div>
-      {% endif %}
-      <div class="row">
-        <div class="offset-sm-2 col-sm-10">
-          <div class="form-check">
-            <label><input type="checkbox" class="form-check-input" value="1" name="gal"{% if result.gal == '1' %} checked{% endif %}> {{ lang.edit.gal }}</label>
-            <small class="text-muted">{{ lang.edit.gal_info|raw }}</small>
-          </div>
-        </div>
-      </div>
-      <hr>
-      <div class="row mb-2">
-        <div class="offset-sm-2 col-sm-10">
-          <div class="form-check">
-            <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}{% if mailcow_cc_role != 'admin' %} disabled{% endif %}> {{ lang.edit.active }}</label>
-          </div>
-        </div>
-      </div>
-      <div class="row mb-2">
-        <div class="offset-sm-2 col-sm-10">
-          <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editdomain" data-item="{{ domain }}" data-api-url='edit/domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
-        </div>
-      </div>
-      <div class="row">
-        <div class="offset-sm-2 col-sm-10">
-          <small class="fst-italic d-block">{{ lang.edit.created_on }}: {{ result.created }}</small>
-          <small class="fst-italic d-block">{{ lang.edit.last_modified }}: {{ result.modified }}</small>
-        </div>
-      </div>
-    </form>
-    {% if dkim %}
-    <hr>
-    <div class="row">
-      <div class="col-12 col-sm-2">
-        <p>{{ lang.add.domain }}: <strong>{{ result.domain_name }}</strong> ({{ dkim.dkim_selector }}._domainkey)</p>
-      </div>
-      <div class="col-12 col-sm-10">
-        <pre class="p-2">{{ dkim.dkim_txt }}</pre>
-      </div>
-    </div>
-    {% endif %}
-  </div>
-  <div id="dratelimit" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-ratelimit">
-    <form data-id="domratelimit" class="well" method="post">
-      <div class="row mb-2">
-        <label class="control-label col-sm-2">{{ lang.edit.ratelimit }}</label>
-        <div class="col-sm-10">
-          <div class="input-group">
-            <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control placeholder="{{ lang.ratelimit.disabled }}">
-            <select name="rl_frame" class="form-control">
-            {% include 'mailbox/rl-frame.twig' %}
-            </select>
-          </div>
-        </div>
-      </div>
-      <div class="row mb-2">
-        <div class="offset-sm-2 col-sm-10">
-          <button data-acl="{{ acl.ratelimit }}" class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="domratelimit" data-item="{{ domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
-        </div>
-      </div>
-    </form>
-  </div>
-  <div id="dspamfilter" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-spamfilter">
-    <div class="row">
-      <div class="col-sm-6">
-        <h4>{{ lang.user.spamfilter_wl }}</h4>
-        <p>{{ lang.user.spamfilter_wl_desc|raw }}</p>
-        <form class="form-inline mb-4" data-id="add_wl_policy_domain">
-          <div class="input-group" data-acl="{{ acl.spam_policy }}">
-            <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
-            <button class="btn btn-secondary" data-action="add_item" data-id="add_wl_policy_domain" data-api-url='add/domain-policy' data-api-attr='{"domain":"{{ domain }}","object_list":"wl"}' href="#">{{ lang.user.spamfilter_table_add }}</button>
-          </div>
-        </form>
-        <table id="wl_policy_domain_table" class="table table-striped dt-responsive w-100"></table>
-        <div class="mass-actions-user">
-          <div class="btn-group" data-acl="{{ acl.spam_policy }}">
-            <a class="btn btn-xs-half d-block d-sm-inline btn-sm btn-secondary" id="toggle_multi_select_all" data-id="policy_wl_domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-            <a class="btn btn-xs-half d-block d-sm-inline btn-sm btn-danger" data-action="delete_selected" data-id="policy_wl_domain" data-api-url='delete/domain-policy' href="#">{{ lang.mailbox.remove }}</a>
-          </div>
-        </div>
-      </div>
-      <div class="col-sm-6">
-        <h4>{{ lang.user.spamfilter_bl }}</h4>
-        <p>{{ lang.user.spamfilter_bl_desc|raw }}</p>
-        <form class="form-inline mb-4" data-id="add_bl_policy_domain">
-          <div class="input-group" data-acl="{{ acl.spam_policy }}">
-            <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
-            <button class="btn btn-secondary" data-action="add_item" data-id="add_bl_policy_domain" data-api-url='add/domain-policy' data-api-attr='{"domain":"{{ domain }}","object_list":"bl"}' href="#">{{ lang.user.spamfilter_table_add }}</button>
-          </div>
-        </form>
-        <table id="bl_policy_domain_table" class="table table-striped dt-responsive w-100"></table>
-        <div class="mass-actions-user">
-          <div class="btn-group" data-acl="{{ acl.spam_policy }}">
-            <a class="btn btn-xs-half d-block d-sm-inline btn-sm btn-secondary" id="toggle_multi_select_all" data-id="policy_bl_domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-            <a class="btn btn-xs-half d-block d-sm-inline btn-sm btn-danger" data-action="delete_selected" data-id="policy_bl_domain" data-api-url='delete/domain-policy' href="#">{{ lang.mailbox.remove }}</a></li>
-          </div>
+      <div id="dqwbcc" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-qwbcc">
+        <div class="card mb-4">
+            <div class="card-header d-flex d-md-none fs-5">
+              <button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-qwbcc" data-bs-toggle="collapse" aria-controls="collapse-tab-qwbcc">
+                {{ lang.edit.quota_warning_bcc }} <span class="badge bg-info table-lines"></span>
+              </button>
+            </div>
+            <div id="collapse-tab-qwbcc" class="card-body collapse" data-bs-parent="#domain-content">
+                <div class="row">
+                  <div class="col-sm-12">
+                    <h4>{{ lang.edit.quota_warning_bcc }}</h4>
+                    <p>{{ lang.edit.quota_warning_bcc_info|raw }}</p>
+                    <form class="form-horizontal" data-id="quota_bcc">
+                      <input type="hidden" value="0" name="active">
+                      <div class="row mb-2">
+                        <label class="control-label col-sm-2" for="script_data">{{ lang.edit.target_address|raw }}:</label>
+                        <div class="col-sm-10">
+                          <textarea spellcheck="false" autocorrect="off" autocapitalize="none" class="form-control" rows="10" id="bcc_rcpt" name="bcc_rcpt">{{ quota_notification_bcc.bcc_rcpts|join("\n") }}</textarea>
+                        </div>
+                      </div>
+                      <div class="row mb-4">
+                        <div class="offset-sm-2 col-sm-10">
+                          <div class="form-check">
+                            <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if quota_notification_bcc.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="row">
+                        <div class="offset-sm-2 col-sm-10">
+                          <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="quota_bcc" data-item="quota_bcc" data-api-url='edit/quota_notification_bcc' data-api-attr='{"domain":"{{ domain }}"}' href="#">{{ lang.edit.save }}</button>
+                        </div>
+                      </div>
+                    </form>
+                  </div>
+                </div>
+            </div>
         </div>
       </div>
     </div>
-  </div>
-  <div id="dqwbcc" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-qwbcc">
-    <div class="row">
-      <div class="col-sm-12">
-        <h4>{{ lang.edit.quota_warning_bcc }}</h4>
-        <p>{{ lang.edit.quota_warning_bcc_info|raw }}</p>
-        <form class="form-horizontal" data-id="quota_bcc">
-          <input type="hidden" value="0" name="active">
-          <div class="row mb-2">
-            <label class="control-label col-sm-2" for="script_data">{{ lang.edit.target_address|raw }}:</label>
-            <div class="col-sm-10">
-              <textarea spellcheck="false" autocorrect="off" autocapitalize="none" class="form-control" rows="10" id="bcc_rcpt" name="bcc_rcpt">{{ quota_notification_bcc.bcc_rcpts|join("\n") }}</textarea>
-            </div>
-          </div>
-          <div class="row mb-4">
-            <div class="offset-sm-2 col-sm-10">
-              <div class="form-check">
-                <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if quota_notification_bcc.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="offset-sm-2 col-sm-10">
-              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="quota_bcc" data-item="quota_bcc" data-api-url='edit/quota_notification_bcc' data-api-attr='{"domain":"{{ domain }}"}' href="#">{{ lang.edit.save }}</button>
-            </div>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
 </div>
 {% else %}
   {{ parent() }}
diff --git a/data/web/templates/edit/mailbox.twig b/data/web/templates/edit/mailbox.twig
index 76cc45bb..07250459 100644
--- a/data/web/templates/edit/mailbox.twig
+++ b/data/web/templates/edit/mailbox.twig
@@ -2,405 +2,443 @@
 
 {% block inner_content %}
 {% if result %}
-<ul class="nav nav-tabs" role="tablist">
-  <li role="presentation" class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#medit">{{ lang.edit.mailbox }}</button></li>
-  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#mpushover">{{ lang.edit.pushover }}</button></li>
-  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#macl">{{ lang.edit.acl }}</button></li>
-  <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#mrl">{{ lang.edit.ratelimit }}</button></li>
-</ul>
-<hr>
-<div class="tab-content">
-  <div id="medit" class="tab-pane fade show active" role="tabpanel" aria-labelledby="mailbox-edit">
-    <form class="form-horizontal" data-id="editmailbox" role="form" method="post">
-      <input type="hidden" value="default" name="sender_acl">
-      <input type="hidden" value="0" name="force_pw_update">
-      <input type="hidden" value="0" name="sogo_access">
-      <input type="hidden" value="0" name="protocol_access">
-      <div class="row mb-2">
-        <label class="control-label col-sm-2" for="name">{{ lang.edit.full_name }}</label>
-        <div class="col-sm-10">
-          <input type="text" class="form-control" name="name" value="{{ result.name }}">
-        </div>
-      </div>
-      <div class="row mb-4">
-        <label class="control-label col-sm-2">{{ lang.add.tags }}</label>
-        <div class="col-sm-10">
-          <div class="form-control tag-box">
-            {% for tag in mailbox_details.tags %}
-              <span data-action='delete_selected' data-item="{{ tag }}" data-id="mailbox_tag_{{ tag }}" data-api-url='delete/mailbox/tag/{{ mailbox }}' class="badge bg-primary tag-badge btn-badge">
-                <i class="bi bi-tag-fill"></i>
-                {{ tag }}
-              </span>
-            {% endfor %}
-            <input type="text" class="tag-input">
-            <span class="btn tag-add"><i class="bi bi-plus-lg"></i></span>
-            <input type="hidden" value="" name="tags" class="tag-values" />
-          </div>
-        </div>
-      </div>
-      <div class="row mb-2">
-        <label class="control-label col-sm-2" for="quota">{{ lang.edit.quota_mb }}
-          <br><span id="quotaBadge" class="badge bg-info">max. {{ (result.max_new_quota / 1048576) }} MiB</span>
-        </label>
-        <div class="col-sm-10">
-          <input type="number" name="quota" style="width:100%" min="0" max="{{ (result.max_new_quota / 1048576) }}" value="{{ (result.quota / 1048576) }}" class="form-control">
-          <small class="text-muted">0 = ∞</small>
-        </div>
-      </div>
-      <div class="row mb-2">
-        <label class="control-label col-sm-2" for="sender_acl">{{ lang.edit.sender_acl }}</label>
-        <div class="col-sm-10">
-          <select data-live-search="true" data-width="100%" style="width:100%" id="editSelectSenderACL" name="sender_acl" size="10" multiple>
-            {% for domain in sender_acl_handles.sender_acl_domains.ro %}
-              <option data-subtext="Admin" value="{{ domain }}" disabled selected>
-                {{ lang.edit.dont_check_sender_acl|format(domain) }}
-              </option>
-            {% endfor %}
-            {% for alias in sender_acl_handles.sender_acl_addresses.ro %}
-              <option data-subtext="Admin" disabled selected>
-                {{ alias }}
-              </option>
-            {% endfor %}
-            {% for alias in sender_acl_handles.fixed_sender_aliases %}
-              <option data-subtext="Alias" disabled selected>{{ alias }}</option>
-            {% endfor %}
-            {% for domain in sender_acl_handles.sender_acl_domains.rw %}
-              <option value="{{ domain }}" selected>
-                {{ lang.edit.dont_check_sender_acl|format(domain) }}
-              </option>
-            {% endfor %}
-            {% for domain in sender_acl_handles.sender_acl_domains.selectable %}
-              <option value="{{ domain }}">
-                {{ lang.edit.dont_check_sender_acl|format(domain) }}
-              </option>
-            {% endfor %}
-            {% for address in sender_acl_handles.sender_acl_addresses.rw %}
-              <option selected>{{ address }}</option>
-            {% endfor %}
-            {% for address in sender_acl_handles.sender_acl_addresses.selectable %}
-              <option>{{ address }}</option>
-            {% endfor %}
-          </select>
-          <div id="sender_acl_disabled"><i class="bi bi-shield-exclamation"></i> {{ lang.edit.sender_acl_disabled|raw }}</div>
-          <small class="text-muted d-block">{{ lang.edit.sender_acl_info|raw }}</small>
-        </div>
-      </div>
-      <div class="row mb-2">
-        <label class="control-label col-sm-2" for="relayhost">{{ lang.edit.relayhost }}</label>
-        <div class="col-sm-10">
-          <select data-acl="{{ acl.mailbox_relayhost }}" data-live-search="true" id="relayhost" name="relayhost" class="form-control mb-4">
-            {% for rlyhost in rlyhosts %}
-              <option
-                style="{% if rlyhost.active != '1' %}background: #ff4136; color: #fff{% endif %}"
-                {% if result.attributes.relayhost == rlyhost.id %} selected{% endif %}
-                value="{{ rlyhost.id }}">
-              ID {{ rlyhost.id }}: {{ rlyhost.hostname }} ({{ rlyhost.username }})
-              </option>
-            {% endfor %}
-            <option value=""{% if not result.attributes.relayhost %} selected{% endif %}>
-              {{ lang.edit.none_inherit }}
-            </option>
-          </select>
-          <p class="d-block d-sm-none" style="margin: 0;padding: 0">&nbsp;</p>
-          <small class="text-muted d-block">{{ lang.edit.mailbox_relayhost_info }}</small>
-        </div>
-      </div>
-      <div class="row mb-2">
-        <label class="control-label col-sm-2">{{ lang.user.quarantine_notification }}</label>
-        <div class="col-sm-10">
-          <div class="btn-group" data-acl="{{ acl.quarantine_notification }}">
-            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'never' %} btn-dark{% else %} btn-light{% endif %}"
-            data-action="edit_selected"
-            data-item="{{ mailbox }}"
-            data-id="quarantine_notification"
-            data-api-url='edit/quarantine_notification'
-            data-api-attr='{"quarantine_notification":"never"}'>{{ lang.user.never }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'hourly' %} btn-dark{% else %} btn-light{% endif %}"
-            data-action="edit_selected"
-            data-item="{{ mailbox }}"
-            data-id="quarantine_notification"
-            data-api-url='edit/quarantine_notification'
-            data-api-attr='{"quarantine_notification":"hourly"}'>{{ lang.user.hourly }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'daily' %} btn-dark{% else %} btn-light{% endif %}"
-            data-action="edit_selected"
-            data-item="{{ mailbox }}"
-            data-id="quarantine_notification"
-            data-api-url='edit/quarantine_notification'
-            data-api-attr='{"quarantine_notification":"daily"}'>{{ lang.user.daily }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'weekly' %} btn-dark{% else %} btn-light{% endif %}"
-            data-action="edit_selected"
-            data-item="{{ mailbox }}"
-            data-id="quarantine_notification"
-            data-api-url='edit/quarantine_notification'
-            data-api-attr='{"quarantine_notification":"weekly"}'>{{ lang.user.weekly }}</button>
-          </div>
-          <p class="text-muted"><small>{{ lang.user.quarantine_notification_info }}</small></p>
-        </div>
-      </div>
-      <div class="row mb-2">
-        <label class="control-label col-sm-2">{{ lang.user.quarantine_category }}</label>
-        <div class="col-sm-10">
-          <div class="btn-group" data-acl="{{ acl.quarantine_category }}">
-            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if quarantine_category == 'reject' %} btn-dark{% else %} btn-light{% endif %}"
-            data-action="edit_selected"
-            data-item="{{ mailbox }}"
-            data-id="quarantine_category"
-            data-api-url='edit/quarantine_category'
-            data-api-attr='{"quarantine_category":"reject"}'>{{ lang.user.q_reject }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if quarantine_category == 'add_header' %} btn-dark{% else %} btn-light{% endif %}"
-            data-action="edit_selected"
-            data-item="{{ mailbox }}"
-            data-id="quarantine_category"
-            data-api-url='edit/quarantine_category'
-            data-api-attr='{"quarantine_category":"add_header"}'>{{ lang.user.q_add_header }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if quarantine_category == 'all' %} btn-dark{% else %} btn-light{% endif %}"
-            data-action="edit_selected"
-            data-item="{{ mailbox }}"
-            data-id="quarantine_category"
-            data-api-url='edit/quarantine_category'
-            data-api-attr='{"quarantine_category":"all"}'>{{ lang.user.q_all }}</button>
-          </div>
-          <p class="text-muted"><small>{{ lang.user.quarantine_category_info }}</small></p>
-        </div>
-      </div>
-      <div class="row mb-4">
-        <label class="control-label col-sm-2" for="sender_acl">{{ lang.user.tls_policy }}</label>
-        <div class="col-sm-10">
-          <div class="btn-group" data-acl="{{ acl.tls_policy }}">
-            <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline{% if get_tls_policy.tls_enforce_in == '1' %} btn-dark{% else %} btn-light{% endif %}"
-              data-action="edit_selected"
-              data-item="{{ mailbox }}"
-              data-id="tls_policy"
-              data-api-url='edit/tls_policy'
-              data-api-attr='{"tls_enforce_in": {% if get_tls_policy.tls_enforce_in == '1' %}0{% else %}1{% endif %} }'>{{ lang.user.tls_enforce_in }}</button>
-            <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline{% if get_tls_policy.tls_enforce_out == '1' %} btn-dark{% else %} btn-light{% endif %}"
-              data-action="edit_selected"
-              data-item="{{ mailbox }}"
-              data-id="tls_policy"
-              data-api-url='edit/tls_policy'
-              data-api-attr='{"tls_enforce_out": {% if get_tls_policy.tls_enforce_out == '1' %}0{% else %}1{% endif %} }'>{{ lang.user.tls_enforce_out }}</button>
-          </div>
-        </div>
-      </div>
-      <div class="row">
-        <label class="control-label col-sm-2" for="password">{{ lang.edit.password }} (<a href="#" class="generate_password">{{ lang.edit.generate }}</a>)</label>
-        <div class="col-sm-10">
-          <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="password" placeholder="{{ lang.edit.unchanged_if_empty }}" autocomplete="new-password">
-        </div>
-      </div>
-      <div class="row mb-4">
-        <label class="control-label col-sm-2" for="password2">{{ lang.edit.password_repeat }}</label>
-        <div class="col-sm-10">
-          <input type="password" data-pwgen-field="true" class="form-control" name="password2" autocomplete="new-password">
-        </div>
-      </div>
-      <div data-acl="{{ acl.extend_sender_acl }}" class="row mb-4">
-        <label class="control-label col-sm-2" for="extended_sender_acl">{{ lang.edit.extended_sender_acl }}</label>
-        <div class="col-sm-10">
-          {% if sender_acl_handles.external_sender_aliases %}
-            {% set ext_sender_acl = sender_acl_handles.external_sender_aliases|join(', ') %}
-          {% endif %}
-          {% if acl.extend_sender_acl and acl.extend_sender_acl == 1 %}
-            <input type="text" class="form-control" name="extended_sender_acl" value="{{ ext_sender_acl }}" placeholder="user1@example.com, user2@example.org, @example.com, ...">
-            <small class="text-muted">{{ lang.edit.extended_sender_acl_info|raw }}</small>
-          {% endif %}
-        </div>
-      </div>
-      <div class="row">
-        <label class="control-label col-sm-2" for="protocol_access">{{ lang.edit.allowed_protocols }}</label>
-        <div class="col-sm-10">
-          <select data-acl="{{ acl.protocol_access }}" name="protocol_access" multiple class="form-control">
-            <option value="imap"{% if result.attributes.imap_access == '1' %} selected{% endif %}>IMAP</option>
-            <option value="pop3"{% if result.attributes.pop3_access == '1' %} selected{% endif %}>POP3</option>
-            <option value="smtp"{% if result.attributes.smtp_access == '1' %} selected{% endif %}>SMTP</option>
-            <option value="sieve"{% if result.attributes.sieve_access == '1' %} selected{% endif %}>Sieve</option>
-          </select>
-        </div>
-      </div>
-      <div hidden data-acl="{{ acl.smtp_ip_access }}" class="row">
-        <label class="control-label col-sm-2" for="allow_from_smtp">{{ lang.edit.allow_from_smtp }}</label>
-        <div class="col-sm-10">
-          <input type="text" class="form-control" name="allow_from_smtp" value="{{ allow_from_smtp }}" placeholder="1.1.1.1, 10.2.0.0/24, ...">
-          <small class="text-muted">{{ lang.edit.allow_from_smtp_info }}</small>
-        </div>
-      </div>
-      <hr>
-      <div class="row">
-        <div class="offset-sm-2 col-sm-10">
-          <select name="active" class="form-control">
-            <option value="1"{% if result.active == '1' %} selected{% endif %}>{{ lang.edit.active }}</option>
-            <option value="2"{% if result.active == '2' %} selected{% endif %}>{{ lang.edit.disable_login }}</option>
-            <option value="0"{% if result.active == '0' %} selected{% endif %}>{{ lang.edit.inactive }}</option>
-          </select>
-        </div>
-      </div>
-      <div class="row mt-2">
-        <div class="offset-sm-2 col-sm-10">
-          <div class="form-check">
-            <label><input type="checkbox" class="form-check-input" value="1" name="force_pw_update"{% if result.attributes.force_pw_update == '1' %} checked{% endif %}> {{ lang.edit.force_pw_update }}</label>
-            <small class="text-muted">{{ lang.edit.force_pw_update_info|format(ui_texts.main_name) }}</small>
-          </div>
-        </div>
-      </div>
-      {% if not skip_sogo %}
-      <div data-acl="{{ acl.sogo_access }}" class="row">
-        <div class="offset-sm-2 col-sm-10">
-          <div class="form-check">
-            <label><input type="checkbox" class="form-check-input" value="1" name="sogo_access"{% if result.attributes.sogo_access == '1' %} checked{% endif %}> {{ lang.edit.sogo_access }}</label>
-            <small class="text-muted">{{ lang.edit.sogo_access_info }}</small>
-          </div>
-        </div>
-      </div>
-      {% endif %}
-      <div class="row mt-2 mb-2">
-        <div class="offset-sm-2 col-sm-10">
-          <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editmailbox" data-item="{{ result.username }}" data-api-url='edit/mailbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
-        </div>
-      </div>
-      <div class="row">
-        <div class="offset-sm-2 col-sm-10">
-          <small class="fst-italic d-block">{{ lang.edit.created_on }}: {{ result.created }}</small>
-          <small class="fst-italic d-block">{{ lang.edit.last_modified }}: {{ result.modified }}</small>
-        </div>
-      </div>
-    </form>
-  </div>
-  <div id="mpushover" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-pushover">
-    <form data-id="pushover" class="form well" method="post">
-      <input type="hidden" value="0" name="evaluate_x_prio">
-      <input type="hidden" value="0" name="only_x_prio">
-      <input type="hidden" value="0" name="active">
-      <div class="row">
-        <div class="col-sm-1">
-          <p class="text-muted"><a href="https://pushover.net" target="_blank"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAACglBMVEUAAAAAAAEAAAAilecFGigAAAAAAAAAAAAAAAANj+c3n+Ypm+oeYI4KWI4MieAtkdQbleoJcLcjmeswmN4Rit4KgdMKUYQJKUAQSnILL0kMNlMSTngimOoNPF0hlOQBBgkNOlkRS3MHIjUhk+IPf8wKLUYsjM0AAAASTngAAAAAAAAPfckbdLIbdrYUWIgegsgce70knfEAAAAknfENOVkGHi8YaaIjnvEdgMUhkuAQSG8aca0hleQUh9YLjOM4nOEMgtMcbaYWa6YemO02ltkKhNktgLodYZEPXJEyi8kKesktfLUzj84cWYMiluckZ5YJXJYeW4Y0k9YKfs4yjs0pc6YHZaUviskLfMkqmugak+cqkNcViNcqeK4Iaq4XRmYGPmYMKDsFJTstgr0LdL0ti84CCQ4BCQ4Qgc8rlt8XjN8shcQsi8wZSGgEP2cRMEUDKkUAAAD///8dmvEamfExo/EXmPEWl/ERlvElnvEsofEjnfETl/Enn/Ezo/E4pvEvovEfm/E1pPEzpPEvofEOlfEpoPEamPEQlfEYmfE6p/EgnPEVlvEroPE3pfE2pfENk/Ern/E3pPEcmfEfmvEnnvBlufT6/P0soPAknPDd7/zs9vzo9PxBqfItofAqoPD9/f3B4/q43/mx2/l/xfZ6w/Vxv/VtvfVgt/RXtPNTsfNEq/L3+/31+v3a7fvR6vvH5fqs2vmc0/jx+P3v9/3h8fzW7PvV7PvL5/q13fmo1/mh1PiY0fiNy/aHyfZ2wfVou/Vdt/RPsPM3oeoQkuowmeAgjdgcgMQbeLrw9/3k8vy74Pm63/mX0PdYtfNNr/Ikm+4wnOchkuAVjOAfdrMVcrOdoJikAAAAcnRSTlMAIQ8IzzweFwf+/fvw8P79+/Xt7e3p6eji4d7U08y8qZyTiIWDgn53bWxqaWBKQ0JBOjUwMCkoJCEfHBkT/vz8/Pv7+vr69/b29PTy7ezm5ubm5N7e29vQ0M/Pv7+4uLW1pqaWloWDg3x7e21mUVFFRUXdPracAAAEbElEQVRIx4WUZbvaQBCFF+ru7u7u7u7u7t4mvVwSoBC0JIUCLRQolLq7u7vr/+nMLkmQyvlwyfPcd86e3ZldUqwyQ/p329J+XfutPQYOLUP+q55rFtQJRvY79+xxlZTUWbKpz7/xrrMr2+3BoNPpdLn2lJQ4HEeqLOr1d7z7XNkesQed4A848G63Oy4Gmg/6Mz542QvZbqe8C/Ig73CLYiYTrtLmT3zfqbIcAR7y4wIqH/B6M9Fo0+Ldb6sM9ph/v4ozPuz12mxRofaAAr7jCNkuoz/jNf9AGHibkBCm51fsGKvxsAGWx4H+jBcEi6V2birDpCL/9Klrd1KHbiSvPWP8V0tTnTfO03iXi57P6WNHOVUf44IFdFDRz6pV5fw8Zy5z3JVH5+R48OwxqDiGvKJIY9R+9JsCuJ5HPg74OVEMpz+nbdEPUHEWeEk6IDUnTC1l5r+f8uffc0cfxc8fS17kLso24SwUPFDA/6DE82xKDOPliJ7n/GGOOyWK9zD9CdjvOfg9Dv6AH+AX04LW9gj2i8W/APx1UbxwCAu+wPmcpgUKL/EHdvtq4uwaZwCuznPJVY5LHhED15G/isd5Hz4eKui/e/du02YoKFeD5mHzHIN/nxEDe25gQQwKorAid04CfyzwL4XutXvl1Pt1guMOwwKPkU8mYIFT8JHK+vv8prpDScUVL+j8s3lOctw1GIhbWHAS+HgKPk7xPM/4UtNAYmzizJkf6NgTb/gM8jePQLsewMdthS3g95tMpT1IhVm6v1s8fYmLeb13Odwp8Fh5KY048y/d14WUrwrb1e/X/rNp73nkD8kWS+wi/MZ4XuetG4mhKubJm3/WNEvi8SHwB56nPKjUam0LBdp9ARwupFemTYudvgN/L1+A/Ko/LGBuS8pPy+YR1fuCTWNKnUyoeUyYx2o2dyEVGmr5xTD42xzvkD16+Pb9WIIH6fmt1r3mbsTY7Bvw+n23naT8BUWh86bz6G/e259UXPUK3gfAxQDlo7Rpx3Geqb2e3wp83SGEdKpB7zvwYbzvT2n65xLwbH6YP+M9C8vA8E1wxLU8gkCbdhXGUyrMgwVrcbzLHonr78lzDvWM3q/C/HtDlXoSUIe3YkblhRPIX4E8Oo/9siLv8dRjV7SBlkdgTXvKS7nzsA/9AfeEuhKq9T8zWIDv1Sd6ETAP4D6/H/1V+1BojvruNa4SZXz4JhY84dV5MOF5agUvu5OsOo+KRpG30KalEnoeDccFlutPZYs38D5n3zcpr1/0fBhfb3DOY1z2tSAgLxWezz6zuoHhfUmOejf6blHQH/sFuJYfcMZX307ytKvRa3ifoV/586P5j+tICtS77BuJxzxYAPZsntX8k3eSIhlajK4p8b7iefCEKs03kD/I2LnxL9ovH+43y4fAv1YrI/mzDBsavAX/UppfzVOrZT/ydxk6lJ047MfLfVbcb6hS9ZEzWxekKQ5WrtPqZg3rV6tWrX6Tle3KQZj/q6KxQnmDoXwFY0VSrN9e8FRXBCTAvwAAAABJRU5ErkJggg==" class="img img-fluid"></a></p>
-        </div>
-        <div class="col-sm-10">
-          <p class="text-muted">{{ lang.user.pushover_info|format(mailbox)|raw }}</p>
-          <p class="text-muted">{{ lang.edit.pushover_vars|raw }}: <code>{SUBJECT}</code>, <code>{SENDER}</code>, <code>{SENDER_ADDRESS}</code>, <code>{SENDER_NAME}</code>, <code>{TO_NAME}</code>, <code>{TO_ADDRESS}</code>, <code>{MSG_ID}</code></p>
-          <div class="row">
-            <div class="col-sm-6 mb-2">
-              <label for="token">API Token/Key (Application)</label>
-              <input type="text" class="form-control" name="token" maxlength="30" value="{{ pushover_data.token }}" required>
+<div id="mailbox-content" class="responsive-tabs">
+    <ul class="nav nav-tabs" role="tablist">
+      <li role="presentation" class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#medit">{{ lang.edit.mailbox }}</button></li>
+      <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#mpushover">{{ lang.edit.pushover }}</button></li>
+      <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#macl">{{ lang.edit.acl }}</button></li>
+      <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#mrl">{{ lang.edit.ratelimit }}</button></li>
+    </ul>
+    <hr class="d-none d-md-block">
+    <div class="tab-content">
+      <div id="medit" class="tab-pane fade show active" role="tabpanel" aria-labelledby="mailbox-edit">
+        <div class="card mb-4">
+            <div class="card-header d-flex d-md-none fs-5">
+              <button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-medit" data-bs-toggle="collapse" aria-controls="collapse-tab-medit">
+                {{ lang.edit.mailbox }} <span class="badge bg-info table-lines"></span>
+              </button>
             </div>
-            <div class="col-sm-6 mb-2">
-              <label for="key">User/Group Key</label>
-              <input type="text" class="form-control" name="key" maxlength="30" value="{{ pushover_data.key }}" required>
+            <div id="collapse-tab-medit" class="card-body collapse show" data-bs-parent="#mailbox-content">
+                <form class="form-horizontal" data-id="editmailbox" role="form" method="post">
+                  <input type="hidden" value="default" name="sender_acl">
+                  <input type="hidden" value="0" name="force_pw_update">
+                  <input type="hidden" value="0" name="sogo_access">
+                  <input type="hidden" value="0" name="protocol_access">
+                  <div class="row mb-2">
+                    <label class="control-label col-sm-2" for="name">{{ lang.edit.full_name }}</label>
+                    <div class="col-sm-10">
+                      <input type="text" class="form-control" name="name" value="{{ result.name }}">
+                    </div>
+                  </div>
+                  <div class="row mb-4">
+                    <label class="control-label col-sm-2">{{ lang.add.tags }}</label>
+                    <div class="col-sm-10">
+                      <div class="form-control tag-box">
+                        {% for tag in mailbox_details.tags %}
+                          <span data-action='delete_selected' data-item="{{ tag }}" data-id="mailbox_tag_{{ tag }}" data-api-url='delete/mailbox/tag/{{ mailbox }}' class="badge bg-primary tag-badge btn-badge">
+                            <i class="bi bi-tag-fill"></i>
+                            {{ tag }}
+                          </span>
+                        {% endfor %}
+                        <input type="text" class="tag-input">
+                        <span class="btn tag-add"><i class="bi bi-plus-lg"></i></span>
+                        <input type="hidden" value="" name="tags" class="tag-values" />
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row mb-2">
+                    <label class="control-label col-sm-2" for="quota">{{ lang.edit.quota_mb }}
+                      <br><span id="quotaBadge" class="badge bg-info">max. {{ (result.max_new_quota / 1048576) }} MiB</span>
+                    </label>
+                    <div class="col-sm-10">
+                      <input type="number" name="quota" style="width:100%" min="0" max="{{ (result.max_new_quota / 1048576) }}" value="{{ (result.quota / 1048576) }}" class="form-control">
+                      <small class="text-muted">0 = ∞</small>
+                    </div>
+                  </div>
+                  <div class="row mb-2">
+                    <label class="control-label col-sm-2" for="sender_acl">{{ lang.edit.sender_acl }}</label>
+                    <div class="col-sm-10">
+                      <select data-live-search="true" data-width="100%" style="width:100%" id="editSelectSenderACL" name="sender_acl" size="10" multiple>
+                        {% for domain in sender_acl_handles.sender_acl_domains.ro %}
+                          <option data-subtext="Admin" value="{{ domain }}" disabled selected>
+                            {{ lang.edit.dont_check_sender_acl|format(domain) }}
+                          </option>
+                        {% endfor %}
+                        {% for alias in sender_acl_handles.sender_acl_addresses.ro %}
+                          <option data-subtext="Admin" disabled selected>
+                            {{ alias }}
+                          </option>
+                        {% endfor %}
+                        {% for alias in sender_acl_handles.fixed_sender_aliases %}
+                          <option data-subtext="Alias" disabled selected>{{ alias }}</option>
+                        {% endfor %}
+                        {% for domain in sender_acl_handles.sender_acl_domains.rw %}
+                          <option value="{{ domain }}" selected>
+                            {{ lang.edit.dont_check_sender_acl|format(domain) }}
+                          </option>
+                        {% endfor %}
+                        {% for domain in sender_acl_handles.sender_acl_domains.selectable %}
+                          <option value="{{ domain }}">
+                            {{ lang.edit.dont_check_sender_acl|format(domain) }}
+                          </option>
+                        {% endfor %}
+                        {% for address in sender_acl_handles.sender_acl_addresses.rw %}
+                          <option selected>{{ address }}</option>
+                        {% endfor %}
+                        {% for address in sender_acl_handles.sender_acl_addresses.selectable %}
+                          <option>{{ address }}</option>
+                        {% endfor %}
+                      </select>
+                      <div id="sender_acl_disabled"><i class="bi bi-shield-exclamation"></i> {{ lang.edit.sender_acl_disabled|raw }}</div>
+                      <small class="text-muted d-block">{{ lang.edit.sender_acl_info|raw }}</small>
+                    </div>
+                  </div>
+                  <div class="row mb-2">
+                    <label class="control-label col-sm-2" for="relayhost">{{ lang.edit.relayhost }}</label>
+                    <div class="col-sm-10">
+                      <select data-acl="{{ acl.mailbox_relayhost }}" data-live-search="true" id="relayhost" name="relayhost" class="form-control mb-4">
+                        {% for rlyhost in rlyhosts %}
+                          <option
+                            style="{% if rlyhost.active != '1' %}background: #ff4136; color: #fff{% endif %}"
+                            {% if result.attributes.relayhost == rlyhost.id %} selected{% endif %}
+                            value="{{ rlyhost.id }}">
+                          ID {{ rlyhost.id }}: {{ rlyhost.hostname }} ({{ rlyhost.username }})
+                          </option>
+                        {% endfor %}
+                        <option value=""{% if not result.attributes.relayhost %} selected{% endif %}>
+                          {{ lang.edit.none_inherit }}
+                        </option>
+                      </select>
+                      <p class="d-block d-sm-none" style="margin: 0;padding: 0">&nbsp;</p>
+                      <small class="text-muted d-block">{{ lang.edit.mailbox_relayhost_info }}</small>
+                    </div>
+                  </div>
+                  <div class="row mb-2">
+                    <label class="control-label col-sm-2">{{ lang.user.quarantine_notification }}</label>
+                    <div class="col-sm-10">
+                      <div class="btn-group" data-acl="{{ acl.quarantine_notification }}">
+                        <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'never' %} btn-dark{% else %} btn-light{% endif %}"
+                        data-action="edit_selected"
+                        data-item="{{ mailbox }}"
+                        data-id="quarantine_notification"
+                        data-api-url='edit/quarantine_notification'
+                        data-api-attr='{"quarantine_notification":"never"}'>{{ lang.user.never }}</button>
+                        <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'hourly' %} btn-dark{% else %} btn-light{% endif %}"
+                        data-action="edit_selected"
+                        data-item="{{ mailbox }}"
+                        data-id="quarantine_notification"
+                        data-api-url='edit/quarantine_notification'
+                        data-api-attr='{"quarantine_notification":"hourly"}'>{{ lang.user.hourly }}</button>
+                        <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'daily' %} btn-dark{% else %} btn-light{% endif %}"
+                        data-action="edit_selected"
+                        data-item="{{ mailbox }}"
+                        data-id="quarantine_notification"
+                        data-api-url='edit/quarantine_notification'
+                        data-api-attr='{"quarantine_notification":"daily"}'>{{ lang.user.daily }}</button>
+                        <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'weekly' %} btn-dark{% else %} btn-light{% endif %}"
+                        data-action="edit_selected"
+                        data-item="{{ mailbox }}"
+                        data-id="quarantine_notification"
+                        data-api-url='edit/quarantine_notification'
+                        data-api-attr='{"quarantine_notification":"weekly"}'>{{ lang.user.weekly }}</button>
+                      </div>
+                      <p class="text-muted"><small>{{ lang.user.quarantine_notification_info }}</small></p>
+                    </div>
+                  </div>
+                  <div class="row mb-2">
+                    <label class="control-label col-sm-2">{{ lang.user.quarantine_category }}</label>
+                    <div class="col-sm-10">
+                      <div class="btn-group" data-acl="{{ acl.quarantine_category }}">
+                        <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if quarantine_category == 'reject' %} btn-dark{% else %} btn-light{% endif %}"
+                        data-action="edit_selected"
+                        data-item="{{ mailbox }}"
+                        data-id="quarantine_category"
+                        data-api-url='edit/quarantine_category'
+                        data-api-attr='{"quarantine_category":"reject"}'>{{ lang.user.q_reject }}</button>
+                        <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if quarantine_category == 'add_header' %} btn-dark{% else %} btn-light{% endif %}"
+                        data-action="edit_selected"
+                        data-item="{{ mailbox }}"
+                        data-id="quarantine_category"
+                        data-api-url='edit/quarantine_category'
+                        data-api-attr='{"quarantine_category":"add_header"}'>{{ lang.user.q_add_header }}</button>
+                        <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if quarantine_category == 'all' %} btn-dark{% else %} btn-light{% endif %}"
+                        data-action="edit_selected"
+                        data-item="{{ mailbox }}"
+                        data-id="quarantine_category"
+                        data-api-url='edit/quarantine_category'
+                        data-api-attr='{"quarantine_category":"all"}'>{{ lang.user.q_all }}</button>
+                      </div>
+                      <p class="text-muted"><small>{{ lang.user.quarantine_category_info }}</small></p>
+                    </div>
+                  </div>
+                  <div class="row mb-4">
+                    <label class="control-label col-sm-2" for="sender_acl">{{ lang.user.tls_policy }}</label>
+                    <div class="col-sm-10">
+                      <div class="btn-group" data-acl="{{ acl.tls_policy }}">
+                        <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline{% if get_tls_policy.tls_enforce_in == '1' %} btn-dark{% else %} btn-light{% endif %}"
+                          data-action="edit_selected"
+                          data-item="{{ mailbox }}"
+                          data-id="tls_policy"
+                          data-api-url='edit/tls_policy'
+                          data-api-attr='{"tls_enforce_in": {% if get_tls_policy.tls_enforce_in == '1' %}0{% else %}1{% endif %} }'>{{ lang.user.tls_enforce_in }}</button>
+                        <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline{% if get_tls_policy.tls_enforce_out == '1' %} btn-dark{% else %} btn-light{% endif %}"
+                          data-action="edit_selected"
+                          data-item="{{ mailbox }}"
+                          data-id="tls_policy"
+                          data-api-url='edit/tls_policy'
+                          data-api-attr='{"tls_enforce_out": {% if get_tls_policy.tls_enforce_out == '1' %}0{% else %}1{% endif %} }'>{{ lang.user.tls_enforce_out }}</button>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <label class="control-label col-sm-2" for="password">{{ lang.edit.password }} (<a href="#" class="generate_password">{{ lang.edit.generate }}</a>)</label>
+                    <div class="col-sm-10">
+                      <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="password" placeholder="{{ lang.edit.unchanged_if_empty }}" autocomplete="new-password">
+                    </div>
+                  </div>
+                  <div class="row mb-4">
+                    <label class="control-label col-sm-2" for="password2">{{ lang.edit.password_repeat }}</label>
+                    <div class="col-sm-10">
+                      <input type="password" data-pwgen-field="true" class="form-control" name="password2" autocomplete="new-password">
+                    </div>
+                  </div>
+                  <div data-acl="{{ acl.extend_sender_acl }}" class="row mb-4">
+                    <label class="control-label col-sm-2" for="extended_sender_acl">{{ lang.edit.extended_sender_acl }}</label>
+                    <div class="col-sm-10">
+                      {% if sender_acl_handles.external_sender_aliases %}
+                        {% set ext_sender_acl = sender_acl_handles.external_sender_aliases|join(', ') %}
+                      {% endif %}
+                      {% if acl.extend_sender_acl and acl.extend_sender_acl == 1 %}
+                        <input type="text" class="form-control" name="extended_sender_acl" value="{{ ext_sender_acl }}" placeholder="user1@example.com, user2@example.org, @example.com, ...">
+                        <small class="text-muted">{{ lang.edit.extended_sender_acl_info|raw }}</small>
+                      {% endif %}
+                    </div>
+                  </div>
+                  <div class="row">
+                    <label class="control-label col-sm-2" for="protocol_access">{{ lang.edit.allowed_protocols }}</label>
+                    <div class="col-sm-10">
+                      <select data-acl="{{ acl.protocol_access }}" name="protocol_access" multiple class="form-control">
+                        <option value="imap"{% if result.attributes.imap_access == '1' %} selected{% endif %}>IMAP</option>
+                        <option value="pop3"{% if result.attributes.pop3_access == '1' %} selected{% endif %}>POP3</option>
+                        <option value="smtp"{% if result.attributes.smtp_access == '1' %} selected{% endif %}>SMTP</option>
+                        <option value="sieve"{% if result.attributes.sieve_access == '1' %} selected{% endif %}>Sieve</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div hidden data-acl="{{ acl.smtp_ip_access }}" class="row">
+                    <label class="control-label col-sm-2" for="allow_from_smtp">{{ lang.edit.allow_from_smtp }}</label>
+                    <div class="col-sm-10">
+                      <input type="text" class="form-control" name="allow_from_smtp" value="{{ allow_from_smtp }}" placeholder="1.1.1.1, 10.2.0.0/24, ...">
+                      <small class="text-muted">{{ lang.edit.allow_from_smtp_info }}</small>
+                    </div>
+                  </div>
+                  <hr>
+                  <div class="row">
+                    <div class="offset-sm-2 col-sm-10">
+                      <select name="active" class="form-control">
+                        <option value="1"{% if result.active == '1' %} selected{% endif %}>{{ lang.edit.active }}</option>
+                        <option value="2"{% if result.active == '2' %} selected{% endif %}>{{ lang.edit.disable_login }}</option>
+                        <option value="0"{% if result.active == '0' %} selected{% endif %}>{{ lang.edit.inactive }}</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="row mt-2">
+                    <div class="offset-sm-2 col-sm-10">
+                      <div class="form-check">
+                        <label><input type="checkbox" class="form-check-input" value="1" name="force_pw_update"{% if result.attributes.force_pw_update == '1' %} checked{% endif %}> {{ lang.edit.force_pw_update }}</label>
+                        <small class="text-muted">{{ lang.edit.force_pw_update_info|format(ui_texts.main_name) }}</small>
+                      </div>
+                    </div>
+                  </div>
+                  {% if not skip_sogo %}
+                  <div data-acl="{{ acl.sogo_access }}" class="row">
+                    <div class="offset-sm-2 col-sm-10">
+                      <div class="form-check">
+                        <label><input type="checkbox" class="form-check-input" value="1" name="sogo_access"{% if result.attributes.sogo_access == '1' %} checked{% endif %}> {{ lang.edit.sogo_access }}</label>
+                        <small class="text-muted">{{ lang.edit.sogo_access_info }}</small>
+                      </div>
+                    </div>
+                  </div>
+                  {% endif %}
+                  <div class="row mt-2 mb-2">
+                    <div class="offset-sm-2 col-sm-10">
+                      <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editmailbox" data-item="{{ result.username }}" data-api-url='edit/mailbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="offset-sm-2 col-sm-10">
+                      <small class="fst-italic d-block">{{ lang.edit.created_on }}: {{ result.created }}</small>
+                      <small class="fst-italic d-block">{{ lang.edit.last_modified }}: {{ result.modified }}</small>
+                    </div>
+                  </div>
+                </form>
             </div>
-            <div class="col-sm-6 mb-4">
-              <label for="title">{{ lang.edit.pushover_title }}</label>
-              <input type="text" class="form-control" name="title" value="{{ pushover_data.title }}" placeholder="Mail">
-            </div>
-            <div class="col-sm-6 mb-4">
-              <label for="text">{{ lang.edit.pushover_text }}</label>
-              <input type="text" class="form-control" name="text" value="{{ pushover_data.text }}" placeholder="You've got mail 📧">
-            </div>
-            <div class="col-sm-12 mb-4">
-              <label for="text">{{ lang.edit.pushover_sender_array|raw }}</label>
-              <input type="text" class="form-control" name="senders" value="{{ pushover_data.senders }}" placeholder="sender1@example.com, sender2@example.com">
-            </div>
-            <div class="col-sm-12 mb-2">
-                <div class="form-group">
-                  <label for="sound">{{ lang.edit.pushover_sound }}</label><br>
-                  <select name="sound" class="form-control">
-                    <option value="pushover"{% if pushover_data.attributes.sound == 'pushover' %} selected{% endif %}>Pushover (default)</option>
-                    <option value="bike"{% if pushover_data.attributes.sound == 'bike' %} selected{% endif %}>Bike</option>
-                    <option value="bugle"{% if pushover_data.attributes.sound == 'bugle' %} selected{% endif %}>Bugle</option>
-                    <option value="cashregister"{% if pushover_data.attributes.sound == 'cashregister' %} selected{% endif %}>Cash Register</option>
-                    <option value="classical"{% if pushover_data.attributes.sound == 'classical' %} selected{% endif %}>Classical</option>
-                    <option value="cosmic"{% if pushover_data.attributes.sound == 'cosmic' %} selected{% endif %}>Cosmic</option>
-                    <option value="falling"{% if pushover_data.attributes.sound == 'falling' %} selected{% endif %}>Falling</option>
-                    <option value="gamelan"{% if pushover_data.attributes.sound == 'gamelan' %} selected{% endif %}>Gamelan</option>
-                    <option value="incoming"{% if pushover_data.attributes.sound == 'incoming' %} selected{% endif %}>Incoming</option>
-                    <option value="intermission"{% if pushover_data.attributes.sound == 'intermission' %} selected{% endif %}>Intermission</option>
-                    <option value="magic"{% if pushover_data.attributes.sound == 'magic' %} selected{% endif %}>Magic</option>
-                    <option value="mechanical"{% if pushover_data.attributes.sound == 'mechanical' %} selected{% endif %}>Mechanical</option>
-                    <option value="pianobar"{% if pushover_data.attributes.sound == 'pianobar' %} selected{% endif %}>Piano Bar</option>
-                    <option value="siren"{% if pushover_data.attributes.sound == 'siren' %} selected{% endif %}>Siren</option>
-                    <option value="spacealarm"{% if pushover_data.attributes.sound == 'spacealarm' %} selected{% endif %}>Space Alarm</option>
-                    <option value="tugboat"{% if pushover_data.attributes.sound == 'tugboat' %} selected{% endif %}>Tug Boat</option>
-                    <option value="alien"{% if pushover_data.attributes.sound == 'alien' %} selected{% endif %}>Alien Alarm (long)</option>
-                    <option value="climb"{% if pushover_data.attributes.sound == 'climb' %} selected{% endif %}>Climb (long)</option>
-                    <option value="persistent"{% if pushover_data.attributes.sound == 'persistent' %} selected{% endif %}>Persistent (long)</option>
-                    <option value="echo"{% if pushover_data.attributes.sound == 'echo' %} selected{% endif %}>Pushover Echo (long)</option>
-                    <option value="updown"{% if pushover_data.attributes.sound == 'updown' %} selected{% endif %}>Up Down (long)</option>
-                    <option value="vibrate"{% if pushover_data.attributes.sound == 'vibrate' %} selected{% endif %}>Vibrate Only</option>
-                    <option value="none"{% if pushover_data.attributes.sound == 'none' %} selected{% endif %}> None (silent) </option>
-                  </select>
-                </div>
-              </div>
-              <div class="col-sm-12">
-              <div class="form-check">
-                <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if pushover_data.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
-              </div>
-            </div>
-            <div class="col-sm-12">
-              <legend style="cursor:pointer;margin-top:10px" data-bs-target="#po_advanced" unselectable="on" data-bs-toggle="collapse">
-                <i class="bi bi-plus"></i> {{ lang.edit.advanced_settings }}
-              </legend>
-              <hr />
-            </div>
-            <div class="col-sm-12 mb-4">
-              <div id="po_advanced" class="collapse">
-                <label for="text">{{ lang.edit.pushover_sender_regex }}</label>
-                <input type="text" class="form-control mt-2" name="senders_regex" value="{{ pushover_data.senders_regex }}" placeholder="/(.*@example\.org$|^foo@example\.com$)/i" regex="true">
-                <div class="form-check mt-4">
-                  <label><input type="checkbox" class="form-check-input" value="1" name="evaluate_x_prio"{% if pushover_data.attributes.evaluate_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_evaluate_x_prio|raw }}</label>
-                </div>
-                <div class="form-check mt-2">
-                  <label><input type="checkbox" class="form-check-input" value="1" name="only_x_prio"{% if pushover_data.attributes.only_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_only_x_prio|raw }}</label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="btn-group" data-acl="{{ acl.pushover }}">
-            <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-success" data-action="edit_selected" data-id="pushover" data-item="{{ mailbox }}" data-api-url='edit/pushover' data-api-attr='{}' href="#">{{ lang.edit.save }}</a>
-            <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="pushover-test" data-item="{{ mailbox }}" data-api-url='edit/pushover-test' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.edit.pushover_verify }}</a>
-            <a id="pushover_delete" class="btn btn-sm d-block d-sm-inline btn-danger" data-action="edit_selected" data-id="pushover-delete" data-item="{{ mailbox }}" data-api-url='edit/pushover' data-api-attr='{"delete":"true"}' href="#"><i class="bi bi-trash"></i> {{ lang.edit.remove }}</a>
-          </div>
         </div>
       </div>
-    </form>
-  </div>
-  <div id="macl" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-acl">
-    <form data-id="useracl" class="form-inline well" method="post">
-      <div class="row">
-        <div class="col-sm-1">
-          <p class="text-muted">ACL</p>
-        </div>
-        <div class="col-sm-10">
-          <select id="user_acl" name="user_acl" size="10" multiple>
-            {% for acl, val in user_acls %}
-              <option value="{{ acl }}"{% if val == 1 %} selected{% endif %}>{{ lang.acl[acl] }}</option>
-            {% endfor %}
-          </select>
-          <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="useracl" data-item="{{ mailbox }}" data-api-url='edit/user-acl' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+      <div id="mpushover" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-pushover">
+        <div class="card mb-4">
+            <div class="card-header d-flex d-md-none fs-5">
+              <button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-mpushover" data-bs-toggle="collapse" aria-controls="collapse-tab-mpushover">
+                {{ lang.edit.pushover }} <span class="badge bg-info table-lines"></span>
+              </button>
+            </div>
+            <div id="collapse-tab-mpushover" class="card-body collapse" data-bs-parent="#mailbox-content">
+                <form data-id="pushover" class="form well" method="post">
+                  <input type="hidden" value="0" name="evaluate_x_prio">
+                  <input type="hidden" value="0" name="only_x_prio">
+                  <input type="hidden" value="0" name="active">
+                  <div class="row">
+                    <div class="col-sm-1">
+                      <p class="text-muted"><a href="https://pushover.net" target="_blank"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAACglBMVEUAAAAAAAEAAAAilecFGigAAAAAAAAAAAAAAAANj+c3n+Ypm+oeYI4KWI4MieAtkdQbleoJcLcjmeswmN4Rit4KgdMKUYQJKUAQSnILL0kMNlMSTngimOoNPF0hlOQBBgkNOlkRS3MHIjUhk+IPf8wKLUYsjM0AAAASTngAAAAAAAAPfckbdLIbdrYUWIgegsgce70knfEAAAAknfENOVkGHi8YaaIjnvEdgMUhkuAQSG8aca0hleQUh9YLjOM4nOEMgtMcbaYWa6YemO02ltkKhNktgLodYZEPXJEyi8kKesktfLUzj84cWYMiluckZ5YJXJYeW4Y0k9YKfs4yjs0pc6YHZaUviskLfMkqmugak+cqkNcViNcqeK4Iaq4XRmYGPmYMKDsFJTstgr0LdL0ti84CCQ4BCQ4Qgc8rlt8XjN8shcQsi8wZSGgEP2cRMEUDKkUAAAD///8dmvEamfExo/EXmPEWl/ERlvElnvEsofEjnfETl/Enn/Ezo/E4pvEvovEfm/E1pPEzpPEvofEOlfEpoPEamPEQlfEYmfE6p/EgnPEVlvEroPE3pfE2pfENk/Ern/E3pPEcmfEfmvEnnvBlufT6/P0soPAknPDd7/zs9vzo9PxBqfItofAqoPD9/f3B4/q43/mx2/l/xfZ6w/Vxv/VtvfVgt/RXtPNTsfNEq/L3+/31+v3a7fvR6vvH5fqs2vmc0/jx+P3v9/3h8fzW7PvV7PvL5/q13fmo1/mh1PiY0fiNy/aHyfZ2wfVou/Vdt/RPsPM3oeoQkuowmeAgjdgcgMQbeLrw9/3k8vy74Pm63/mX0PdYtfNNr/Ikm+4wnOchkuAVjOAfdrMVcrOdoJikAAAAcnRSTlMAIQ8IzzweFwf+/fvw8P79+/Xt7e3p6eji4d7U08y8qZyTiIWDgn53bWxqaWBKQ0JBOjUwMCkoJCEfHBkT/vz8/Pv7+vr69/b29PTy7ezm5ubm5N7e29vQ0M/Pv7+4uLW1pqaWloWDg3x7e21mUVFFRUXdPracAAAEbElEQVRIx4WUZbvaQBCFF+ru7u7u7u7u7t4mvVwSoBC0JIUCLRQolLq7u7vr/+nMLkmQyvlwyfPcd86e3ZldUqwyQ/p329J+XfutPQYOLUP+q55rFtQJRvY79+xxlZTUWbKpz7/xrrMr2+3BoNPpdLn2lJQ4HEeqLOr1d7z7XNkesQed4A848G63Oy4Gmg/6Mz542QvZbqe8C/Ig73CLYiYTrtLmT3zfqbIcAR7y4wIqH/B6M9Fo0+Ldb6sM9ph/v4ozPuz12mxRofaAAr7jCNkuoz/jNf9AGHibkBCm51fsGKvxsAGWx4H+jBcEi6V2birDpCL/9Klrd1KHbiSvPWP8V0tTnTfO03iXi57P6WNHOVUf44IFdFDRz6pV5fw8Zy5z3JVH5+R48OwxqDiGvKJIY9R+9JsCuJ5HPg74OVEMpz+nbdEPUHEWeEk6IDUnTC1l5r+f8uffc0cfxc8fS17kLso24SwUPFDA/6DE82xKDOPliJ7n/GGOOyWK9zD9CdjvOfg9Dv6AH+AX04LW9gj2i8W/APx1UbxwCAu+wPmcpgUKL/EHdvtq4uwaZwCuznPJVY5LHhED15G/isd5Hz4eKui/e/du02YoKFeD5mHzHIN/nxEDe25gQQwKorAid04CfyzwL4XutXvl1Pt1guMOwwKPkU8mYIFT8JHK+vv8prpDScUVL+j8s3lOctw1GIhbWHAS+HgKPk7xPM/4UtNAYmzizJkf6NgTb/gM8jePQLsewMdthS3g95tMpT1IhVm6v1s8fYmLeb13Odwp8Fh5KY048y/d14WUrwrb1e/X/rNp73nkD8kWS+wi/MZ4XuetG4mhKubJm3/WNEvi8SHwB56nPKjUam0LBdp9ARwupFemTYudvgN/L1+A/Ko/LGBuS8pPy+YR1fuCTWNKnUyoeUyYx2o2dyEVGmr5xTD42xzvkD16+Pb9WIIH6fmt1r3mbsTY7Bvw+n23naT8BUWh86bz6G/e259UXPUK3gfAxQDlo7Rpx3Geqb2e3wp83SGEdKpB7zvwYbzvT2n65xLwbH6YP+M9C8vA8E1wxLU8gkCbdhXGUyrMgwVrcbzLHonr78lzDvWM3q/C/HtDlXoSUIe3YkblhRPIX4E8Oo/9siLv8dRjV7SBlkdgTXvKS7nzsA/9AfeEuhKq9T8zWIDv1Sd6ETAP4D6/H/1V+1BojvruNa4SZXz4JhY84dV5MOF5agUvu5OsOo+KRpG30KalEnoeDccFlutPZYs38D5n3zcpr1/0fBhfb3DOY1z2tSAgLxWezz6zuoHhfUmOejf6blHQH/sFuJYfcMZX307ytKvRa3ifoV/586P5j+tICtS77BuJxzxYAPZsntX8k3eSIhlajK4p8b7iefCEKs03kD/I2LnxL9ovH+43y4fAv1YrI/mzDBsavAX/UppfzVOrZT/ydxk6lJ047MfLfVbcb6hS9ZEzWxekKQ5WrtPqZg3rV6tWrX6Tle3KQZj/q6KxQnmDoXwFY0VSrN9e8FRXBCTAvwAAAABJRU5ErkJggg==" class="img img-fluid"></a></p>
+                    </div>
+                    <div class="col-sm-10">
+                      <p class="text-muted">{{ lang.user.pushover_info|format(mailbox)|raw }}</p>
+                      <p class="text-muted">{{ lang.edit.pushover_vars|raw }}: <code>{SUBJECT}</code>, <code>{SENDER}</code>, <code>{SENDER_ADDRESS}</code>, <code>{SENDER_NAME}</code>, <code>{TO_NAME}</code>, <code>{TO_ADDRESS}</code>, <code>{MSG_ID}</code></p>
+                      <div class="row">
+                        <div class="col-sm-6 mb-2">
+                          <label for="token">API Token/Key (Application)</label>
+                          <input type="text" class="form-control" name="token" maxlength="30" value="{{ pushover_data.token }}" required>
+                        </div>
+                        <div class="col-sm-6 mb-2">
+                          <label for="key">User/Group Key</label>
+                          <input type="text" class="form-control" name="key" maxlength="30" value="{{ pushover_data.key }}" required>
+                        </div>
+                        <div class="col-sm-6 mb-4">
+                          <label for="title">{{ lang.edit.pushover_title }}</label>
+                          <input type="text" class="form-control" name="title" value="{{ pushover_data.title }}" placeholder="Mail">
+                        </div>
+                        <div class="col-sm-6 mb-4">
+                          <label for="text">{{ lang.edit.pushover_text }}</label>
+                          <input type="text" class="form-control" name="text" value="{{ pushover_data.text }}" placeholder="You've got mail 📧">
+                        </div>
+                        <div class="col-sm-12 mb-4">
+                          <label for="text">{{ lang.edit.pushover_sender_array|raw }}</label>
+                          <input type="text" class="form-control" name="senders" value="{{ pushover_data.senders }}" placeholder="sender1@example.com, sender2@example.com">
+                        </div>
+                        <div class="col-sm-12 mb-2">
+                            <div class="form-group">
+                              <label for="sound">{{ lang.edit.pushover_sound }}</label><br>
+                              <select name="sound" class="form-control">
+                                <option value="pushover"{% if pushover_data.attributes.sound == 'pushover' %} selected{% endif %}>Pushover (default)</option>
+                                <option value="bike"{% if pushover_data.attributes.sound == 'bike' %} selected{% endif %}>Bike</option>
+                                <option value="bugle"{% if pushover_data.attributes.sound == 'bugle' %} selected{% endif %}>Bugle</option>
+                                <option value="cashregister"{% if pushover_data.attributes.sound == 'cashregister' %} selected{% endif %}>Cash Register</option>
+                                <option value="classical"{% if pushover_data.attributes.sound == 'classical' %} selected{% endif %}>Classical</option>
+                                <option value="cosmic"{% if pushover_data.attributes.sound == 'cosmic' %} selected{% endif %}>Cosmic</option>
+                                <option value="falling"{% if pushover_data.attributes.sound == 'falling' %} selected{% endif %}>Falling</option>
+                                <option value="gamelan"{% if pushover_data.attributes.sound == 'gamelan' %} selected{% endif %}>Gamelan</option>
+                                <option value="incoming"{% if pushover_data.attributes.sound == 'incoming' %} selected{% endif %}>Incoming</option>
+                                <option value="intermission"{% if pushover_data.attributes.sound == 'intermission' %} selected{% endif %}>Intermission</option>
+                                <option value="magic"{% if pushover_data.attributes.sound == 'magic' %} selected{% endif %}>Magic</option>
+                                <option value="mechanical"{% if pushover_data.attributes.sound == 'mechanical' %} selected{% endif %}>Mechanical</option>
+                                <option value="pianobar"{% if pushover_data.attributes.sound == 'pianobar' %} selected{% endif %}>Piano Bar</option>
+                                <option value="siren"{% if pushover_data.attributes.sound == 'siren' %} selected{% endif %}>Siren</option>
+                                <option value="spacealarm"{% if pushover_data.attributes.sound == 'spacealarm' %} selected{% endif %}>Space Alarm</option>
+                                <option value="tugboat"{% if pushover_data.attributes.sound == 'tugboat' %} selected{% endif %}>Tug Boat</option>
+                                <option value="alien"{% if pushover_data.attributes.sound == 'alien' %} selected{% endif %}>Alien Alarm (long)</option>
+                                <option value="climb"{% if pushover_data.attributes.sound == 'climb' %} selected{% endif %}>Climb (long)</option>
+                                <option value="persistent"{% if pushover_data.attributes.sound == 'persistent' %} selected{% endif %}>Persistent (long)</option>
+                                <option value="echo"{% if pushover_data.attributes.sound == 'echo' %} selected{% endif %}>Pushover Echo (long)</option>
+                                <option value="updown"{% if pushover_data.attributes.sound == 'updown' %} selected{% endif %}>Up Down (long)</option>
+                                <option value="vibrate"{% if pushover_data.attributes.sound == 'vibrate' %} selected{% endif %}>Vibrate Only</option>
+                                <option value="none"{% if pushover_data.attributes.sound == 'none' %} selected{% endif %}> None (silent) </option>
+                              </select>
+                            </div>
+                          </div>
+                          <div class="col-sm-12">
+                          <div class="form-check">
+                            <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if pushover_data.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+                          </div>
+                        </div>
+                        <div class="col-sm-12">
+                          <legend style="cursor:pointer;margin-top:10px" data-bs-target="#po_advanced" unselectable="on" data-bs-toggle="collapse">
+                            <i class="bi bi-plus"></i> {{ lang.edit.advanced_settings }}
+                          </legend>
+                          <hr />
+                        </div>
+                        <div class="col-sm-12 mb-4">
+                          <div id="po_advanced" class="collapse">
+                            <label for="text">{{ lang.edit.pushover_sender_regex }}</label>
+                            <input type="text" class="form-control mt-2" name="senders_regex" value="{{ pushover_data.senders_regex }}" placeholder="/(.*@example\.org$|^foo@example\.com$)/i" regex="true">
+                            <div class="form-check mt-4">
+                              <label><input type="checkbox" class="form-check-input" value="1" name="evaluate_x_prio"{% if pushover_data.attributes.evaluate_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_evaluate_x_prio|raw }}</label>
+                            </div>
+                            <div class="form-check mt-2">
+                              <label><input type="checkbox" class="form-check-input" value="1" name="only_x_prio"{% if pushover_data.attributes.only_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_only_x_prio|raw }}</label>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="btn-group" data-acl="{{ acl.pushover }}">
+                        <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-success" data-action="edit_selected" data-id="pushover" data-item="{{ mailbox }}" data-api-url='edit/pushover' data-api-attr='{}' href="#">{{ lang.edit.save }}</a>
+                        <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="pushover-test" data-item="{{ mailbox }}" data-api-url='edit/pushover-test' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.edit.pushover_verify }}</a>
+                        <a id="pushover_delete" class="btn btn-sm d-block d-sm-inline btn-danger" data-action="edit_selected" data-id="pushover-delete" data-item="{{ mailbox }}" data-api-url='edit/pushover' data-api-attr='{"delete":"true"}' href="#"><i class="bi bi-trash"></i> {{ lang.edit.remove }}</a>
+                      </div>
+                    </div>
+                  </div>
+                </form>
+            </div>
         </div>
       </div>
-    </form>
-  </div>
-  <div id="mrl" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-rl">
-    <form data-id="mboxratelimit" class="well" method="post">
-      <div class="row mb-2">
-        <div class="col-sm-2">
-          <p class="text-muted">{{ lang.acl.ratelimit }}</p>
-        </div>
-        <div class="col-sm-10">
-          <div class="input-group">
-            <input name="rl_value" type="number" autocomplete="off" value="{{ rl.value }}" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
-            <select name="rl_frame" class="form-control">
-            {% include 'mailbox/rl-frame.twig' %}
-            </select>
-          </div>
-        </div>  
-      </div>
-      <div class="row mb-2">
-        <div class="offset-sm-2 col-sm-10">  
-          <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="mboxratelimit" data-item="{{ mailbox }}" data-api-url='edit/rl-mbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
-          <p class="text-muted mt-2">{{ lang.edit.mbox_rl_info }}</p>
+      <div id="macl" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-acl">
+        <div class="card mb-4">
+            <div class="card-header d-flex d-md-none fs-5">
+              <button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-macl" data-bs-toggle="collapse" aria-controls="collapse-tab-macl">
+                {{ lang.edit.acl }} <span class="badge bg-info table-lines"></span>
+              </button>
+            </div>
+            <div id="collapse-tab-macl" class="card-body collapse" data-bs-parent="#mailbox-content">
+                <form data-id="useracl" class="form-inline well" method="post">
+                  <div class="row">
+                    <div class="col-sm-1">
+                      <p class="text-muted">ACL</p>
+                    </div>
+                    <div class="col-sm-10">
+                      <select id="user_acl" name="user_acl" size="10" multiple>
+                        {% for acl, val in user_acls %}
+                          <option value="{{ acl }}"{% if val == 1 %} selected{% endif %}>{{ lang.acl[acl] }}</option>
+                        {% endfor %}
+                      </select>
+                      <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="useracl" data-item="{{ mailbox }}" data-api-url='edit/user-acl' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+                    </div>
+                  </div>
+                </form>
+            </div>
         </div>
       </div>
-    </form>
-  </div>
+      <div id="mrl" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-rl">
+        <div class="card mb-4">
+            <div class="card-header d-flex d-md-none fs-5">
+              <button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-mrl" data-bs-toggle="collapse" aria-controls="collapse-tab-mrl">
+                {{ lang.edit.ratelimit }} <span class="badge bg-info table-lines"></span>
+              </button>
+            </div>
+            <div id="collapse-tab-mrl" class="card-body collapse" data-bs-parent="#mailbox-content">
+                <form data-id="mboxratelimit" class="well" method="post">
+                  <div class="row mb-2">
+                    <div class="col-sm-2">
+                      <p class="text-muted">{{ lang.acl.ratelimit }}</p>
+                    </div>
+                    <div class="col-sm-10">
+                      <div class="input-group">
+                        <input name="rl_value" type="number" autocomplete="off" value="{{ rl.value }}" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
+                        <select name="rl_frame" class="form-control">
+                        {% include 'mailbox/rl-frame.twig' %}
+                        </select>
+                      </div>
+                    </div>  
+                  </div>
+                  <div class="row mb-2">
+                    <div class="offset-sm-2 col-sm-10">  
+                      <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="mboxratelimit" data-item="{{ mailbox }}" data-api-url='edit/rl-mbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+                      <p class="text-muted mt-2">{{ lang.edit.mbox_rl_info }}</p>
+                    </div>
+                  </div>
+                </form>
+            </div>
+        </div>
+      </div>
+    </div>
 </div>
 {% else %}
   {{ parent() }}