@transferwise/components 0.0.0-experimental-8cc553f → 0.0.0-experimental-769973c

package/src/styles/less/input-groups.css

@@ -1,24 +1,24 @@
 .btn-sm {
-  height: 32px;
+  block-size: 32px;
 }
 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 {
@@ -45,8 +45,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'] {
@@ -54,11 +55,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,
@@ -68,7 +69,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;
@@ -78,7 +79,7 @@ output {
 }
 .form-control {
   display: block;
-  width: 100%;
+  inline-size: 100%;
   color: #37517e;
   color: var(--color-content-primary);
   background-color: #ffffff;
@@ -87,7 +88,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;
@@ -99,11 +100,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;
@@ -119,7 +120,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,
@@ -129,7 +130,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;
@@ -181,10 +182,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 {
@@ -192,55 +193,53 @@ 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;
+  margin-inline-start: -20px;
+  margin-block-start: 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-end: -20px;
+  margin-inline-start: initial;
 }
 .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;
+  padding-inline-end: 20px;
+  padding-inline-start: initial;
 }
 .radio-inline.disabled,
 .checkbox-inline.disabled,
@@ -250,14 +249,13 @@ fieldset[disabled] .checkbox-inline {
 }
 .radio-inline + .radio-inline,
 .checkbox-inline + .checkbox-inline {
-  margin-top: 0;
-  margin-left: 10px;
+  margin-block-start: 0;
+  margin-inline-start: 10px;
 }
 [dir="rtl"] .radio-inline + .radio-inline,
 [dir="rtl"] .checkbox-inline + .checkbox-inline {
-  margin-right: 10px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: 10px;
+  margin-inline-start: initial;
 }
 input[type='radio'][disabled],
 input[type='checkbox'][disabled],
@@ -277,9 +275,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);
@@ -291,23 +289,21 @@ fieldset[disabled] .checkbox label {
 }
 .form-control-static.input-lg,
 .form-control-static.input-sm {
-  padding-left: 0;
-  padding-right: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
 }
 [dir="rtl"] .form-control-static.input-lg,
 [dir="rtl"] .form-control-static.input-sm {
-  padding-right: 0;
-  padding-left: 0;
-  padding-left: initial;
+  padding-inline-end: 0;
+  padding-inline-start: 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: initial;
 }
 .input-sm {
-  min-height: 32px;
+  min-block-size: 32px;
   padding: var(--input-padding-small);
   border-radius: 3px;
   font-size: 14px;
@@ -320,15 +316,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);
@@ -337,27 +333,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;
@@ -368,11 +364,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;
@@ -380,9 +376,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;
 }
@@ -391,66 +388,63 @@ 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;
+  inset-inline-end: 14px;
+  inset-inline-start: initial;
 }
 .has-feedback {
   position: relative;
 }
 .has-feedback .form-control {
-  padding-right: var(--input-height-base);
+  padding-inline-end: var(--input-height-base);
 }
 [dir="rtl"] .has-feedback .form-control {
-  padding-left: var(--input-height-base);
-  padding-right: 0;
-  padding-right: initial;
+  padding-inline-start: var(--input-height-base);
+  padding-inline-end: initial;
 }
 .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;
+  inset-inline-start: 0;
+  inset-inline-end: 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 {
@@ -469,13 +463,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,
@@ -496,67 +491,60 @@ 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;
+  inset-inline-end: 20px;
+  inset-inline-start: initial;
 }
 .help-block.arrow-center::before {
-  left: 50%;
-  margin-left: -5px;
+  inset-inline-start: 50%;
+  margin-inline-start: -5px;
 }
 [dir="rtl"] .help-block.arrow-center::before {
-  right: 50%;
-  left: auto;
-  left: initial;
+  inset-inline-end: 50%;
+  inset-inline-start: initial;
 }
 [dir="rtl"] .help-block.arrow-center::before {
-  margin-right: -5px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -5px;
+  margin-inline-start: initial;
 }
 .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;
+  inset-inline-start: 20px;
+  inset-inline-end: auto;
 }
 [dir="rtl"] .help-block.arrow-left::before {
-  right: 20px;
-  left: auto;
-  left: initial;
+  inset-inline-end: 20px;
+  inset-inline-start: initial;
 }
 [dir="rtl"] .help-block.arrow-left::before {
-  left: auto;
-  right: auto;
-  right: initial;
+  inset-inline-start: auto;
+  inset-inline-end: initial;
 }
 .help-block.arrow-right::before {
-  left: auto;
-  right: 20px;
+  inset-inline-start: auto;
+  inset-inline-end: 20px;
 }
 [dir="rtl"] .help-block.arrow-right::before {
-  right: auto;
-  left: auto;
-  left: initial;
+  inset-inline-end: auto;
+  inset-inline-start: initial;
 }
 [dir="rtl"] .help-block.arrow-right::before {
-  left: 20px;
-  right: auto;
-  right: initial;
+  inset-inline-start: 20px;
+  inset-inline-end: initial;
 }
 .help-block.arrow-bottom::before {
-  top: auto;
-  bottom: -5px;
+  inset-block-start: auto;
+  inset-block-end: -5px;
 }
 .focus .alert,
 .has-focus .alert {
@@ -1320,21 +1308,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: 576px) {
   .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 {
@@ -1347,100 +1335,97 @@ 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;
+    padding-inline-start: 0;
   }
   [dir="rtl"] .form-inline .radio label,
   [dir="rtl"] .form-inline .checkbox label {
-    padding-right: 0;
-    padding-left: 0;
-    padding-left: initial;
+    padding-inline-end: 0;
+    padding-inline-start: initial;
   }
   .form-inline .radio input[type='radio'],
   .form-inline .checkbox input[type='checkbox'] {
     position: relative;
-    margin-left: 0;
+    margin-inline-start: 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-end: 0;
+    margin-inline-start: initial;
   }
   .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;
+  margin-inline-start: -12px;
 }
 [dir="rtl"] .form-horizontal .form-group {
-  margin-left: -12px;
-  margin-right: -12px;
+  margin-inline-start: -12px;
+  margin-inline-end: -12px;
 }
 @media (min-width: 576px) {
   .form-horizontal .control-label {
-    text-align: right;
-    margin-bottom: 0;
-    padding-top: 14px;
+    text-align: end;
+    margin-block-end: 0;
+    padding-block-start: 14px;
   }
   [dir="rtl"] .form-horizontal .control-label {
-    text-align: left;
+    text-align: start;
   }
 }
 .form-horizontal .has-feedback .form-control-feedback {
-  right: 12px;
+  inset-inline-end: 12px;
 }
 [dir="rtl"] .form-horizontal .has-feedback .form-control-feedback {
-  left: 12px;
-  right: auto;
-  right: initial;
+  inset-inline-start: 12px;
+  inset-inline-end: initial;
 }
 @media (min-width: 576px) {
   .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: 576px) {
   .form-horizontal .form-group-sm .control-label {
-    padding-top: 8px;
+    padding-block-start: 8px;
     font-size: 0.875rem;
     font-size: var(--font-size-14);
   }
@@ -1453,13 +1438,12 @@ select[multiple].input-lg {
 .radio > label,
 .checkbox > label {
   position: relative;
-  padding-left: 48px;
+  padding-inline-start: 48px;
 }
 [dir="rtl"] .radio > label,
 [dir="rtl"] .checkbox > label {
-  padding-right: 48px;
-  padding-left: 0;
-  padding-left: initial;
+  padding-inline-end: 48px;
+  padding-inline-start: initial;
 }
 .radio > label input[type="radio"],
 .checkbox > label input[type="radio"],
@@ -1467,24 +1451,23 @@ select[multiple].input-lg {
 .checkbox > label input[type="checkbox"] {
   display: block;
   position: absolute;
-  top: 13px;
-  left: 40px;
+  inset-block-start: 13px;
+  inset-inline-start: 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-inline-end: 40px;
+  inset-inline-start: initial;
 }
 .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;
@@ -1499,8 +1482,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;
@@ -1629,8 +1612,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);
@@ -1647,14 +1630,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;
@@ -1709,8 +1692,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 {
@@ -1726,23 +1709,21 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 }
 .radio .tw-radio-button {
   position: absolute;
-  left: 13px;
-  top: 11px;
+  inset-inline-start: 13px;
+  inset-block-start: 11px;
 }
 [dir="rtl"] .radio .tw-radio-button {
-  right: 13px;
-  left: auto;
-  left: initial;
+  inset-inline-end: 13px;
+  inset-inline-start: initial;
 }
 .checkbox .tw-checkbox-button {
   position: absolute;
-  left: 14px;
-  top: 12px;
+  inset-inline-start: 14px;
+  inset-block-start: 12px;
 }
 [dir="rtl"] .checkbox .tw-checkbox-button {
-  right: 14px;
-  left: auto;
-  left: initial;
+  inset-inline-end: 14px;
+  inset-inline-start: initial;
 }
 .form-inline .tw-checkbox-button,
 .form-inline .tw-radio-button {
@@ -1750,16 +1731,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,
@@ -1778,20 +1759,24 @@ 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)   ;
+  padding-block: 8px 16px   ;
+  padding-block: var(--size-8);
+  padding-inline: 16px;
+  padding-inline: 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 16px   ;
+  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,
@@ -1803,7 +1788,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 {
@@ -1813,10 +1798,10 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   pointer-events: none;
 }
 [dir="rtl"] .input-group .input-group-btn + input {
-  border-right: 0 solid transparent;
+  border-inline-end: 0 solid transparent;
 }
 html:not([dir="rtl"]) .input-group .input-group-btn + input {
-  border-left: 0 solid transparent;
+  border-inline-start: 0 solid transparent;
 }
 .input-group-addon {
   color: #5d7079;
@@ -1829,9 +1814,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;
@@ -1845,83 +1830,79 @@ 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;
+  margin-inline-start: -6px;
+  margin-inline-end: -6px;
 }
 [dir="rtl"] .form-group .row {
-  margin-right: -6px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -6px;
+  margin-inline-start: initial;
 }
 [dir="rtl"] .form-group .row {
-  margin-left: -6px;
-  margin-right: 0;
-  margin-right: initial;
+  margin-inline-start: -6px;
+  margin-inline-end: initial;
 }
 .form-group .row [class*='col-'] {
-  padding-left: 6px;
-  padding-right: 6px;
+  padding-inline-start: 6px;
+  padding-inline-end: 6px;
 }
 [dir="rtl"] .form-group .row [class*='col-'] {
-  padding-right: 6px;
-  padding-left: 0;
-  padding-left: initial;
+  padding-inline-end: 6px;
+  padding-inline-start: initial;
 }
 [dir="rtl"] .form-group .row [class*='col-'] {
-  padding-left: 6px;
-  padding-right: 0;
-  padding-right: initial;
+  padding-inline-start: 6px;
+  padding-inline-end: initial;
 }
 @media (max-width: 575px) {
   .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: 767px) {
   .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: 991px) {
   .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: 1199px) {
   .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: 576px) {
   fieldset .form-group:nth-of-type(odd) {
-    clear: left;
+    clear: inline-start;
   }
   [dir="rtl"] fieldset .form-group:nth-of-type(odd) {
-    clear: right;
+    clear: inline-end;
   }
 }
 .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;
@@ -1933,9 +1914,8 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
 }
 [dir="rtl"] .checkbox > label,
 [dir="rtl"] .radio > label {
-  padding-left: 16px;
-  padding-right: 0;
-  padding-right: initial;
+  padding-inline-start: 16px;
+  padding-inline-end: initial;
 }
 .np-theme-personal .checkbox > label,
 .np-theme-personal .radio > label {
@@ -1977,8 +1957,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,
@@ -2012,22 +1992,21 @@ 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;
+  inset-inline-end: 20px;
+  inset-inline-start: initial;
 }
 .form-group .error-messages {
   border-radius: 3px;
   border-width: 0;
-  margin-top: 12px;
+  margin-block-start: 12px;
 }
 .has-error .error-messages {
   display: block;
@@ -2104,7 +2083,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);
 }
@@ -2236,11 +2215,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 {
@@ -2250,16 +2229,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 {
@@ -2282,64 +2262,61 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
   position: relative;
   display: table;
   border-collapse: separate;
-  width: 100%;
+  inline-size: 100%;
 }
 .input-group[class*="col-"] {
   float: none;
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 [dir="rtl"] .input-group[class*="col-"] {
-  padding-right: 0;
-  padding-left: 0;
-  padding-left: initial;
+  padding-inline-end: 0;
+  padding-inline-start: initial;
 }
 .input-group .form-control {
-  float: left;
-  width: 100%;
-  margin-bottom: 0;
+  float: inline-start;
+  inline-size: 100%;
+  margin-block-end: 0;
   border-color: #c9cbce;
   border-color: var(--color-interactive-secondary);
 }
 [dir="rtl"] .input-group .form-control {
-  float: right;
+  float: inline-end;
 }
 [dir="rtl"] .input-group .form-control:not(:first-child) {
-  border-right: 0  ;
+  border-inline-end: 0  ;
 }
 html:not([dir="rtl"]) .input-group .form-control:not(:first-child) {
-  border-left: 0  ;
+  border-inline-start: 0  ;
 }
 [dir="rtl"] .input-group .form-control:not(:last-child) {
-  border-left: 0  ;
+  border-inline-start: 0  ;
 }
 html:not([dir="rtl"]) .input-group .form-control:not(:last-child) {
-  border-right: 0  ;
+  border-inline-end: 0  ;
 }
 .input-group .input-group-addon button.np-btn {
   padding: 0;
-  min-height: 16px;
+  min-block-size: 16px;
   border-radius: 50%;
 }
 .input-group .input-group-addon + .form-control {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 [dir="rtl"] .input-group .input-group-addon + .form-control {
-  padding-right: 0;
-  padding-left: 0;
-  padding-left: initial;
+  padding-inline-end: 0;
+  padding-inline-start: initial;
 }
 .input-group .form-control + .input-group-addon {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 [dir="rtl"] .input-group .form-control + .input-group-addon {
-  padding-right: 0;
-  padding-left: 0;
-  padding-left: initial;
+  padding-inline-end: 0;
+  padding-inline-start: initial;
 }
 .input-group-lg > .form-control,
 .input-group-lg > .input-group-addon,
 .input-group-lg > .input-group-btn .btn {
-  min-height: var(--input-height-large);
+  min-block-size: var(--input-height-large);
   padding: var(--input-padding-large);
   border-radius: 3px;
   font-weight: 400;
@@ -2354,20 +2331,19 @@ html:not([dir="rtl"]) .input-group .form-control:not(:last-child) {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  margin-bottom: 0;
-  margin-bottom: initial;
+  margin-block-end: initial;
   font-size: 1.375rem;
   font-size: var(--font-size-22);
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
   letter-spacing: -0.018em;
   line-height: 125%;
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 select.input-group-lg > .form-control,
 select.input-group-lg > .input-group-addon,
 select.input-group-lg > .input-group-btn .btn {
-  min-height: var(--input-height-large);
+  min-block-size: var(--input-height-large);
 }
 textarea.input-group-lg > .form-control,
 textarea.input-group-lg > .input-group-addon,
@@ -2375,7 +2351,7 @@ textarea.input-group-lg > .input-group-btn .btn,
 select[multiple].input-group-lg > .form-control,
 select[multiple].input-group-lg > .input-group-addon,
 select[multiple].input-group-lg > .input-group-btn .btn {
-  height: auto;
+  block-size: auto;
 }
 @supports (hyphenate-limit-chars: 1) {
   .input-group-lg > .form-control,
@@ -2424,12 +2400,12 @@ select[multiple].input-group-lg > .input-group-btn .btn {
 .input-group-lg > .form-control + ol:not(.list-unstyled),
 .input-group-lg > .input-group-addon + ol:not(.list-unstyled),
 .input-group-lg > .input-group-btn .btn + ol:not(.list-unstyled) {
-  margin-top: 8px;
-  margin-top: var(--size-8);
+  margin-block-start: 8px;
+  margin-block-start: var(--size-8);
 }
 .input-group-sm > .form-control,
 .input-group-sm > .input-group-addon {
-  min-height: 32px;
+  min-block-size: 32px;
   padding: var(--input-padding-small);
   border-radius: 3px;
   font-size: 14px;
@@ -2443,13 +2419,13 @@ select[multiple].input-group-lg > .input-group-btn .btn {
 }
 select.input-group-sm > .form-control,
 select.input-group-sm > .input-group-addon {
-  min-height: 32px;
+  min-block-size: 32px;
 }
 textarea.input-group-sm > .form-control,
 textarea.input-group-sm > .input-group-addon,
 select[multiple].input-group-sm > .form-control,
 select[multiple].input-group-sm > .input-group-addon {
-  height: auto;
+  block-size: auto;
 }
 .input-group-sm > .form-control .icon,
 .input-group-sm > .input-group-addon .icon {
@@ -2457,7 +2433,7 @@ select[multiple].input-group-sm > .input-group-addon {
   font-size: var(--font-size-20);
 }
 .input-group-sm > .input-group-btn > .btn {
-  height: 32px;
+  block-size: 32px;
 }
 .input-group-sm > .input-group-addon {
   line-height: 22px;
@@ -2469,7 +2445,7 @@ select[multiple].input-group-sm > .input-group-addon {
 }
 .input-group-addon,
 .input-group-btn {
-  width: 1%;
+  inline-size: 1%;
   white-space: nowrap;
   vertical-align: middle;
 }
@@ -2494,29 +2470,27 @@ select[multiple].input-group-sm > .input-group-addon {
   padding: var(--input-group-addon-lg-padding) !important;
 }
 .input-group-addon--search {
-  padding-right: calc(16px / 2);
+  padding-inline-end: calc(16px / 2);
 }
 .input-group-addon input[type="radio"],
 .input-group-addon input[type="checkbox"] {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 .input-group-addon .icon {
   font-size: 24px;
   vertical-align: middle;
   display: inline-block;
-  margin-top: -2px;
-  margin-left: -4px;
-  margin-right: -5px;
+  margin-block-start: -2px;
+  margin-inline-start: -4px;
+  margin-inline-end: -5px;
 }
 [dir="rtl"] .input-group-addon .icon {
-  margin-right: -4px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -4px;
+  margin-inline-start: initial;
 }
 [dir="rtl"] .input-group-addon .icon {
-  margin-left: -5px;
-  margin-right: 0;
-  margin-right: initial;
+  margin-inline-start: -5px;
+  margin-inline-end: initial;
 }
 .input-group-addon a {
   -webkit-text-decoration: none;
@@ -2524,11 +2498,11 @@ select[multiple].input-group-sm > .input-group-addon {
 }
 .input-group-addon:empty {
   padding: 0 !important;
-  width: 3px;
+  inline-size: 3px;
 }
 .form-group-lg .input-lg,
 .form-group-lg .input-group {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .input-group .input-group-addon,
 .input-group .btn-input,
@@ -2538,22 +2512,22 @@ select[multiple].input-group-sm > .input-group-addon {
 [dir="rtl"] .input-group .input-group-addon,
 [dir="rtl"] .input-group .btn-input,
 [dir="rtl"] .input-group .form-control {
-  border-right-width: 0;
+  border-inline-end-width: 0;
 }
 html:not([dir="rtl"]) .input-group .input-group-addon,
 html:not([dir="rtl"]) .input-group .btn-input,
 html:not([dir="rtl"]) .input-group .form-control {
-  border-left-width: 0;
+  border-inline-start-width: 0;
 }
 [dir="rtl"] .input-group .input-group-addon,
 [dir="rtl"] .input-group .btn-input,
 [dir="rtl"] .input-group .form-control {
-  border-left-width: 0;
+  border-inline-start-width: 0;
 }
 html:not([dir="rtl"]) .input-group .input-group-addon,
 html:not([dir="rtl"]) .input-group .btn-input,
 html:not([dir="rtl"]) .input-group .form-control {
-  border-right-width: 0;
+  border-inline-end-width: 0;
 }
 .np-theme-personal .input-group .input-group-addon,
 .np-theme-personal .input-group .btn-input,
@@ -2564,102 +2538,102 @@ html:not([dir="rtl"]) .input-group .form-control {
 [dir="rtl"] .input-group .input-group-addon:first-child,
 [dir="rtl"] .input-group .btn-input:first-child,
 [dir="rtl"] .input-group .form-control:first-child {
-  border-right-width: 1px;
+  border-inline-end-width: 1px;
 }
 html:not([dir="rtl"]) .input-group .input-group-btn:first-child,
 html:not([dir="rtl"]) .input-group .input-group-addon:first-child,
 html:not([dir="rtl"]) .input-group .btn-input:first-child,
 html:not([dir="rtl"]) .input-group .form-control:first-child {
-  border-left-width: 1px;
+  border-inline-start-width: 1px;
 }
 [dir="rtl"] .input-group .input-group-btn:first-child,
 [dir="rtl"] .input-group .input-group-addon:first-child,
 [dir="rtl"] .input-group .btn-input:first-child,
 [dir="rtl"] .input-group .form-control:first-child {
-  border-bottom-right-radius: 3px;
-  border-top-right-radius: 3px;
+  border-end-end-radius: 3px;
+  border-start-end-radius: 3px;
 }
 html:not([dir="rtl"]) .input-group .input-group-btn:first-child,
 html:not([dir="rtl"]) .input-group .input-group-addon:first-child,
 html:not([dir="rtl"]) .input-group .btn-input:first-child,
 html:not([dir="rtl"]) .input-group .form-control:first-child {
-  border-bottom-left-radius: 3px;
-  border-top-left-radius: 3px;
+  border-end-start-radius: 3px;
+  border-start-start-radius: 3px;
 }
 [dir="rtl"] .input-group .input-group-btn:last-child,
 [dir="rtl"] .input-group .input-group-addon:last-child,
 [dir="rtl"] .input-group .btn-input:last-child,
 [dir="rtl"] .input-group .form-control:last-child {
-  border-left-width: 1px;
+  border-inline-start-width: 1px;
 }
 html:not([dir="rtl"]) .input-group .input-group-btn:last-child,
 html:not([dir="rtl"]) .input-group .input-group-addon:last-child,
 html:not([dir="rtl"]) .input-group .btn-input:last-child,
 html:not([dir="rtl"]) .input-group .form-control:last-child {
-  border-right-width: 1px;
+  border-inline-end-width: 1px;
 }
 [dir="rtl"] .input-group .input-group-btn:last-child,
 [dir="rtl"] .input-group .input-group-addon:last-child,
 [dir="rtl"] .input-group .btn-input:last-child,
 [dir="rtl"] .input-group .form-control:last-child {
-  border-bottom-left-radius: 3px;
-  border-top-left-radius: 3px;
+  border-end-start-radius: 3px;
+  border-start-start-radius: 3px;
 }
 html:not([dir="rtl"]) .input-group .input-group-btn:last-child,
 html:not([dir="rtl"]) .input-group .input-group-addon:last-child,
 html:not([dir="rtl"]) .input-group .btn-input:last-child,
 html:not([dir="rtl"]) .input-group .form-control:last-child {
-  border-bottom-right-radius: 3px;
-  border-top-right-radius: 3px;
+  border-end-end-radius: 3px;
+  border-start-end-radius: 3px;
 }
 /* TODO: Remove this rule group once the brand refresh is out */
 [dir="rtl"] .input-group > :first-child .btn,
 [dir="rtl"] .input-group > :first-child .btn-group {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
 }
 html:not([dir="rtl"]) .input-group > :first-child .btn,
 html:not([dir="rtl"]) .input-group > :first-child .btn-group {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
 }
 [dir="rtl"] .np-theme-personal .input-group > :first-child .btn,
 [dir="rtl"] .np-theme-personal .input-group > :first-child .btn-group {
-  border-bottom-right-radius: 10px;
-  border-bottom-right-radius: var(--radius-small);
-  border-top-right-radius: 10px;
-  border-top-right-radius: var(--radius-small);
+  border-end-end-radius: 10px;
+  border-end-end-radius: var(--radius-small);
+  border-start-end-radius: 10px;
+  border-start-end-radius: var(--radius-small);
 }
 html:not([dir="rtl"]) .np-theme-personal .input-group > :first-child .btn,
 html:not([dir="rtl"]) .np-theme-personal .input-group > :first-child .btn-group {
-  border-bottom-left-radius: 10px;
-  border-bottom-left-radius: var(--radius-small);
-  border-top-left-radius: 10px;
-  border-top-left-radius: var(--radius-small);
+  border-end-start-radius: 10px;
+  border-end-start-radius: var(--radius-small);
+  border-start-start-radius: 10px;
+  border-start-start-radius: var(--radius-small);
 }
 [dir="rtl"] .input-group > :last-child .btn,
 [dir="rtl"] .input-group > :last-child .btn-group {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
 }
 html:not([dir="rtl"]) .input-group > :last-child .btn,
 html:not([dir="rtl"]) .input-group > :last-child .btn-group {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
 }
 [dir="rtl"] .np-theme-personal .input-group > :last-child .btn,
 [dir="rtl"] .np-theme-personal .input-group > :last-child .btn-group {
-  border-bottom-right-radius: 10px;
-  border-bottom-right-radius: var(--radius-small);
-  border-top-right-radius: 10px;
-  border-top-right-radius: var(--radius-small);
+  border-end-end-radius: 10px;
+  border-end-end-radius: var(--radius-small);
+  border-start-end-radius: 10px;
+  border-start-end-radius: var(--radius-small);
 }
 html:not([dir="rtl"]) .np-theme-personal .input-group > :last-child .btn,
 html:not([dir="rtl"]) .np-theme-personal .input-group > :last-child .btn-group {
-  border-bottom-left-radius: 10px;
-  border-bottom-left-radius: var(--radius-small);
-  border-top-left-radius: 10px;
-  border-top-left-radius: var(--radius-small);
+  border-end-start-radius: 10px;
+  border-end-start-radius: var(--radius-small);
+  border-start-start-radius: 10px;
+  border-start-start-radius: var(--radius-small);
 }
 .input-group-btn {
   position: relative;
@@ -2670,12 +2644,11 @@ html:not([dir="rtl"]) .np-theme-personal .input-group > :last-child .btn-group {
   position: relative;
 }
 .input-group-btn > .btn + .btn {
-  margin-left: -1px;
+  margin-inline-start: -1px;
 }
 [dir="rtl"] .input-group-btn > .btn + .btn {
-  margin-right: -1px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-end: -1px;
+  margin-inline-start: initial;
 }
 .input-group-btn > .btn:hover,
 .input-group-btn > .btn:focus,
@@ -2684,13 +2657,12 @@ html:not([dir="rtl"]) .np-theme-personal .input-group > :last-child .btn-group {
 }
 .input-group-btn:first-child > .btn,
 .input-group-btn:first-child > .btn-group {
-  margin-right: -1px;
+  margin-inline-end: -1px;
 }
 [dir="rtl"] .input-group-btn:first-child > .btn,
 [dir="rtl"] .input-group-btn:first-child > .btn-group {
-  margin-left: -1px;
-  margin-right: 0;
-  margin-right: initial;
+  margin-inline-start: -1px;
+  margin-inline-end: initial;
 }
 .input-group:hover:not(.disabled):not(:disabled) .form-control,
 .input-group:hover:not(.disabled):not(:disabled) .input-group-addon,