@transferwise/components 0.0.0-experimental-c1f5b0b → 0.0.0-experimental-fe160ab

package/build/styles/css/input-groups.css

@@ -1,24 +1,24 @@
 .btn-sm {
-  block-size: 32px;
+  height: 32px;
 }
 form {
-  margin-block-end: 0;
+  margin-bottom: 0;
 }
 fieldset {
   padding: 0;
   margin: 0;
   border: 0;
-  min-inline-size: 0;
+  min-width: 0;
 }
 legend {
   display: block;
-  inline-size: 100%;
+  width: 100%;
 }
 label {
   display: inline-block;
-  max-inline-size: 100%;
-  margin-block-end: 4px;
-  margin-block-end: var(--size-4);
+  max-width: 100%;
+  margin-bottom: 4px;
+  margin-bottom: var(--size-4);
 }
 label,
 .secondary {
@@ -45,9 +45,8 @@ input[type='number']::-webkit-inner-spin-button {
 }
 input[type='radio'],
 input[type='checkbox'] {
-  margin-block: 4px 0;
-  margin-inline: 0;
-  margin-block-start: 1px;
+  margin: 4px 0 0;
+  margin-top: 1px;
   line-height: normal;
 }
 input[type='file'] {
@@ -55,11 +54,11 @@ input[type='file'] {
 }
 input[type='range'] {
   display: block;
-  inline-size: 100%;
+  width: 100%;
 }
 select[multiple],
 select[size] {
-  block-size: auto;
+  height: auto;
 }
 input[type='file']:focus,
 input[type='radio']:focus,
@@ -69,7 +68,7 @@ input[type='checkbox']:focus {
 }
 output {
   display: block;
-  padding-block-start: 9px;
+  padding-top: 9px;
   font-size: 1rem;
   font-size: var(--font-size-16);
   line-height: 1.2;
@@ -79,7 +78,7 @@ output {
 }
 .form-control {
   display: block;
-  inline-size: 100%;
+  width: 100%;
   color: #37517e;
   color: var(--color-content-primary);
   background-color: #ffffff;
@@ -88,7 +87,7 @@ output {
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
   transition: border-color ease-in-out 0.15s;
-  min-block-size: var(--input-height-base);
+  min-height: var(--input-height-base);
   padding: var(--input-padding);
   border-radius: 3px;
   font-weight: 400;
@@ -100,11 +99,11 @@ output {
   background-clip: padding-box;
 }
 select.form-control {
-  min-block-size: var(--input-height-base);
+  min-height: var(--input-height-base);
 }
 textarea.form-control,
 select[multiple].form-control {
-  block-size: auto;
+  height: auto;
 }
 .form-control:not(.disabled):not(:disabled):focus {
   border-color: #0081ba;
@@ -120,7 +119,7 @@ select[multiple].form-control {
   color: var(--color-content-tertiary);
 }
 textarea.form-control {
-  block-size: 144px;
+  height: 144px;
 }
 .form-control + .text-muted,
 .form-control + .text-primary,
@@ -130,7 +129,7 @@ textarea.form-control {
 .form-control + .text-warning,
 .form-control + .text-negative,
 .form-control + .text-danger {
-  margin-block-start: 8px;
+  margin-top: 8px;
 }
 .form-control:focus {
   border-color: #0081ba;
@@ -182,10 +181,10 @@ input[type='search'] {
   }
 }
 .form-group {
-  margin-block-end: 24px;
+  margin-bottom: 24px;
 }
 .form-group label {
-  margin-block-end: 2px;
+  margin-bottom: 2px;
 }
 .form-group:focus-within .control-label,
 .form-group:focus-within > label {
@@ -193,42 +192,56 @@ input[type='search'] {
   color: var(--color-content-primary);
 }
 .row-equal-height > [class*='col-'] > .form-group {
-  inline-size: 100%;
+  width: 100%;
 }
 .radio,
 .checkbox {
   position: relative;
   display: block;
-  margin-block-start: 0;
+  margin-top: 0;
 }
 .radio label,
 .checkbox label {
-  min-block-size: var(--input-height-base);
-  margin-block-end: 0;
+  min-height: var(--input-height-base);
+  margin-bottom: 0;
   cursor: pointer;
 }
 .radio + .radio,
 .checkbox + .checkbox {
-  margin-block-start: 12px;
+  margin-top: 12px;
 }
 .radio input[type='radio'],
 .radio-inline input[type='radio'],
 .checkbox input[type='checkbox'],
 .checkbox-inline input[type='checkbox'] {
   position: absolute;
-  margin-inline-start: -20px;
-  margin-block-start: 4px \9;
+  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;
 }
 .radio-inline,
 .checkbox-inline {
   position: relative;
   display: inline-block;
-  padding-inline-start: 20px;
-  margin-block-end: 0;
+  padding-left: 20px;
+  margin-bottom: 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,
@@ -237,8 +250,14 @@ fieldset[disabled] .checkbox-inline {
 }
 .radio-inline + .radio-inline,
 .checkbox-inline + .checkbox-inline {
-  margin-block-start: 0;
-  margin-inline-start: 10px;
+  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;
 }
 input[type='radio'][disabled],
 input[type='checkbox'][disabled],
@@ -258,9 +277,9 @@ fieldset[disabled] .checkbox label {
   cursor: not-allowed;
 }
 .form-control-static {
-  margin-block-end: 0;
-  min-block-size: calc(1.2 * 2);
-  min-block-size: calc(var(--line-height-control) * 2);
+  margin-bottom: 0;
+  min-height: calc(1.2 * 2);
+  min-height: calc(var(--line-height-control) * 2);
   color: #5d7079;
   color: var(--color-content-secondary);
   background-color: rgba(134,167,189,0.10196);
@@ -272,11 +291,23 @@ fieldset[disabled] .checkbox label {
 }
 .form-control-static.input-lg,
 .form-control-static.input-sm {
-  padding-inline-start: 0;
-  padding-inline-end: 0;
+  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;
 }
 .input-sm {
-  min-block-size: 32px;
+  min-height: 32px;
   padding: var(--input-padding-small);
   border-radius: 3px;
   font-size: 14px;
@@ -289,15 +320,15 @@ fieldset[disabled] .checkbox label {
   font-weight: var(--font-weight-regular);
 }
 select.input-sm {
-  min-block-size: 32px;
+  min-height: 32px;
 }
 textarea.input-sm,
 select[multiple].input-sm {
-  block-size: auto;
+  height: auto;
 }
 .form-group-sm .form-control,
 .navbar .form-control {
-  block-size: 32px;
+  height: 32px;
   padding: var(--input-padding-small);
   font-size: 0.875rem;
   font-size: var(--font-size-14);
@@ -306,27 +337,27 @@ select[multiple].input-sm {
 }
 .form-group-sm select.form-control,
 .navbar select.form-control {
-  block-size: 32px;
+  height: 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 {
-  block-size: auto;
+  height: auto;
 }
 .form-group-sm .form-control-static,
 .navbar .form-control-static {
-  block-size: 32px;
-  min-block-size: calc(1.2 + 14px);
-  min-block-size: calc(var(--line-height-control) + 14px);
+  height: 32px;
+  min-height: calc(1.2 + 14px);
+  min-height: 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-block-size: var(--input-height-large);
+  min-height: var(--input-height-large);
   padding: var(--input-padding-large);
   border-radius: 3px;
   font-weight: 400;
@@ -337,11 +368,11 @@ select[multiple].input-sm {
   letter-spacing: -0.011em;
 }
 select.input-lg {
-  min-block-size: var(--input-height-large);
+  min-height: var(--input-height-large);
 }
 textarea.input-lg,
 select[multiple].input-lg {
-  block-size: auto;
+  height: auto;
 }
 .form-group-lg {
   position: relative;
@@ -349,10 +380,9 @@ 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 {
-  block-size: var(--input-height-large);
-  padding-block: calc(4px + 24px) 4px;
-  padding-block: calc(4px + var(--size-24)) 4px;
-  padding-inline: 12px;
+  height: var(--input-height-large);
+  padding: calc(4px + 24px) 12px 4px;
+  padding: calc(4px + var(--size-24)) 12px 4px;
   font-size: 22px;
   line-height: 32px;
 }
@@ -361,51 +391,66 @@ select[multiple].input-lg {
 }
 .form-group-lg textarea.form-control,
 .form-group-lg select[multiple].form-control {
-  block-size: auto;
+  height: auto;
 }
 .form-group-lg .form-control-static {
-  block-size: var(--input-height-large);
-  min-block-size: calc(1.2 + 22px);
-  min-block-size: calc(var(--line-height-control) + 22px);
+  height: var(--input-height-large);
+  min-height: calc(1.2 + 22px);
+  min-height: calc(var(--line-height-control) + 22px);
   padding: var(--input-padding-large);
   font-size: 22px;
   line-height: 32px;
 }
 .form-group-lg .control-label {
   position: absolute;
-  inset-block-start: 12px;
-  inset-inline-start: 14px;
-  margin-block-end: 0;
+  top: 12px;
+  left: 14px;
+  margin-bottom: 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-inline-end: var(--input-height-base);
+  padding-right: var(--input-height-base);
+}
+[dir="rtl"] .has-feedback .form-control {
+  padding-left: var(--input-height-base);
+  padding-right: 0;
+  padding-right: initial;
 }
 .form-control-feedback {
   position: absolute;
-  inset-block-start: 0;
-  inset-inline-end: 0;
+  top: 0;
+  right: 0;
   z-index: 2;
   display: block;
-  inline-size: 48px;
-  block-size: 48px;
+  width: 48px;
+  height: 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 {
-  inline-size: var(--input-height-large);
-  block-size: var(--input-height-large);
+  width: var(--input-height-large);
+  height: var(--input-height-large);
 }
 .input-sm + .form-control-feedback,
 .input-group-sm + .form-control-feedback,
 .form-group-sm .form-control + .form-control-feedback {
-  inline-size: 32px;
-  block-size: 32px;
+  width: 32px;
+  height: 32px;
 }
 .focus .control-label,
 .has-focus .control-label {
@@ -424,14 +469,13 @@ select[multiple].input-lg {
 }
 .help-block,
 .error-messages {
-  margin-block-start: 12px;
-  margin-block-end: 4px;
+  margin-top: 12px;
+  margin-bottom: 4px;
   border-width: 0;
   border-style: solid;
   border-radius: 10px;
   border-radius: var(--radius-small);
-  padding-block: 4px 3px;
-  padding-inline: 16px;
+  padding: 4px 16px 3px;
   transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
 }
 .help-block a,
@@ -452,32 +496,67 @@ select[multiple].input-lg {
   content: " ";
   position: absolute;
   display: block;
-  inline-size: 10px;
-  block-size: 10px;
-  inset-inline-start: 20px;
-  inset-block-start: -5px;
+  width: 10px;
+  height: 10px;
+  left: 20px;
+  top: -5px;
   transform: rotate(45deg);
   background-color: inherit;
 }
+[dir="rtl"] .help-block::before {
+  right: 20px;
+  left: auto;
+  left: initial;
+}
 .help-block.arrow-center::before {
-  inset-inline-start: 50%;
-  margin-inline-start: -5px;
+  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;
 }
 .help-block.arrow-top::before {
-  inset-block-start: -5px;
-  inset-block-end: auto;
+  top: -5px;
+  bottom: auto;
 }
 .help-block.arrow-left::before {
-  inset-inline-start: 20px;
-  inset-inline-end: auto;
+  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;
 }
 .help-block.arrow-right::before {
-  inset-inline-start: auto;
-  inset-inline-end: 20px;
+  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;
 }
 .help-block.arrow-bottom::before {
-  inset-block-start: auto;
-  inset-block-end: -5px;
+  top: auto;
+  bottom: -5px;
 }
 .focus .alert,
 .has-focus .alert {
@@ -1241,21 +1320,21 @@ select[multiple].input-lg {
   border-color: var(--color-sentiment-negative);
 }
 .has-feedback label ~ .form-control-feedback {
-  inset-block-start: 1.2;
-  inset-block-start: var(--line-height-control);
+  top: 1.2;
+  top: var(--line-height-control);
 }
 .has-feedback label.sr-only ~ .form-control-feedback {
-  inset-block-start: 0;
+  top: 0;
 }
 @media (min-width: 600px) {
   .form-inline .form-group {
     display: inline-block;
-    margin-block-end: 0;
+    margin-bottom: 0;
     vertical-align: middle;
   }
   .form-inline .form-control {
     display: inline-block;
-    inline-size: auto;
+    width: auto;
     vertical-align: middle;
   }
   .form-inline .form-control-static {
@@ -1268,72 +1347,100 @@ select[multiple].input-lg {
   .form-inline .input-group .input-group-addon,
   .form-inline .input-group .input-group-btn,
   .form-inline .input-group .form-control {
-    inline-size: auto;
+    width: auto;
   }
   .form-inline .input-group > .form-control {
-    inline-size: 100%;
+    width: 100%;
   }
   .form-inline .control-label {
-    margin-block-end: 0;
+    margin-bottom: 0;
     vertical-align: calc(-2px);
   }
   .form-inline .radio,
   .form-inline .checkbox {
     display: inline-block;
-    margin-block-start: 0;
-    margin-block-end: 0;
+    margin-top: 0;
+    margin-bottom: 0;
     vertical-align: middle;
   }
   .form-inline .radio label,
   .form-inline .checkbox label {
-    padding-inline-start: 0;
+    padding-left: 0;
+  }
+  [dir="rtl"] .form-inline .radio label,
+  [dir="rtl"] .form-inline .checkbox label {
+    padding-right: 0;
+    padding-left: 0;
+    padding-left: initial;
   }
   .form-inline .radio input[type='radio'],
   .form-inline .checkbox input[type='checkbox'] {
     position: relative;
-    margin-inline-start: 0;
+    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;
   }
   .form-inline .has-feedback .form-control-feedback {
-    inset-block-start: 0;
+    top: 0;
   }
 }
 .form-horizontal .radio,
 .form-horizontal .checkbox,
 .form-horizontal .radio-inline,
 .form-horizontal .checkbox-inline {
-  margin-block-start: 0;
-  margin-block-end: 0;
-  padding-block-start: 9px;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 9px;
 }
 .form-horizontal .radio,
 .form-horizontal .checkbox {
-  min-block-size: calc(1.2 + (8px + 1));
-  min-block-size: calc(var(--line-height-control) + (8px + 1));
+  min-height: calc(1.2 + (8px + 1));
+  min-height: calc(var(--line-height-control) + (8px + 1));
 }
 .form-horizontal .form-group {
-  margin-inline-start: -12px;
-  margin-inline-end: -12px;
+  margin-left: -12px;
+  margin-right: -12px;
+}
+[dir="rtl"] .form-horizontal .form-group {
+  margin-right: -12px;
+  margin-left: -12px;
+}
+[dir="rtl"] .form-horizontal .form-group {
+  margin-left: -12px;
+  margin-right: -12px;
 }
 @media (min-width: 600px) {
   .form-horizontal .control-label {
-    text-align: end;
-    margin-block-end: 0;
-    padding-block-start: 14px;
+    text-align: right;
+    margin-bottom: 0;
+    padding-top: 14px;
+  }
+  [dir="rtl"] .form-horizontal .control-label {
+    text-align: left;
   }
 }
 .form-horizontal .has-feedback .form-control-feedback {
-  inset-inline-end: 12px;
+  right: 12px;
+}
+[dir="rtl"] .form-horizontal .has-feedback .form-control-feedback {
+  left: 12px;
+  right: auto;
+  right: initial;
 }
 @media (min-width: 600px) {
   .form-horizontal .form-group-lg .control-label {
-    padding-block-start: 17px;
+    padding-top: 17px;
     font-size: 1.25rem;
     font-size: var(--font-size-20);
   }
 }
 @media (min-width: 600px) {
   .form-horizontal .form-group-sm .control-label {
-    padding-block-start: 8px;
+    padding-top: 8px;
     font-size: 0.875rem;
     font-size: var(--font-size-14);
   }
@@ -1346,7 +1453,13 @@ select[multiple].input-lg {
 .radio > label,
 .checkbox > label {
   position: relative;
-  padding-inline-start: 48px;
+  padding-left: 48px;
+}
+[dir="rtl"] .radio > label,
+[dir="rtl"] .checkbox > label {
+  padding-right: 48px;
+  padding-left: 0;
+  padding-left: initial;
 }
 .radio > label input[type="radio"],
 .checkbox > label input[type="radio"],
@@ -1354,16 +1467,24 @@ select[multiple].input-lg {
 .checkbox > label input[type="checkbox"] {
   display: block;
   position: absolute;
-  inset-block-start: 13px;
-  inset-inline-start: 40px;
+  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;
 }
 .tw-checkbox-button {
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
   background: #ffffff;
   background: var(--color-background-screen);
-  inline-size: 22px;
-  block-size: 22px;
+  width: 22px;
+  height: 22px;
   border-radius: 3px;
   display: inline-block;
   padding: 0;
@@ -1378,8 +1499,8 @@ select[multiple].input-lg {
 }
 .tw-checkbox-button .tw-checkbox-check,
 .tw-checkbox-button .np-tw-checkbox-indeterminate {
-  inline-size: 20px;
-  block-size: 20px;
+  width: 20px;
+  height: 20px;
   margin: 0;
   display: none;
   color: #ffffff;
@@ -1508,8 +1629,8 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   background-color: var(--color-interactive-negative-active);
 }
 .tw-radio-button {
-  inline-size: 24px;
-  block-size: 24px;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
@@ -1526,14 +1647,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;
-  inset-block-start: 0;
-  inset-inline-start: 0;
+  top: 0;
+  left: 0;
 }
 .tw-radio-button .tw-radio-check {
   border-radius: 50%;
   text-align: center;
-  inline-size: 12px;
-  block-size: 12px;
+  width: 12px;
+  height: 12px;
   display: block;
   opacity: 0;
   transition: all 0.15s ease-in-out;
@@ -1588,8 +1709,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-block-size: 12px;
-  max-inline-size: 12px;
+  max-height: 12px;
+  max-width: 12px;
 }
 .radio.has-error .tw-radio-button,
 .tw-radio-button.has-error {
@@ -1605,13 +1726,23 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 }
 .radio .tw-radio-button {
   position: absolute;
-  inset-inline-start: 13px;
-  inset-block-start: 11px;
+  left: 13px;
+  top: 11px;
+}
+[dir="rtl"] .radio .tw-radio-button {
+  right: 13px;
+  left: auto;
+  left: initial;
 }
 .checkbox .tw-checkbox-button {
   position: absolute;
-  inset-inline-start: 14px;
-  inset-block-start: 12px;
+  left: 14px;
+  top: 12px;
+}
+[dir="rtl"] .checkbox .tw-checkbox-button {
+  right: 14px;
+  left: auto;
+  left: initial;
 }
 .form-inline .tw-checkbox-button,
 .form-inline .tw-radio-button {
@@ -1619,16 +1750,16 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 }
 .form-horizontal .checkbox,
 .form-horizontal .radio {
-  padding-block-start: 0;
+  padding-top: 0;
 }
 .form-horizontal .checkbox > label,
 .form-horizontal .radio > label {
-  margin-block-end: 0;
+  margin-bottom: 0;
 }
 .np-radio.radio,
 .np-checkbox.checkbox {
-  min-inline-size: -moz-fit-content;
-  min-inline-size: fit-content;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
 }
 .np-radio.radio .np-radio-button,
 .np-checkbox.checkbox .np-radio-button,
@@ -1647,17 +1778,20 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .np-checkbox.checkbox > label {
   display: flex;
   align-items: center;
-  padding-block: 8px 16px   ;
-  padding-block: var(--size-8);
-  padding-inline: 16px;
-  padding-inline: var(--size-16);
+  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)   ;
 }
 .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-block-start: 1px;
+  padding-top: 1px;
 }
 :not(.np-theme-personal) .np-radio.radio > label .np-checkbox__text,
 :not(.np-theme-personal) .np-checkbox.checkbox > label .np-checkbox__text,
@@ -1669,7 +1803,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-block-start: 3px;
+  padding-top: 3px;
 }
 .np-theme-personal .np-radio.radio > label,
 .np-theme-personal .np-checkbox.checkbox > label {
@@ -1678,8 +1812,11 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .np-radio .np-radio__avatar {
   pointer-events: none;
 }
-.input-group .input-group-btn + input {
-  border-inline-start: 0 solid transparent;
+[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-addon {
   color: #5d7079;
@@ -1692,9 +1829,9 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   line-height: 48px;
 }
 .label {
-  padding-block-start: 0.25em;
+  padding-top: 0.25em;
   position: relative;
-  inset-block-start: -3px;
+  top: -3px;
 }
 .label .label-default {
   color: #5d7079;
@@ -1708,60 +1845,83 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   font-size: var(--font-size-14);
 }
 .form-group .row {
-  margin-inline-start: -6px;
-  margin-inline-end: -6px;
+  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;
 }
 .form-group .row [class*='col-'] {
-  padding-inline-start: 6px;
-  padding-inline-end: 6px;
+  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;
 }
 @media (max-width: 599.98px) {
   .form-group .row [class*='col-sm-'] {
-    margin-block-end: 0;
+    margin-bottom: 0;
   }
   .form-group .row [class*='col-sm-'] .btn-input {
-    margin-block-end: 12px;
+    margin-bottom: 12px;
   }
 }
 @media (max-width: 839.98px) {
   .form-group .row [class*='col-md-'] {
-    margin-block-end: 0;
+    margin-bottom: 0;
   }
   .form-group .row [class*='col-md-'] .form-control,
   .form-group .row [class*='col-md-'] .btn-input {
-    margin-block-end: 12px;
+    margin-bottom: 12px;
   }
 }
 @media (max-width: 1159.98px) {
   .form-group .row [class*='col-lg-'] {
-    margin-block-end: 0;
+    margin-bottom: 0;
   }
   .form-group .row [class*='col-lg-'] .form-control,
   .form-group .row [class*='col-lg-'] .btn-input {
-    margin-block-end: 12px;
+    margin-bottom: 12px;
   }
 }
 @media (max-width: 1159.98px) {
   .form-group .row [class*='col-xl-'] {
-    margin-block-end: 0;
+    margin-bottom: 0;
   }
   .form-group .row [class*='col-xl-'] .form-control,
   .form-group .row [class*='col-xl-'] .btn-input {
-    margin-block-end: 12px;
+    margin-bottom: 12px;
   }
 }
 @media (min-width: 600px) {
   fieldset .form-group:nth-of-type(odd) {
-    clear: inline-start;
+    clear: left;
+  }
+  [dir="rtl"] fieldset .form-group:nth-of-type(odd) {
+    clear: right;
   }
 }
 .checkbox > label,
 .radio > label {
   display: block;
   cursor: pointer;
-  padding-block-start: 12px;
-  padding-block-end: 10px;
-  padding-inline-end: 16px;
+  padding-top: 12px;
+  padding-bottom: 10px;
+  padding-right: 16px;
   color: #37517e;
   color: var(--color-content-primary);
   background-color: #ffffff;
@@ -1771,6 +1931,12 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   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;
@@ -1811,8 +1977,8 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .radio.checkbox-lg > label,
 .checkbox.radio-lg > label,
 .radio.radio-lg > label {
-  min-block-size: 72px;
-  min-block-size: var(--size-72);
+  min-height: 72px;
+  min-height: var(--size-72);
 }
 .checkbox.checkbox-lg > label small,
 .radio.checkbox-lg > label small,
@@ -1846,17 +2012,22 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   content: " ";
   position: absolute;
   display: block;
-  inline-size: 10px;
-  block-size: 10px;
-  inset-inline-start: 20px;
-  inset-block-start: -5px;
+  width: 10px;
+  height: 10px;
+  left: 20px;
+  top: -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-block-start: 12px;
+  margin-top: 12px;
 }
 .has-error .error-messages {
   display: block;
@@ -1933,7 +2104,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   line-height: 150%;
   letter-spacing: -0.011em;
   display: block;
-  inline-size: 100%;
+  width: 100%;
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
@@ -2065,11 +2236,11 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   background-color: initial !important;
 }
 .np-theme-personal .form-group label {
-  margin-block-end: 8px;
-  margin-block-end: var(--padding-x-small);
+  margin-bottom: 8px;
+  margin-bottom: var(--padding-x-small);
 }
 .np-theme-personal .form-group .np-upload-input label {
-  margin-block-end: 0;
+  margin-bottom: 0;
 }
 .np-theme-personal .form-group .alert:before,
 .np-theme-personal .error-messages:before {
@@ -2079,17 +2250,16 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .np-theme-personal .alert-detach {
   color: #5d7079;
   color: var(--color-content-secondary);
-  margin-block: 8px;
-  margin-block: var(--padding-x-small);
-  margin-inline: 0;
+  margin: 8px 0;
+  margin: var(--padding-x-small) 0;
   padding: 0;
   background-color: transparent;
   background-color: initial;
 }
 .np-theme-personal .alert-detach .status-circle {
-  margin-block-start: 2px;
-  margin-inline-end: 4px;
-  margin-inline-end: var(--size-4);
+  margin-top: 2px;
+  margin-right: 4px;
+  margin-right: var(--size-4);
 }
 .np-theme-personal .has-error .error-messages,
 .np-theme-personal .has-error .alert-detach.alert-danger {
@@ -2112,40 +2282,64 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   position: relative;
   display: table;
   border-collapse: separate;
-  inline-size: 100%;
+  width: 100%;
 }
 .input-group[class*="col-"] {
   float: none;
-  padding-inline-start: 0;
+  padding-left: 0;
+}
+[dir="rtl"] .input-group[class*="col-"] {
+  padding-right: 0;
+  padding-left: 0;
+  padding-left: initial;
 }
 .input-group .form-control {
-  float: inline-start;
-  inline-size: 100%;
-  margin-block-end: 0;
+  float: left;
+  width: 100%;
+  margin-bottom: 0;
   border-color: #c9cbce;
   border-color: var(--color-interactive-secondary);
 }
-.input-group .form-control:not(:first-child) {
-  border-inline-start: 0  ;
+[dir="rtl"] .input-group .form-control {
+  float: right;
+}
+[dir="rtl"] .input-group .form-control:not(:first-child) {
+  border-right: 0  ;
 }
-.input-group .form-control:not(:last-child) {
-  border-inline-end: 0  ;
+html:not([dir="rtl"]) .input-group .form-control:not(:first-child) {
+  border-left: 0  ;
+}
+[dir="rtl"] .input-group .form-control:not(:last-child) {
+  border-left: 0  ;
+}
+html:not([dir="rtl"]) .input-group .form-control:not(:last-child) {
+  border-right: 0  ;
 }
 .input-group .input-group-addon button.np-btn {
   padding: 0;
-  min-block-size: 16px;
+  min-height: 16px;
   border-radius: 50%;
 }
 .input-group .input-group-addon + .form-control {
-  padding-inline-start: 0;
+  padding-left: 0;
+}
+[dir="rtl"] .input-group .input-group-addon + .form-control {
+  padding-right: 0;
+  padding-left: 0;
+  padding-left: initial;
 }
 .input-group .form-control + .input-group-addon {
-  padding-inline-start: 0;
+  padding-left: 0;
+}
+[dir="rtl"] .input-group .form-control + .input-group-addon {
+  padding-right: 0;
+  padding-left: 0;
+  padding-left: initial;
 }
 .input-group-lg > .form-control,
 .input-group-lg > .input-group-addon,
 .input-group-lg > .input-group-btn .btn {
-  min-block-size: var(--input-height-large);
+  min-height: var(--input-height-large);
   padding: var(--input-padding-large);
   border-radius: 3px;
   font-weight: 400;
@@ -2160,19 +2354,20 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  margin-block-end: initial;
+  margin-bottom: 0;
+  margin-bottom: 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-block-end: 0;
+  margin-bottom: 0;
 }
 select.input-group-lg > .form-control,
 select.input-group-lg > .input-group-addon,
 select.input-group-lg > .input-group-btn .btn {
-  min-block-size: var(--input-height-large);
+  min-height: var(--input-height-large);
 }
 textarea.input-group-lg > .form-control,
 textarea.input-group-lg > .input-group-addon,
@@ -2180,7 +2375,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 {
-  block-size: auto;
+  height: auto;
 }
 @supports (hyphenate-limit-chars: 1) {
   .input-group-lg > .form-control,
@@ -2229,12 +2424,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-block-start: 8px;
-  margin-block-start: var(--size-8);
+  margin-top: 8px;
+  margin-top: var(--size-8);
 }
 .input-group-sm > .form-control,
 .input-group-sm > .input-group-addon {
-  min-block-size: 32px;
+  min-height: 32px;
   padding: var(--input-padding-small);
   border-radius: 3px;
   font-size: 14px;
@@ -2248,13 +2443,13 @@ select[multiple].input-group-lg > .input-group-btn .btn {
 }
 select.input-group-sm > .form-control,
 select.input-group-sm > .input-group-addon {
-  min-block-size: 32px;
+  min-height: 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 {
-  block-size: auto;
+  height: auto;
 }
 .input-group-sm > .form-control .icon,
 .input-group-sm > .input-group-addon .icon {
@@ -2262,7 +2457,7 @@ select[multiple].input-group-sm > .input-group-addon {
   font-size: var(--font-size-20);
 }
 .input-group-sm > .input-group-btn > .btn {
-  block-size: 32px;
+  height: 32px;
 }
 .input-group-sm > .input-group-addon {
   line-height: 22px;
@@ -2274,7 +2469,7 @@ select[multiple].input-group-sm > .input-group-addon {
 }
 .input-group-addon,
 .input-group-btn {
-  inline-size: 1%;
+  width: 1%;
   white-space: nowrap;
   vertical-align: middle;
 }
@@ -2299,19 +2494,29 @@ select[multiple].input-group-sm > .input-group-addon {
   padding: var(--input-group-addon-lg-padding) !important;
 }
 .input-group-addon--search {
-  padding-inline-end: calc(16px / 2);
+  padding-right: calc(16px / 2);
 }
 .input-group-addon input[type="radio"],
 .input-group-addon input[type="checkbox"] {
-  margin-block-start: 0;
+  margin-top: 0;
 }
 .input-group-addon .icon {
   font-size: 24px;
   vertical-align: middle;
   display: inline-block;
-  margin-block-start: -2px;
-  margin-inline-start: -4px;
-  margin-inline-end: -5px;
+  margin-top: -2px;
+  margin-left: -4px;
+  margin-right: -5px;
+}
+[dir="rtl"] .input-group-addon .icon {
+  margin-right: -4px;
+  margin-left: 0;
+  margin-left: initial;
+}
+[dir="rtl"] .input-group-addon .icon {
+  margin-left: -5px;
+  margin-right: 0;
+  margin-right: initial;
 }
 .input-group-addon a {
   -webkit-text-decoration: none;
@@ -2319,64 +2524,142 @@ select[multiple].input-group-sm > .input-group-addon {
 }
 .input-group-addon:empty {
   padding: 0 !important;
-  inline-size: 3px;
+  width: 3px;
 }
 .form-group-lg .input-lg,
 .form-group-lg .input-group {
-  margin-block-end: 0;
+  margin-bottom: 0;
 }
 .input-group .input-group-addon,
 .input-group .btn-input,
 .input-group .form-control {
-  border-inline-start-width: 0;
-  border-inline-end-width: 0;
   border-radius: 0;
 }
+[dir="rtl"] .input-group .input-group-addon,
+[dir="rtl"] .input-group .btn-input,
+[dir="rtl"] .input-group .form-control {
+  border-right-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;
+}
+[dir="rtl"] .input-group .input-group-addon,
+[dir="rtl"] .input-group .btn-input,
+[dir="rtl"] .input-group .form-control {
+  border-left-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;
+}
 .np-theme-personal .input-group .input-group-addon,
 .np-theme-personal .input-group .btn-input,
 .np-theme-personal .input-group .form-control {
   border-radius: 0;
 }
-.input-group .input-group-btn:first-child,
-.input-group .input-group-addon:first-child,
-.input-group .btn-input:first-child,
-.input-group .form-control:first-child {
-  border-inline-start-width: 1px;
-  border-start-start-radius: 3px;
-  border-end-start-radius: 3px;
-}
-.input-group .input-group-btn:last-child,
-.input-group .input-group-addon:last-child,
-.input-group .btn-input:last-child,
-.input-group .form-control:last-child {
-  border-inline-end-width: 1px;
-  border-start-end-radius: 3px;
-  border-end-end-radius: 3px;
+[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-right-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;
+}
+[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;
+}
+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;
+}
+[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;
+}
+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;
+}
+[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;
+}
+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;
 }
 /* TODO: Remove this rule group once the brand refresh is out */
-.input-group > :first-child .btn,
-.input-group > :first-child .btn-group {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-}
-.np-theme-personal .input-group > :first-child .btn,
-.np-theme-personal .input-group > :first-child .btn-group {
-  border-start-start-radius: 10px;
-  border-start-start-radius: var(--radius-small);
-  border-end-start-radius: 10px;
-  border-end-start-radius: var(--radius-small);
-}
-.input-group > :last-child .btn,
-.input-group > :last-child .btn-group {
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-}
-.np-theme-personal .input-group > :last-child .btn,
-.np-theme-personal .input-group > :last-child .btn-group {
-  border-start-start-radius: 10px;
-  border-start-start-radius: var(--radius-small);
-  border-end-start-radius: 10px;
-  border-end-start-radius: var(--radius-small);
+[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;
+}
+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;
+}
+[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);
+}
+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);
+}
+[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;
+}
+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;
+}
+[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);
+}
+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);
 }
 .input-group-btn {
   position: relative;
@@ -2387,7 +2670,12 @@ select[multiple].input-group-sm > .input-group-addon {
   position: relative;
 }
 .input-group-btn > .btn + .btn {
-  margin-inline-start: -1px;
+  margin-left: -1px;
+}
+[dir="rtl"] .input-group-btn > .btn + .btn {
+  margin-right: -1px;
+  margin-left: 0;
+  margin-left: initial;
 }
 .input-group-btn > .btn:hover,
 .input-group-btn > .btn:focus,
@@ -2396,7 +2684,13 @@ select[multiple].input-group-sm > .input-group-addon {
 }
 .input-group-btn:first-child > .btn,
 .input-group-btn:first-child > .btn-group {
-  margin-inline-end: -1px;
+  margin-right: -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;
 }
 .input-group:hover:not(.disabled):not(:disabled) .form-control,
 .input-group:hover:not(.disabled):not(:disabled) .input-group-addon,