fix style section filter

resources/js/warehouse_management/opnames/index.js

@@ -43,12 +43,17 @@ function initializeDatepickers() {
     console.log("Initializing datepickers...");
 
     // Initialize start date picker
-    $("#date_from").datepicker({
+    $("#date_from .datepicker").datepicker({
-        dateFormat: "yy-mm-dd",
+        dateFormat: "yyyy-mm-dd",
         changeMonth: true,
         changeYear: true,
         maxDate: new Date(),
         yearRange: "-5:+0",
+        autoclose: true,
+        todayHighlight: true,
+        orientation: "bottom auto",
+        language: "id",
+        clearBtn: true,
         onSelect: function (selectedDate) {
             console.log("Start date selected:", selectedDate);
             enableEndDatePicker(selectedDate);
@@ -91,7 +96,7 @@ function enableEndDatePicker(startDate) {
     $("#date_to").datepicker("destroy");
 
     // Re-initialize with new minDate
-    $("#date_to").datepicker({
+    $("#date_to .datepicker").datepicker({
         dateFormat: "yy-mm-dd",
         changeMonth: true,
         changeYear: true,
@@ -112,7 +117,7 @@ function enableEndDatePicker(startDate) {
  */
 function initializeEndDatePicker() {
     $("#date_to").datepicker({
-        dateFormat: "yy-mm-dd",
+        dateFormat: "yyyy-mm-dd",
         changeMonth: true,
         changeYear: true,
         maxDate: new Date(),

resources/views/warehouse_management/mutations/index.blade.php

@@ -26,7 +26,7 @@
 
   <div class="kt-portlet__body">
       <!-- Filter Section -->
-      <div class="kt-form kt-form--label-right kt-margin-b-10">
+      {{-- <div class="kt-form kt-form--label-right kt-margin-b-10">
           <div class="row align-items-end">
               <div class="col-md-2">
                   <div class="form-group mb-0">
@@ -62,7 +62,45 @@
                   </div>
               </div>
           </div>
-      </div>
+      </div> --}}
+
+    <div class="kt-form kt-form--label-right kt-margin-b-20">
+        <div class="row align-items-end">
+            <div class="col-xl-2 col-lg-3 col-md-6">
+                <div class="form-group mb-3 mb-lg-0">
+                    <label class="form-label">Tanggal Awal</label>
+                    <input type="text" class="form-control datepicker" id="date_from" name="date_from" placeholder="Tanggal awal" readonly>
+                </div>
+            </div>
+            <div class="col-xl-2 col-lg-3 col-md-6">
+                <div class="form-group mb-3 mb-lg-0">
+                    <label class="form-label">Tanggal Akhir</label>
+                    <input type="text" class="form-control datepicker" id="date_to" name="date_to" placeholder="Tanggal akhir" readonly>
+                </div>
+            </div>
+            <div class="col-xl-3 col-lg-4 col-md-12">
+                <div class="form-group mb-3 mb-lg-0">
+                    <label class="form-label">Dealer</label>
+                    <select class="form-control select2" id="dealer_filter" name="dealer_filter">
+                        <option value="">Pilih Dealer</option>
+                        @foreach($dealers as $dealer)
+                            <option value="{{ $dealer->id }}">{{ $dealer->name }}</option>
+                        @endforeach
+                    </select>
+                </div>
+            </div>
+            <div class="col-xl-5 col-lg-2 col-md-12">
+                <div class="form-group mb-0 d-flex align-items-end">
+                    <button type="button" class="btn btn-brand btn-bold mr-2" id="kt_search">
+                        <span>Filter</span>
+                    </button>
+                    <button type="button" class="btn btn-secondary btn-bold" id="kt_reset">
+                        <span>Reset</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
 
       <div class="table-responsive">
           <!--begin: Datatable -->
@@ -89,101 +127,124 @@
 
 @section('styles')
 <style>
-/* Override any conflicting styles */
-#mutations-table thead th {
-    position: relative !important;
-    cursor: pointer !important;
-    user-select: none !important;
-}
-
-#mutations-table thead th:not(.sorting_disabled) {
-    cursor: pointer !important;
-}
-
-/* Ensure DataTables classes are applied */
-#mutations-table.dataTable thead th.sorting,
-#mutations-table.dataTable thead th.sorting_asc,
-#mutations-table.dataTable thead th.sorting_desc {
-    cursor: pointer !important;
-    background-image: none !important;
-}
-/* DataTables Sorting Icons */
-table.dataTable thead .sorting:before,
-table.dataTable thead .sorting:after,
-table.dataTable thead .sorting_asc:before,
-table.dataTable thead .sorting_asc:after,
-table.dataTable thead .sorting_desc:before,
-table.dataTable thead .sorting_desc:after {
-    font-family: 'Font Awesome 5 Free';
-    font-weight: 900;
-    opacity: 0.5;
-}
-
-table.dataTable thead .sorting:before {
-    content: "\f0dc";
-}
-
-table.dataTable thead .sorting_asc:before {
-    content: "\f0de";
-    opacity: 1;
-}
-
-table.dataTable thead .sorting_desc:before {
-    content: "\f0dd";
-    opacity: 1;
-}
-
-table.dataTable thead .sorting:after,
-table.dataTable thead .sorting_asc:after,
-table.dataTable thead .sorting_desc:after {
-    display: none;
-}
-
-/* Ensure column headers are clickable */
-table.dataTable thead th {
-    cursor: pointer;
-    position: relative;
-    user-select: none;
-}
-
-table.dataTable thead th.sorting,
-table.dataTable thead th.sorting_asc,
-table.dataTable thead th.sorting_desc {
-    cursor: pointer !important;
-    pointer-events: auto !important;
-}
-
-/* Force clickable area */
-table.dataTable thead th.sorting:hover,
-table.dataTable thead th.sorting_asc:hover,
-table.dataTable thead th.sorting_desc:hover {
-    background-color: #f8f9fa;
-}
-
-/* Ensure sorting icons are visible */
-table.dataTable thead .sorting:before,
-table.dataTable thead .sorting_asc:before,
-table.dataTable thead .sorting_desc:before {
-    position: absolute;
-    right: 8px;
-    top: 50%;
-    transform: translateY(-50%);
-}
-
 /* Filter section styling */
+.kt-form--label-right {
+    background: #f8f9fa;
+    padding: 20px;
+    border-radius: 6px;
+    margin-bottom: 20px;
+    border: 1px solid #e2e5ec;
+}
+
 .form-label {
     font-weight: 600;
     color: #595d6e;
-    margin-bottom: 5px;
+    margin-bottom: 8px;
     font-size: 12px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
+    display: block;
 }
 
 .form-group.mb-0 {
     margin-bottom: 0 !important;
 }
 
+.form-group.mb-3 {
+    margin-bottom: 1rem !important;
+}
+
+/* Responsive spacing */
+@media (min-width: 992px) {
+    .form-group.mb-lg-0 {
+        margin-bottom: 0 !important;
+    }
+    
+    .kt-form--label-right [class*="col-"] {
+        margin-bottom: 0;
+    }
+    
+    /* Ensure buttons stay horizontal and aligned on desktop */
+    .kt-form--label-right [class*="col-"]:last-child .form-group {
+        display: flex;
+        align-items: flex-end;
+        min-height: 38px;
+    }
+    
+    .kt-form--label-right [class*="col-"]:last-child .btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: 38px;
+        width: auto;
+        margin-right: 10px;
+        margin-bottom: 0;
+    }
+    
+    .kt-form--label-right [class*="col-"]:last-child .btn:last-child {
+        margin-right: 0;
+    }
+}
+
+/* Add spacing between columns */
+.row [class*="col-"] {
+    padding-left: 12px;
+    padding-right: 12px;
+    margin-bottom: 15px;
+}
+
+/* First and last column adjustments */
+.row [class*="col-"]:first-child {
+    padding-left: 15px;
+}
+
+
+/* Additional spacing for form elements */
+.form-control {
+    margin-bottom: 0;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.form-group {
+    margin-bottom: 20px !important;
+    width: 100%;
+}
+
+/* Override for filter section to ensure proper spacing */
+.kt-form--label-right .form-group {
+    margin-bottom: 0 !important;
+    width: 100%;
+}
+
+.kt-form--label-right [class*="col-"] {
+    margin-bottom: 20px;
+    box-sizing: border-box;
+}
+
+
+/* Ensure form controls take full width of their container */
+.kt-form--label-right .form-control,
+.kt-form--label-right .select2-container {
+    width: 100% !important;
+    max-width: 100%;
+}
+
+/* Button alignment and styling */
+.kt-form--label-right .form-group.d-flex {
+    min-height: 38px;
+    align-items: flex-end !important;
+}
+
+.kt-form--label-right .btn {
+    height: 38px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    padding: 0 16px;
+}
+
 /* Date input container styling */
 .form-group {
     position: relative;
@@ -229,14 +290,12 @@ input[disabled] + .input-icon {
     opacity: 0.5;
 }
 
-/* Ensure Select2 container doesn't have conflicting padding */
-.select2-container .select2-selection--single .form-control {
-    padding-right: 12px !important;
-}
-
 /* Select2 styling */
 .select2-container {
     z-index: 9999;
+    width: 100% !important;
+    max-width: 100% !important;
+    display: block !important;
 }
 
 .select2-container--default .select2-selection--single {
@@ -246,6 +305,8 @@ input[disabled] + .input-icon {
     display: flex;
     align-items: center;
     padding: 0;
+    width: 100% !important;
+    box-sizing: border-box;
 }
 
 .select2-container--default .select2-selection--single .select2-selection__rendered {
@@ -257,6 +318,7 @@ input[disabled] + .input-icon {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    max-width: calc(100% - 30px); /* Ensure text doesn't overlap with arrow */
 }
 
 .select2-container--default .select2-selection--single .select2-selection__placeholder {
@@ -299,6 +361,9 @@ input[disabled] + .input-icon {
     border-radius: 4px;
     z-index: 9999 !important;
     box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    width: auto !important;
+    min-width: 200px;
+    max-width: 400px;
 }
 
 /* Ensure dropdown container has proper positioning */
@@ -308,6 +373,35 @@ input[disabled] + .input-icon {
 
 .select2-container--open .select2-dropdown {
     z-index: 9999 !important;
+    width: auto !important;
+    min-width: 200px;
+    max-width: 400px;
+}
+
+/* Prevent dropdown from taking full page width */
+.select2-dropdown--below {
+    width: auto !important;
+    min-width: 200px;
+    max-width: 400px;
+}
+
+.select2-dropdown--above {
+    width: auto !important;
+    min-width: 200px;
+    max-width: 400px;
+}
+
+/* Specific styling for dealer filter dropdown */
+#dealer_filter + .select2-container .select2-dropdown {
+    width: auto !important;
+    min-width: 250px;
+    max-width: 350px;
+}
+
+/* Override any parent width constraints for select2 dropdowns */
+.select2-container .select2-dropdown {
+    left: 0 !important;
+    right: auto !important;
 }
 
 .select2-results__option {
@@ -384,13 +478,17 @@ input[disabled] + .input-icon {
     color: white;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 991px) {
+    .kt-form--label-right {
+        padding: 15px;
+    }
+    
     .row.align-items-end {
         align-items: stretch !important;
     }
     
-    .col-md-2, .col-md-4 {
+    .form-group.mb-3 {
-        margin-bottom: 15px;
+        margin-bottom: 1.5rem !important;
     }
     
     .form-label {
@@ -400,16 +498,109 @@ input[disabled] + .input-icon {
     .ui-datepicker {
         font-size: 14px;
     }
+    
+    /* Ensure spacing between columns on tablet */
+    .kt-form--label-right [class*="col-"] {
+        margin-bottom: 25px;
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+    
+    
+    /* Button alignment on tablet */
+    .kt-form--label-right [class*="col-"]:last-child .form-group {
+        display: flex;
+        align-items: flex-end;
+        min-height: 38px;
+    }
+    
+    .kt-form--label-right [class*="col-"]:last-child .btn {
+        height: 38px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 10px;
+        margin-bottom: 0;
+    }
+    
+    .kt-form--label-right [class*="col-"]:last-child .btn:last-child {
+        margin-right: 0;
+    }
+}
+
+@media (max-width: 767px) {
+    .kt-form--label-right {
+        padding: 12px;
+    }
+    
+    /* Keep buttons horizontal and aligned */
+    .kt-form--label-right [class*="col-"]:last-child .form-group {
+        display: flex;
+        align-items: flex-end;
+        min-height: 38px;
+        margin-top: 15px;
+    }
+    
+    .kt-form--label-right [class*="col-"]:last-child .btn {
+        height: 38px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: auto;
+        margin-right: 10px;
+        margin-bottom: 0;
+    }
+    
+    .kt-form--label-right [class*="col-"]:last-child .btn:last-child {
+        margin-right: 0;
+    }
 }
 
 @media (max-width: 576px) {
-    .col-md-4:last-child .form-group {
+    .kt-form--label-right {
-        text-align: center;
+        padding: 15px;
     }
     
-    .col-md-4:last-child .btn {
+    .kt-form--label-right [class*="col-"] {
-        width: 45%;
+        padding-left: 15px;
-        margin: 0 2.5%;
+        padding-right: 15px;
+        margin-bottom: 25px;
+    }
+
+    /* Ensure proper form control widths on mobile */
+    .kt-form--label-right .form-control,
+    .kt-form--label-right .select2-container {
+        width: 100% !important;
+        max-width: 100% !important;
+    }
+    
+    .form-label {
+        margin-bottom: 8px;
+        display: block;
+        width: 100%;
+    }
+    
+    /* Keep buttons horizontal and aligned on mobile */
+    .kt-form--label-right [class*="col-"]:last-child .form-group {
+        display: flex;
+        align-items: flex-end;
+        min-height: 38px;
+    }
+    
+    .kt-form--label-right [class*="col-"]:last-child .btn {
+        height: 38px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: auto;
+        min-width: 80px;
+        margin-right: 8px;
+        margin-bottom: 0;
+        flex-shrink: 0;
+    }
+    
+    .kt-form--label-right [class*="col-"]:last-child .btn:last-child {
+        margin-right: 0;
     }
 }
 </style>

resources/views/warehouse_management/opnames/index.blade.php

@@ -24,22 +24,22 @@
 
   <div class="kt-portlet__body">
     <!-- Filter Section -->
-    <div class="kt-form kt-form--label-right kt-margin-b-10">
+    <div class="kt-form kt-form--label-right kt-margin-b-20">
         <div class="row align-items-end">
-            <div class="col-md-2">
+            <div class="col-xl-2 col-lg-3 col-md-6">
-                <div class="form-group mb-0">
+                <div class="form-group mb-3 mb-lg-0">
                     <label class="form-label">Tanggal Awal</label>
-                    <input type="text" class="form-control" id="date_from" name="date_from" placeholder="Tanggal awal" readonly>
+                    <input type="text" class="form-control datepicker" id="date_from" name="date_from" placeholder="Tanggal awal" readonly>
                 </div>
             </div>
-            <div class="col-md-2">
+            <div class="col-xl-2 col-lg-3 col-md-6">
-                <div class="form-group mb-0">
+                <div class="form-group mb-3 mb-lg-0">
                     <label class="form-label">Tanggal Akhir</label>
-                    <input type="text" class="form-control" id="date_to" name="date_to" placeholder="Tanggal akhir" readonly>
+                    <input type="text" class="form-control datepicker" id="date_to" name="date_to" placeholder="Tanggal akhir" readonly>
                 </div>
             </div>
-            <div class="col-md-4">
+            <div class="col-xl-3 col-lg-4 col-md-12">
-                <div class="form-group mb-0">
+                <div class="form-group mb-3 mb-lg-0">
                     <label class="form-label">Dealer</label>
                     <select class="form-control select2" id="dealer_filter" name="dealer_filter">
                         <option value="">Pilih Dealer</option>
@@ -49,8 +49,8 @@
                     </select>
                 </div>
             </div>
-            <div class="col-md-4">
+            <div class="col-xl-5 col-lg-2 col-md-12">
-                <div class="form-group mb-0">
+                <div class="form-group mb-0 d-flex align-items-end">
                     <button type="button" class="btn btn-brand btn-bold mr-2" id="kt_search">
                         <span>Filter</span>
                     </button>
@@ -84,19 +84,123 @@
 @section('styles')
 <style>
 /* Filter section styling */
+.kt-form--label-right {
+    background: #f8f9fa;
+    padding: 20px;
+    border-radius: 6px;
+    margin-bottom: 20px;
+    border: 1px solid #e2e5ec;
+}
+
 .form-label {
     font-weight: 600;
     color: #595d6e;
-    margin-bottom: 5px;
+    margin-bottom: 8px;
     font-size: 12px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
+    display: block;
 }
 
 .form-group.mb-0 {
     margin-bottom: 0 !important;
 }
 
+.form-group.mb-3 {
+    margin-bottom: 1rem !important;
+}
+
+/* Responsive spacing */
+@media (min-width: 992px) {
+    .form-group.mb-lg-0 {
+        margin-bottom: 0 !important;
+    }
+    
+    .kt-form--label-right [class*="col-"] {
+        margin-bottom: 0;
+    }
+    
+    /* Ensure buttons stay horizontal and aligned on desktop */
+    .kt-form--label-right [class*="col-"]:last-child .form-group {
+        display: flex;
+        align-items: flex-end;
+        min-height: 38px;
+    }
+    
+    .kt-form--label-right [class*="col-"]:last-child .btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: 38px;
+        width: auto;
+        margin-right: 10px;
+        margin-bottom: 0;
+    }
+    
+    .kt-form--label-right [class*="col-"]:last-child .btn:last-child {
+        margin-right: 0;
+    }
+}
+
+/* Add spacing between columns */
+.row [class*="col-"] {
+    padding-left: 12px;
+    padding-right: 12px;
+    margin-bottom: 15px;
+}
+
+/* First and last column adjustments */
+.row [class*="col-"]:first-child {
+    padding-left: 15px;
+}
+
+
+/* Additional spacing for form elements */
+.form-control {
+    margin-bottom: 0;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.form-group {
+    margin-bottom: 20px !important;
+    width: 100%;
+}
+
+/* Override for filter section to ensure proper spacing */
+.kt-form--label-right .form-group {
+    margin-bottom: 0 !important;
+    width: 100%;
+}
+
+.kt-form--label-right [class*="col-"] {
+    margin-bottom: 20px;
+    box-sizing: border-box;
+}
+
+
+/* Ensure form controls take full width of their container */
+.kt-form--label-right .form-control,
+.kt-form--label-right .select2-container {
+    width: 100% !important;
+    max-width: 100%;
+}
+
+/* Button alignment and styling */
+.kt-form--label-right .form-group.d-flex {
+    min-height: 38px;
+    align-items: flex-end !important;
+}
+
+.kt-form--label-right .btn {
+    height: 38px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    padding: 0 16px;
+}
+
 /* Date input container styling */
 .form-group {
     position: relative;
@@ -145,6 +249,9 @@ input[disabled] + .input-icon {
 /* Select2 styling */
 .select2-container {
     z-index: 9999;
+    width: 100% !important;
+    max-width: 100% !important;
+    display: block !important;
 }
 
 .select2-container--default .select2-selection--single {
@@ -154,6 +261,8 @@ input[disabled] + .input-icon {
     display: flex;
     align-items: center;
     padding: 0;
+    width: 100% !important;
+    box-sizing: border-box;
 }
 
 .select2-container--default .select2-selection--single .select2-selection__rendered {
@@ -208,6 +317,9 @@ input[disabled] + .input-icon {
     border-radius: 4px;
     z-index: 9999 !important;
     box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    width: auto !important;
+    min-width: 200px;
+    max-width: 400px;
 }
 
 /* Ensure dropdown container has proper positioning */
@@ -217,6 +329,35 @@ input[disabled] + .input-icon {
 
 .select2-container--open .select2-dropdown {
     z-index: 9999 !important;
+    width: auto !important;
+    min-width: 200px;
+    max-width: 400px;
+}
+
+/* Prevent dropdown from taking full page width */
+.select2-dropdown--below {
+    width: auto !important;
+    min-width: 200px;
+    max-width: 400px;
+}
+
+.select2-dropdown--above {
+    width: auto !important;
+    min-width: 200px;
+    max-width: 400px;
+}
+
+/* Specific styling for dealer filter dropdown */
+#dealer_filter + .select2-container .select2-dropdown {
+    width: auto !important;
+    min-width: 250px;
+    max-width: 350px;
+}
+
+/* Override any parent width constraints for select2 dropdowns */
+.select2-container .select2-dropdown {
+    left: 0 !important;
+    right: auto !important;
 }
 
 .select2-results__option {
@@ -293,13 +434,17 @@ input[disabled] + .input-icon {
     color: white;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 991px) {
+    .kt-form--label-right {
+        padding: 15px;
+    }
+    
     .row.align-items-end {
         align-items: stretch !important;
     }
     
-    .col-md-2, .col-md-4 {
+    .form-group.mb-3 {
-        margin-bottom: 15px;
+        margin-bottom: 1.5rem !important;
     }
     
     .form-label {
@@ -309,16 +454,109 @@ input[disabled] + .input-icon {
     .ui-datepicker {
         font-size: 14px;
     }
+    
+    /* Ensure spacing between columns on tablet */
+    .kt-form--label-right [class*="col-"] {
+        margin-bottom: 25px;
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+    
+    
+    /* Button alignment on tablet */
+    .kt-form--label-right [class*="col-"]:last-child .form-group {
+        display: flex;
+        align-items: flex-end;
+        min-height: 38px;
+    }
+    
+    .kt-form--label-right [class*="col-"]:last-child .btn {
+        height: 38px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 10px;
+        margin-bottom: 0;
+    }
+    
+    .kt-form--label-right [class*="col-"]:last-child .btn:last-child {
+        margin-right: 0;
+    }
+}
+
+@media (max-width: 767px) {
+    .kt-form--label-right {
+        padding: 12px;
+    }
+    
+    /* Keep buttons horizontal and aligned */
+    .kt-form--label-right [class*="col-"]:last-child .form-group {
+        display: flex;
+        align-items: flex-end;
+        min-height: 38px;
+        margin-top: 15px;
+    }
+    
+    .kt-form--label-right [class*="col-"]:last-child .btn {
+        height: 38px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: auto;
+        margin-right: 10px;
+        margin-bottom: 0;
+    }
+    
+    .kt-form--label-right [class*="col-"]:last-child .btn:last-child {
+        margin-right: 0;
+    }
 }
 
 @media (max-width: 576px) {
-    .col-md-4:last-child .form-group {
+    .kt-form--label-right {
-        text-align: center;
+        padding: 15px;
     }
     
-    .col-md-4:last-child .btn {
+    .kt-form--label-right [class*="col-"] {
-        width: 45%;
+        padding-left: 15px;
-        margin: 0 2.5%;
+        padding-right: 15px;
+        margin-bottom: 25px;
+    }
+
+    /* Ensure proper form control widths on mobile */
+    .kt-form--label-right .form-control,
+    .kt-form--label-right .select2-container {
+        width: 100% !important;
+        max-width: 100% !important;
+    }
+    
+    .form-label {
+        margin-bottom: 8px;
+        display: block;
+        width: 100%;
+    }
+    
+    /* Keep buttons horizontal and aligned on mobile */
+    .kt-form--label-right [class*="col-"]:last-child .form-group {
+        display: flex;
+        align-items: flex-end;
+        min-height: 38px;
+    }
+    
+    .kt-form--label-right [class*="col-"]:last-child .btn {
+        height: 38px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: auto;
+        min-width: 80px;
+        margin-right: 8px;
+        margin-bottom: 0;
+        flex-shrink: 0;
+    }
+    
+    .kt-form--label-right [class*="col-"]:last-child .btn:last-child {
+        margin-right: 0;
     }
 }
 </style>