@empathyco/x-components/design-system/deprecated-full-theme.css

Empathy X Components

.x-uppercase {
  text-transform: uppercase;
}

.x-lowercase {
  text-transform: lowercase;
}

.x-capitalize {
  text-transform: capitalize;
}

.x-normal-case {
  text-transform: none;
}

.x-static {
  position: static !important;
}

.x-fixed {
  position: fixed !important;
}

.x-absolute {
  position: absolute !important;
}

.x-relative {
  position: relative !important;
}

.x-sticky {
  position: sticky !important;
}
.x-underline {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}

.x-overline {
  -webkit-text-decoration-line: overline;
          text-decoration-line: overline;
}

.x-line-through {
  -webkit-text-decoration-line: line-through;
          text-decoration-line: line-through;
}

.x-no-underline {
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
}
.x-padding--00 {
  padding: 0 !important;
}
.x-padding--01 {
  padding: var(--x-size-base-01) !important;
}
.x-padding--02 {
  padding: var(--x-size-base-02) !important;
}
.x-padding--03 {
  padding: var(--x-size-base-03) !important;
}
.x-padding--04 {
  padding: var(--x-size-base-04) !important;
}
.x-padding--05 {
  padding: var(--x-size-base-05) !important;
}
.x-padding--06 {
  padding: var(--x-size-base-06) !important;
}
.x-padding--07 {
  padding: var(--x-size-base-07) !important;
}
.x-padding--08 {
  padding: var(--x-size-base-08) !important;
}
.x-padding--09 {
  padding: var(--x-size-base-09) !important;
}
.x-padding--10 {
  padding: var(--x-size-base-10) !important;
}
.x-padding--11 {
  padding: var(--x-size-base-11) !important;
}
.x-padding--12 {
  padding: var(--x-size-base-12) !important;
}
.x-padding--13 {
  padding: var(--x-size-base-13) !important;
}
.x-padding--14 {
  padding: var(--x-size-base-14) !important;
}
.x-padding--15 {
  padding: var(--x-size-base-15) !important;
}
.x-padding--16 {
  padding: var(--x-size-base-16) !important;
}
.x-padding--17 {
  padding: var(--x-size-base-17) !important;
}
.x-padding--18 {
  padding: var(--x-size-base-18) !important;
}
.x-padding--19 {
  padding: var(--x-size-base-19) !important;
}
.x-padding--20 {
  padding: var(--x-size-base-20) !important;
}
.x-padding--top-00 {
  padding-top: 0 !important;
}
.x-padding--bottom-00 {
  padding-bottom: 0 !important;
}
[dir="ltr"] .x-padding--right-00 {
  padding-right: 0 !important;
}
[dir="rtl"] .x-padding--right-00 {
  padding-left: 0 !important;
}
[dir="ltr"] .x-padding--left-00 {
  padding-left: 0 !important;
}
[dir="rtl"] .x-padding--left-00 {
  padding-right: 0 !important;
}
.x-padding--top-01 {
  padding-top: var(--x-size-base-01) !important;
}
.x-padding--bottom-01 {
  padding-bottom: var(--x-size-base-01) !important;
}
[dir="ltr"] .x-padding--right-01 {
  padding-right: var(--x-size-base-01) !important;
}
[dir="rtl"] .x-padding--right-01 {
  padding-left: var(--x-size-base-01) !important;
}
[dir="ltr"] .x-padding--left-01 {
  padding-left: var(--x-size-base-01) !important;
}
[dir="rtl"] .x-padding--left-01 {
  padding-right: var(--x-size-base-01) !important;
}
.x-padding--top-02 {
  padding-top: var(--x-size-base-02) !important;
}
.x-padding--bottom-02 {
  padding-bottom: var(--x-size-base-02) !important;
}
[dir="ltr"] .x-padding--right-02 {
  padding-right: var(--x-size-base-02) !important;
}
[dir="rtl"] .x-padding--right-02 {
  padding-left: var(--x-size-base-02) !important;
}
[dir="ltr"] .x-padding--left-02 {
  padding-left: var(--x-size-base-02) !important;
}
[dir="rtl"] .x-padding--left-02 {
  padding-right: var(--x-size-base-02) !important;
}
.x-padding--top-03 {
  padding-top: var(--x-size-base-03) !important;
}
.x-padding--bottom-03 {
  padding-bottom: var(--x-size-base-03) !important;
}
[dir="ltr"] .x-padding--right-03 {
  padding-right: var(--x-size-base-03) !important;
}
[dir="rtl"] .x-padding--right-03 {
  padding-left: var(--x-size-base-03) !important;
}
[dir="ltr"] .x-padding--left-03 {
  padding-left: var(--x-size-base-03) !important;
}
[dir="rtl"] .x-padding--left-03 {
  padding-right: var(--x-size-base-03) !important;
}
.x-padding--top-04 {
  padding-top: var(--x-size-base-04) !important;
}
.x-padding--bottom-04 {
  padding-bottom: var(--x-size-base-04) !important;
}
[dir="ltr"] .x-padding--right-04 {
  padding-right: var(--x-size-base-04) !important;
}
[dir="rtl"] .x-padding--right-04 {
  padding-left: var(--x-size-base-04) !important;
}
[dir="ltr"] .x-padding--left-04 {
  padding-left: var(--x-size-base-04) !important;
}
[dir="rtl"] .x-padding--left-04 {
  padding-right: var(--x-size-base-04) !important;
}
.x-padding--top-05 {
  padding-top: var(--x-size-base-05) !important;
}
.x-padding--bottom-05 {
  padding-bottom: var(--x-size-base-05) !important;
}
[dir="ltr"] .x-padding--right-05 {
  padding-right: var(--x-size-base-05) !important;
}
[dir="rtl"] .x-padding--right-05 {
  padding-left: var(--x-size-base-05) !important;
}
[dir="ltr"] .x-padding--left-05 {
  padding-left: var(--x-size-base-05) !important;
}
[dir="rtl"] .x-padding--left-05 {
  padding-right: var(--x-size-base-05) !important;
}
.x-padding--top-06 {
  padding-top: var(--x-size-base-06) !important;
}
.x-padding--bottom-06 {
  padding-bottom: var(--x-size-base-06) !important;
}
[dir="ltr"] .x-padding--right-06 {
  padding-right: var(--x-size-base-06) !important;
}
[dir="rtl"] .x-padding--right-06 {
  padding-left: var(--x-size-base-06) !important;
}
[dir="ltr"] .x-padding--left-06 {
  padding-left: var(--x-size-base-06) !important;
}
[dir="rtl"] .x-padding--left-06 {
  padding-right: var(--x-size-base-06) !important;
}
.x-padding--top-07 {
  padding-top: var(--x-size-base-07) !important;
}
.x-padding--bottom-07 {
  padding-bottom: var(--x-size-base-07) !important;
}
[dir="ltr"] .x-padding--right-07 {
  padding-right: var(--x-size-base-07) !important;
}
[dir="rtl"] .x-padding--right-07 {
  padding-left: var(--x-size-base-07) !important;
}
[dir="ltr"] .x-padding--left-07 {
  padding-left: var(--x-size-base-07) !important;
}
[dir="rtl"] .x-padding--left-07 {
  padding-right: var(--x-size-base-07) !important;
}
.x-padding--top-08 {
  padding-top: var(--x-size-base-08) !important;
}
.x-padding--bottom-08 {
  padding-bottom: var(--x-size-base-08) !important;
}
[dir="ltr"] .x-padding--right-08 {
  padding-right: var(--x-size-base-08) !important;
}
[dir="rtl"] .x-padding--right-08 {
  padding-left: var(--x-size-base-08) !important;
}
[dir="ltr"] .x-padding--left-08 {
  padding-left: var(--x-size-base-08) !important;
}
[dir="rtl"] .x-padding--left-08 {
  padding-right: var(--x-size-base-08) !important;
}
.x-padding--top-09 {
  padding-top: var(--x-size-base-09) !important;
}
.x-padding--bottom-09 {
  padding-bottom: var(--x-size-base-09) !important;
}
[dir="ltr"] .x-padding--right-09 {
  padding-right: var(--x-size-base-09) !important;
}
[dir="rtl"] .x-padding--right-09 {
  padding-left: var(--x-size-base-09) !important;
}
[dir="ltr"] .x-padding--left-09 {
  padding-left: var(--x-size-base-09) !important;
}
[dir="rtl"] .x-padding--left-09 {
  padding-right: var(--x-size-base-09) !important;
}
.x-padding--top-10 {
  padding-top: var(--x-size-base-10) !important;
}
.x-padding--bottom-10 {
  padding-bottom: var(--x-size-base-10) !important;
}
[dir="ltr"] .x-padding--right-10 {
  padding-right: var(--x-size-base-10) !important;
}
[dir="rtl"] .x-padding--right-10 {
  padding-left: var(--x-size-base-10) !important;
}
[dir="ltr"] .x-padding--left-10 {
  padding-left: var(--x-size-base-10) !important;
}
[dir="rtl"] .x-padding--left-10 {
  padding-right: var(--x-size-base-10) !important;
}
.x-padding--top-11 {
  padding-top: var(--x-size-base-11) !important;
}
.x-padding--bottom-11 {
  padding-bottom: var(--x-size-base-11) !important;
}
[dir="ltr"] .x-padding--right-11 {
  padding-right: var(--x-size-base-11) !important;
}
[dir="rtl"] .x-padding--right-11 {
  padding-left: var(--x-size-base-11) !important;
}
[dir="ltr"] .x-padding--left-11 {
  padding-left: var(--x-size-base-11) !important;
}
[dir="rtl"] .x-padding--left-11 {
  padding-right: var(--x-size-base-11) !important;
}
.x-padding--top-12 {
  padding-top: var(--x-size-base-12) !important;
}
.x-padding--bottom-12 {
  padding-bottom: var(--x-size-base-12) !important;
}
[dir="ltr"] .x-padding--right-12 {
  padding-right: var(--x-size-base-12) !important;
}
[dir="rtl"] .x-padding--right-12 {
  padding-left: var(--x-size-base-12) !important;
}
[dir="ltr"] .x-padding--left-12 {
  padding-left: var(--x-size-base-12) !important;
}
[dir="rtl"] .x-padding--left-12 {
  padding-right: var(--x-size-base-12) !important;
}
.x-padding--top-13 {
  padding-top: var(--x-size-base-13) !important;
}
.x-padding--bottom-13 {
  padding-bottom: var(--x-size-base-13) !important;
}
[dir="ltr"] .x-padding--right-13 {
  padding-right: var(--x-size-base-13) !important;
}
[dir="rtl"] .x-padding--right-13 {
  padding-left: var(--x-size-base-13) !important;
}
[dir="ltr"] .x-padding--left-13 {
  padding-left: var(--x-size-base-13) !important;
}
[dir="rtl"] .x-padding--left-13 {
  padding-right: var(--x-size-base-13) !important;
}
.x-padding--top-14 {
  padding-top: var(--x-size-base-14) !important;
}
.x-padding--bottom-14 {
  padding-bottom: var(--x-size-base-14) !important;
}
[dir="ltr"] .x-padding--right-14 {
  padding-right: var(--x-size-base-14) !important;
}
[dir="rtl"] .x-padding--right-14 {
  padding-left: var(--x-size-base-14) !important;
}
[dir="ltr"] .x-padding--left-14 {
  padding-left: var(--x-size-base-14) !important;
}
[dir="rtl"] .x-padding--left-14 {
  padding-right: var(--x-size-base-14) !important;
}
.x-padding--top-15 {
  padding-top: var(--x-size-base-15) !important;
}
.x-padding--bottom-15 {
  padding-bottom: var(--x-size-base-15) !important;
}
[dir="ltr"] .x-padding--right-15 {
  padding-right: var(--x-size-base-15) !important;
}
[dir="rtl"] .x-padding--right-15 {
  padding-left: var(--x-size-base-15) !important;
}
[dir="ltr"] .x-padding--left-15 {
  padding-left: var(--x-size-base-15) !important;
}
[dir="rtl"] .x-padding--left-15 {
  padding-right: var(--x-size-base-15) !important;
}
.x-padding--top-16 {
  padding-top: var(--x-size-base-16) !important;
}
.x-padding--bottom-16 {
  padding-bottom: var(--x-size-base-16) !important;
}
[dir="ltr"] .x-padding--right-16 {
  padding-right: var(--x-size-base-16) !important;
}
[dir="rtl"] .x-padding--right-16 {
  padding-left: var(--x-size-base-16) !important;
}
[dir="ltr"] .x-padding--left-16 {
  padding-left: var(--x-size-base-16) !important;
}
[dir="rtl"] .x-padding--left-16 {
  padding-right: var(--x-size-base-16) !important;
}
.x-padding--top-17 {
  padding-top: var(--x-size-base-17) !important;
}
.x-padding--bottom-17 {
  padding-bottom: var(--x-size-base-17) !important;
}
[dir="ltr"] .x-padding--right-17 {
  padding-right: var(--x-size-base-17) !important;
}
[dir="rtl"] .x-padding--right-17 {
  padding-left: var(--x-size-base-17) !important;
}
[dir="ltr"] .x-padding--left-17 {
  padding-left: var(--x-size-base-17) !important;
}
[dir="rtl"] .x-padding--left-17 {
  padding-right: var(--x-size-base-17) !important;
}
.x-padding--top-18 {
  padding-top: var(--x-size-base-18) !important;
}
.x-padding--bottom-18 {
  padding-bottom: var(--x-size-base-18) !important;
}
[dir="ltr"] .x-padding--right-18 {
  padding-right: var(--x-size-base-18) !important;
}
[dir="rtl"] .x-padding--right-18 {
  padding-left: var(--x-size-base-18) !important;
}
[dir="ltr"] .x-padding--left-18 {
  padding-left: var(--x-size-base-18) !important;
}
[dir="rtl"] .x-padding--left-18 {
  padding-right: var(--x-size-base-18) !important;
}
.x-padding--top-19 {
  padding-top: var(--x-size-base-19) !important;
}
.x-padding--bottom-19 {
  padding-bottom: var(--x-size-base-19) !important;
}
[dir="ltr"] .x-padding--right-19 {
  padding-right: var(--x-size-base-19) !important;
}
[dir="rtl"] .x-padding--right-19 {
  padding-left: var(--x-size-base-19) !important;
}
[dir="ltr"] .x-padding--left-19 {
  padding-left: var(--x-size-base-19) !important;
}
[dir="rtl"] .x-padding--left-19 {
  padding-right: var(--x-size-base-19) !important;
}
.x-padding--top-20 {
  padding-top: var(--x-size-base-20) !important;
}
.x-padding--bottom-20 {
  padding-bottom: var(--x-size-base-20) !important;
}
[dir="ltr"] .x-padding--right-20 {
  padding-right: var(--x-size-base-20) !important;
}
[dir="rtl"] .x-padding--right-20 {
  padding-left: var(--x-size-base-20) !important;
}
[dir="ltr"] .x-padding--left-20 {
  padding-left: var(--x-size-base-20) !important;
}
[dir="rtl"] .x-padding--left-20 {
  padding-right: var(--x-size-base-20) !important;
}
.x-margin--auto {
  margin: auto !important;
}
.x-margin--00 {
  margin: 0 !important;
}
.x-margin--01 {
  margin: var(--x-size-base-01) !important;
}
.x-margin--02 {
  margin: var(--x-size-base-02) !important;
}
.x-margin--03 {
  margin: var(--x-size-base-03) !important;
}
.x-margin--04 {
  margin: var(--x-size-base-04) !important;
}
.x-margin--05 {
  margin: var(--x-size-base-05) !important;
}
.x-margin--06 {
  margin: var(--x-size-base-06) !important;
}
.x-margin--07 {
  margin: var(--x-size-base-07) !important;
}
.x-margin--08 {
  margin: var(--x-size-base-08) !important;
}
.x-margin--09 {
  margin: var(--x-size-base-09) !important;
}
.x-margin--10 {
  margin: var(--x-size-base-10) !important;
}
.x-margin--11 {
  margin: var(--x-size-base-11) !important;
}
.x-margin--12 {
  margin: var(--x-size-base-12) !important;
}
.x-margin--13 {
  margin: var(--x-size-base-13) !important;
}
.x-margin--14 {
  margin: var(--x-size-base-14) !important;
}
.x-margin--15 {
  margin: var(--x-size-base-15) !important;
}
.x-margin--16 {
  margin: var(--x-size-base-16) !important;
}
.x-margin--17 {
  margin: var(--x-size-base-17) !important;
}
.x-margin--18 {
  margin: var(--x-size-base-18) !important;
}
.x-margin--19 {
  margin: var(--x-size-base-19) !important;
}
.x-margin--20 {
  margin: var(--x-size-base-20) !important;
}
.x-margin--top-auto {
  margin-top: auto !important;
}
.x-margin--bottom-auto {
  margin-bottom: auto !important;
}
[dir="ltr"] .x-margin--right-auto {
  margin-right: auto !important;
}
[dir="rtl"] .x-margin--right-auto {
  margin-left: auto !important;
}
[dir="ltr"] .x-margin--left-auto {
  margin-left: auto !important;
}
[dir="rtl"] .x-margin--left-auto {
  margin-right: auto !important;
}
.x-margin--top-00 {
  margin-top: 0 !important;
}
.x-margin--bottom-00 {
  margin-bottom: 0 !important;
}
[dir="ltr"] .x-margin--right-00 {
  margin-right: 0 !important;
}
[dir="rtl"] .x-margin--right-00 {
  margin-left: 0 !important;
}
[dir="ltr"] .x-margin--left-00 {
  margin-left: 0 !important;
}
[dir="rtl"] .x-margin--left-00 {
  margin-right: 0 !important;
}
.x-margin--top-01 {
  margin-top: var(--x-size-base-01) !important;
}
.x-margin--bottom-01 {
  margin-bottom: var(--x-size-base-01) !important;
}
[dir="ltr"] .x-margin--right-01 {
  margin-right: var(--x-size-base-01) !important;
}
[dir="rtl"] .x-margin--right-01 {
  margin-left: var(--x-size-base-01) !important;
}
[dir="ltr"] .x-margin--left-01 {
  margin-left: var(--x-size-base-01) !important;
}
[dir="rtl"] .x-margin--left-01 {
  margin-right: var(--x-size-base-01) !important;
}
.x-margin--top-02 {
  margin-top: var(--x-size-base-02) !important;
}
.x-margin--bottom-02 {
  margin-bottom: var(--x-size-base-02) !important;
}
[dir="ltr"] .x-margin--right-02 {
  margin-right: var(--x-size-base-02) !important;
}
[dir="rtl"] .x-margin--right-02 {
  margin-left: var(--x-size-base-02) !important;
}
[dir="ltr"] .x-margin--left-02 {
  margin-left: var(--x-size-base-02) !important;
}
[dir="rtl"] .x-margin--left-02 {
  margin-right: var(--x-size-base-02) !important;
}
.x-margin--top-03 {
  margin-top: var(--x-size-base-03) !important;
}
.x-margin--bottom-03 {
  margin-bottom: var(--x-size-base-03) !important;
}
[dir="ltr"] .x-margin--right-03 {
  margin-right: var(--x-size-base-03) !important;
}
[dir="rtl"] .x-margin--right-03 {
  margin-left: var(--x-size-base-03) !important;
}
[dir="ltr"] .x-margin--left-03 {
  margin-left: var(--x-size-base-03) !important;
}
[dir="rtl"] .x-margin--left-03 {
  margin-right: var(--x-size-base-03) !important;
}
.x-margin--top-04 {
  margin-top: var(--x-size-base-04) !important;
}
.x-margin--bottom-04 {
  margin-bottom: var(--x-size-base-04) !important;
}
[dir="ltr"] .x-margin--right-04 {
  margin-right: var(--x-size-base-04) !important;
}
[dir="rtl"] .x-margin--right-04 {
  margin-left: var(--x-size-base-04) !important;
}
[dir="ltr"] .x-margin--left-04 {
  margin-left: var(--x-size-base-04) !important;
}
[dir="rtl"] .x-margin--left-04 {
  margin-right: var(--x-size-base-04) !important;
}
.x-margin--top-05 {
  margin-top: var(--x-size-base-05) !important;
}
.x-margin--bottom-05 {
  margin-bottom: var(--x-size-base-05) !important;
}
[dir="ltr"] .x-margin--right-05 {
  margin-right: var(--x-size-base-05) !important;
}
[dir="rtl"] .x-margin--right-05 {
  margin-left: var(--x-size-base-05) !important;
}
[dir="ltr"] .x-margin--left-05 {
  margin-left: var(--x-size-base-05) !important;
}
[dir="rtl"] .x-margin--left-05 {
  margin-right: var(--x-size-base-05) !important;
}
.x-margin--top-06 {
  margin-top: var(--x-size-base-06) !important;
}
.x-margin--bottom-06 {
  margin-bottom: var(--x-size-base-06) !important;
}
[dir="ltr"] .x-margin--right-06 {
  margin-right: var(--x-size-base-06) !important;
}
[dir="rtl"] .x-margin--right-06 {
  margin-left: var(--x-size-base-06) !important;
}
[dir="ltr"] .x-margin--left-06 {
  margin-left: var(--x-size-base-06) !important;
}
[dir="rtl"] .x-margin--left-06 {
  margin-right: var(--x-size-base-06) !important;
}
.x-margin--top-07 {
  margin-top: var(--x-size-base-07) !important;
}
.x-margin--bottom-07 {
  margin-bottom: var(--x-size-base-07) !important;
}
[dir="ltr"] .x-margin--right-07 {
  margin-right: var(--x-size-base-07) !important;
}
[dir="rtl"] .x-margin--right-07 {
  margin-left: var(--x-size-base-07) !important;
}
[dir="ltr"] .x-margin--left-07 {
  margin-left: var(--x-size-base-07) !important;
}
[dir="rtl"] .x-margin--left-07 {
  margin-right: var(--x-size-base-07) !important;
}
.x-margin--top-08 {
  margin-top: var(--x-size-base-08) !important;
}
.x-margin--bottom-08 {
  margin-bottom: var(--x-size-base-08) !important;
}
[dir="ltr"] .x-margin--right-08 {
  margin-right: var(--x-size-base-08) !important;
}
[dir="rtl"] .x-margin--right-08 {
  margin-left: var(--x-size-base-08) !important;
}
[dir="ltr"] .x-margin--left-08 {
  margin-left: var(--x-size-base-08) !important;
}
[dir="rtl"] .x-margin--left-08 {
  margin-right: var(--x-size-base-08) !important;
}
.x-margin--top-09 {
  margin-top: var(--x-size-base-09) !important;
}
.x-margin--bottom-09 {
  margin-bottom: var(--x-size-base-09) !important;
}
[dir="ltr"] .x-margin--right-09 {
  margin-right: var(--x-size-base-09) !important;
}
[dir="rtl"] .x-margin--right-09 {
  margin-left: var(--x-size-base-09) !important;
}
[dir="ltr"] .x-margin--left-09 {
  margin-left: var(--x-size-base-09) !important;
}
[dir="rtl"] .x-margin--left-09 {
  margin-right: var(--x-size-base-09) !important;
}
.x-margin--top-10 {
  margin-top: var(--x-size-base-10) !important;
}
.x-margin--bottom-10 {
  margin-bottom: var(--x-size-base-10) !important;
}
[dir="ltr"] .x-margin--right-10 {
  margin-right: var(--x-size-base-10) !important;
}
[dir="rtl"] .x-margin--right-10 {
  margin-left: var(--x-size-base-10) !important;
}
[dir="ltr"] .x-margin--left-10 {
  margin-left: var(--x-size-base-10) !important;
}
[dir="rtl"] .x-margin--left-10 {
  margin-right: var(--x-size-base-10) !important;
}
.x-margin--top-11 {
  margin-top: var(--x-size-base-11) !important;
}
.x-margin--bottom-11 {
  margin-bottom: var(--x-size-base-11) !important;
}
[dir="ltr"] .x-margin--right-11 {
  margin-right: var(--x-size-base-11) !important;
}
[dir="rtl"] .x-margin--right-11 {
  margin-left: var(--x-size-base-11) !important;
}
[dir="ltr"] .x-margin--left-11 {
  margin-left: var(--x-size-base-11) !important;
}
[dir="rtl"] .x-margin--left-11 {
  margin-right: var(--x-size-base-11) !important;
}
.x-margin--top-12 {
  margin-top: var(--x-size-base-12) !important;
}
.x-margin--bottom-12 {
  margin-bottom: var(--x-size-base-12) !important;
}
[dir="ltr"] .x-margin--right-12 {
  margin-right: var(--x-size-base-12) !important;
}
[dir="rtl"] .x-margin--right-12 {
  margin-left: var(--x-size-base-12) !important;
}
[dir="ltr"] .x-margin--left-12 {
  margin-left: var(--x-size-base-12) !important;
}
[dir="rtl"] .x-margin--left-12 {
  margin-right: var(--x-size-base-12) !important;
}
.x-margin--top-13 {
  margin-top: var(--x-size-base-13) !important;
}
.x-margin--bottom-13 {
  margin-bottom: var(--x-size-base-13) !important;
}
[dir="ltr"] .x-margin--right-13 {
  margin-right: var(--x-size-base-13) !important;
}
[dir="rtl"] .x-margin--right-13 {
  margin-left: var(--x-size-base-13) !important;
}
[dir="ltr"] .x-margin--left-13 {
  margin-left: var(--x-size-base-13) !important;
}
[dir="rtl"] .x-margin--left-13 {
  margin-right: var(--x-size-base-13) !important;
}
.x-margin--top-14 {
  margin-top: var(--x-size-base-14) !important;
}
.x-margin--bottom-14 {
  margin-bottom: var(--x-size-base-14) !important;
}
[dir="ltr"] .x-margin--right-14 {
  margin-right: var(--x-size-base-14) !important;
}
[dir="rtl"] .x-margin--right-14 {
  margin-left: var(--x-size-base-14) !important;
}
[dir="ltr"] .x-margin--left-14 {
  margin-left: var(--x-size-base-14) !important;
}
[dir="rtl"] .x-margin--left-14 {
  margin-right: var(--x-size-base-14) !important;
}
.x-margin--top-15 {
  margin-top: var(--x-size-base-15) !important;
}
.x-margin--bottom-15 {
  margin-bottom: var(--x-size-base-15) !important;
}
[dir="ltr"] .x-margin--right-15 {
  margin-right: var(--x-size-base-15) !important;
}
[dir="rtl"] .x-margin--right-15 {
  margin-left: var(--x-size-base-15) !important;
}
[dir="ltr"] .x-margin--left-15 {
  margin-left: var(--x-size-base-15) !important;
}
[dir="rtl"] .x-margin--left-15 {
  margin-right: var(--x-size-base-15) !important;
}
.x-margin--top-16 {
  margin-top: var(--x-size-base-16) !important;
}
.x-margin--bottom-16 {
  margin-bottom: var(--x-size-base-16) !important;
}
[dir="ltr"] .x-margin--right-16 {
  margin-right: var(--x-size-base-16) !important;
}
[dir="rtl"] .x-margin--right-16 {
  margin-left: var(--x-size-base-16) !important;
}
[dir="ltr"] .x-margin--left-16 {
  margin-left: var(--x-size-base-16) !important;
}
[dir="rtl"] .x-margin--left-16 {
  margin-right: var(--x-size-base-16) !important;
}
.x-margin--top-17 {
  margin-top: var(--x-size-base-17) !important;
}
.x-margin--bottom-17 {
  margin-bottom: var(--x-size-base-17) !important;
}
[dir="ltr"] .x-margin--right-17 {
  margin-right: var(--x-size-base-17) !important;
}
[dir="rtl"] .x-margin--right-17 {
  margin-left: var(--x-size-base-17) !important;
}
[dir="ltr"] .x-margin--left-17 {
  margin-left: var(--x-size-base-17) !important;
}
[dir="rtl"] .x-margin--left-17 {
  margin-right: var(--x-size-base-17) !important;
}
.x-margin--top-18 {
  margin-top: var(--x-size-base-18) !important;
}
.x-margin--bottom-18 {
  margin-bottom: var(--x-size-base-18) !important;
}
[dir="ltr"] .x-margin--right-18 {
  margin-right: var(--x-size-base-18) !important;
}
[dir="rtl"] .x-margin--right-18 {
  margin-left: var(--x-size-base-18) !important;
}
[dir="ltr"] .x-margin--left-18 {
  margin-left: var(--x-size-base-18) !important;
}
[dir="rtl"] .x-margin--left-18 {
  margin-right: var(--x-size-base-18) !important;
}
.x-margin--top-19 {
  margin-top: var(--x-size-base-19) !important;
}
.x-margin--bottom-19 {
  margin-bottom: var(--x-size-base-19) !important;
}
[dir="ltr"] .x-margin--right-19 {
  margin-right: var(--x-size-base-19) !important;
}
[dir="rtl"] .x-margin--right-19 {
  margin-left: var(--x-size-base-19) !important;
}
[dir="ltr"] .x-margin--left-19 {
  margin-left: var(--x-size-base-19) !important;
}
[dir="rtl"] .x-margin--left-19 {
  margin-right: var(--x-size-base-19) !important;
}
.x-margin--top-20 {
  margin-top: var(--x-size-base-20) !important;
}
.x-margin--bottom-20 {
  margin-bottom: var(--x-size-base-20) !important;
}
[dir="ltr"] .x-margin--right-20 {
  margin-right: var(--x-size-base-20) !important;
}
[dir="rtl"] .x-margin--right-20 {
  margin-left: var(--x-size-base-20) !important;
}
[dir="ltr"] .x-margin--left-20 {
  margin-left: var(--x-size-base-20) !important;
}
[dir="rtl"] .x-margin--left-20 {
  margin-right: var(--x-size-base-20) !important;
}
.x-line-height--none {
  line-height: 1 !important;
}

.x-line-height--tight {
  line-height: 1.25 !important;
}

.x-line-height--snug {
  line-height: 1.375 !important;
}

.x-line-height--normal {
  line-height: 1.5 !important;
}

.x-line-height--relaxed {
  line-height: 1.625 !important;
}

.x-line-height--loose {
  line-height: 2 !important;
}
.x-line-clamp--2 {
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.x-line-clamp--3 {
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
}

.x-line-clamp--4 {
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
}

.x-line-clamp--5 {
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5 !important;
}

.x-line-clamp--6 {
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 6 !important;
}
.x-font-size--01 {
  font-size: var(--x-size-base-01) !important;
  line-height: 1.5;
}
.x-font-size--02 {
  font-size: var(--x-size-base-02) !important;
  line-height: 1.5;
}
.x-font-size--03 {
  font-size: var(--x-size-base-03) !important;
  line-height: 1.5;
}
.x-font-size--04 {
  font-size: var(--x-size-base-04) !important;
  line-height: 1.5;
}
.x-font-size--05 {
  font-size: var(--x-size-base-05) !important;
  line-height: 1.5;
}
.x-font-size--06 {
  font-size: var(--x-size-base-06) !important;
  line-height: 1.5;
}
.x-font-size--07 {
  font-size: var(--x-size-base-07) !important;
  line-height: 1.5;
}
.x-font-size--08 {
  font-size: var(--x-size-base-08) !important;
  line-height: 1.5;
}
.x-font-size--09 {
  font-size: var(--x-size-base-09) !important;
  line-height: 1.5;
}
.x-font-size--10 {
  font-size: var(--x-size-base-10) !important;
  line-height: 1.5;
}
.x-font-size--11 {
  font-size: var(--x-size-base-11) !important;
  line-height: 1.5;
}
.x-font-size--12 {
  font-size: var(--x-size-base-12) !important;
  line-height: 1.5;
}
.x-font-size--13 {
  font-size: var(--x-size-base-13) !important;
  line-height: 1.5;
}
.x-font-size--14 {
  font-size: var(--x-size-base-14) !important;
  line-height: 1.5;
}
.x-font-size--15 {
  font-size: var(--x-size-base-15) !important;
  line-height: 1.5;
}
.x-font-size--16 {
  font-size: var(--x-size-base-16) !important;
  line-height: 1.5;
}
.x-font-size--17 {
  font-size: var(--x-size-base-17) !important;
  line-height: 1.5;
}
.x-font-size--18 {
  font-size: var(--x-size-base-18) !important;
  line-height: 1.5;
}
.x-font-size--19 {
  font-size: var(--x-size-base-19) !important;
  line-height: 1.5;
}
.x-font-size--20 {
  font-size: var(--x-size-base-20) !important;
  line-height: 1.5;
}
.x-font-weight--light {
  font-weight: var(--x-number-font-weight-base-light) !important;
}
.x-font-weight--regular {
  font-weight: var(--x-number-font-weight-base-regular) !important;
}
.x-font-weight--bold {
  font-weight: var(--x-number-font-weight-base-bold) !important;
}
.x-font-color--lead {
  color: var(--x-color-base-lead) !important;
}

.x-font-color--auxiliary {
  color: var(--x-color-base-auxiliary) !important;
}

.x-font-color--neutral-10 {
  color: var(--x-color-base-neutral-10) !important;
}

.x-font-color--neutral-35 {
  color: var(--x-color-base-neutral-35) !important;
}

.x-font-color--neutral-70 {
  color: var(--x-color-base-neutral-70) !important;
}

.x-font-color--neutral-95 {
  color: var(--x-color-base-neutral-95) !important;
}

.x-font-color--neutral-100 {
  color: var(--x-color-base-neutral-100) !important;
}

.x-font-color--accent {
  color: var(--x-color-base-accent) !important;
}

.x-font-color--enable {
  color: var(--x-color-base-enable) !important;
}

.x-font-color--disable {
  color: var(--x-color-base-disable) !important;
}

.x-font-color--transparent {
  color: var(--x-color-base-transparent) !important;
}
.x-flex-1 {
  flex: 1 1 0% !important;
}

.x-flex-auto {
  flex: 1 1 auto !important;
}

.x-flex-initial {
  flex: 0 1 auto !important;
}

.x-flex-no-shrink {
  flex: 1 0 auto !important;
}

.x-flex-none {
  flex: none !important;
}

.x-self-auto {
  align-self: auto !important;
}

.x-self-start {
  align-self: flex-start !important;
}

.x-self-end {
  align-self: flex-end !important;
}

.x-self-center {
  align-self: center !important;
}

.x-self-stretch {
  align-self: stretch !important;
}

.x-self-baseline {
  align-self: baseline !important;
}
.x-fill--lead {
  fill: var(--x-color-base-lead) !important;
}

.x-fill--auxiliary {
  fill: var(--x-color-base-auxiliary) !important;
}

.x-fill--neutral-10 {
  fill: var(--x-color-base-neutral-10) !important;
}

.x-fill--neutral-35 {
  fill: var(--x-color-base-neutral-35) !important;
}

.x-fill--neutral-70 {
  fill: var(--x-color-base-neutral-70) !important;
}

.x-fill--neutral-95 {
  fill: var(--x-color-base-neutral-95) !important;
}

.x-fill--neutral-100 {
  fill: var(--x-color-base-neutral-100) !important;
}

.x-fill--accent {
  fill: var(--x-color-base-accent) !important;
}

.x-fill--enable {
  fill: var(--x-color-base-enable) !important;
}

.x-fill--disable {
  fill: var(--x-color-base-disable) !important;
}

.x-fill--transparent {
  fill: var(--x-color-base-transparent) !important;
}
*[class*=x-border-width--] {
  border-width: 0;
}

.x-border-width--00 {
  border-width: 0px !important;
  border-style: solid !important;
}
.x-border-width--top-00 {
  border-top-width: 0px !important;
  border-style: solid !important;
}
.x-border-width--bottom-00 {
  border-bottom-width: 0px !important;
  border-style: solid !important;
}
[dir="ltr"] .x-border-width--right-00 {
  border-right-width: 0px !important;
}
[dir="rtl"] .x-border-width--right-00 {
  border-left-width: 0px !important;
}
.x-border-width--right-00 {
  border-style: solid !important;
}
[dir="ltr"] .x-border-width--left-00 {
  border-left-width: 0px !important;
}
[dir="rtl"] .x-border-width--left-00 {
  border-right-width: 0px !important;
}
.x-border-width--left-00 {
  border-style: solid !important;
}
.x-border-width--01 {
  border-width: 1px !important;
  border-style: solid !important;
}
.x-border-width--top-01 {
  border-top-width: 1px !important;
  border-style: solid !important;
}
.x-border-width--bottom-01 {
  border-bottom-width: 1px !important;
  border-style: solid !important;
}
[dir="ltr"] .x-border-width--right-01 {
  border-right-width: 1px !important;
}
[dir="rtl"] .x-border-width--right-01 {
  border-left-width: 1px !important;
}
.x-border-width--right-01 {
  border-style: solid !important;
}
[dir="ltr"] .x-border-width--left-01 {
  border-left-width: 1px !important;
}
[dir="rtl"] .x-border-width--left-01 {
  border-right-width: 1px !important;
}
.x-border-width--left-01 {
  border-style: solid !important;
}
.x-border-width--02 {
  border-width: 2px !important;
  border-style: solid !important;
}
.x-border-width--top-02 {
  border-top-width: 2px !important;
  border-style: solid !important;
}
.x-border-width--bottom-02 {
  border-bottom-width: 2px !important;
  border-style: solid !important;
}
[dir="ltr"] .x-border-width--right-02 {
  border-right-width: 2px !important;
}
[dir="rtl"] .x-border-width--right-02 {
  border-left-width: 2px !important;
}
.x-border-width--right-02 {
  border-style: solid !important;
}
[dir="ltr"] .x-border-width--left-02 {
  border-left-width: 2px !important;
}
[dir="rtl"] .x-border-width--left-02 {
  border-right-width: 2px !important;
}
.x-border-width--left-02 {
  border-style: solid !important;
}
.x-border-width--03 {
  border-width: 3px !important;
  border-style: solid !important;
}
.x-border-width--top-03 {
  border-top-width: 3px !important;
  border-style: solid !important;
}
.x-border-width--bottom-03 {
  border-bottom-width: 3px !important;
  border-style: solid !important;
}
[dir="ltr"] .x-border-width--right-03 {
  border-right-width: 3px !important;
}
[dir="rtl"] .x-border-width--right-03 {
  border-left-width: 3px !important;
}
.x-border-width--right-03 {
  border-style: solid !important;
}
[dir="ltr"] .x-border-width--left-03 {
  border-left-width: 3px !important;
}
[dir="rtl"] .x-border-width--left-03 {
  border-right-width: 3px !important;
}
.x-border-width--left-03 {
  border-style: solid !important;
}
.x-border-width--04 {
  border-width: 4px !important;
  border-style: solid !important;
}
.x-border-width--top-04 {
  border-top-width: 4px !important;
  border-style: solid !important;
}
.x-border-width--bottom-04 {
  border-bottom-width: 4px !important;
  border-style: solid !important;
}
[dir="ltr"] .x-border-width--right-04 {
  border-right-width: 4px !important;
}
[dir="rtl"] .x-border-width--right-04 {
  border-left-width: 4px !important;
}
.x-border-width--right-04 {
  border-style: solid !important;
}
[dir="ltr"] .x-border-width--left-04 {
  border-left-width: 4px !important;
}
[dir="rtl"] .x-border-width--left-04 {
  border-right-width: 4px !important;
}
.x-border-width--left-04 {
  border-style: solid !important;
}
.x-border-width--05 {
  border-width: 5px !important;
  border-style: solid !important;
}
.x-border-width--top-05 {
  border-top-width: 5px !important;
  border-style: solid !important;
}
.x-border-width--bottom-05 {
  border-bottom-width: 5px !important;
  border-style: solid !important;
}
[dir="ltr"] .x-border-width--right-05 {
  border-right-width: 5px !important;
}
[dir="rtl"] .x-border-width--right-05 {
  border-left-width: 5px !important;
}
.x-border-width--right-05 {
  border-style: solid !important;
}
[dir="ltr"] .x-border-width--left-05 {
  border-left-width: 5px !important;
}
[dir="rtl"] .x-border-width--left-05 {
  border-right-width: 5px !important;
}
.x-border-width--left-05 {
  border-style: solid !important;
}
.x-border-width--06 {
  border-width: 6px !important;
  border-style: solid !important;
}
.x-border-width--top-06 {
  border-top-width: 6px !important;
  border-style: solid !important;
}
.x-border-width--bottom-06 {
  border-bottom-width: 6px !important;
  border-style: solid !important;
}
[dir="ltr"] .x-border-width--right-06 {
  border-right-width: 6px !important;
}
[dir="rtl"] .x-border-width--right-06 {
  border-left-width: 6px !important;
}
.x-border-width--right-06 {
  border-style: solid !important;
}
[dir="ltr"] .x-border-width--left-06 {
  border-left-width: 6px !important;
}
[dir="rtl"] .x-border-width--left-06 {
  border-right-width: 6px !important;
}
.x-border-width--left-06 {
  border-style: solid !important;
}
.x-border-width--07 {
  border-width: 7px !important;
  border-style: solid !important;
}
.x-border-width--top-07 {
  border-top-width: 7px !important;
  border-style: solid !important;
}
.x-border-width--bottom-07 {
  border-bottom-width: 7px !important;
  border-style: solid !important;
}
[dir="ltr"] .x-border-width--right-07 {
  border-right-width: 7px !important;
}
[dir="rtl"] .x-border-width--right-07 {
  border-left-width: 7px !important;
}
.x-border-width--right-07 {
  border-style: solid !important;
}
[dir="ltr"] .x-border-width--left-07 {
  border-left-width: 7px !important;
}
[dir="rtl"] .x-border-width--left-07 {
  border-right-width: 7px !important;
}
.x-border-width--left-07 {
  border-style: solid !important;
}
.x-border-width--08 {
  border-width: 8px !important;
  border-style: solid !important;
}
.x-border-width--top-08 {
  border-top-width: 8px !important;
  border-style: solid !important;
}
.x-border-width--bottom-08 {
  border-bottom-width: 8px !important;
  border-style: solid !important;
}
[dir="ltr"] .x-border-width--right-08 {
  border-right-width: 8px !important;
}
[dir="rtl"] .x-border-width--right-08 {
  border-left-width: 8px !important;
}
.x-border-width--right-08 {
  border-style: solid !important;
}
[dir="ltr"] .x-border-width--left-08 {
  border-left-width: 8px !important;
}
[dir="rtl"] .x-border-width--left-08 {
  border-right-width: 8px !important;
}
.x-border-width--left-08 {
  border-style: solid !important;
}
.x-border-width--09 {
  border-width: 9px !important;
  border-style: solid !important;
}
.x-border-width--top-09 {
  border-top-width: 9px !important;
  border-style: solid !important;
}
.x-border-width--bottom-09 {
  border-bottom-width: 9px !important;
  border-style: solid !important;
}
[dir="ltr"] .x-border-width--right-09 {
  border-right-width: 9px !important;
}
[dir="rtl"] .x-border-width--right-09 {
  border-left-width: 9px !important;
}
.x-border-width--right-09 {
  border-style: solid !important;
}
[dir="ltr"] .x-border-width--left-09 {
  border-left-width: 9px !important;
}
[dir="rtl"] .x-border-width--left-09 {
  border-right-width: 9px !important;
}
.x-border-width--left-09 {
  border-style: solid !important;
}
.x-border-width--10 {
  border-width: 10px !important;
  border-style: solid !important;
}
.x-border-width--top-10 {
  border-top-width: 10px !important;
  border-style: solid !important;
}
.x-border-width--bottom-10 {
  border-bottom-width: 10px !important;
  border-style: solid !important;
}
[dir="ltr"] .x-border-width--right-10 {
  border-right-width: 10px !important;
}
[dir="rtl"] .x-border-width--right-10 {
  border-left-width: 10px !important;
}
.x-border-width--right-10 {
  border-style: solid !important;
}
[dir="ltr"] .x-border-width--left-10 {
  border-left-width: 10px !important;
}
[dir="rtl"] .x-border-width--left-10 {
  border-right-width: 10px !important;
}
.x-border-width--left-10 {
  border-style: solid !important;
}
/* Material Elevations extracted from:
    https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
*/
:root {
  /* Shadow none */
  --x-string-box-shadow-00: none;
  /* Shadow 1dp */
  --x-string-box-shadow-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
    0 1px 3px 0 rgba(0, 0, 0, 0.2);
  /* Shadow 2dp */
  --x-string-box-shadow-02: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
    0 1px 5px 0 rgba(0, 0, 0, 0.2);
  /* Shadow 3dp */
  --x-string-box-shadow-03: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12),
    0 1px 8px 0 rgba(0, 0, 0, 0.2);
  /* Shadow 4dp */
  --x-string-box-shadow-04: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
    0 2px 4px -1px rgba(0, 0, 0, 0.2);
  /* Shadow 6dp */
  --x-string-box-shadow-05: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
    0 3px 5px -1px rgba(0, 0, 0, 0.2);
  /* Shadow 8dp */
  --x-string-box-shadow-06: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
    0 5px 5px -3px rgba(0, 0, 0, 0.2);
  /* Shadow 9dp */
  --x-string-box-shadow-07: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
    0 5px 6px -3px rgba(0, 0, 0, 0.2);
  /* Shadow 12dp */
  --x-string-box-shadow-08: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
    0 7px 8px -4px rgba(0, 0, 0, 0.2);
  /* Shadow 16dp */
  --x-string-box-shadow-09: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
    0 8px 10px -5px rgba(0, 0, 0, 0.2);
  /* Shadow 24dp */
  --x-string-box-shadow-10: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
    0 11px 15px -7px rgba(0, 0, 0, 0.2);
  /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
  /* Shadow 1dp */
  --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
    0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
  /* Shadow 2dp */
  --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
  /* Shadow 3dp */
  --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
    0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
  /* Shadow 4dp */
  --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
    0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
  /* Shadow 6dp */
  --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
    0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
  /* Shadow 8dp */
  --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
    0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
  /* Shadow 9dp */
  --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
    0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
  /* Shadow 12dp */
  --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
    0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
  /* Shadow 16dp */
  --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
    0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
  /* Shadow 24dp */
  --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
    0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
}

.x-shadow--none {
  box-shadow: none !important;
}

.x-shadow--01 {
  box-shadow: var(--x-string-box-shadow-01) !important;
}
.x-shadow--bottom-01 {
  box-shadow: var(--x-string-box-shadow-bottom-01) !important;
}
.x-shadow--02 {
  box-shadow: var(--x-string-box-shadow-02) !important;
}
.x-shadow--bottom-02 {
  box-shadow: var(--x-string-box-shadow-bottom-02) !important;
}
.x-shadow--03 {
  box-shadow: var(--x-string-box-shadow-03) !important;
}
.x-shadow--bottom-03 {
  box-shadow: var(--x-string-box-shadow-bottom-03) !important;
}
.x-shadow--04 {
  box-shadow: var(--x-string-box-shadow-04) !important;
}
.x-shadow--bottom-04 {
  box-shadow: var(--x-string-box-shadow-bottom-04) !important;
}
.x-shadow--05 {
  box-shadow: var(--x-string-box-shadow-05) !important;
}
.x-shadow--bottom-05 {
  box-shadow: var(--x-string-box-shadow-bottom-05) !important;
}
.x-shadow--06 {
  box-shadow: var(--x-string-box-shadow-06) !important;
}
.x-shadow--bottom-06 {
  box-shadow: var(--x-string-box-shadow-bottom-06) !important;
}
.x-shadow--07 {
  box-shadow: var(--x-string-box-shadow-07) !important;
}
.x-shadow--bottom-07 {
  box-shadow: var(--x-string-box-shadow-bottom-07) !important;
}
.x-shadow--08 {
  box-shadow: var(--x-string-box-shadow-08) !important;
}
.x-shadow--bottom-08 {
  box-shadow: var(--x-string-box-shadow-bottom-08) !important;
}
.x-shadow--09 {
  box-shadow: var(--x-string-box-shadow-09) !important;
}
.x-shadow--bottom-09 {
  box-shadow: var(--x-string-box-shadow-bottom-09) !important;
}
.x-shadow--10 {
  box-shadow: var(--x-string-box-shadow-10) !important;
}
.x-shadow--bottom-10 {
  box-shadow: var(--x-string-box-shadow-bottom-10) !important;
}
/* Material Elevations extracted from:
    https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
*/
:root {
  /* Shadow none */
  --x-string-box-shadow-00: none;
  /* Shadow 1dp */
  --x-string-box-shadow-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
    0 1px 3px 0 rgba(0, 0, 0, 0.2);
  /* Shadow 2dp */
  --x-string-box-shadow-02: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
    0 1px 5px 0 rgba(0, 0, 0, 0.2);
  /* Shadow 3dp */
  --x-string-box-shadow-03: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12),
    0 1px 8px 0 rgba(0, 0, 0, 0.2);
  /* Shadow 4dp */
  --x-string-box-shadow-04: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
    0 2px 4px -1px rgba(0, 0, 0, 0.2);
  /* Shadow 6dp */
  --x-string-box-shadow-05: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
    0 3px 5px -1px rgba(0, 0, 0, 0.2);
  /* Shadow 8dp */
  --x-string-box-shadow-06: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
    0 5px 5px -3px rgba(0, 0, 0, 0.2);
  /* Shadow 9dp */
  --x-string-box-shadow-07: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
    0 5px 6px -3px rgba(0, 0, 0, 0.2);
  /* Shadow 12dp */
  --x-string-box-shadow-08: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
    0 7px 8px -4px rgba(0, 0, 0, 0.2);
  /* Shadow 16dp */
  --x-string-box-shadow-09: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
    0 8px 10px -5px rgba(0, 0, 0, 0.2);
  /* Shadow 24dp */
  --x-string-box-shadow-10: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
    0 11px 15px -7px rgba(0, 0, 0, 0.2);
  /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
  /* Shadow 1dp */
  --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
    0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
  /* Shadow 2dp */
  --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
  /* Shadow 3dp */
  --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
    0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
  /* Shadow 4dp */
  --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
    0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
  /* Shadow 6dp */
  --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
    0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
  /* Shadow 8dp */
  --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
    0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
  /* Shadow 9dp */
  --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
    0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
  /* Shadow 12dp */
  --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
    0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
  /* Shadow 16dp */
  --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
    0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
  /* Shadow 24dp */
  --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
    0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
}
.x-border-color--lead {
  border-color: var(--x-color-base-lead) !important;
}

.x-border-color--auxiliary {
  border-color: var(--x-color-base-auxiliary) !important;
}

.x-border-color--neutral-10 {
  border-color: var(--x-color-base-neutral-10) !important;
}

.x-border-color--neutral-35 {
  border-color: var(--x-color-base-neutral-35) !important;
}

.x-border-color--neutral-70 {
  border-color: var(--x-color-base-neutral-70) !important;
}

.x-border-color--neutral-95 {
  border-color: var(--x-color-base-neutral-95) !important;
}

.x-border-color--neutral-100 {
  border-color: var(--x-color-base-neutral-100) !important;
}

.x-border-color--accent {
  border-color: var(--x-color-base-accent) !important;
}

.x-border-color--enable {
  border-color: var(--x-color-base-enable) !important;
}

.x-border-color--disable {
  border-color: var(--x-color-base-disable) !important;
}

.x-border-color--transparent {
  border-color: var(--x-color-base-transparent) !important;
}
.x-border-radius--00 {
  border-radius: 0 !important;
}

.x-border-radius--pill {
  border-radius: 99999px !important;
}

.x-border-radius--01 {
  border-radius: var(--x-size-base-01) !important;
}
[dir="ltr"] .x-border-radius--top-01 {
  border-top-left-radius: var(--x-size-base-01) !important;
}
[dir="rtl"] .x-border-radius--top-01 {
  border-top-right-radius: var(--x-size-base-01) !important;
}
[dir="ltr"] .x-border-radius--top-01 {
  border-top-right-radius: var(--x-size-base-01) !important;
}
[dir="rtl"] .x-border-radius--top-01 {
  border-top-left-radius: var(--x-size-base-01) !important;
}
[dir="ltr"] .x-border-radius--bottom-01 {
  border-bottom-left-radius: var(--x-size-base-01) !important;
}
[dir="rtl"] .x-border-radius--bottom-01 {
  border-bottom-right-radius: var(--x-size-base-01) !important;
}
[dir="ltr"] .x-border-radius--bottom-01 {
  border-bottom-right-radius: var(--x-size-base-01) !important;
}
[dir="rtl"] .x-border-radius--bottom-01 {
  border-bottom-left-radius: var(--x-size-base-01) !important;
}
[dir="ltr"] .x-border-radius--right-01 {
  border-top-right-radius: var(--x-size-base-01) !important;
}
[dir="rtl"] .x-border-radius--right-01 {
  border-top-left-radius: var(--x-size-base-01) !important;
}
[dir="ltr"] .x-border-radius--right-01 {
  border-bottom-right-radius: var(--x-size-base-01) !important;
}
[dir="rtl"] .x-border-radius--right-01 {
  border-bottom-left-radius: var(--x-size-base-01) !important;
}
[dir="ltr"] .x-border-radius--left-01 {
  border-top-left-radius: var(--x-size-base-01) !important;
}
[dir="rtl"] .x-border-radius--left-01 {
  border-top-right-radius: var(--x-size-base-01) !important;
}
[dir="ltr"] .x-border-radius--left-01 {
  border-bottom-left-radius: var(--x-size-base-01) !important;
}
[dir="rtl"] .x-border-radius--left-01 {
  border-bottom-right-radius: var(--x-size-base-01) !important;
}
[dir="ltr"] .x-border-radius--top-left-01 {
  border-top-left-radius: var(--x-size-base-01) !important;
}
[dir="rtl"] .x-border-radius--top-left-01 {
  border-top-right-radius: var(--x-size-base-01) !important;
}
[dir="ltr"] .x-border-radius--top-right-01 {
  border-top-right-radius: var(--x-size-base-01) !important;
}
[dir="rtl"] .x-border-radius--top-right-01 {
  border-top-left-radius: var(--x-size-base-01) !important;
}
[dir="ltr"] .x-border-radius--bottom-left-01 {
  border-bottom-left-radius: var(--x-size-base-01) !important;
}
[dir="rtl"] .x-border-radius--bottom