@transferwise/components 46.159.1 → 46.160.0

package/build/styles/css/panels.css

@@ -1,9 +1,9 @@
 .panel {
-  margin-bottom: 16px;
+  margin-block-end: 16px;
   background-color: transparent;
   border: 0;
-  margin-left: -16px;
-  margin-right: -16px;
+  margin-inline-start: -16px;
+  margin-inline-end: -16px;
 }
 .panel-body {
   padding: 16px;
@@ -11,14 +11,15 @@
   background-color: var(--color-background-screen);
 }
 .panel-heading {
-  padding: 16px 16px 8px 16px;
+  padding-block: 16px 8px;
+  padding-inline: 16px 16px;
 }
 .panel-heading > .dropdown .dropdown-toggle {
   color: inherit;
 }
 .panel-title {
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
   line-height: calc(1.2 + 8px);
   line-height: calc(var(--line-height-title) + 8px);
 }
@@ -31,12 +32,13 @@
 }
 @media (min-width: 600px) {
   .panel {
-    margin-bottom: 24px;
-    margin-left: -24px;
-    margin-right: -24px;
+    margin-block-end: 24px;
+    margin-inline-start: -24px;
+    margin-inline-end: -24px;
   }
   .panel-heading {
-    padding: 16px 24px 8px 24px;
+    padding-block: 16px 8px;
+    padding-inline: 24px 24px;
   }
   .panel-body {
     padding: 24px;
@@ -47,16 +49,17 @@
 }
 @media (min-width: 840px) {
   .panel {
-    margin-left: 0;
-    margin-right: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .panel-heading {
-    padding: 16px 0 8px 0;
+    padding-block: 16px 8px;
+    padding-inline: 0 0;
   }
 }
 @media (min-width: 1160px) {
   .panel {
-    margin-bottom: 32px;
+    margin-block-end: 32px;
     border-radius: 3px;
   }
   .panel-body {
@@ -72,215 +75,147 @@
     line-height: calc(var(--line-height-title) * 2);
   }
   .panel-heading > .btn-sm {
-    margin-top: 8px;
+    margin-block-start: 8px;
   }
 }
 .panel > .list-group,
 .panel > .panel-collapse > .list-group {
-  margin-bottom: 0;
-  border-left: 0;
-  border-right: 0;
+  margin-block-end: 0;
+  border-inline-start: 0;
+  border-inline-end: 0;
 }
 .panel > .list-group .list-group-item,
 .panel > .panel-collapse > .list-group .list-group-item {
   border-radius: 0;
 }
 .panel > .panel-heading + .panel-collapse > .list-group .list-group-item:first-child {
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
+  border-start-end-radius: 0;
+  border-start-start-radius: 0;
 }
 .panel-list-group {
-  margin-bottom: 0;
-  border-left: 0;
-  border-right: 0;
+  margin-block-end: 0;
+  border-inline-start: 0;
+  border-inline-end: 0;
 }
 .list-group + .panel-footer {
-  border-top-width: 0;
+  border-block-start-width: 0;
 }
 .panel > .table,
 .panel > .table-responsive > .table,
 .panel > .panel-collapse > .table {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .panel > .table caption,
 .panel > .table-responsive > .table caption,
 .panel > .panel-collapse > .table caption {
-  padding-left: 32px;
-  padding-right: 32px;
+  padding-inline-start: 32px;
+  padding-inline-end: 32px;
 }
 .panel > .table:first-child,
 .panel > .table-responsive:first-child > .table:first-child {
-  border-top-right-radius: 2px;
-  border-top-left-radius: 2px;
+  border-start-end-radius: 2px;
+  border-start-start-radius: 2px;
 }
 .panel > .table:first-child > thead:first-child > tr:first-child,
 .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child,
 .panel > .table:first-child > tbody:first-child > tr:first-child,
 .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
-}
-[dir="rtl"] .panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
-[dir="rtl"] .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
-[dir="rtl"] .panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
-[dir="rtl"] .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
-[dir="rtl"] .panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
-[dir="rtl"] .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
-[dir="rtl"] .panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
-[dir="rtl"] .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
-  border-top-right-radius: 2px;
-}
-html:not([dir="rtl"]) .panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
-html:not([dir="rtl"]) .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
-html:not([dir="rtl"]) .panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
-html:not([dir="rtl"]) .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
-html:not([dir="rtl"]) .panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
-html:not([dir="rtl"]) .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
-html:not([dir="rtl"]) .panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
-html:not([dir="rtl"]) .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
-  border-top-left-radius: 2px;
-}
-[dir="rtl"] .panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
-[dir="rtl"] .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
-[dir="rtl"] .panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
-[dir="rtl"] .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
-[dir="rtl"] .panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
-[dir="rtl"] .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
-[dir="rtl"] .panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
-[dir="rtl"] .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
-  border-top-left-radius: 2px;
-}
-html:not([dir="rtl"]) .panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
-html:not([dir="rtl"]) .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
-html:not([dir="rtl"]) .panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
-html:not([dir="rtl"]) .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
-html:not([dir="rtl"]) .panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
-html:not([dir="rtl"]) .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
-html:not([dir="rtl"]) .panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
-html:not([dir="rtl"]) .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
-  border-top-right-radius: 2px;
+  border-start-start-radius: 2px;
+  border-start-end-radius: 2px;
+}
+.panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
+.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
+.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
+.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
+.panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
+.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
+.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
+.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
+  border-start-start-radius: 2px;
+}
+.panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
+.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
+.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
+.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
+.panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
+.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
+.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
+.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
+  border-start-end-radius: 2px;
 }
 .panel > .table:last-child,
 .panel > .table-responsive:last-child > .table:last-child {
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 2px;
+  border-end-end-radius: 2px;
+  border-end-start-radius: 2px;
 }
 .panel > .table:last-child > tbody:last-child > tr:last-child,
 .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child,
 .panel > .table:last-child > tfoot:last-child > tr:last-child,
 .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-[dir="rtl"] .panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
-[dir="rtl"] .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
-[dir="rtl"] .panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
-[dir="rtl"] .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
-[dir="rtl"] .panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
-[dir="rtl"] .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
-[dir="rtl"] .panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
-[dir="rtl"] .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
-  border-bottom-right-radius: 2px;
-}
-html:not([dir="rtl"]) .panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
-html:not([dir="rtl"]) .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
-html:not([dir="rtl"]) .panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
-html:not([dir="rtl"]) .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
-html:not([dir="rtl"]) .panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
-html:not([dir="rtl"]) .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
-html:not([dir="rtl"]) .panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
-html:not([dir="rtl"]) .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
-  border-bottom-left-radius: 2px;
-}
-[dir="rtl"] .panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
-[dir="rtl"] .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
-[dir="rtl"] .panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
-[dir="rtl"] .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
-[dir="rtl"] .panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
-[dir="rtl"] .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
-[dir="rtl"] .panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
-[dir="rtl"] .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
-  border-bottom-left-radius: 2px;
-}
-html:not([dir="rtl"]) .panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
-html:not([dir="rtl"]) .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
-html:not([dir="rtl"]) .panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
-html:not([dir="rtl"]) .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
-html:not([dir="rtl"]) .panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
-html:not([dir="rtl"]) .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
-html:not([dir="rtl"]) .panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
-html:not([dir="rtl"]) .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
-  border-bottom-right-radius: 2px;
+  border-end-start-radius: 2px;
+  border-end-end-radius: 2px;
+}
+.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
+.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
+.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
+.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
+.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
+.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
+.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
+.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
+  border-end-start-radius: 2px;
+}
+.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
+.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
+.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
+.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
+.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
+.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
+.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
+.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
+  border-end-end-radius: 2px;
 }
 .panel > .panel-body + .table,
 .panel > .panel-body + .table-responsive,
 .panel > .table + .panel-body,
 .panel > .table-responsive + .panel-body {
-  border-top: 1px solid #f2f5f7;
+  border-block-start: 1px solid #f2f5f7;
 }
 .panel > .table > tbody:first-child > tr:first-child th,
 .panel > .table > tbody:first-child > tr:first-child td {
-  border-top: 0;
+  border-block-start: 0;
 }
 .panel > .table-bordered,
 .panel > .table-responsive > .table-bordered {
   border: 0;
 }
-[dir="rtl"] .panel > .table-bordered > thead > tr > th:first-child,
-[dir="rtl"] .panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
-[dir="rtl"] .panel > .table-bordered > tbody > tr > th:first-child,
-[dir="rtl"] .panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
-[dir="rtl"] .panel > .table-bordered > tfoot > tr > th:first-child,
-[dir="rtl"] .panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
-[dir="rtl"] .panel > .table-bordered > thead > tr > td:first-child,
-[dir="rtl"] .panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
-[dir="rtl"] .panel > .table-bordered > tbody > tr > td:first-child,
-[dir="rtl"] .panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
-[dir="rtl"] .panel > .table-bordered > tfoot > tr > td:first-child,
-[dir="rtl"] .panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
-  border-right: 0  ;
-}
-html:not([dir="rtl"]) .panel > .table-bordered > thead > tr > th:first-child,
-html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
-html:not([dir="rtl"]) .panel > .table-bordered > tbody > tr > th:first-child,
-html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
-html:not([dir="rtl"]) .panel > .table-bordered > tfoot > tr > th:first-child,
-html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
-html:not([dir="rtl"]) .panel > .table-bordered > thead > tr > td:first-child,
-html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
-html:not([dir="rtl"]) .panel > .table-bordered > tbody > tr > td:first-child,
-html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
-html:not([dir="rtl"]) .panel > .table-bordered > tfoot > tr > td:first-child,
-html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
-  border-left: 0  ;
-}
-[dir="rtl"] .panel > .table-bordered > thead > tr > th:last-child,
-[dir="rtl"] .panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
-[dir="rtl"] .panel > .table-bordered > tbody > tr > th:last-child,
-[dir="rtl"] .panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
-[dir="rtl"] .panel > .table-bordered > tfoot > tr > th:last-child,
-[dir="rtl"] .panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
-[dir="rtl"] .panel > .table-bordered > thead > tr > td:last-child,
-[dir="rtl"] .panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
-[dir="rtl"] .panel > .table-bordered > tbody > tr > td:last-child,
-[dir="rtl"] .panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
-[dir="rtl"] .panel > .table-bordered > tfoot > tr > td:last-child,
-[dir="rtl"] .panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
-  border-left: 0  ;
-}
-html:not([dir="rtl"]) .panel > .table-bordered > thead > tr > th:last-child,
-html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
-html:not([dir="rtl"]) .panel > .table-bordered > tbody > tr > th:last-child,
-html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
-html:not([dir="rtl"]) .panel > .table-bordered > tfoot > tr > th:last-child,
-html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
-html:not([dir="rtl"]) .panel > .table-bordered > thead > tr > td:last-child,
-html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
-html:not([dir="rtl"]) .panel > .table-bordered > tbody > tr > td:last-child,
-html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
-html:not([dir="rtl"]) .panel > .table-bordered > tfoot > tr > td:last-child,
-html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
-  border-right: 0  ;
+.panel > .table-bordered > thead > tr > th:first-child,
+.panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
+.panel > .table-bordered > tbody > tr > th:first-child,
+.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
+.panel > .table-bordered > tfoot > tr > th:first-child,
+.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
+.panel > .table-bordered > thead > tr > td:first-child,
+.panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
+.panel > .table-bordered > tbody > tr > td:first-child,
+.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
+.panel > .table-bordered > tfoot > tr > td:first-child,
+.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
+  border-inline-start: 0  ;
+}
+.panel > .table-bordered > thead > tr > th:last-child,
+.panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
+.panel > .table-bordered > tbody > tr > th:last-child,
+.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
+.panel > .table-bordered > tfoot > tr > th:last-child,
+.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
+.panel > .table-bordered > thead > tr > td:last-child,
+.panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
+.panel > .table-bordered > tbody > tr > td:last-child,
+.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
+.panel > .table-bordered > tfoot > tr > td:last-child,
+.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
+  border-inline-end: 0  ;
 }
 .panel > .table-bordered > thead > tr:first-child > td,
 .panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
@@ -290,7 +225,7 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
 .panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
 .panel > .table-bordered > tbody > tr:first-child > th,
 .panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
-  border-bottom: 0;
+  border-block-end: 0;
 }
 .panel > .table-bordered > tbody > tr:last-child > td,
 .panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
@@ -300,99 +235,63 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
 .panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
 .panel > .table-bordered > tfoot > tr:last-child > th,
 .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
-  border-bottom: 0;
+  border-block-end: 0;
 }
 .panel > .table-responsive {
   border: 0;
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .panel > .table tr > :first-child,
 .panel > .table-responsive tr > :first-child {
-  padding-left: 16px;
-}
-[dir="rtl"] .panel > .table tr > :first-child,
-[dir="rtl"] .panel > .table-responsive tr > :first-child {
-  padding-right: 16px;
-  padding-left: 0;
-  padding-left: initial;
+  padding-inline-start: 16px;
 }
 .panel > .table tr > :last-child,
 .panel > .table-responsive tr > :last-child {
-  padding-right: 16px;
-}
-[dir="rtl"] .panel > .table tr > :last-child,
-[dir="rtl"] .panel > .table-responsive tr > :last-child {
-  padding-left: 16px;
-  padding-right: 0;
-  padding-right: initial;
+  padding-inline-end: 16px;
 }
 @media (min-width: 840px) {
   .panel > .table tr > :first-child,
   .panel > .table-responsive tr > :first-child {
-    padding-left: 24px;
-  }
-  [dir="rtl"] .panel > .table tr > :first-child,
-  [dir="rtl"] .panel > .table-responsive tr > :first-child {
-    padding-right: 24px;
-    padding-left: 0;
-    padding-left: initial;
+    padding-inline-start: 24px;
   }
   .panel > .table tr > :last-child,
   .panel > .table-responsive tr > :last-child {
-    padding-right: 24px;
-  }
-  [dir="rtl"] .panel > .table tr > :last-child,
-  [dir="rtl"] .panel > .table-responsive tr > :last-child {
-    padding-left: 24px;
-    padding-right: 0;
-    padding-right: initial;
+    padding-inline-end: 24px;
   }
 }
 @media (min-width: 1160px) {
   .panel > .table tr > :first-child,
   .panel > .table-responsive tr > :first-child {
-    padding-left: 32px;
-  }
-  [dir="rtl"] .panel > .table tr > :first-child,
-  [dir="rtl"] .panel > .table-responsive tr > :first-child {
-    padding-right: 32px;
-    padding-left: 0;
-    padding-left: initial;
+    padding-inline-start: 32px;
   }
   .panel > .table tr > :last-child,
   .panel > .table-responsive tr > :last-child {
-    padding-right: 32px;
-  }
-  [dir="rtl"] .panel > .table tr > :last-child,
-  [dir="rtl"] .panel > .table-responsive tr > :last-child {
-    padding-left: 32px;
-    padding-right: 0;
-    padding-right: initial;
+    padding-inline-end: 32px;
   }
 }
 .panel-group {
-  margin-bottom: 24px;
-  margin-bottom: var(--size-24);
+  margin-block-end: 24px;
+  margin-block-end: var(--size-24);
 }
 .panel-group .panel {
-  margin-bottom: 0;
+  margin-block-end: 0;
   border-radius: 3px;
 }
 .panel-group .panel + .panel {
-  margin-top: 8px;
+  margin-block-start: 8px;
 }
 .panel-group .panel-heading {
-  border-bottom: 0;
+  border-block-end: 0;
 }
 .panel-group .panel-heading + .panel-collapse > .panel-body,
 .panel-group .panel-heading + .panel-collapse > .list-group {
-  border-top: 1px solid #FFF;
+  border-block-start: 1px solid #FFF;
 }
 .panel-group .panel-footer {
-  border-top: 0;
+  border-block-start: 0;
 }
 .panel-group .panel-footer + .panel-collapse .panel-body {
-  border-bottom: 1px solid #FFF;
+  border-block-end: 1px solid #FFF;
 }
 .panel-default {
   border-color: #e2e6e8 !important;
@@ -402,14 +301,14 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
   border-color: #e2e6e8;
 }
 .panel-default > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #e2e6e8;
+  border-block-start-color: #e2e6e8;
 }
 .panel-default > .panel-heading .badge {
   color: #fff;
   background-color: #4a5860;
 }
 .panel-default > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #e2e6e8;
+  border-block-end-color: #e2e6e8;
 }
 .panel-primary {
   border-color: #37517e !important;
@@ -419,14 +318,14 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
   border-color: #37517e;
 }
 .panel-primary > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #37517e;
+  border-block-start-color: #37517e;
 }
 .panel-primary > .panel-heading .badge {
   color: #fff;
   background-color: #fff;
 }
 .panel-primary > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #37517e;
+  border-block-end-color: #37517e;
 }
 .panel-success {
   border-color: #2ED06E !important;
@@ -436,14 +335,14 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
   border-color: #2ED06E;
 }
 .panel-success > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #2ED06E;
+  border-block-start-color: #2ED06E;
 }
 .panel-success > .panel-heading .badge {
   color: #FFF;
   background-color: #1B7940;
 }
 .panel-success > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #2ED06E;
+  border-block-end-color: #2ED06E;
 }
 .panel-info {
   border-color: #00b9ff !important;
@@ -453,14 +352,14 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
   border-color: #00b9ff;
 }
 .panel-info > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #00b9ff;
+  border-block-start-color: #00b9ff;
 }
 .panel-info > .panel-heading .badge {
   color: #FFF;
   background-color: #00a4df;
 }
 .panel-info > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #00b9ff;
+  border-block-end-color: #00b9ff;
 }
 .panel-warning {
   border-color: #FFA600 !important;
@@ -470,14 +369,14 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
   border-color: #FFA600;
 }
 .panel-warning > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #FFA600;
+  border-block-start-color: #FFA600;
 }
 .panel-warning > .panel-heading .badge {
   color: #FFF;
   background-color: #9E5F00;
 }
 .panel-warning > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #FFA600;
+  border-block-end-color: #FFA600;
 }
 .panel-danger {
   border-color: #F53636 !important;
@@ -487,21 +386,21 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
   border-color: #F53636;
 }
 .panel-danger > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #F53636;
+  border-block-start-color: #F53636;
 }
 .panel-danger > .panel-heading .badge {
   color: #FFF;
   background-color: #C22E2E;
 }
 .panel-danger > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #F53636;
+  border-block-end-color: #F53636;
 }
 .panel ul:last-child {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .panel-group .panel {
-  margin-left: 0;
-  margin-right: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
   border: 1px solid #e2e6e8;
 }
 .panel-group .panel-heading,
@@ -517,12 +416,13 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
 @media (min-width: 1160px) {
   .panel-group .panel .panel-heading,
   .panel-group .panel .panel-footer {
-    padding: 24px 32px;
+    padding-block: 24px;
+    padding-inline: 32px;
   }
 }
 @media (min-width: 840px) {
   .panel {
-    margin-left: 0;
-    margin-right: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
 }