@kiwicom/orbit-components/lib/tailwind.css

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

::-webkit-backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

.container {
  width: 100%;
}

@media (min-width: 320px) {
  .container {
    max-width: 320px;
  }
}

@media (min-width: 414px) {
  .container {
    max-width: 414px;
  }
}

@media (min-width: 576px) {
  .container {
    max-width: 576px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 992px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}

.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;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.\!visible {
  visibility: visible !important;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-x-md {
  left: 16px;
  right: 16px;
}

.-bottom-full {
  bottom: -100%;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-\[var\(--box-bottom\)\] {
  bottom: var(--box-bottom);
}

.bottom-\[var\(--error-form-tooltip-bottom\)\] {
  bottom: var(--error-form-tooltip-bottom);
}

.bottom-\[var\(--toast-root-bottom\)\] {
  bottom: var(--toast-root-bottom);
}

.bottom-md {
  bottom: 16px;
}

.bottom-xxxs {
  bottom: 2px;
}

.end-0 {
  inset-inline-end: 0px;
}

.end-\[48px\] {
  inset-inline-end: 48px;
}

.end-\[var\(--toast-root-end\)\] {
  inset-inline-end: var(--toast-root-end);
}

.end-xs {
  inset-inline-end: 8px;
}

.left-0 {
  left: 0px;
}

.left-\[-3px\] {
  left: -3px;
}

.left-\[-6px\] {
  left: -6px;
}

.left-\[calc\(100\%\+2px\)\] {
  left: calc(100% + 2px);
}

.left-\[var\(--box-left\)\] {
  left: var(--box-left);
}

.left-\[var\(--error-form-tooltip-left\)\] {
  left: var(--error-form-tooltip-left);
}

.right-0 {
  right: 0px;
}

.right-\[var\(--box-right\)\] {
  right: var(--box-right);
}

.right-\[var\(--error-form-tooltip-right\)\] {
  right: var(--error-form-tooltip-right);
}

.right-px {
  right: 1px;
}

.start-0 {
  inset-inline-start: 0px;
}

.start-\[var\(--toast-root-start\)\] {
  inset-inline-start: var(--toast-root-start);
}

.start-xs {
  inset-inline-start: 8px;
}

.top-0 {
  top: 0px;
}

.top-1\/2 {
  top: 50%;
}

.top-\[-6px\] {
  top: -6px;
}

.top-\[16px\] {
  top: 16px;
}

.top-\[32px\] {
  top: 32px;
}

.top-\[var\(--box-top\)\] {
  top: var(--box-top);
}

.top-\[var\(--error-form-tooltip-top\)\] {
  top: var(--error-form-tooltip-top);
}

.top-\[var\(--toast-root-top\)\] {
  top: var(--toast-root-top);
}

.top-full {
  top: 100%;
}

.top-xxxs {
  top: 2px;
}

.z-10 {
  z-index: 10;
}

.z-\[-1\] {
  z-index: -1;
}

.z-\[10011\] {
  z-index: 10011;
}

.z-\[10012\] {
  z-index: 10012;
}

.z-\[1\] {
  z-index: 1;
}

.z-\[2\] {
  z-index: 2;
}

.z-\[3\] {
  z-index: 3;
}

.z-\[var\(--box-z-index\)\] {
  z-index: var(--box-z-index);
}

.z-drawer {
  z-index: 815;
}

.z-navigation-bar {
  z-index: 700;
}

.z-onTop {
  z-index: 900;
}

.z-overlay {
  z-index: 800;
}

.z-sticky {
  z-index: 100;
}

.m-0 {
  margin: 0px;
}

.m-\[-1px\] {
  margin: -1px;
}

.m-\[var\(--button-icon-left-margin\)\] {
  margin: var(--button-icon-left-margin);
}

.m-\[var\(--button-icon-right-margin\)\] {
  margin: var(--button-icon-right-margin);
}

.m-\[var\(--text-margin\)\] {
  margin: var(--text-margin);
}

.m-lg {
  margin: 24px;
}

.m-md {
  margin: 16px;
}

.m-sm {
  margin: 12px;
}

.m-xl {
  margin: 32px;
}

.m-xs {
  margin: 8px;
}

.m-xxl {
  margin: 40px;
}

.m-xxs {
  margin: 4px;
}

.m-xxxl {
  margin: 52px;
}

.m-xxxs {
  margin: 2px;
}

.mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mx-md {
  margin-left: 16px;
  margin-right: 16px;
}

.mx-xxs {
  margin-left: 4px;
  margin-right: 4px;
}

.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.my-sm {
  margin-top: 12px;
  margin-bottom: 12px;
}

.my-xs {
  margin-top: 8px;
  margin-bottom: 8px;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-\[var\(--text-margin-bottom\)\] {
  margin-bottom: var(--text-margin-bottom);
}

.mb-lg {
  margin-bottom: 24px;
}

.mb-md {
  margin-bottom: 16px;
}

.mb-sm {
  margin-bottom: 12px;
}

.mb-xl {
  margin-bottom: 32px;
}

.mb-xs {
  margin-bottom: 8px;
}

.mb-xxl {
  margin-bottom: 40px;
}

.mb-xxs {
  margin-bottom: 4px;
}

.mb-xxxl {
  margin-bottom: 52px;
}

.mb-xxxs {
  margin-bottom: 2px;
}

.me-\[6px\] {
  margin-inline-end: 6px;
}

.me-xs {
  margin-inline-end: 8px;
}

.me-xxs {
  margin-inline-end: 4px;
}

.ml-0 {
  margin-left: 0px;
}

.ml-\[var\(--text-margin-left\)\] {
  margin-left: var(--text-margin-left);
}

.ml-lg {
  margin-left: 24px;
}

.ml-md {
  margin-left: 16px;
}

.ml-sm {
  margin-left: 12px;
}

.ml-xl {
  margin-left: 32px;
}

.ml-xs {
  margin-left: 8px;
}

.ml-xxl {
  margin-left: 40px;
}

.ml-xxs {
  margin-left: 4px;
}

.ml-xxxl {
  margin-left: 52px;
}

.ml-xxxs {
  margin-left: 2px;
}

.mr-0 {
  margin-right: 0px;
}

.mr-\[var\(--text-margin-right\)\] {
  margin-right: var(--text-margin-right);
}

.mr-lg {
  margin-right: 24px;
}

.mr-md {
  margin-right: 16px;
}

.mr-sm {
  margin-right: 12px;
}

.mr-xl {
  margin-right: 32px;
}

.mr-xs {
  margin-right: 8px;
}

.mr-xxl {
  margin-right: 40px;
}

.mr-xxs {
  margin-right: 4px;
}

.mr-xxxl {
  margin-right: 52px;
}

.mr-xxxs {
  margin-right: 2px;
}

.ms-md {
  margin-inline-start: 16px;
}

.ms-sm {
  margin-inline-start: 12px;
}

.ms-xs {
  margin-inline-start: 8px;
}

.ms-xxs {
  margin-inline-start: 4px;
}

.mt-0 {
  margin-top: 0px;
}

.mt-\[var\(--text-margin-top\)\] {
  margin-top: var(--text-margin-top);
}

.mt-lg {
  margin-top: 24px;
}

.mt-md {
  margin-top: 16px;
}

.mt-sm {
  margin-top: 12px;
}

.mt-xl {
  margin-top: 32px;
}

.mt-xs {
  margin-top: 8px;
}

.mt-xxl {
  margin-top: 40px;
}

.mt-xxs {
  margin-top: 4px;
}

.mt-xxxl {
  margin-top: 52px;
}

.mt-xxxs {
  margin-top: 2px;
}

.box-border {
  box-sizing: border-box;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.table-cell {
  display: table-cell;
}

.table-row {
  display: table-row;
}

.grid {
  display: grid;
}

.inline-grid {
  display: inline-grid;
}

.list-item {
  display: list-item;
}

.hidden {
  display: none;
}

.h-0 {
  height: 0px;
}

.h-\[120px\] {
  height: 120px;
}

.h-\[1px\] {
  height: 1px;
}

.h-\[20px\] {
  height: 20px;
}

.h-\[24px\] {
  height: 24px;
}

.h-\[32px\] {
  height: 32px;
}

.h-\[40px\] {
  height: 40px;
}

.h-\[52px\] {
  height: 52px;
}

.h-\[64px\] {
  height: 64px;
}

.h-\[80px\] {
  height: 80px;
}

.h-\[calc\(theme\(height\.icon-large\)-1px\)\] {
  height: calc(24px - 1px);
}

.h-\[calc\(theme\(height\.icon-medium\)-1px\)\] {
  height: calc(20px - 1px);
}

.h-\[calc\(theme\(height\.icon-small\)-1px\)\] {
  height: calc(16px - 1px);
}

.h-\[var\(--box-height\)\] {
  height: var(--box-height);
}

.h-\[var\(--button-height\)\] {
  height: var(--button-height);
}

.h-country-flag-medium {
  height: 13px;
}

.h-country-flag-small {
  height: 9px;
}

.h-form-box-large {
  height: 52px;
}

.h-form-box-normal {
  height: 44px;
}

.h-form-box-small {
  height: 32px;
}

.h-full {
  height: 100%;
}

.h-icon-large {
  height: 24px;
}

.h-icon-medium {
  height: 20px;
}

.h-icon-small {
  height: 16px;
}

.h-screen {
  height: 100vh;
}

.h-xs {
  height: 8px;
}

.h-xxl {
  height: 40px;
}

.max-h-\[--max-height\] {
  max-height: var(--max-height);
}

.max-h-\[calc\(100\%-theme\(spacing\.xl\)\)\] {
  max-height: calc(100% - 32px);
}

.max-h-\[var\(--box-max-height\)\] {
  max-height: var(--box-max-height);
}

.max-h-full {
  max-height: 100%;
}

.max-h-illustration-display {
  max-height: 460px;
}

.max-h-illustration-extra-small {
  max-height: 90px;
}

.max-h-illustration-large {
  max-height: 280px;
}

.max-h-illustration-medium {
  max-height: 200px;
}

.max-h-illustration-small {
  max-height: 120px;
}

.max-h-none {
  max-height: none;
}

.min-h-\[19px\] {
  min-height: 19px;
}

.min-h-\[20px\] {
  min-height: 20px;
}

.min-h-form-box-normal {
  min-height: 44px;
}

.min-h-full {
  min-height: 100%;
}

.min-h-icon-medium {
  min-height: 20px;
}

.w-\[1px\] {
  width: 1px;
}

.w-\[24px\] {
  width: 24px;
}

.w-\[32px\] {
  width: 32px;
}

.w-\[40px\] {
  width: 40px;
}

.w-\[calc\(100\%-theme\(spacing\.xl\)\)\] {
  width: calc(100% - 32px);
}

.w-\[calc\(theme\(width\.icon-large\)-1px\)\] {
  width: calc(24px - 1px);
}

.w-\[calc\(theme\(width\.icon-medium\)-1px\)\] {
  width: calc(20px - 1px);
}

.w-\[calc\(theme\(width\.icon-small\)-1px\)\] {
  width: calc(16px - 1px);
}

.w-\[min\(calc\(100\%-20px\)\2c _100vw\)\] {
  width: min(calc(100% - 20px), 100vw);
}

.w-\[var\(--box-width\)\] {
  width: var(--box-width);
}

.w-\[var\(--button-content-width\)\] {
  width: var(--button-content-width);
}

.w-\[var\(--button-height\)\] {
  width: var(--button-height);
}

.w-\[var\(--grid-width\)\] {
  width: var(--grid-width);
}

.w-auto {
  width: auto;
}

.w-country-flag-medium {
  width: 24px;
}

.w-country-flag-small {
  width: 16px;
}

.w-form-box-large {
  width: 52px;
}

.w-form-box-normal {
  width: 44px;
}

.w-form-box-small {
  width: 32px;
}

.w-full {
  width: 100%;
}

.w-icon-large {
  width: 24px;
}

.w-icon-medium {
  width: 20px;
}

.w-icon-small {
  width: 16px;
}

.w-min {
  width: min-content;
}

.w-xs {
  width: 8px;
}

.w-xxl {
  width: 40px;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-\[50px\] {
  min-width: 50px;
}

.min-w-\[var\(--box-min-width\)\] {
  min-width: var(--box-min-width);
}

.max-w-\[--truncate-max-width\] {
  max-width: var(--truncate-max-width);
}

.max-w-\[240px\] {
  max-width: 240px;
}

.max-w-\[380px\] {
  max-width: 380px;
}

.max-w-\[var\(--box-max-width\)\] {
  max-width: var(--box-max-width);
}

.max-w-\[var\(--grid-max-width\)\] {
  max-width: var(--grid-max-width);
}

.max-w-\[var\(--orbit-modal-width\)\] {
  max-width: var(--orbit-modal-width);
}

.max-w-full {
  max-width: 100%;
}

.max-w-modal-extra-large {
  max-width: 1280px;
}

.max-w-modal-extra-small {
  max-width: 360px;
}

.max-w-modal-large {
  max-width: 900px;
}

.max-w-modal-normal {
  max-width: 740px;
}

.max-w-modal-small {
  max-width: 540px;
}

.max-w-none {
  max-width: none;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-initial {
  flex: 0 1 auto;
}

.flex-none {
  flex: none;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.shrink-\[var\(--box-shrink\)\] {
  flex-shrink: var(--box-shrink);
}

.flex-grow {
  flex-grow: 1;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.grow-\[var\(--box-grow\)\] {
  flex-grow: var(--box-grow);
}

.basis-1\/5 {
  flex-basis: 20%;
}

.basis-\[--truncate-max-width\] {
  flex-basis: var(--truncate-max-width);
}

.basis-\[var\(--basis\)\] {
  flex-basis: var(--basis);
}

.basis-auto {
  flex-basis: auto;
}

.basis-full {
  flex-basis: 100%;
}

.border-collapse {
  border-collapse: collapse;
}

.border-spacing-0 {
  --tw-border-spacing-x: 0px;
  --tw-border-spacing-y: 0px;
  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}

.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-\[var\(--toast-message-offset-x\)\] {
  --tw-translate-x: var(--toast-message-offset-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[-52px\] {
  --tw-translate-y: -52px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[calc\(100\%\+theme\(spacing\.md\)\)\] {
  --tw-translate-y: calc(100% + 16px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[var\(--toast-message-offset-y\)\] {
  --tw-translate-y: var(--toast-message-offset-y);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-180 {
  --tw-rotate: -180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform-gpu {
  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes toast-fade-in {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-\[toast-fade-in_theme\(transitionDuration\.normal\)_forwards\] {
  animation: toast-fade-in 0.3s forwards;
}

@keyframes toast-fade-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.animate-\[toast-fade-out_theme\(transitionDuration\.normal\)_forwards\] {
  animation: toast-fade-out 0.3s forwards;
}

@keyframes toast-light {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0%);
  }
}

.animate-\[toast-light_var\(--toast-message-duration\)_linear\] {
  animation: toast-light var(--toast-message-duration) linear;
}

@keyframes loader {
  0% {
    opacity: 0.3;
    transform: translateY(0px);
  }

  20% {
    opacity: 1;
    transform: translateY(-3px);
  }

  40% {
    opacity: 0.3;
    transform: translateY(0px);
  }

  100% {
    opacity: 0.3;
    transform: translateY(0px);
  }
}

.animate-loader {
  animation: loader 1.25s infinite ease-in-out;
}

@keyframes slow-pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}

.animate-pulse-slow {
  animation: slow-pulse 2s ease-in-out 0.5s infinite;
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.animate-spinner {
  animation: spinner 0.75s linear infinite;
}

.cursor-auto {
  cursor: auto;
}

.cursor-grab {
  cursor: grab;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-text {
  cursor: text;
}

.resize-none {
  resize: none;
}

.resize-y {
  resize: vertical;
}

.resize {
  resize: both;
}

.list-none {
  list-style-type: none;
}

.appearance-none {
  -webkit-appearance: none;
          appearance: none;
}

.grid-cols-\[var\(--grid-columns\)\] {
  grid-template-columns: var(--grid-columns);
}

.grid-rows-\[var\(--grid-rows\)\] {
  grid-template-rows: var(--grid-rows);
}

.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.content-center {
  align-content: center;
}

.content-start {
  align-content: flex-start;
}

.content-end {
  align-content: flex-end;
}

.content-between {
  align-content: space-between;
}

.content-baseline {
  align-content: baseline;
}

.content-stretch {
  align-content: stretch;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.gap-\[var\(--grid-gap\)\] {
  gap: var(--grid-gap);
}

.gap-lg {
  gap: 24px;
}

.gap-md {
  gap: 16px;
}

.gap-none {
  gap: 0px;
}

.gap-sm {
  gap: 12px;
}

.gap-xl {
  gap: 32px;
}

.gap-xs {
  gap: 8px;
}

.gap-xxl {
  gap: 40px;
}

.gap-xxs {
  gap: 4px;
}

.gap-xxxl {
  gap: 52px;
}

.gap-xxxs {
  gap: 2px;
}

.gap-x-\[var\(--grid-column-gap\)\] {
  column-gap: var(--grid-column-gap);
}

.gap-y-\[var\(--grid-row-gap\)\] {
  row-gap: var(--grid-row-gap);
}

.space-x-lg > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(24px * var(--tw-space-x-reverse));
  margin-left: calc(24px * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-md > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(16px * var(--tw-space-x-reverse));
  margin-left: calc(16px * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-none > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0px * var(--tw-space-x-reverse));
  margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-px > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1px * var(--tw-space-x-reverse));
  margin-left: calc(1px * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-sm > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(12px * var(--tw-space-x-reverse));
  margin-left: calc(12px * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-xl > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(32px * var(--tw-space-x-reverse));
  margin-left: calc(32px * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-xs > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(8px * var(--tw-space-x-reverse));
  margin-left: calc(8px * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-xxl > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(40px * var(--tw-space-x-reverse));
  margin-left: calc(40px * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-xxs > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(4px * var(--tw-space-x-reverse));
  margin-left: calc(4px * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-xxxl > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(52px * var(--tw-space-x-reverse));
  margin-left: calc(52px * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-xxxs > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(2px * var(--tw-space-x-reverse));
  margin-left: calc(2px * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-lg > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(24px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(24px * var(--tw-space-y-reverse));
}

.space-y-md > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(16px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(16px * var(--tw-space-y-reverse));
}

.space-y-none > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.space-y-sm > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(12px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(12px * var(--tw-space-y-reverse));
}

.space-y-xl > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(32px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(32px * var(--tw-space-y-reverse));
}

.space-y-xs > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(8px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(8px * var(--tw-space-y-reverse));
}

.space-y-xxl > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(40px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(40px * var(--tw-space-y-reverse));
}

.space-y-xxs > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(4px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(4px * var(--tw-space-y-reverse));
}

.space-y-xxxl > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(52px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(52px * var(--tw-space-y-reverse));
}

.space-y-xxxs > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2px * var(--tw-space-y-reverse));
}

.space-y-reverse > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 1;
}

.space-x-reverse > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}

.self-start {
  align-self: flex-start;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
}

.whitespace-normal {
  white-space: normal;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre {
  white-space: pre;
}

.whitespace-pre-line {
  white-space: pre-line;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.rounded-\[100px\] {
  border-radius: 100px;
}

.rounded-\[12px\] {
  border-radius: 12px;
}

.rounded-\[4px\] {
  border-radius: 4px;
}

.rounded-\[var\(--button-height\)\] {
  border-radius: var(--button-height);
}

.rounded-badge {
  border-radius: 12px;
}

.rounded-circle {
  border-radius: 50%;
}

.rounded-dialog-mobile {
  border-radius: 12px;
}

.rounded-form-box-large {
  border-radius: 52px;
}

.rounded-form-box-normal {
  border-radius: 44px;
}

.rounded-form-box-small {
  border-radius: 32px;
}

.rounded-large {
  border-radius: 6px;
}

.rounded-normal {
  border-radius: 3px;
}

.rounded-small {
  border-radius: 2px;
}

.rounded-t-modal-mobile {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-\[2px\] {
  border-width: 2px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-l-0 {
  border-left-width: 0px;
}

.border-r-0 {
  border-right-width: 0px;
}

.border-t {
  border-top-width: 1px;
}

.border-t-0 {
  border-top-width: 0px;
}

.border-t-\[3px\] {
  border-top-width: 3px;
}

.border-solid {
  border-style: solid;
}

.border-dashed {
  border-style: dashed;
}

.border-dotted {
  border-style: dotted;
}

.border-double {
  border-style: double;
}

.border-none {
  border-style: none;
}

.border-blue-dark {
  border-color: var(--palette-blue-dark, #005AA3);
}

.border-blue-dark-active {
  border-color: var(--palette-blue-dark-active, #003E70);
}

.border-blue-dark-hover {
  border-color: var(--palette-blue-dark-hover, #004F8F);
}

.border-blue-darker {
  border-color: var(--palette-blue-darker, #004680);
}

.border-blue-light {
  border-color: var(--palette-blue-light, #E8F4FD);
}

.border-blue-light-active {
  border-color: var(--palette-blue-light-active, #C7E4FA);
}

.border-blue-light-hover {
  border-color: var(--palette-blue-light-hover, #DEF0FC);
}

.border-blue-normal {
  border-color: var(--palette-blue-normal, #0172CB);
}

.border-blue-normal-active {
  border-color: var(--palette-blue-normal-active, #01508E);
}

.border-blue-normal-hover {
  border-color: var(--palette-blue-normal-hover, #0161AC);
}

.border-bundle-basic {
  border-color: var(--palette-bundle-basic, #D7331C);
}

.border-bundle-medium {
  border-color: var(--palette-bundle-medium, #3B1EB0);
}

.border-cloud-dark {
  border-color: var(--palette-cloud-dark, #BAC7D5);
}

.border-cloud-dark-active {
  border-color: var(--palette-cloud-dark-active, #94A8BE);
}

.border-cloud-dark-hover {
  border-color: var(--palette-cloud-dark-hover, #A6B6C8);
}

.border-cloud-light {
  border-color: var(--palette-cloud-light, #F5F7F9);
}

.border-cloud-light-active {
  border-color: var(--palette-cloud-light-active, #D6DEE6);
}

.border-cloud-light-hover {
  border-color: var(--palette-cloud-light-hover, #E5EAEF);
}

.border-cloud-normal {
  border-color: var(--palette-cloud-normal, #E8EDF1);
}

.border-cloud-normal-active {
  border-color: var(--palette-cloud-normal-active, #CAD4DE);
}

.border-cloud-normal-hover {
  border-color: var(--palette-cloud-normal-hover, #DCE3E9);
}

.border-elevation-flat-border-color {
  border-color: var(--palette-cloud-normal, #E8EDF1);
}

.border-green-dark {
  border-color: var(--palette-green-dark, #2D7738);
}

.border-green-dark-active {
  border-color: var(--palette-green-dark-active, #1F5126);
}

.border-green-dark-hover {
  border-color: var(--palette-green-dark-hover, #276831);
}

.border-green-darker {
  border-color: var(--palette-green-darker, #235C2B);
}

.border-green-light {
  border-color: var(--palette-green-light, #EAF5EA);
}

.border-green-light-active {
  border-color: var(--palette-green-light-active, #CDE4CF);
}

.border-green-light-hover {
  border-color: var(--palette-green-light-hover, #E1EFE2);
}

.border-green-normal {
  border-color: var(--palette-green-normal, #28A138);
}

.border-green-normal-active {
  border-color: var(--palette-green-normal-active, #1D7228);
}

.border-green-normal-hover {
  border-color: var(--palette-green-normal-hover, #238B31);
}

.border-ink-dark {
  border-color: var(--palette-ink-dark, #252A31);
}

.border-ink-dark-active {
  border-color: var(--palette-ink-dark-active, #0B0C0F);
}

.border-ink-dark-hover {
  border-color: var(--palette-ink-dark-hover, #181B20);
}

.border-ink-light {
  border-color: var(--palette-ink-light, #697D95);
}

.border-ink-light-active {
  border-color: var(--palette-ink-light-active, #4A617C);
}

.border-ink-light-hover {
  border-color: var(--palette-ink-light-hover, #5D738E);
}

.border-ink-normal {
  border-color: var(--palette-ink-normal, #4F5E71);
}

.border-ink-normal-active {
  border-color: var(--palette-ink-normal-active, #324256);
}

.border-ink-normal-hover {
  border-color: var(--palette-ink-normal-hover, #3E4E63);
}

.border-orange-dark {
  border-color: var(--palette-orange-dark, #AD5700);
}

.border-orange-dark-active {
  border-color: var(--palette-orange-dark-active, #954A00);
}

.border-orange-dark-hover {
  border-color: var(--palette-orange-dark-hover, #A75400);
}

.border-orange-darker {
  border-color: var(--palette-orange-darker, #803F00);
}

.border-orange-light {
  border-color: var(--palette-orange-light, #FEF2E6);
}

.border-orange-light-active {
  border-color: var(--palette-orange-light-active, #FAE2C6);
}

.border-orange-light-hover {
  border-color: var(--palette-orange-light-hover, #FCECDA);
}

.border-orange-normal {
  border-color: var(--palette-orange-normal, #DF7B00);
}

.border-orange-normal-active {
  border-color: var(--palette-orange-normal-active, #B26200);
}

.border-orange-normal-hover {
  border-color: var(--palette-orange-normal-hover, #C96F00);
}

.border-product-dark {
  border-color: var(--palette-product-dark, #007A69);
}

.border-product-dark-active {
  border-color: var(--palette-product-dark-active, #006657);
}

.border-product-dark-hover {
  border-color: var(--palette-product-dark-hover, #007060);
}

.border-product-darker {
  border-color: var(--palette-product-darker, #005C4E);
}

.border-product-light {
  border-color: var(--palette-product-light, #E1F4F3);
}

.border-product-light-active {
  border-color: var(--palette-product-light-active, #BFE8E2);
}

.border-product-light-hover {
  border-color: var(--palette-product-light-hover, #D6F0EC);
}

.border-product-normal {
  border-color: var(--palette-product-normal, #00A58E);
}

.border-product-normal-active {
  border-color: var(--palette-product-normal-active, #008472);
}

.border-product-normal-hover {
  border-color: var(--palette-product-normal-hover, #009580);
}

.border-red-dark {
  border-color: var(--palette-red-dark, #970C0C);
}

.border-red-dark-active {
  border-color: var(--palette-red-dark-active, #6D0909);
}

.border-red-dark-hover {
  border-color: var(--palette-red-dark-hover, #890B0B);
}

.border-red-darker {
  border-color: var(--palette-red-darker, #760909);
}

.border-red-light {
  border-color: var(--palette-red-light, #FAEAEA);
}

.border-red-light-active {
  border-color: var(--palette-red-light-active, #F3CECE);
}

.border-red-light-hover {
  border-color: var(--palette-red-light-hover, #F8E2E2);
}

.border-red-normal {
  border-color: var(--palette-red-normal, #D21C1C);
}

.border-red-normal-active {
  border-color: var(--palette-red-normal-active, #9D1515);
}

.border-red-normal-hover {
  border-color: var(--palette-red-normal-hover, #B91919);
}

.border-social-facebook {
  border-color: var(--palette-social-facebook, #3B5998);
}

.border-social-facebook-active {
  border-color: var(--palette-social-facebook-active, #354F88);
}

.border-social-facebook-hover {
  border-color: var(--palette-social-facebook-hover, #385490);
}

.border-transparent {
  border-color: transparent;
}

.border-white {
  border-color: var(--palette-white-normal, #FFFFFF);
}

.border-b-cloud-dark {
  border-bottom-color: var(--palette-cloud-dark, #BAC7D5);
}

.border-b-cloud-normal {
  border-bottom-color: var(--palette-cloud-normal, #E8EDF1);
}

.border-b-elevation-flat-border-color {
  border-bottom-color: var(--palette-cloud-normal, #E8EDF1);
}

.border-t-blue-normal {
  border-top-color: var(--palette-blue-normal, #0172CB);
}

.border-t-green-normal {
  border-top-color: var(--palette-green-normal, #28A138);
}

.border-t-orange-normal {
  border-top-color: var(--palette-orange-normal, #DF7B00);
}

.border-t-red-normal {
  border-top-color: var(--palette-red-normal, #D21C1C);
}

.bg-\[black\] {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.bg-\[rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
  background-color: rgba(0,0,0,0.5);
}

.bg-\[rgba\(23\2c 27\2c 30\2c 0\.6\)\] {
  background-color: rgba(23,27,30,0.6);
}

.bg-\[var\(--button-background\)\] {
  background-color: var(--button-background);
}

.bg-badge-critical-background {
  background-color: var(--palette-red-normal, #D21C1C);
}

.bg-badge-critical-subtle-background {
  background-color: var(--palette-red-light, #FAEAEA);
}

.bg-badge-dark-background {
  background-color: var(--palette-ink-dark, #252A31);
}

.bg-badge-info-background {
  background-color: var(--palette-blue-normal, #0172CB);
}

.bg-badge-info-subtle-background {
  background-color: var(--palette-blue-light, #E8F4FD);
}

.bg-badge-neutral-background {
  background-color: var(--palette-cloud-light, #F5F7F9);
}

.bg-badge-success-background {
  background-color: var(--palette-green-normal, #28A138);
}

.bg-badge-success-subtle-background {
  background-color: var(--palette-green-light, #EAF5EA);
}

.bg-badge-warning-background {
  background-color: var(--palette-orange-normal, #DF7B00);
}

.bg-badge-warning-subtle-background {
  background-color: var(--palette-orange-light, #FEF2E6);
}

.bg-badge-white-background {
  background-color: var(--palette-white-normal, #FFFFFF);
}

.bg-blue-dark {
  background-color: var(--palette-blue-dark, #005AA3);
}

.bg-blue-dark-active {
  background-color: var(--palette-blue-dark-active, #003E70);
}

.bg-blue-dark-hover {
  background-color: var(--palette-blue-dark-hover, #004F8F);
}

.bg-blue-darker {
  background-color: var(--palette-blue-darker, #004680);
}

.bg-blue-light {
  background-color: var(--palette-blue-light, #E8F4FD);
}

.bg-blue-light-active {
  background-color: var(--palette-blue-light-active, #C7E4FA);
}

.bg-blue-light-hover {
  background-color: var(--palette-blue-light-hover, #DEF0FC);
}

.bg-blue-normal {
  background-color: var(--palette-blue-normal, #0172CB);
}

.bg-blue-normal-active {
  background-color: var(--palette-blue-normal-active, #01508E);
}

.bg-blue-normal-hover {
  background-color: var(--palette-blue-normal-hover, #0161AC);
}

.bg-bundle-basic {
  background-color: var(--palette-bundle-basic, #D7331C);
}

.bg-bundle-medium {
  background-color: var(--palette-bundle-medium, #3B1EB0);
}

.bg-button-critical-background {
  background-color: var(--palette-red-normal, #D21C1C);
}

.bg-button-critical-subtle-background {
  background-color: var(--palette-red-light, #FAEAEA);
}

.bg-button-link-critical-background {
  background-color: transparent;
}

.bg-button-link-primary-background {
  background-color: transparent;
}

.bg-button-link-secondary-background {
  background-color: transparent;
}

.bg-button-primary-background {
  background-color: var(--button-primary-background, var(--palette-product-normal, #00A58E));
}

.bg-button-primary-subtle-background {
  background-color: var(--palette-product-light, #E1F4F3);
}

.bg-button-secondary-background {
  background-color: var(--palette-cloud-normal, #E8EDF1);
}

.bg-button-white-background {
  background-color: var(--palette-white-normal, #FFFFFF);
}

.bg-cloud-dark {
  background-color: var(--palette-cloud-dark, #BAC7D5);
}

.bg-cloud-dark-active {
  background-color: var(--palette-cloud-dark-active, #94A8BE);
}

.bg-cloud-dark-hover {
  background-color: var(--palette-cloud-dark-hover, #A6B6C8);
}

.bg-cloud-light {
  background-color: var(--palette-cloud-light, #F5F7F9);
}

.bg-cloud-light-active {
  background-color: var(--palette-cloud-light-active, #D6DEE6);
}

.bg-cloud-light-hover {
  background-color: var(--palette-cloud-light-hover, #E5EAEF);
}

.bg-cloud-normal {
  background-color: var(--palette-cloud-normal, #E8EDF1);
}

.bg-cloud-normal-active {
  background-color: var(--palette-cloud-normal-active, #CAD4DE);
}

.bg-cloud-normal-hover {
  background-color: var(--palette-cloud-normal-hover, #DCE3E9);
}

.bg-country-flag-background {
  background-color: transparent;
}

.bg-drawer-overlay-background {
  background-color: rgba(37, 42, 49, 0.5);
}

.bg-elevation-flat {
  background-color: var(--palette-white-normal, #FFFFFF);
}

.bg-form-element-background {
  background-color: var(--palette-white-normal, #FFFFFF);
}

.bg-form-element-disabled-background {
  background-color: var(--palette-cloud-normal, #E8EDF1);
}

.bg-green-dark {
  background-color: var(--palette-green-dark, #2D7738);
}

.bg-green-dark-active {
  background-color: var(--palette-green-dark-active, #1F5126);
}

.bg-green-dark-hover {
  background-color: var(--palette-green-dark-hover, #276831);
}

.bg-green-darker {
  background-color: var(--palette-green-darker, #235C2B);
}

.bg-green-light {
  background-color: var(--palette-green-light, #EAF5EA);
}

.bg-green-light-active {
  background-color: var(--palette-green-light-active, #CDE4CF);
}

.bg-green-light-hover {
  background-color: var(--palette-green-light-hover, #E1EFE2);
}

.bg-green-normal {
  background-color: var(--palette-green-normal, #28A138);
}

.bg-green-normal-active {
  background-color: var(--palette-green-normal-active, #1D7228);
}

.bg-green-normal-hover {
  background-color: var(--palette-green-normal-hover, #238B31);
}

.bg-ink-dark {
  background-color: var(--palette-ink-dark, #252A31);
}

.bg-ink-dark-active {
  background-color: var(--palette-ink-dark-active, #0B0C0F);
}

.bg-ink-dark-hover {
  background-color: var(--palette-ink-dark-hover, #181B20);
}

.bg-ink-light {
  background-color: var(--palette-ink-light, #697D95);
}

.bg-ink-light-active {
  background-color: var(--palette-ink-light-active, #4A617C);
}

.bg-ink-light-hover {
  background-color: var(--palette-ink-light-hover, #5D738E);
}

.bg-ink-normal {
  background-color: var(--palette-ink-normal, #4F5E71);
}

.bg-ink-normal-active {
  background-color: var(--palette-ink-normal-active, #324256);
}

.bg-ink-normal-hover {
  background-color: var(--palette-ink-normal-hover, #3E4E63);
}

.bg-orange-dark {
  background-color: var(--palette-orange-dark, #AD5700);
}

.bg-orange-dark-active {
  background-color: var(--palette-orange-dark-active, #954A00);
}

.bg-orange-dark-hover {
  background-color: var(--palette-orange-dark-hover, #A75400);
}

.bg-orange-darker {
  background-color: var(--palette-orange-darker, #803F00);
}

.bg-orange-light {
  background-color: var(--palette-orange-light, #FEF2E6);
}

.bg-orange-light-active {
  background-color: var(--palette-orange-light-active, #FAE2C6);
}

.bg-orange-light-hover {
  background-color: var(--palette-orange-light-hover, #FCECDA);
}

.bg-orange-normal {
  background-color: var(--palette-orange-normal, #DF7B00);
}

.bg-orange-normal-active {
  background-color: var(--palette-orange-normal-active, #B26200);
}

.bg-orange-normal-hover {
  background-color: var(--palette-orange-normal-hover, #C96F00);
}

.bg-product-dark {
  background-color: var(--palette-product-dark, #007A69);
}

.bg-product-dark-active {
  background-color: var(--palette-product-dark-active, #006657);
}

.bg-product-dark-hover {
  background-color: var(--palette-product-dark-hover, #007060);
}

.bg-product-darker {
  background-color: var(--palette-product-darker, #005C4E);
}

.bg-product-light {
  background-color: var(--palette-product-light, #E1F4F3);
}

.bg-product-light-active {
  background-color: var(--palette-product-light-active, #BFE8E2);
}

.bg-product-light-hover {
  background-color: var(--palette-product-light-hover, #D6F0EC);
}

.bg-product-normal {
  background-color: var(--palette-product-normal, #00A58E);
}

.bg-product-normal-active {
  background-color: var(--palette-product-normal-active, #008472);
}

.bg-product-normal-hover {
  background-color: var(--palette-product-normal-hover, #009580);
}

.bg-red-dark {
  background-color: var(--palette-red-dark, #970C0C);
}

.bg-red-dark-active {
  background-color: var(--palette-red-dark-active, #6D0909);
}

.bg-red-dark-hover {
  background-color: var(--palette-red-dark-hover, #890B0B);
}

.bg-red-darker {
  background-color: var(--palette-red-darker, #760909);
}

.bg-red-light {
  background-color: var(--palette-red-light, #FAEAEA);
}

.bg-red-light-active {
  background-color: var(--palette-red-light-active, #F3CECE);
}

.bg-red-light-hover {
  background-color: var(--palette-red-light-hover, #F8E2E2);
}

.bg-red-normal {
  background-color: var(--palette-red-normal, #D21C1C);
}

.bg-red-normal-active {
  background-color: var(--palette-red-normal-active, #9D1515);
}

.bg-red-normal-hover {
  background-color: var(--palette-red-normal-hover, #B91919);
}

.bg-social-facebook {
  background-color: var(--palette-social-facebook, #3B5998);
}

.bg-social-facebook-active {
  background-color: var(--palette-social-facebook-active, #354F88);
}

.bg-social-facebook-hover {
  background-color: var(--palette-social-facebook-hover, #385490);
}

.bg-text-critical-background {
  background-color: rgba(210, 28, 28, 0.1);
}

.bg-text-info-background {
  background-color: rgba(1, 114, 203, 0.1);
}

.bg-text-primary-background {
  background-color: rgba(37, 42, 49, 0.1);
}

.bg-text-secondary-background {
  background-color: rgba(79, 94, 113, 0.1);
}

.bg-text-success-background {
  background-color: rgba(40, 161, 56, 0.1);
}

.bg-text-warning-background {
  background-color: rgba(223, 123, 0, 0.1);
}

.bg-text-white-background {
  background-color: rgba(255, 255, 255, 0.1);
}

.bg-transparent {
  background-color: transparent;
}

.bg-white-normal {
  background-color: var(--palette-white-normal, #FFFFFF);
}

.bg-white-normal-active {
  background-color: var(--palette-white-normal-active, #E7ECF1);
}

.bg-white-normal-hover {
  background-color: var(--palette-white-normal-hover, #F1F4F7);
}

.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}

.bg-badge-bundle-basic-background {
  background-image: linear-gradient(to top right, #E13E3B 0%, #E87E09 100%);
}

.bg-badge-bundle-medium-background {
  background-image: linear-gradient(to top right, #3719AB 0%, #8539DB 100%);
}

.bg-badge-bundle-top-background {
  background-image: linear-gradient(to top right, #2D2D2E 0%, #696E73 100%);
}

.bg-button-bundle-basic-background {
  background-image: linear-gradient(to top right, #E13E3B 0%, #E87E09 100%);
}

.bg-button-bundle-medium-background {
  background-image: linear-gradient(to top right, #3719AB 0%, #8539DB 100%);
}

.bg-button-bundle-top-background {
  background-image: linear-gradient(to top right, #2D2D2E 0%, #696E73 100%);
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-\[\#fd1d1d\] {
  --tw-gradient-from: #fd1d1d var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(253 29 29 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-\[\#ffae28\] {
  --tw-gradient-to: #ffae28 var(--tw-gradient-to-position);
}

.p-0 {
  padding: 0px;
}

.p-\[var\(--button-padding\)\] {
  padding: var(--button-padding);
}

.p-form-element-normal-padding {
  padding: 0 12px;
}

.p-lg {
  padding: 24px;
}

.p-md {
  padding: 16px;
}

.p-sm {
  padding: 12px;
}

.p-xl {
  padding: 32px;
}

.p-xs {
  padding: 8px;
}

.p-xxl {
  padding: 40px;
}

.p-xxs {
  padding: 4px;
}

.p-xxxl {
  padding: 52px;
}

.p-xxxs {
  padding: 2px;
}

.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}

.px-button-padding-lg {
  padding-left: 28px;
  padding-right: 28px;
}

.px-button-padding-md {
  padding-left: 16px;
  padding-right: 16px;
}

.px-button-padding-sm {
  padding-left: 12px;
  padding-right: 12px;
}

.px-button-padding-xs {
  padding-left: 8px;
  padding-right: 8px;
}

.px-lg {
  padding-left: 24px;
  padding-right: 24px;
}

.px-md {
  padding-left: 16px;
  padding-right: 16px;
}

.px-sm {
  padding-left: 12px;
  padding-right: 12px;
}

.px-xl {
  padding-left: 32px;
  padding-right: 32px;
}

.px-xs {
  padding-left: 8px;
  padding-right: 8px;
}

.px-xxl {
  padding-left: 40px;
  padding-right: 40px;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-lg {
  padding-top: 24px;
  padding-bottom: 24px;
}

.py-md {
  padding-top: 16px;
  padding-bottom: 16px;
}

.py-sm {
  padding-top: 12px;
  padding-bottom: 12px;
}

.py-xl {
  padding-top: 32px;
  padding-bottom: 32px;
}

.py-xs {
  padding-top: 8px;
  padding-bottom: 8px;
}

.py-xxs {
  padding-top: 4px;
  padding-bottom: 4px;
}

.pb-0 {
  padding-bottom: 0px;
}

.pb-lg {
  padding-bottom: 24px;
}

.pb-md {
  padding-bottom: 16px;
}

.pb-sm {
  padding-bottom: 12px;
}

.pb-xl {
  padding-bottom: 32px;
}

.pb-xs {
  padding-bottom: 8px;
}

.pb-xxl {
  padding-bottom: 40px;
}

.pb-xxs {
  padding-bottom: 4px;
}

.pb-xxxl {
  padding-bottom: 52px;
}

.pb-xxxs {
  padding-bottom: 2px;
}

.pe-0 {
  padding-inline-end: 0px;
}

.pe-button-padding-lg {
  padding-inline-end: 28px;
}

.pe-button-padding-md {
  padding-inline-end: 16px;
}

.pe-button-padding-sm {
  padding-inline-end: 12px;
}

.pe-button-padding-xs {
  padding-inline-end: 8px;
}

.pe-lg {
  padding-inline-end: 24px;
}

.pe-md {
  padding-inline-end: 16px;
}

.pe-sm {
  padding-inline-end: 12px;
}

.pe-xl {
  padding-inline-end: 32px;
}

.pe-xs {
  padding-inline-end: 8px;
}

.pe-xxl {
  padding-inline-end: 40px;
}

.pl-0 {
  padding-left: 0px;
}

.pl-lg {
  padding-left: 24px;
}

.pl-md {
  padding-left: 16px;
}

.pl-sm {
  padding-left: 12px;
}

.pl-xl {
  padding-left: 32px;
}

.pl-xs {
  padding-left: 8px;
}

.pl-xxl {
  padding-left: 40px;
}

.pl-xxs {
  padding-left: 4px;
}

.pl-xxxl {
  padding-left: 52px;
}

.pl-xxxs {
  padding-left: 2px;
}

.pr-0 {
  padding-right: 0px;
}

.pr-lg {
  padding-right: 24px;
}

.pr-md {
  padding-right: 16px;
}

.pr-sm {
  padding-right: 12px;
}

.pr-xl {
  padding-right: 32px;
}

.pr-xs {
  padding-right: 8px;
}

.pr-xxl {
  padding-right: 40px;
}

.pr-xxs {
  padding-right: 4px;
}

.pr-xxxl {
  padding-right: 52px;
}

.pr-xxxs {
  padding-right: 2px;
}

.ps-0 {
  padding-inline-start: 0px;
}

.ps-\[48px\] {
  padding-inline-start: 48px;
}

.ps-\[6px\] {
  padding-inline-start: 6px;
}

.ps-button-padding-lg {
  padding-inline-start: 28px;
}

.ps-button-padding-md {
  padding-inline-start: 16px;
}

.ps-button-padding-sm {
  padding-inline-start: 12px;
}

.ps-button-padding-xs {
  padding-inline-start: 8px;
}

.ps-lg {
  padding-inline-start: 24px;
}

.ps-md {
  pad