@transferwise/neptune-css 14.8.2 → 14.9.0

package/dist/css/utilities.css

@@ -1,53 +1,518 @@
+.center-block {
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}
+.align-items-start {
+  align-items: flex-start;
+}
+.align-items-end {
+  align-items: flex-end;
+}
+.align-items-center {
+  align-items: center;
+}
+.align-items-baseline {
+  align-items: baseline;
+}
+.align-items-stretch {
+  align-items: stretch;
+}
+@media (min-width: 576px) {
+  .align-items-start--sm {
+    align-items: flex-start;
+  }
+  .align-items-end--sm {
+    align-items: flex-end;
+  }
+  .align-items-center--sm {
+    align-items: center;
+  }
+  .align-items-baseline--sm {
+    align-items: baseline;
+  }
+  .align-items-stretch--sm {
+    align-items: stretch;
+  }
+}
+@media (min-width: 768px) {
+  .align-items-start--md {
+    align-items: flex-start;
+  }
+  .align-items-end--md {
+    align-items: flex-end;
+  }
+  .align-items-center--md {
+    align-items: center;
+  }
+  .align-items-baseline--md {
+    align-items: baseline;
+  }
+  .align-items-stretch--md {
+    align-items: stretch;
+  }
+}
+@media (min-width: 992px) {
+  .align-items-start--lg {
+    align-items: flex-start;
+  }
+  .align-items-end--lg {
+    align-items: flex-end;
+  }
+  .align-items-center--lg {
+    align-items: center;
+  }
+  .align-items-baseline--lg {
+    align-items: baseline;
+  }
+  .align-items-stretch--lg {
+    align-items: stretch;
+  }
+}
+@media (min-width: 1200px) {
+  .align-items-start--xl {
+    align-items: flex-start;
+  }
+  .align-items-end--xl {
+    align-items: flex-end;
+  }
+  .align-items-center--xl {
+    align-items: center;
+  }
+  .align-items-baseline--xl {
+    align-items: baseline;
+  }
+  .align-items-stretch--xl {
+    align-items: stretch;
+  }
+}
+.align-self-start {
+  align-self: flex-start;
+}
+.align-self-end {
+  align-self: flex-end;
+}
+.align-self-center {
+  align-self: center;
+}
+.align-self-stretch {
+  align-self: stretch;
+}
+.align-self-baseline {
+  align-self: baseline;
+}
+@media (min-width: 576px) {
+  .align-self-start--sm {
+    align-self: flex-start;
+  }
+  .align-self-end--sm {
+    align-self: flex-end;
+  }
+  .align-self-center--sm {
+    align-self: center;
+  }
+  .align-self-stretch--sm {
+    align-self: stretch;
+  }
+  .align-self-baseline--sm {
+    align-self: baseline;
+  }
+}
+@media (min-width: 768px) {
+  .align-self-start--md {
+    align-self: flex-start;
+  }
+  .align-self-end--md {
+    align-self: flex-end;
+  }
+  .align-self-center--md {
+    align-self: center;
+  }
+  .align-self-stretch--md {
+    align-self: stretch;
+  }
+  .align-self-baseline--md {
+    align-self: baseline;
+  }
+}
+@media (min-width: 992px) {
+  .align-self-start--lg {
+    align-self: flex-start;
+  }
+  .align-self-end--lg {
+    align-self: flex-end;
+  }
+  .align-self-center--lg {
+    align-self: center;
+  }
+  .align-self-stretch--lg {
+    align-self: stretch;
+  }
+  .align-self-baseline--lg {
+    align-self: baseline;
+  }
+}
+@media (min-width: 1200px) {
+  .align-self-start--xl {
+    align-self: flex-start;
+  }
+  .align-self-end--xl {
+    align-self: flex-end;
+  }
+  .align-self-center--xl {
+    align-self: center;
+  }
+  .align-self-stretch--xl {
+    align-self: stretch;
+  }
+  .align-self-baseline--xl {
+    align-self: baseline;
+  }
+}
+.rounded-sm {
+  border-radius: 2px;
+}
+.rounded {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+}
+.rounded-full {
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+}
+.text-primary {
+  color: #37517e !important;
+  color: var(--color-content-primary) !important;
+  /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
+}
+.bg-primary .text-primary {
+  color: #ffffff !important;
+}
+.text-secondary {
+  color: #5d7079 !important;
+  color: var(--color-content-secondary) !important;
+}
+.text-muted {
+  color: #768e9c !important;
+  color: var(--color-content-tertiary) !important;
+}
+.text-accent,
+.text-info {
+  color: var(--color-interactive-primary) !important;
+  /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
+}
+.bg-primary .text-accent,
+.bg-primary .text-info {
+  color: #00b9ff !important;
+}
+.text-negative,
+.text-danger {
+  color: var(--color-sentiment-negative) !important;
+  /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
+}
+.bg-primary .text-negative,
+.bg-primary .text-danger {
+  color: #ffa6a9 !important;
+}
+.text-positive,
+.text-success {
+  color: var(--color-sentiment-positive) !important;
+  /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
+}
+.bg-primary .text-positive,
+.bg-primary .text-success {
+  color: #6fd698 !important;
+}
+/**
+ * @deprecated This makes text inaccessible. Use background color in combination with `.text-primary` instead.
+ */
+.text-warning {
+  color: var(--color-sentiment-warning) !important;
+  /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
+}
+.bg-primary .text-warning {
+  color: #ffd184 !important;
+}
+/**
+ * @deprecated Navy colors are obsolete.
+ */
+.text-inverse {
+  color: #ffffff !important;
+}
+a.text-inverse:hover,
+a.text-inverse:focus {
+  color: #c9cbce !important;
+}
+.clickable {
+  cursor: pointer;
+}
+.d-block,
+.show {
+  display: block !important;
+}
 .d-inline-block {
-  display: inline-block;
+  display: inline-block !important;
 }
 .d-inline {
   display: inline;
 }
-.clearfix::before,
-.clearfix::after {
-  content: " ";
-  display: table;
+.d-flex {
+  display: flex;
 }
-.clearfix::after {
-  clear: both;
+.d-inline-flex {
+  display: inline-flex;
 }
-.center-block {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
+.hidden,
+.hide,
+.visible-xs,
+.visible-xs-block,
+.visible-xs-inline-block,
+.visible-xs-inline,
+.visible-sm,
+.visible-sm-block,
+.visible-sm-inline-block,
+.visible-sm-inline,
+.visible-md,
+.visible-md-block,
+.visible-md-inline-block,
+.visible-md-inline,
+.visible-lg,
+.visible-lg-block,
+.visible-lg-inline-block,
+.visible-lg-inline,
+.visible-xl,
+.visible-xl-block,
+.visible-xl-inline-block,
+.visible-xl-inline {
+  display: none !important;
 }
-.pull-right,
-.pull-xs-right {
-  float: right !important;
+@media not all and (min-width: 576px) {
+  .hidden-xs {
+    display: none !important;
+  }
+  .visible-xs,
+  .visible-xs-block {
+    display: block !important;
+  }
+  .visible-xs-inline-block {
+    display: inline-block !important;
+  }
+  .visible-xs-inline {
+    display: inline !important;
+  }
 }
-[dir="rtl"] .pull-right,
-[dir="rtl"] .pull-xs-right {
-  float: left !important;
+@media (min-width: 576px) {
+  .d-flex--sm {
+    display: flex;
+  }
+  .d-inline-flex--sm {
+    display: inline-flex;
+  }
+}
+@media (min-width: 576px) and not all and (min-width: 768px) {
+  .hidden-sm {
+    display: none !important;
+  }
+  .visible-sm,
+  .visible-sm-block {
+    display: block !important;
+  }
+  .visible-sm-inline-block {
+    display: inline-block !important;
+  }
+  .visible-sm-inline {
+    display: inline !important;
+  }
+}
+@media (min-width: 768px) {
+  .d-flex--md {
+    display: flex;
+  }
+  .d-inline-flex--md {
+    display: inline-flex;
+  }
+}
+@media (min-width: 768px) and not all and (min-width: 992px) {
+  .hidden-md {
+    display: none !important;
+  }
+  .visible-md,
+  .visible-md-block {
+    display: block !important;
+  }
+  .visible-md-inline-block {
+    display: inline-block !important;
+  }
+  .visible-md-inline {
+    display: inline !important;
+  }
+}
+@media (min-width: 992px) {
+  .d-flex--lg {
+    display: flex;
+  }
+  .d-inline-flex--lg {
+    display: inline-flex;
+  }
+}
+@media (min-width: 992px) and not all and (min-width: 1200px) {
+  .hidden-lg {
+    display: none !important;
+  }
+  .visible-lg,
+  .visible-lg-block {
+    display: block !important;
+  }
+  .visible-lg-inline-block {
+    display: inline-block !important;
+  }
+  .visible-lg-inline {
+    display: inline !important;
+  }
+}
+@media (min-width: 1200px) {
+  .d-flex--xl {
+    display: flex;
+  }
+  .d-inline-flex--xl {
+    display: inline-flex;
+  }
+  .hidden-xl {
+    display: none !important;
+  }
+  .visible-xl,
+  .visible-xl-block {
+    display: block !important;
+  }
+  .visible-xl-inline-block {
+    display: inline-block !important;
+  }
+  .visible-xl-inline {
+    display: inline !important;
+  }
+}
+.flex-row {
+  flex-direction: row;
+}
+.flex-column {
+  flex-direction: column;
+}
+@media (min-width: 576px) {
+  .flex-row--sm {
+    flex-direction: row;
+  }
+  .flex-column--sm {
+    flex-direction: column;
+  }
+}
+@media (min-width: 768px) {
+  .flex-row--md {
+    flex-direction: row;
+  }
+  .flex-column--md {
+    flex-direction: column;
+  }
+}
+@media (min-width: 992px) {
+  .flex-row--lg {
+    flex-direction: row;
+  }
+  .flex-column--lg {
+    flex-direction: column;
+  }
+}
+@media (min-width: 1200px) {
+  .flex-row--xl {
+    flex-direction: row;
+  }
+  .flex-column--xl {
+    flex-direction: column;
+  }
+}
+.flex-grow-1 {
+  flex-grow: 1;
+}
+@media (min-width: 576px) {
+  .flex-grow-1--sm {
+    flex-grow: 1;
+  }
+}
+@media (min-width: 768px) {
+  .flex-grow-1--md {
+    flex-grow: 1;
+  }
+}
+@media (min-width: 992px) {
+  .flex-grow-1--lg {
+    flex-grow: 1;
+  }
+}
+@media (min-width: 1200px) {
+  .flex-grow-1--xl {
+    flex-grow: 1;
+  }
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+@media (min-width: 576px) {
+  .flex-wrap--sm {
+    flex-wrap: wrap;
+  }
+  .flex-nowrap--sm {
+    flex-wrap: nowrap;
+  }
+}
+@media (min-width: 768px) {
+  .flex-wrap--md {
+    flex-wrap: wrap;
+  }
+  .flex-nowrap--md {
+    flex-wrap: nowrap;
+  }
+}
+@media (min-width: 992px) {
+  .flex-wrap--lg {
+    flex-wrap: wrap;
+  }
+  .flex-nowrap--lg {
+    flex-wrap: nowrap;
+  }
+}
+@media (min-width: 1200px) {
+  .flex-wrap--xl {
+    flex-wrap: wrap;
+  }
+  .flex-nowrap--xl {
+    flex-wrap: nowrap;
+  }
 }
 .pull-left,
 .pull-xs-left {
-  float: left !important;
+  float: inline-start !important;
+}
+.pull-right,
+.pull-xs-right {
+  float: inline-end !important;
 }
-[dir="rtl"] .pull-left,
-[dir="rtl"] .pull-xs-left {
+.pull-right-single-direction {
   float: right !important;
 }
+.pull-left-single-direction {
+  float: left !important;
+}
 .pull-xs-none {
   float: none !important;
 }
 @media (min-width: 576px) {
   .pull-sm-left {
-    float: left !important;
-  }
-  [dir="rtl"] .pull-sm-left {
-    float: right !important;
+    float: inline-start !important;
   }
   .pull-sm-right {
-    float: right !important;
-  }
-  [dir="rtl"] .pull-sm-right {
-    float: left !important;
+    float: inline-end !important;
   }
   .pull-sm-none {
     float: none !important;
@@ -55,16 +520,10 @@
 }
 @media (min-width: 768px) {
   .pull-md-left {
-    float: left !important;
-  }
-  [dir="rtl"] .pull-md-left {
-    float: right !important;
+    float: inline-start !important;
   }
   .pull-md-right {
-    float: right !important;
-  }
-  [dir="rtl"] .pull-md-right {
-    float: left !important;
+    float: inline-end !important;
   }
   .pull-md-none {
     float: none !important;
@@ -72,16 +531,10 @@
 }
 @media (min-width: 992px) {
   .pull-lg-left {
-    float: left !important;
-  }
-  [dir="rtl"] .pull-lg-left {
-    float: right !important;
+    float: inline-start !important;
   }
   .pull-lg-right {
-    float: right !important;
-  }
-  [dir="rtl"] .pull-lg-right {
-    float: left !important;
+    float: inline-end !important;
   }
   .pull-lg-none {
     float: none !important;
@@ -89,44 +542,571 @@
 }
 @media (min-width: 1200px) {
   .pull-xl-left {
-    float: left !important;
-  }
-  [dir="rtl"] .pull-xl-left {
-    float: right !important;
+    float: inline-start !important;
   }
   .pull-xl-right {
-    float: right !important;
-  }
-  [dir="rtl"] .pull-xl-right {
-    float: left !important;
+    float: inline-end !important;
   }
   .pull-xl-none {
     float: none !important;
   }
 }
-.pull-left-single-direction {
-  float: left !important;
+.font-weight-normal {
+  font-weight: 400 !important;
+  font-weight: var(--font-weight-regular) !important;
 }
-.pull-right-single-direction {
-  float: right !important;
+.font-weight-semi-bold {
+  font-weight: 600 !important;
+  font-weight: var(--font-weight-semi-bold) !important;
 }
-.hide {
-  display: none !important;
+.font-weight-bold {
+  font-weight: 800 !important;
+  font-weight: var(--font-weight-bold) !important;
 }
-.show {
-  display: block !important;
+.gap-y-1 {
+  row-gap: 8px;
+  row-gap: var(--size-8);
 }
-.invisible {
-  visibility: hidden;
+.justify-content-start {
+  justify-content: flex-start;
 }
-.text-hide {
-  color: transparent;
-  text-shadow: none;
-  background-color: transparent;
-  border: 0;
+.justify-content-end {
+  justify-content: flex-end;
 }
-.hidden {
-  display: none !important;
+.justify-content-center {
+  justify-content: center;
+}
+.justify-content-between {
+  justify-content: space-between;
+}
+.justify-content-around {
+  justify-content: space-around;
+}
+@media (min-width: 576px) {
+  .justify-content-start--sm {
+    justify-content: flex-start;
+  }
+  .justify-content-end--sm {
+    justify-content: flex-end;
+  }
+  .justify-content-center--sm {
+    justify-content: center;
+  }
+  .justify-content-between--sm {
+    justify-content: space-between;
+  }
+  .justify-content-around--sm {
+    justify-content: space-around;
+  }
+}
+@media (min-width: 768px) {
+  .justify-content-start--md {
+    justify-content: flex-start;
+  }
+  .justify-content-end--md {
+    justify-content: flex-end;
+  }
+  .justify-content-center--md {
+    justify-content: center;
+  }
+  .justify-content-between--md {
+    justify-content: space-between;
+  }
+  .justify-content-around--md {
+    justify-content: space-around;
+  }
+}
+@media (min-width: 992px) {
+  .justify-content-start--lg {
+    justify-content: flex-start;
+  }
+  .justify-content-end--lg {
+    justify-content: flex-end;
+  }
+  .justify-content-center--lg {
+    justify-content: center;
+  }
+  .justify-content-between--lg {
+    justify-content: space-between;
+  }
+  .justify-content-around--lg {
+    justify-content: space-around;
+  }
+}
+@media (min-width: 1200px) {
+  .justify-content-start--xl {
+    justify-content: flex-start;
+  }
+  .justify-content-end--xl {
+    justify-content: flex-end;
+  }
+  .justify-content-center--xl {
+    justify-content: center;
+  }
+  .justify-content-between--xl {
+    justify-content: space-between;
+  }
+  .justify-content-around--xl {
+    justify-content: space-around;
+  }
+}
+.m-a-0 {
+  margin: 0px !important;
+}
+.m-a-1 {
+  margin: 8px !important;
+  margin: var(--size-8) !important;
+}
+.m-a-2 {
+  margin: 16px !important;
+  margin: var(--size-16) !important;
+}
+.m-a-3 {
+  margin: 24px !important;
+  margin: var(--size-24) !important;
+}
+.m-a-4 {
+  margin: 32px !important;
+  margin: var(--size-32) !important;
+}
+.m-a-5 {
+  margin: 40px !important;
+  margin: var(--size-40) !important;
+}
+.m-x-0 {
+  margin-left: 0px !important;
+  margin-right: 0px !important;
+}
+.m-x-1 {
+  margin-left: 8px !important;
+  margin-left: var(--size-8) !important;
+  margin-right: 8px !important;
+  margin-right: var(--size-8) !important;
+}
+.m-x-2 {
+  margin-left: 16px !important;
+  margin-left: var(--size-16) !important;
+  margin-right: 16px !important;
+  margin-right: var(--size-16) !important;
+}
+.m-x-3 {
+  margin-left: 24px !important;
+  margin-left: var(--size-24) !important;
+  margin-right: 24px !important;
+  margin-right: var(--size-24) !important;
+}
+.m-x-4 {
+  margin-left: 32px !important;
+  margin-left: var(--size-32) !important;
+  margin-right: 32px !important;
+  margin-right: var(--size-32) !important;
+}
+.m-x-5 {
+  margin-left: 40px !important;
+  margin-left: var(--size-40) !important;
+  margin-right: 40px !important;
+  margin-right: var(--size-40) !important;
+}
+.m-x-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+.m-y-0 {
+  margin-top: 0px !important;
+  margin-bottom: 0px !important;
+}
+.m-y-1 {
+  margin-top: 8px !important;
+  margin-top: var(--size-8) !important;
+  margin-bottom: 8px !important;
+  margin-bottom: var(--size-8) !important;
+}
+.m-y-2 {
+  margin-top: 16px !important;
+  margin-top: var(--size-16) !important;
+  margin-bottom: 16px !important;
+  margin-bottom: var(--size-16) !important;
+}
+.m-y-3 {
+  margin-top: 24px !important;
+  margin-top: var(--size-24) !important;
+  margin-bottom: 24px !important;
+  margin-bottom: var(--size-24) !important;
+}
+.m-y-4 {
+  margin-top: 32px !important;
+  margin-top: var(--size-32) !important;
+  margin-bottom: 32px !important;
+  margin-bottom: var(--size-32) !important;
+}
+.m-y-5 {
+  margin-top: 40px !important;
+  margin-top: var(--size-40) !important;
+  margin-bottom: 40px !important;
+  margin-bottom: var(--size-40) !important;
+}
+.m-l-0 {
+  margin-inline-start: 0px !important;
+}
+.m-l-1 {
+  margin-inline-start: 8px !important;
+  margin-inline-start: var(--size-8) !important;
+}
+.m-l-2 {
+  margin-inline-start: 16px !important;
+  margin-inline-start: var(--size-16) !important;
+}
+.m-l-3 {
+  margin-inline-start: 24px !important;
+  margin-inline-start: var(--size-24) !important;
+}
+.m-l-4 {
+  margin-inline-start: 32px !important;
+  margin-inline-start: var(--size-32) !important;
+}
+.m-l-5 {
+  margin-inline-start: 40px !important;
+  margin-inline-start: var(--size-40) !important;
+}
+.m-l-auto {
+  margin-inline-start: auto !important;
+}
+.m-r-0 {
+  margin-inline-end: 0px !important;
+}
+.m-r-1 {
+  margin-inline-end: 8px !important;
+  margin-inline-end: var(--size-8) !important;
+}
+.m-r-2 {
+  margin-inline-end: 16px !important;
+  margin-inline-end: var(--size-16) !important;
+}
+.m-r-3 {
+  margin-inline-end: 24px !important;
+  margin-inline-end: var(--size-24) !important;
+}
+.m-r-4 {
+  margin-inline-end: 32px !important;
+  margin-inline-end: var(--size-32) !important;
+}
+.m-r-5 {
+  margin-inline-end: 40px !important;
+  margin-inline-end: var(--size-40) !important;
+}
+.m-r-auto {
+  margin-inline-end: auto !important;
+}
+.m-t-0 {
+  margin-top: 0px !important;
+}
+.m-t-1 {
+  margin-top: 8px !important;
+  margin-top: var(--size-8) !important;
+}
+.m-t-2 {
+  margin-top: 16px !important;
+  margin-top: var(--size-16) !important;
+}
+.m-t-3 {
+  margin-top: 24px !important;
+  margin-top: var(--size-24) !important;
+}
+.m-t-4 {
+  margin-top: 32px !important;
+  margin-top: var(--size-32) !important;
+}
+.m-t-5 {
+  margin-top: 40px !important;
+  margin-top: var(--size-40) !important;
+}
+.m-b-0 {
+  margin-bottom: 0px !important;
+}
+.m-b-1 {
+  margin-bottom: 8px !important;
+  margin-bottom: var(--size-8) !important;
+}
+.m-b-2 {
+  margin-bottom: 16px !important;
+  margin-bottom: var(--size-16) !important;
+}
+.m-b-3 {
+  margin-bottom: 24px !important;
+  margin-bottom: var(--size-24) !important;
+}
+.m-b-4 {
+  margin-bottom: 32px !important;
+  margin-bottom: var(--size-32) !important;
+}
+.m-b-5 {
+  margin-bottom: 40px !important;
+  margin-bottom: var(--size-40) !important;
+}
+.text-max-width {
+  max-width: 600px;
+}
+.order-1 {
+  order: 1;
+}
+.order-2 {
+  order: 2;
+}
+.order-3 {
+  order: 3;
+}
+.order-0 {
+  order: 0;
+}
+@media (min-width: 576px) {
+  .order-1--sm {
+    order: 1;
+  }
+  .order-2--sm {
+    order: 2;
+  }
+  .order-3--sm {
+    order: 3;
+  }
+  .order-0--sm {
+    order: 0;
+  }
+}
+@media (min-width: 768px) {
+  .order-1--md {
+    order: 1;
+  }
+  .order-2--md {
+    order: 2;
+  }
+  .order-3--md {
+    order: 3;
+  }
+  .order-0--md {
+    order: 0;
+  }
+}
+@media (min-width: 992px) {
+  .order-1--lg {
+    order: 1;
+  }
+  .order-2--lg {
+    order: 2;
+  }
+  .order-3--lg {
+    order: 3;
+  }
+  .order-0--lg {
+    order: 0;
+  }
+}
+@media (min-width: 1200px) {
+  .order-1--xl {
+    order: 1;
+  }
+  .order-2--xl {
+    order: 2;
+  }
+  .order-3--xl {
+    order: 3;
+  }
+  .order-0--xl {
+    order: 0;
+  }
+}
+.outline-none {
+  outline: none;
+  /*
+  TODO: Support Windows High Contrast mode
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  */
+}
+.text-word-break {
+  word-wrap: break-word;
+}
+.p-a-0 {
+  padding: 0px !important;
+}
+.p-a-1 {
+  padding: 8px !important;
+  padding: var(--size-8) !important;
+}
+.p-a-2 {
+  padding: 16px !important;
+  padding: var(--size-16) !important;
+}
+.p-a-3 {
+  padding: 24px !important;
+  padding: var(--size-24) !important;
+}
+.p-a-4 {
+  padding: 32px !important;
+  padding: var(--size-32) !important;
+}
+.p-a-5 {
+  padding: 40px !important;
+  padding: var(--size-40) !important;
+}
+.p-x-0 {
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+.p-x-1 {
+  padding-left: 8px !important;
+  padding-left: var(--size-8) !important;
+  padding-right: 8px !important;
+  padding-right: var(--size-8) !important;
+}
+.p-x-2 {
+  padding-left: 16px !important;
+  padding-left: var(--size-16) !important;
+  padding-right: 16px !important;
+  padding-right: var(--size-16) !important;
+}
+.p-x-3 {
+  padding-left: 24px !important;
+  padding-left: var(--size-24) !important;
+  padding-right: 24px !important;
+  padding-right: var(--size-24) !important;
+}
+.p-x-4 {
+  padding-left: 32px !important;
+  padding-left: var(--size-32) !important;
+  padding-right: 32px !important;
+  padding-right: var(--size-32) !important;
+}
+.p-x-5 {
+  padding-left: 40px !important;
+  padding-left: var(--size-40) !important;
+  padding-right: 40px !important;
+  padding-right: var(--size-40) !important;
+}
+.p-y-0 {
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+}
+.p-y-1 {
+  padding-top: 8px !important;
+  padding-top: var(--size-8) !important;
+  padding-bottom: 8px !important;
+  padding-bottom: var(--size-8) !important;
+}
+.p-y-2 {
+  padding-top: 16px !important;
+  padding-top: var(--size-16) !important;
+  padding-bottom: 16px !important;
+  padding-bottom: var(--size-16) !important;
+}
+.p-y-3 {
+  padding-top: 24px !important;
+  padding-top: var(--size-24) !important;
+  padding-bottom: 24px !important;
+  padding-bottom: var(--size-24) !important;
+}
+.p-y-4 {
+  padding-top: 32px !important;
+  padding-top: var(--size-32) !important;
+  padding-bottom: 32px !important;
+  padding-bottom: var(--size-32) !important;
+}
+.p-y-5 {
+  padding-top: 40px !important;
+  padding-top: var(--size-40) !important;
+  padding-bottom: 40px !important;
+  padding-bottom: var(--size-40) !important;
+}
+.p-l-0 {
+  padding-inline-start: 0px !important;
+}
+.p-l-1 {
+  padding-inline-start: 8px !important;
+  padding-inline-start: var(--size-8) !important;
+}
+.p-l-2 {
+  padding-inline-start: 16px !important;
+  padding-inline-start: var(--size-16) !important;
+}
+.p-l-3 {
+  padding-inline-start: 24px !important;
+  padding-inline-start: var(--size-24) !important;
+}
+.p-l-4 {
+  padding-inline-start: 32px !important;
+  padding-inline-start: var(--size-32) !important;
+}
+.p-l-5 {
+  padding-inline-start: 40px !important;
+  padding-inline-start: var(--size-40) !important;
+}
+.p-r-0 {
+  padding-inline-end: 0px !important;
+}
+.p-r-1 {
+  padding-inline-end: 8px !important;
+  padding-inline-end: var(--size-8) !important;
+}
+.p-r-2 {
+  padding-inline-end: 16px !important;
+  padding-inline-end: var(--size-16) !important;
+}
+.p-r-3 {
+  padding-inline-end: 24px !important;
+  padding-inline-end: var(--size-24) !important;
+}
+.p-r-4 {
+  padding-inline-end: 32px !important;
+  padding-inline-end: var(--size-32) !important;
+}
+.p-r-5 {
+  padding-inline-end: 40px !important;
+  padding-inline-end: var(--size-40) !important;
+}
+.p-t-0 {
+  padding-top: 0px !important;
+}
+.p-t-1 {
+  padding-top: 8px !important;
+  padding-top: var(--size-8) !important;
+}
+.p-t-2 {
+  padding-top: 16px !important;
+  padding-top: var(--size-16) !important;
+}
+.p-t-3 {
+  padding-top: 24px !important;
+  padding-top: var(--size-24) !important;
+}
+.p-t-4 {
+  padding-top: 32px !important;
+  padding-top: var(--size-32) !important;
+}
+.p-t-5 {
+  padding-top: 40px !important;
+  padding-top: var(--size-40) !important;
+}
+.p-b-0 {
+  padding-bottom: 0px !important;
+}
+.p-b-1 {
+  padding-bottom: 8px !important;
+  padding-bottom: var(--size-8) !important;
+}
+.p-b-2 {
+  padding-bottom: 16px !important;
+  padding-bottom: var(--size-16) !important;
+}
+.p-b-3 {
+  padding-bottom: 24px !important;
+  padding-bottom: var(--size-24) !important;
+}
+.p-b-4 {
+  padding-bottom: 32px !important;
+  padding-bottom: var(--size-32) !important;
+}
+.p-b-5 {
+  padding-bottom: 40px !important;
+  padding-bottom: var(--size-40) !important;
 }
 .affix {
   position: fixed;
@@ -137,9 +1117,159 @@
 .rotate180 {
   transform: rotate(180deg);
 }
-.rotate270 {
-  transform: rotate(270deg);
-}
+.rotate270,
 .rotate-90 {
   transform: rotate(-90deg);
 }
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+.sr-only-focusable:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+.text-xs-center {
+  text-align: center;
+}
+.text-xs-justify {
+  text-align: justify;
+}
+.text-xs-left {
+  text-align: start;
+}
+.text-xs-right {
+  text-align: end;
+}
+@media (min-width: 576px) {
+  .text-sm-center {
+    text-align: center;
+  }
+  .text-sm-justify {
+    text-align: justify;
+  }
+  .text-sm-left {
+    text-align: start;
+  }
+  .text-sm-right {
+    text-align: end;
+  }
+}
+@media (min-width: 768px) {
+  .text-md-center {
+    text-align: center;
+  }
+  .text-md-justify {
+    text-align: justify;
+  }
+  .text-md-left {
+    text-align: start;
+  }
+  .text-md-right {
+    text-align: end;
+  }
+}
+@media (min-width: 992px) {
+  .text-lg-center {
+    text-align: center;
+  }
+  .text-lg-justify {
+    text-align: justify;
+  }
+  .text-lg-left {
+    text-align: start;
+  }
+  .text-lg-right {
+    text-align: end;
+  }
+}
+@media (min-width: 1200px) {
+  .text-xl-center {
+    text-align: center;
+  }
+  .text-xl-justify {
+    text-align: justify;
+  }
+  .text-xl-left {
+    text-align: start;
+  }
+  .text-xl-right {
+    text-align: end;
+  }
+}
+.text-underline {
+  text-decoration-line: underline !important;
+  text-underline-offset: 2px;
+}
+.text-no-decoration {
+  text-decoration-line: none !important;
+}
+.text-ellipsis,
+.text-ellipses {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.text-uppercase {
+  text-transform: uppercase;
+}
+.text-lowercase {
+  text-transform: lowercase;
+}
+.text-capitalize {
+  text-transform: capitalize;
+}
+.invisible {
+  visibility: hidden;
+}
+.text-xs-nowrap {
+  white-space: nowrap;
+}
+@media (min-width: 576px) {
+  .text-sm-nowrap {
+    white-space: nowrap;
+  }
+}
+@media (min-width: 768px) {
+  .text-md-nowrap {
+    white-space: nowrap;
+  }
+}
+@media (min-width: 992px) {
+  .text-lg-nowrap {
+    white-space: nowrap;
+  }
+}
+@media (min-width: 1200px) {
+  .text-xl-nowrap {
+    white-space: nowrap;
+  }
+}
+.clearfix::before,
+.clearfix::after {
+  content: " ";
+  display: table;
+}
+.clearfix::after {
+  clear: both;
+}
+.text-hide {
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}