@transferwise/components 46.159.2 → 46.160.1

package/src/styles/less/forms/bootstrap-forms.css

@@ -1,21 +1,21 @@
 form {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 fieldset {
   padding: 0;
   margin: 0;
   border: 0;
-  min-width: 0;
+  min-inline-size: 0;
 }
 legend {
   display: block;
-  width: 100%;
+  inline-size: 100%;
 }
 label {
   display: inline-block;
-  max-width: 100%;
-  margin-bottom: 4px;
-  margin-bottom: var(--size-4);
+  max-inline-size: 100%;
+  margin-block-end: 4px;
+  margin-block-end: var(--size-4);
 }
 label,
 .secondary {
@@ -42,8 +42,9 @@ input[type='number']::-webkit-inner-spin-button {
 }
 input[type='radio'],
 input[type='checkbox'] {
-  margin: 4px 0 0;
-  margin-top: 1px;
+  margin-block: 4px 0;
+  margin-inline: 0;
+  margin-block-start: 1px;
   line-height: normal;
 }
 input[type='file'] {
@@ -51,11 +52,11 @@ input[type='file'] {
 }
 input[type='range'] {
   display: block;
-  width: 100%;
+  inline-size: 100%;
 }
 select[multiple],
 select[size] {
-  height: auto;
+  block-size: auto;
 }
 input[type='file']:focus,
 input[type='radio']:focus,
@@ -65,7 +66,7 @@ input[type='checkbox']:focus {
 }
 output {
   display: block;
-  padding-top: 9px;
+  padding-block-start: 9px;
   font-size: 1rem;
   font-size: var(--font-size-16);
   line-height: 1.2;
@@ -75,7 +76,7 @@ output {
 }
 .form-control {
   display: block;
-  width: 100%;
+  inline-size: 100%;
   color: #37517e;
   color: var(--color-content-primary);
   background-color: #ffffff;
@@ -84,7 +85,7 @@ output {
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
   transition: border-color ease-in-out 0.15s;
-  min-height: var(--input-height-base);
+  min-block-size: var(--input-height-base);
   padding: var(--input-padding);
   border-radius: 3px;
   font-weight: 400;
@@ -96,11 +97,11 @@ output {
   background-clip: padding-box;
 }
 select.form-control {
-  min-height: var(--input-height-base);
+  min-block-size: var(--input-height-base);
 }
 textarea.form-control,
 select[multiple].form-control {
-  height: auto;
+  block-size: auto;
 }
 .form-control:not(.disabled):not(:disabled):focus {
   border-color: #0081ba;
@@ -116,7 +117,7 @@ select[multiple].form-control {
   color: var(--color-content-tertiary);
 }
 textarea.form-control {
-  height: 144px;
+  block-size: 144px;
 }
 .form-control + .text-muted,
 .form-control + .text-primary,
@@ -126,7 +127,7 @@ textarea.form-control {
 .form-control + .text-warning,
 .form-control + .text-negative,
 .form-control + .text-danger {
-  margin-top: 8px;
+  margin-block-start: 8px;
 }
 .form-control:focus {
   border-color: #0081ba;
@@ -178,10 +179,10 @@ input[type='search'] {
   }
 }
 .form-group {
-  margin-bottom: 24px;
+  margin-block-end: 24px;
 }
 .form-group label {
-  margin-bottom: 2px;
+  margin-block-end: 2px;
 }
 .form-group:focus-within .control-label,
 .form-group:focus-within > label {
@@ -189,56 +190,42 @@ input[type='search'] {
   color: var(--color-content-primary);
 }
 .row-equal-height > [class*='col-'] > .form-group {
-  width: 100%;
+  inline-size: 100%;
 }
 .radio,
 .checkbox {
   position: relative;
   display: block;
-  margin-top: 0;
+  margin-block-start: 0;
 }
 .radio label,
 .checkbox label {
-  min-height: var(--input-height-base);
-  margin-bottom: 0;
+  min-block-size: var(--input-height-base);
+  margin-block-end: 0;
   cursor: pointer;
 }
 .radio + .radio,
 .checkbox + .checkbox {
-  margin-top: 12px;
+  margin-block-start: 12px;
 }
 .radio input[type='radio'],
 .radio-inline input[type='radio'],
 .checkbox input[type='checkbox'],
 .checkbox-inline input[type='checkbox'] {
   position: absolute;
-  margin-left: -20px;
-  margin-top: 4px \9;
-}
-[dir="rtl"] .radio input[type='radio'],
-[dir="rtl"] .radio-inline input[type='radio'],
-[dir="rtl"] .checkbox input[type='checkbox'],
-[dir="rtl"] .checkbox-inline input[type='checkbox'] {
-  margin-right: -20px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-start: -20px;
+  margin-block-start: 4px \9;
 }
 .radio-inline,
 .checkbox-inline {
   position: relative;
   display: inline-block;
-  padding-left: 20px;
-  margin-bottom: 0;
+  padding-inline-start: 20px;
+  margin-block-end: 0;
   vertical-align: middle;
   font-weight: normal;
   cursor: pointer;
 }
-[dir="rtl"] .radio-inline,
-[dir="rtl"] .checkbox-inline {
-  padding-right: 20px;
-  padding-left: 0;
-  padding-left: initial;
-}
 .radio-inline.disabled,
 .checkbox-inline.disabled,
 fieldset[disabled] .radio-inline,
@@ -247,14 +234,8 @@ fieldset[disabled] .checkbox-inline {
 }
 .radio-inline + .radio-inline,
 .checkbox-inline + .checkbox-inline {
-  margin-top: 0;
-  margin-left: 10px;
-}
-[dir="rtl"] .radio-inline + .radio-inline,
-[dir="rtl"] .checkbox-inline + .checkbox-inline {
-  margin-right: 10px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-block-start: 0;
+  margin-inline-start: 10px;
 }
 input[type='radio'][disabled],
 input[type='checkbox'][disabled],
@@ -274,9 +255,9 @@ fieldset[disabled] .checkbox label {
   cursor: not-allowed;
 }
 .form-control-static {
-  margin-bottom: 0;
-  min-height: calc(1.2 * 2);
-  min-height: calc(var(--line-height-control) * 2);
+  margin-block-end: 0;
+  min-block-size: calc(1.2 * 2);
+  min-block-size: calc(var(--line-height-control) * 2);
   color: #5d7079;
   color: var(--color-content-secondary);
   background-color: rgba(134,167,189,0.10196);
@@ -288,23 +269,11 @@ fieldset[disabled] .checkbox label {
 }
 .form-control-static.input-lg,
 .form-control-static.input-sm {
-  padding-left: 0;
-  padding-right: 0;
-}
-[dir="rtl"] .form-control-static.input-lg,
-[dir="rtl"] .form-control-static.input-sm {
-  padding-right: 0;
-  padding-left: 0;
-  padding-left: initial;
-}
-[dir="rtl"] .form-control-static.input-lg,
-[dir="rtl"] .form-control-static.input-sm {
-  padding-left: 0;
-  padding-right: 0;
-  padding-right: initial;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
 }
 .input-sm {
-  min-height: 32px;
+  min-block-size: 32px;
   padding: var(--input-padding-small);
   border-radius: 3px;
   font-size: 14px;
@@ -317,15 +286,15 @@ fieldset[disabled] .checkbox label {
   font-weight: var(--font-weight-regular);
 }
 select.input-sm {
-  min-height: 32px;
+  min-block-size: 32px;
 }
 textarea.input-sm,
 select[multiple].input-sm {
-  height: auto;
+  block-size: auto;
 }
 .form-group-sm .form-control,
 .navbar .form-control {
-  height: 32px;
+  block-size: 32px;
   padding: var(--input-padding-small);
   font-size: 0.875rem;
   font-size: var(--font-size-14);
@@ -334,27 +303,27 @@ select[multiple].input-sm {
 }
 .form-group-sm select.form-control,
 .navbar select.form-control {
-  height: 32px;
+  block-size: 32px;
   line-height: 32px;
 }
 .form-group-sm textarea.form-control,
 .navbar textarea.form-control,
 .form-group-sm select[multiple].form-control,
 .navbar select[multiple].form-control {
-  height: auto;
+  block-size: auto;
 }
 .form-group-sm .form-control-static,
 .navbar .form-control-static {
-  height: 32px;
-  min-height: calc(1.2 + 14px);
-  min-height: calc(var(--line-height-control) + 14px);
+  block-size: 32px;
+  min-block-size: calc(1.2 + 14px);
+  min-block-size: calc(var(--line-height-control) + 14px);
   padding: var(--input-padding-small);
   font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: 24px;
 }
 .input-lg {
-  min-height: var(--input-height-large);
+  min-block-size: var(--input-height-large);
   padding: var(--input-padding-large);
   border-radius: 3px;
   font-weight: 400;
@@ -365,11 +334,11 @@ select[multiple].input-sm {
   letter-spacing: -0.011em;
 }
 select.input-lg {
-  min-height: var(--input-height-large);
+  min-block-size: var(--input-height-large);
 }
 textarea.input-lg,
 select[multiple].input-lg {
-  height: auto;
+  block-size: auto;
 }
 .form-group-lg {
   position: relative;
@@ -377,9 +346,10 @@ select[multiple].input-lg {
 .form-group-lg .input-lg,
 .form-group-lg .input-group-lg > .form-control,
 .form-group-lg .input-group-lg > .input-group-addon {
-  height: var(--input-height-large);
-  padding: calc(4px + 24px) 12px 4px;
-  padding: calc(4px + var(--size-24)) 12px 4px;
+  block-size: var(--input-height-large);
+  padding-block: calc(4px + 24px) 4px;
+  padding-block: calc(4px + var(--size-24)) 4px;
+  padding-inline: 12px;
   font-size: 22px;
   line-height: 32px;
 }
@@ -388,66 +358,51 @@ select[multiple].input-lg {
 }
 .form-group-lg textarea.form-control,
 .form-group-lg select[multiple].form-control {
-  height: auto;
+  block-size: auto;
 }
 .form-group-lg .form-control-static {
-  height: var(--input-height-large);
-  min-height: calc(1.2 + 22px);
-  min-height: calc(var(--line-height-control) + 22px);
+  block-size: var(--input-height-large);
+  min-block-size: calc(1.2 + 22px);
+  min-block-size: calc(var(--line-height-control) + 22px);
   padding: var(--input-padding-large);
   font-size: 22px;
   line-height: 32px;
 }
 .form-group-lg .control-label {
   position: absolute;
-  top: 12px;
-  left: 14px;
-  margin-bottom: 0;
+  inset-block-start: 12px;
+  inset-inline-start: 14px;
+  margin-block-end: 0;
   z-index: 1;
 }
-[dir="rtl"] .form-group-lg .control-label {
-  right: 14px;
-  left: auto;
-  left: initial;
-}
 .has-feedback {
   position: relative;
 }
 .has-feedback .form-control {
-  padding-right: var(--input-height-base);
-}
-[dir="rtl"] .has-feedback .form-control {
-  padding-left: var(--input-height-base);
-  padding-right: 0;
-  padding-right: initial;
+  padding-inline-end: var(--input-height-base);
 }
 .form-control-feedback {
   position: absolute;
-  top: 0;
-  right: 0;
+  inset-block-start: 0;
+  inset-inline-end: 0;
   z-index: 2;
   display: block;
-  width: 48px;
-  height: 48px;
+  inline-size: 48px;
+  block-size: 48px;
   text-align: center;
   pointer-events: none;
 }
-[dir="rtl"] .form-control-feedback {
-  left: 0;
-  right: auto;
-  right: initial;
-}
 .input-lg + .form-control-feedback,
 .input-group-lg + .form-control-feedback,
 .form-group-lg .form-control + .form-control-feedback {
-  width: var(--input-height-large);
-  height: var(--input-height-large);
+  inline-size: var(--input-height-large);
+  block-size: var(--input-height-large);
 }
 .input-sm + .form-control-feedback,
 .input-group-sm + .form-control-feedback,
 .form-group-sm .form-control + .form-control-feedback {
-  width: 32px;
-  height: 32px;
+  inline-size: 32px;
+  block-size: 32px;
 }
 .focus .control-label,
 .has-focus .control-label {
@@ -466,13 +421,14 @@ select[multiple].input-lg {
 }
 .help-block,
 .error-messages {
-  margin-top: 12px;
-  margin-bottom: 4px;
+  margin-block-start: 12px;
+  margin-block-end: 4px;
   border-width: 0;
   border-style: solid;
   border-radius: 10px;
   border-radius: var(--radius-small);
-  padding: 4px 16px 3px;
+  padding-block: 4px 3px;
+  padding-inline: 16px;
   transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
 }
 .help-block a,
@@ -493,67 +449,32 @@ select[multiple].input-lg {
   content: " ";
   position: absolute;
   display: block;
-  width: 10px;
-  height: 10px;
-  left: 20px;
-  top: -5px;
+  inline-size: 10px;
+  block-size: 10px;
+  inset-inline-start: 20px;
+  inset-block-start: -5px;
   transform: rotate(45deg);
   background-color: inherit;
 }
-[dir="rtl"] .help-block::before {
-  right: 20px;
-  left: auto;
-  left: initial;
-}
 .help-block.arrow-center::before {
-  left: 50%;
-  margin-left: -5px;
-}
-[dir="rtl"] .help-block.arrow-center::before {
-  right: 50%;
-  left: auto;
-  left: initial;
-}
-[dir="rtl"] .help-block.arrow-center::before {
-  margin-right: -5px;
-  margin-left: 0;
-  margin-left: initial;
+  inset-inline-start: 50%;
+  margin-inline-start: -5px;
 }
 .help-block.arrow-top::before {
-  top: -5px;
-  bottom: auto;
+  inset-block-start: -5px;
+  inset-block-end: auto;
 }
 .help-block.arrow-left::before {
-  left: 20px;
-  right: auto;
-}
-[dir="rtl"] .help-block.arrow-left::before {
-  right: 20px;
-  left: auto;
-  left: initial;
-}
-[dir="rtl"] .help-block.arrow-left::before {
-  left: auto;
-  right: auto;
-  right: initial;
+  inset-inline-start: 20px;
+  inset-inline-end: auto;
 }
 .help-block.arrow-right::before {
-  left: auto;
-  right: 20px;
-}
-[dir="rtl"] .help-block.arrow-right::before {
-  right: auto;
-  left: auto;
-  left: initial;
-}
-[dir="rtl"] .help-block.arrow-right::before {
-  left: 20px;
-  right: auto;
-  right: initial;
+  inset-inline-start: auto;
+  inset-inline-end: 20px;
 }
 .help-block.arrow-bottom::before {
-  top: auto;
-  bottom: -5px;
+  inset-block-start: auto;
+  inset-block-end: -5px;
 }
 .focus .alert,
 .has-focus .alert {
@@ -1317,21 +1238,21 @@ select[multiple].input-lg {
   border-color: var(--color-sentiment-negative);
 }
 .has-feedback label ~ .form-control-feedback {
-  top: 1.2;
-  top: var(--line-height-control);
+  inset-block-start: 1.2;
+  inset-block-start: var(--line-height-control);
 }
 .has-feedback label.sr-only ~ .form-control-feedback {
-  top: 0;
+  inset-block-start: 0;
 }
 @media (min-width: 600px) {
   .form-inline .form-group {
     display: inline-block;
-    margin-bottom: 0;
+    margin-block-end: 0;
     vertical-align: middle;
   }
   .form-inline .form-control {
     display: inline-block;
-    width: auto;
+    inline-size: auto;
     vertical-align: middle;
   }
   .form-inline .form-control-static {
@@ -1344,100 +1265,78 @@ select[multiple].input-lg {
   .form-inline .input-group .input-group-addon,
   .form-inline .input-group .input-group-btn,
   .form-inline .input-group .form-control {
-    width: auto;
+    inline-size: auto;
   }
   .form-inline .input-group > .form-control {
-    width: 100%;
+    inline-size: 100%;
   }
   .form-inline .control-label {
-    margin-bottom: 0;
+    margin-block-end: 0;
     vertical-align: calc(-2px);
   }
   .form-inline .radio,
   .form-inline .checkbox {
     display: inline-block;
-    margin-top: 0;
-    margin-bottom: 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
     vertical-align: middle;
   }
   .form-inline .radio label,
   .form-inline .checkbox label {
-    padding-left: 0;
-  }
-  [dir="rtl"] .form-inline .radio label,
-  [dir="rtl"] .form-inline .checkbox label {
-    padding-right: 0;
-    padding-left: 0;
-    padding-left: initial;
+    padding-inline-start: 0;
   }
   .form-inline .radio input[type='radio'],
   .form-inline .checkbox input[type='checkbox'] {
     position: relative;
-    margin-left: 0;
-  }
-  [dir="rtl"] .form-inline .radio input[type='radio'],
-  [dir="rtl"] .form-inline .checkbox input[type='checkbox'] {
-    margin-right: 0;
-    margin-left: 0;
-    margin-left: initial;
+    margin-inline-start: 0;
   }
   .form-inline .has-feedback .form-control-feedback {
-    top: 0;
+    inset-block-start: 0;
   }
 }
 .form-horizontal .radio,
 .form-horizontal .checkbox,
 .form-horizontal .radio-inline,
 .form-horizontal .checkbox-inline {
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-top: 9px;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  padding-block-start: 9px;
 }
 .form-horizontal .radio,
 .form-horizontal .checkbox {
-  min-height: calc(1.2 + (8px + 1));
-  min-height: calc(var(--line-height-control) + (8px + 1));
+  min-block-size: calc(1.2 + (8px + 1));
+  min-block-size: calc(var(--line-height-control) + (8px + 1));
 }
 .form-horizontal .form-group {
-  margin-left: -12px;
-  margin-right: -12px;
+  margin-inline-start: -12px;
+  margin-inline-end: -12px;
 }
 [dir="rtl"] .form-horizontal .form-group {
-  margin-right: -12px;
-  margin-left: -12px;
+  margin-inline-end: -12px;
 }
 [dir="rtl"] .form-horizontal .form-group {
-  margin-left: -12px;
-  margin-right: -12px;
+  margin-inline-start: -12px;
 }
 @media (min-width: 600px) {
   .form-horizontal .control-label {
-    text-align: right;
-    margin-bottom: 0;
-    padding-top: 14px;
-  }
-  [dir="rtl"] .form-horizontal .control-label {
-    text-align: left;
+    text-align: end;
+    margin-block-end: 0;
+    padding-block-start: 14px;
   }
 }
 .form-horizontal .has-feedback .form-control-feedback {
-  right: 12px;
-}
-[dir="rtl"] .form-horizontal .has-feedback .form-control-feedback {
-  left: 12px;
-  right: auto;
-  right: initial;
+  inset-inline-end: 12px;
 }
 @media (min-width: 600px) {
   .form-horizontal .form-group-lg .control-label {
-    padding-top: 17px;
+    padding-block-start: 17px;
     font-size: 1.25rem;
     font-size: var(--font-size-20);
   }
 }
 @media (min-width: 600px) {
   .form-horizontal .form-group-sm .control-label {
-    padding-top: 8px;
+    padding-block-start: 8px;
     font-size: 0.875rem;
     font-size: var(--font-size-14);
   }
@@ -1450,13 +1349,7 @@ select[multiple].input-lg {
 .radio > label,
 .checkbox > label {
   position: relative;
-  padding-left: 48px;
-}
-[dir="rtl"] .radio > label,
-[dir="rtl"] .checkbox > label {
-  padding-right: 48px;
-  padding-left: 0;
-  padding-left: initial;
+  padding-inline-start: 48px;
 }
 .radio > label input[type="radio"],
 .checkbox > label input[type="radio"],
@@ -1464,24 +1357,16 @@ select[multiple].input-lg {
 .checkbox > label input[type="checkbox"] {
   display: block;
   position: absolute;
-  top: 13px;
-  left: 40px;
-}
-[dir="rtl"] .radio > label input[type="radio"],
-[dir="rtl"] .checkbox > label input[type="radio"],
-[dir="rtl"] .radio > label input[type="checkbox"],
-[dir="rtl"] .checkbox > label input[type="checkbox"] {
-  right: 40px;
-  left: auto;
-  left: initial;
+  inset-block-start: 13px;
+  inset-inline-start: 40px;
 }
 .tw-checkbox-button {
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
   background: #ffffff;
   background: var(--color-background-screen);
-  width: 22px;
-  height: 22px;
+  inline-size: 22px;
+  block-size: 22px;
   border-radius: 3px;
   display: inline-block;
   padding: 0;
@@ -1496,8 +1381,8 @@ select[multiple].input-lg {
 }
 .tw-checkbox-button .tw-checkbox-check,
 .tw-checkbox-button .np-tw-checkbox-indeterminate {
-  width: 20px;
-  height: 20px;
+  inline-size: 20px;
+  block-size: 20px;
   margin: 0;
   display: none;
   color: #ffffff;
@@ -1626,8 +1511,8 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   background-color: var(--color-interactive-negative-active);
 }
 .tw-radio-button {
-  width: 24px;
-  height: 24px;
+  inline-size: 24px;
+  block-size: 24px;
   border-radius: 50%;
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
@@ -1644,14 +1529,14 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   box-shadow: inset 0 0 0 1px #c9cbce;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
   position: relative;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
 }
 .tw-radio-button .tw-radio-check {
   border-radius: 50%;
   text-align: center;
-  width: 12px;
-  height: 12px;
+  inline-size: 12px;
+  block-size: 12px;
   display: block;
   opacity: 0;
   transition: all 0.15s ease-in-out;
@@ -1706,8 +1591,8 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .np-theme-personal .tw-radio-button:checked .tw-radio-check,
 .np-theme-personal .tw-radio-button.checked .tw-radio-check {
   background-color: var(--color-interactive-primary);
-  max-height: 12px;
-  max-width: 12px;
+  max-block-size: 12px;
+  max-inline-size: 12px;
 }
 .radio.has-error .tw-radio-button,
 .tw-radio-button.has-error {
@@ -1723,23 +1608,13 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 }
 .radio .tw-radio-button {
   position: absolute;
-  left: 13px;
-  top: 11px;
-}
-[dir="rtl"] .radio .tw-radio-button {
-  right: 13px;
-  left: auto;
-  left: initial;
+  inset-inline-start: 13px;
+  inset-block-start: 11px;
 }
 .checkbox .tw-checkbox-button {
   position: absolute;
-  left: 14px;
-  top: 12px;
-}
-[dir="rtl"] .checkbox .tw-checkbox-button {
-  right: 14px;
-  left: auto;
-  left: initial;
+  inset-inline-start: 14px;
+  inset-block-start: 12px;
 }
 .form-inline .tw-checkbox-button,
 .form-inline .tw-radio-button {
@@ -1747,16 +1622,16 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 }
 .form-horizontal .checkbox,
 .form-horizontal .radio {
-  padding-top: 0;
+  padding-block-start: 0;
 }
 .form-horizontal .checkbox > label,
 .form-horizontal .radio > label {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .np-radio.radio,
 .np-checkbox.checkbox {
-  min-width: -moz-fit-content;
-  min-width: fit-content;
+  min-inline-size: -moz-fit-content;
+  min-inline-size: fit-content;
 }
 .np-radio.radio .np-radio-button,
 .np-checkbox.checkbox .np-radio-button,
@@ -1775,20 +1650,17 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .np-checkbox.checkbox > label {
   display: flex;
   align-items: center;
-  padding: 8px 16px   ;
-  padding: var(--size-8) var(--size-16)   ;
-}
-[dir="rtl"] .np-radio.radio > label,
-[dir="rtl"] .np-checkbox.checkbox > label {
-  padding: 8px 16px   ;
-  padding: var(--size-8) var(--size-16)   ;
+  padding-block: 8px;
+  padding-block: var(--size-8);
+  padding-inline: 16px;
+  padding-inline: var(--size-16);
 }
 .np-radio.radio > label .np-checkbox__text,
 .np-checkbox.checkbox > label .np-checkbox__text,
 .np-radio.radio > label .np-radio__text,
 .np-checkbox.checkbox > label .np-radio__text {
   display: block;
-  padding-top: 1px;
+  padding-block-start: 1px;
 }
 :not(.np-theme-personal) .np-radio.radio > label .np-checkbox__text,
 :not(.np-theme-personal) .np-checkbox.checkbox > label .np-checkbox__text,
@@ -1800,7 +1672,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   font-size: var(--font-size-16);
   line-height: 1.25rem;
   line-height: var(--line-height-20);
-  padding-top: 3px;
+  padding-block-start: 3px;
 }
 .np-theme-personal .np-radio.radio > label,
 .np-theme-personal .np-checkbox.checkbox > label {
@@ -1809,11 +1681,8 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .np-radio .np-radio__avatar {
   pointer-events: none;
 }
-[dir="rtl"] .input-group .input-group-btn + input {
-  border-right: 0 solid transparent;
-}
-html:not([dir="rtl"]) .input-group .input-group-btn + input {
-  border-left: 0 solid transparent;
+.input-group .input-group-btn + input {
+  border-inline-start: 0 solid transparent;
 }
 .input-group-addon {
   color: #5d7079;
@@ -1826,9 +1695,9 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
   line-height: 48px;
 }
 .label {
-  padding-top: 0.25em;
+  padding-block-start: 0.25em;
   position: relative;
-  top: -3px;
+  inset-block-start: -3px;
 }
 .label .label-default {
   color: #5d7079;
@@ -1842,83 +1711,60 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
   font-size: var(--font-size-14);
 }
 .form-group .row {
-  margin-left: -6px;
-  margin-right: -6px;
-}
-[dir="rtl"] .form-group .row {
-  margin-right: -6px;
-  margin-left: 0;
-  margin-left: initial;
-}
-[dir="rtl"] .form-group .row {
-  margin-left: -6px;
-  margin-right: 0;
-  margin-right: initial;
+  margin-inline-start: -6px;
+  margin-inline-end: -6px;
 }
 .form-group .row [class*='col-'] {
-  padding-left: 6px;
-  padding-right: 6px;
-}
-[dir="rtl"] .form-group .row [class*='col-'] {
-  padding-right: 6px;
-  padding-left: 0;
-  padding-left: initial;
-}
-[dir="rtl"] .form-group .row [class*='col-'] {
-  padding-left: 6px;
-  padding-right: 0;
-  padding-right: initial;
+  padding-inline-start: 6px;
+  padding-inline-end: 6px;
 }
 @media (max-width: 599.98px) {
   .form-group .row [class*='col-sm-'] {
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
   .form-group .row [class*='col-sm-'] .btn-input {
-    margin-bottom: 12px;
+    margin-block-end: 12px;
   }
 }
 @media (max-width: 839.98px) {
   .form-group .row [class*='col-md-'] {
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
   .form-group .row [class*='col-md-'] .form-control,
   .form-group .row [class*='col-md-'] .btn-input {
-    margin-bottom: 12px;
+    margin-block-end: 12px;
   }
 }
 @media (max-width: 1159.98px) {
   .form-group .row [class*='col-lg-'] {
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
   .form-group .row [class*='col-lg-'] .form-control,
   .form-group .row [class*='col-lg-'] .btn-input {
-    margin-bottom: 12px;
+    margin-block-end: 12px;
   }
 }
 @media (max-width: 1159.98px) {
   .form-group .row [class*='col-xl-'] {
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
   .form-group .row [class*='col-xl-'] .form-control,
   .form-group .row [class*='col-xl-'] .btn-input {
-    margin-bottom: 12px;
+    margin-block-end: 12px;
   }
 }
 @media (min-width: 600px) {
   fieldset .form-group:nth-of-type(odd) {
-    clear: left;
-  }
-  [dir="rtl"] fieldset .form-group:nth-of-type(odd) {
-    clear: right;
+    clear: inline-start;
   }
 }
 .checkbox > label,
 .radio > label {
   display: block;
   cursor: pointer;
-  padding-top: 12px;
-  padding-bottom: 10px;
-  padding-right: 16px;
+  padding-block-start: 12px;
+  padding-block-end: 10px;
+  padding-inline-end: 16px;
   color: #37517e;
   color: var(--color-content-primary);
   background-color: #ffffff;
@@ -1928,12 +1774,6 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
   border-radius: 3px;
   transition: border 0.15s ease-in-out, background-color 0.15s ease-in-out;
 }
-[dir="rtl"] .checkbox > label,
-[dir="rtl"] .radio > label {
-  padding-left: 16px;
-  padding-right: 0;
-  padding-right: initial;
-}
 .np-theme-personal .checkbox > label,
 .np-theme-personal .radio > label {
   border-radius: 10px;
@@ -1974,8 +1814,8 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
 .radio.checkbox-lg > label,
 .checkbox.radio-lg > label,
 .radio.radio-lg > label {
-  min-height: 72px;
-  min-height: var(--size-72);
+  min-block-size: 72px;
+  min-block-size: var(--size-72);
 }
 .checkbox.checkbox-lg > label small,
 .radio.checkbox-lg > label small,
@@ -2009,22 +1849,17 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
   content: " ";
   position: absolute;
   display: block;
-  width: 10px;
-  height: 10px;
-  left: 20px;
-  top: -5px;
+  inline-size: 10px;
+  block-size: 10px;
+  inset-inline-start: 20px;
+  inset-block-start: -5px;
   transform: rotate(45deg);
   background-color: inherit;
 }
-[dir="rtl"] .error-messages::before {
-  right: 20px;
-  left: auto;
-  left: initial;
-}
 .form-group .error-messages {
   border-radius: 3px;
   border-width: 0;
-  margin-top: 12px;
+  margin-block-start: 12px;
 }
 .has-error .error-messages {
   display: block;
@@ -2101,7 +1936,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
   line-height: 150%;
   letter-spacing: -0.011em;
   display: block;
-  width: 100%;
+  inline-size: 100%;
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
@@ -2233,11 +2068,11 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
   background-color: initial !important;
 }
 .np-theme-personal .form-group label {
-  margin-bottom: 8px;
-  margin-bottom: var(--padding-x-small);
+  margin-block-end: 8px;
+  margin-block-end: var(--padding-x-small);
 }
 .np-theme-personal .form-group .np-upload-input label {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .np-theme-personal .form-group .alert:before,
 .np-theme-personal .error-messages:before {
@@ -2247,16 +2082,17 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
 .np-theme-personal .alert-detach {
   color: #5d7079;
   color: var(--color-content-secondary);
-  margin: 8px 0;
-  margin: var(--padding-x-small) 0;
+  margin-block: 8px;
+  margin-block: var(--padding-x-small);
+  margin-inline: 0;
   padding: 0;
   background-color: transparent;
   background-color: initial;
 }
 .np-theme-personal .alert-detach .status-circle {
-  margin-top: 2px;
-  margin-right: 4px;
-  margin-right: var(--size-4);
+  margin-block-start: 2px;
+  margin-inline-end: 4px;
+  margin-inline-end: var(--size-4);
 }
 .np-theme-personal .has-error .error-messages,
 .np-theme-personal .has-error .alert-detach.alert-danger {