/* Text colors
----------------------------------------------------------------------------------------------------------------------*/
.signal {
  color: var(--color-signal);
}

.strong {
  color: var(--color-strong);
}

.strong-solid {
  color: var(--color-strong-solid);
}

.muted {
  color: var(--color-muted);
}

.muted-solid {
  color: var(--color-muted-solid);
}

.weak {
  color: var(--color-weak);
}

.weak-solid {
  color: var(--color-weak-solid);
}

.faint {
  color: var(--color-faint);
}

.faint-solid {
  color: var(--color-faint-solid);
}

.white {
  color: var(--color-white);
}

.red {
  color: var(--color-red);
}

.green {
  color: var(--color-green);
}

.yellow {
  color: var(--color-yellow);
}

.orange {
  color: var(--color-orange);
}

.blue {
  color: var(--color-blue);
}

.violet {
  color: var(--color-violet);
}

a.signal:hover {
  color: var(--color-signal-hover);
}

a.strong:hover {
  color: var(--color-strong-hover);
}

a.muted:hover {
  color: var(--color-muted-hover);
}

a.weak:hover {
  color: var(--color-weak-hover);
}

a.faint:hover {
  color: var(--color-faint-hover);
}

a.white:hover {
  color: var(--color-white-hover);
}

a.red:hover {
  color: var(--color-red-hover);
}

a.green:hover {
  color: var(--color-green-hover);
}

a.yellow:hover {
  color: var(--color-yellow-hover);
}

a.orange:hover {
  color: var(--color-orange-hover);
}

a.blue:hover {
  color: var(--color-blue-hover);
}

a.violet:hover {
  color: var(--color-violet-hover);
}

.signal-on-hover:hover {
  color: var(--color-signal) !important;
}

.strong-on-hover:hover {
  color: var(--color-strong) !important;
}

.muted-on-hover:hover {
  color: var(--color-muted) !important;
}

.weak-on-hover:hover {
  color: var(--color-weak) !important;
}

.faint-on-hover:hover {
  color: var(--color-faint) !important;
}

.white-on-hover:hover {
  color: var(--color-white) !important;
}

.red-on-hover:hover {
  color: var(--color-red) !important;
}

.green-on-hover:hover {
  color: var(--color-green) !important;
}

.yellow-on-hover:hover {
  color: var(--color-yellow) !important;
}

.orange-on-hover:hover {
  color: var(--color-orange) !important;
}

.blue-on-hover:hover {
  color: var(--color-blue) !important;
}

.violet-on-hover:hover {
  color: var(--color-violet) !important;
}

.signal-bg {
  background-color: var(--color-signal);
}

.strong-bg {
  background-color: var(--color-strong);
}

.strong-bg-solid {
  background-color: var(--color-strong-solid);
}

.muted-bg {
  background-color: var(--color-muted);
}

.muted-bg-solid {
  background-color: var(--color-muted-solid);
}

.weak-bg {
  background-color: var(--color-weak);
}

.weak-bg-solid {
  background-color: var(--color-weak-solid);
}

.faint-bg {
  background-color: var(--color-faint);
}

.faint-bg-solid {
  background-color: var(--color-faint-solid);
}

.white-bg {
  background-color: var(--color-white);
}

.red-bg {
  background-color: var(--color-red);
}

.green-bg {
  background-color: var(--color-green);
}

.yellow-bg {
  background-color: var(--color-yellow);
}

.orange-bg {
  background-color: var(--color-orange);
}

.blue-bg {
  background-color: var(--color-blue);
}

.violet-bg {
  background-color: var(--color-violet);
}

.signal-bg-on-hover:hover {
  background-color: var(--color-signal) !important;
}

.strong-bg-on-hover:hover {
  background-color: var(--color-strong) !important;
}

.muted-bg-on-hover:hover {
  background-color: var(--color-muted) !important;
}

.weak-bg-on-hover:hover {
  background-color: var(--color-weak) !important;
}

.faint-bg-on-hover:hover {
  background-color: var(--color-faint) !important;
}

.white-bg-on-hover:hover {
  background-color: var(--color-white) !important;
}

.red-bg-on-hover:hover {
  background-color: var(--color-red) !important;
}

.green-bg-on-hover:hover {
  background-color: var(--color-green) !important;
}

.yellow-bg-on-hover:hover {
  background-color: var(--color-yellow) !important;
}

.orange-bg-on-hover:hover {
  background-color: var(--color-orange) !important;
}

.blue-bg-on-hover:hover {
  background-color: var(--color-blue) !important;
}

.violet-bg-on-hover:hover {
  background-color: var(--color-violet) !important;
}

.size-4xl {
  font-size: var(--font-size-4xl);
}

.size-3xl {
  font-size: var(--font-size-3xl);
}

.size-2xl {
  font-size: var(--font-size-2xl);
}

.size-xl {
  font-size: var(--font-size-xl);
}

.size-l {
  font-size: var(--font-size-l);
}

.size-m {
  font-size: var(--font-size-m);
}

.size-s {
  font-size: var(--font-size-s);
}

.size-xs {
  font-size: var(--font-size-xs);
}

.line-height-s {
  line-height: var(--line-height-s);
}

.line-height-m {
  line-height: var(--line-height-m);
}

.line-height-l {
  line-height: var(--line-height-l);
}

.line-height-xl {
  line-height: var(--line-height-xl);
}

.line-height-none {
  line-height: 1;
}

/* Text style
----------------------------------------------------------------------------------------------------------------------*/
.bold {
  font-weight: var(--bold);
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

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

.italic {
  font-style: italic;
}

.underline {
  text-decoration: underline;
}

.regular {
  font-weight: normal;
  font-style: normal;
}

/* Letter spacing
----------------------------------------------------------------------------------------------------------------------*/
.spacing-s {
  letter-spacing: var(--letter-spacing-s);
}

.spacing-m {
  letter-spacing: var(--letter-spacing-m);
}

.spacing-l {
  letter-spacing: var(--letter-spacing-l);
}

.spacing-xl {
  letter-spacing: var(--letter-spacing-xl);
}

.spacing-none {
  letter-spacing: 0;
}

/* Display
----------------------------------------------------------------------------------------------------------------------*/
.block {
  display: block !important;
}

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

.flex {
  display: flex !important;
}

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

.hide,
.hidden,
[hidden] {
  display: none !important;
}

/* Positioning
----------------------------------------------------------------------------------------------------------------------*/
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
  transform: translate3d(0,0,0);
}

.fixed.top,
.absolute.top {
  top: 0;
}

.fixed.right,
.absolute.right {
  right: 0;
}

.fixed.bottom,
.absolute.bottom {
  bottom: 0;
}

.fixed.left,
.absolute.left {
  left: 0;
}

.no-overflow {
  overflow: hidden;
}

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

.no-overflow-y {
  overflow-y: hidden;
}

/* Text alignment
----------------------------------------------------------------------------------------------------------------------*/
.center {
  text-align: center;
}

.align-right {
  text-align: right;
}

.align-left {
  text-align: left;
}

/* Floats
----------------------------------------------------------------------------------------------------------------------*/
.float-left {
  float: left;
}

.float-right {
  float: right;
}

.float-none {
  float: none;
}

.clear {
  clear: both;
}

/* Vertical text alignment
----------------------------------------------------------------------------------------------------------------------*/
.va-top {
  vertical-align: top;
}

.va-bottom {
  vertical-align: bottom;
}

.va-text-top {
  vertical-align: text-top;
}

.va-text-bottom {
  vertical-align: text-bottom;
}

.va-middle {
  vertical-align: middle;
}

.va-baseline {
  vertical-align: baseline;
}

.va-sub {
  vertical-align: sub;
}

.va-super {
  vertical-align: super;
}

/* Block text
----------------------------------------------------------------------------------------------------------------------*/
.nowrap {
  white-space: nowrap;
}

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

/* Block alignment
----------------------------------------------------------------------------------------------------------------------*/
.centered {
  margin-left: auto;
  margin-right: auto;
}

.flex {
  display: flex;
}

.align-v,
.align-h,
.align-vh,
.space-evenly,
.space-around,
.space-between,
.flex-start,
.flex-end,
.column-reverse,
.row-reverse,
.wrap {
  display: flex;
}

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

.align-v,
.align-vh {
  align-items: center;
}

.align-h,
.align-vh {
  justify-content: center;
}

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

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

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

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

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

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

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

.wrap {
  flex-wrap: wrap;
}

/* Container
----------------------------------------------------------------------------------------------------------------------*/
.page-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.container {
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  width: 96%;
}

/* Width and height utilities
----------------------------------------------------------------------------------------------------------------------*/
.full-width,
.full {
  width: 100%;
}

.full-height {
  height: 100%;
}

.width-auto {
  width: auto;
}

.height-auto {
  height: auto;
}

/* Grid
----------------------------------------------------------------------------------------------------------------------*/
.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid.gap-s {
  margin-left: - var(--grid-gap-s);
  margin-right: - var(--grid-gap-s);
}

.grid.gap-s .col {
  padding-left: var(--grid-gap-s);
  padding-right: var(--grid-gap-s);
}

.grid.gap-m,
.grid.gap {
  margin-left: - var(--grid-gap-m);
  margin-right: - var(--grid-gap-m);
}

.grid.gap-m .col,
.grid.gap .col {
  padding-left: var(--grid-gap-m);
  padding-right: var(--grid-gap-m);
}

.grid.gap-l {
  margin-left: - var(--grid-gap-l);
  margin-right: - var(--grid-gap-l);
}

.grid.gap-l .col {
  padding-left: var(--grid-gap-l);
  padding-right: var(--grid-gap-l);
}

/* Grid columns
----------------------------------------------------------------------------------------------------------------------*/
.grid .col {
  align-items: stretch;
}

.grid .col.s1 {
  width: 8.333333333333334%;
}

.grid .col.s2 {
  width: 16.666666666666668%;
}

.grid .col.s3 {
  width: 25%;
}

.grid .col.s4 {
  width: 33.333333333333336%;
}

.grid .col.s5 {
  width: 41.66666666666667%;
}

.grid .col.s6 {
  width: 50%;
}

.grid .col.s7 {
  width: 58.333333333333336%;
}

.grid .col.s8 {
  width: 66.66666666666667%;
}

.grid .col.s9 {
  width: 75%;
}

.grid .col.s10 {
  width: 83.33333333333334%;
}

.grid .col.s11 {
  width: 91.66666666666667%;
}

.grid .col.s12 {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  .grid .col.m1 {
    width: 8.333333333333334%;
  }

  .grid .col.m2 {
    width: 16.666666666666668%;
  }

  .grid .col.m3 {
    width: 25%;
  }

  .grid .col.m4 {
    width: 33.333333333333336%;
  }

  .grid .col.m5 {
    width: 41.66666666666667%;
  }

  .grid .col.m6 {
    width: 50%;
  }

  .grid .col.m7 {
    width: 58.333333333333336%;
  }

  .grid .col.m8 {
    width: 66.66666666666667%;
  }

  .grid .col.m9 {
    width: 75%;
  }

  .grid .col.m10 {
    width: 83.33333333333334%;
  }

  .grid .col.m11 {
    width: 91.66666666666667%;
  }

  .grid .col.m12 {
    width: 100%;
  }
}

@media only screen and (min-width: 900px) {
  .grid .col.l1 {
    width: 8.333333333333334%;
  }

  .grid .col.l2 {
    width: 16.666666666666668%;
  }

  .grid .col.l3 {
    width: 25%;
  }

  .grid .col.l4 {
    width: 33.333333333333336%;
  }

  .grid .col.l5 {
    width: 41.66666666666667%;
  }

  .grid .col.l6 {
    width: 50%;
  }

  .grid .col.l7 {
    width: 58.333333333333336%;
  }

  .grid .col.l8 {
    width: 66.66666666666667%;
  }

  .grid .col.l9 {
    width: 75%;
  }

  .grid .col.l10 {
    width: 83.33333333333334%;
  }

  .grid .col.l11 {
    width: 91.66666666666667%;
  }

  .grid .col.l12 {
    width: 100%;
  }
}

@media only screen and (min-width: 1200px) {
  .grid .col.x1 {
    width: 8.333333333333334%;
  }

  .grid .col.x2 {
    width: 16.666666666666668%;
  }

  .grid .col.x3 {
    width: 25%;
  }

  .grid .col.x4 {
    width: 33.333333333333336%;
  }

  .grid .col.x5 {
    width: 41.66666666666667%;
  }

  .grid .col.x6 {
    width: 50%;
  }

  .grid .col.x7 {
    width: 58.333333333333336%;
  }

  .grid .col.x8 {
    width: 66.66666666666667%;
  }

  .grid .col.x9 {
    width: 75%;
  }

  .grid .col.x10 {
    width: 83.33333333333334%;
  }

  .grid .col.x11 {
    width: 91.66666666666667%;
  }

  .grid .col.x12 {
    width: 100%;
  }
}

/* Push offsets
----------------------------------------------------------------------------------------------------------------------*/
.push-xs {
  margin: var(--offset-xs);
}

.push-s {
  margin: var(--offset-s);
}

.push,
.push-m {
  margin: var(--offset-m);
}

.push-l {
  margin: var(--offset-l);
}

.push-xl {
  margin: var(--offset-xl);
}

.push-2xl {
  margin: var(--offset-2xl);
}

.push-0 {
  margin: 0;
}

.push-auto {
  margin: auto;
}

.push-up-xs,
.push-v-xs {
  margin-top: var(--offset-xs);
}

.push-down-xs,
.push-v-xs {
  margin-bottom: var(--offset-xs);
}

.push-left-xs,
.push-h-xs {
  margin-left: var(--offset-xs);
}

.push-right-xs,
.push-h-xs {
  margin-right: var(--offset-xs);
}

.push-up-s,
.push-v-s {
  margin-top: var(--offset-s);
}

.push-down-s,
.push-v-s {
  margin-bottom: var(--offset-s);
}

.push-left-s,
.push-h-s {
  margin-left: var(--offset-s);
}

.push-right-s,
.push-h-s {
  margin-right: var(--offset-s);
}

.push-up,
.push-v,
.push-up-m,
.push-v-m {
  margin-top: var(--offset-m);
}

.push-down,
.push-v,
.push-down-m,
.push-v-m {
  margin-bottom: var(--offset-m);
}

.push-left,
.push-h,
.push-left-m,
.push-h-m {
  margin-left: var(--offset-m);
}

.push-right,
.push-h,
.push-right-m,
.push-h-m {
  margin-right: var(--offset-m);
}

.push-up-l,
.push-v-l {
  margin-top: var(--offset-l);
}

.push-down-l,
.push-v-l {
  margin-bottom: var(--offset-l);
}

.push-left-l,
.push-h-l {
  margin-left: var(--offset-l);
}

.push-right-l,
.push-h-l {
  margin-right: var(--offset-l);
}

.push-up-xl,
.push-v-xl {
  margin-top: var(--offset-xl);
}

.push-down-xl,
.push-v-xl {
  margin-bottom: var(--offset-xl);
}

.push-left-xl,
.push-h-xl {
  margin-left: var(--offset-xl);
}

.push-right-xl,
.push-h-xl {
  margin-right: var(--offset-xl);
}

.push-up-2xl,
.push-v-2xl {
  margin-top: var(--offset-2xl);
}

.push-down-2xl,
.push-v-2xl {
  margin-bottom: var(--offset-2xl);
}

.push-left-2xl,
.push-h-2xl {
  margin-left: var(--offset-2xl);
}

.push-right-2xl,
.push-h-2xl {
  margin-right: var(--offset-2xl);
}

.push-up-0,
.push-v-0 {
  margin-top: 0;
}

.push-down-0,
.push-v-0 {
  margin-bottom: 0;
}

.push-left-0,
.push-h-0 {
  margin-left: 0;
}

.push-right-0,
.push-h-0 {
  margin-right: 0;
}

.push-up-auto,
.push-v-auto {
  margin-top: auto;
}

.push-down-auto,
.push-v-auto {
  margin-bottom: auto;
}

.push-left-auto,
.push-h-auto {
  margin-left: auto;
}

.push-right-auto,
.push-h-auto {
  margin-right: auto;
}

/* Pull offsets
----------------------------------------------------------------------------------------------------------------------*/
.pull-up-xs {
  margin-top: - var(--offset-xs);
}

.pull-down-xs {
  margin-bottom: - var(--offset-xs);
}

.pull-left-xs,
.pull-h-xs {
  margin-left: - var(--offset-xs);
}

.pull-right-xs,
.pull-h-xs {
  margin-right: - var(--offset-xs);
}

.pull-up-s {
  margin-top: - var(--offset-s);
}

.pull-down-s {
  margin-bottom: - var(--offset-s);
}

.pull-left-s,
.pull-h-s {
  margin-left: - var(--offset-s);
}

.pull-right-s,
.pull-h-s {
  margin-right: - var(--offset-s);
}

.pull-up,
.pull-up-m {
  margin-top: - var(--offset-m);
}

.pull-down,
.pull-down-m {
  margin-bottom: - var(--offset-m);
}

.pull-left,
.pull-h,
.pull-left-m,
.pull-h-m {
  margin-left: - var(--offset-m);
}

.pull-right,
.pull-h,
.pull-right-m,
.pull-h-m {
  margin-right: - var(--offset-m);
}

.pull-up-l {
  margin-top: - var(--offset-l);
}

.pull-down-l {
  margin-bottom: - var(--offset-l);
}

.pull-left-l,
.pull-h-l {
  margin-left: - var(--offset-l);
}

.pull-right-l,
.pull-h-l {
  margin-right: - var(--offset-l);
}

.pull-up-xl {
  margin-top: - var(--offset-xl);
}

.pull-down-xl {
  margin-bottom: - var(--offset-xl);
}

.pull-left-xl,
.pull-h-xl {
  margin-left: - var(--offset-xl);
}

.pull-right-xl,
.pull-h-xl {
  margin-right: - var(--offset-xl);
}

.pull-up-2xl {
  margin-top: - var(--offset-2xl);
}

.pull-down-2xl {
  margin-bottom: - var(--offset-2xl);
}

.pull-left-2xl,
.pull-h-2xl {
  margin-left: - var(--offset-2xl);
}

.pull-right-2xl,
.pull-h-2xl {
  margin-right: - var(--offset-2xl);
}

/* Padding offsets
----------------------------------------------------------------------------------------------------------------------*/
.pad-xs {
  padding: var(--offset-xs);
}

.pad-s {
  padding: var(--offset-s);
}

.pad,
.pad-m {
  padding: var(--offset-m);
}

.pad-l {
  padding: var(--offset-l);
}

.pad-xl {
  padding: var(--offset-xl);
}

.pad-2xl {
  padding: var(--offset-2xl);
}

.pad-0 {
  padding: 0;
}

.pad-up-xs,
.pad-v-xs {
  padding-top: var(--offset-xs);
}

.pad-down-xs,
.pad-v-xs {
  padding-bottom: var(--offset-xs);
}

.pad-left-xs,
.pad-h-xs {
  padding-left: var(--offset-xs);
}

.pad-right-xs,
.pad-h-xs {
  padding-right: var(--offset-xs);
}

.pad-up-s,
.pad-v-s {
  padding-top: var(--offset-s);
}

.pad-down-s,
.pad-v-s {
  padding-bottom: var(--offset-s);
}

.pad-left-s,
.pad-h-s {
  padding-left: var(--offset-s);
}

.pad-right-s,
.pad-h-s {
  padding-right: var(--offset-s);
}

.pad-up,
.pad-v,
.pad-up-m,
.pad-v-m {
  padding-top: var(--offset-m);
}

.pad-down,
.pad-v,
.pad-down-m,
.pad-v-m {
  padding-bottom: var(--offset-m);
}

.pad-left,
.pad-h,
.pad-left-m,
.pad-h-m {
  padding-left: var(--offset-m);
}

.pad-right,
.pad-h,
.pad-right-m,
.pad-h-m {
  padding-right: var(--offset-m);
}

.pad-up-l,
.pad-v-l {
  padding-top: var(--offset-l);
}

.pad-down-l,
.pad-v-l {
  padding-bottom: var(--offset-l);
}

.pad-left-l,
.pad-h-l {
  padding-left: var(--offset-l);
}

.pad-right-l,
.pad-h-l {
  padding-right: var(--offset-l);
}

.pad-up-xl,
.pad-v-xl {
  padding-top: var(--offset-xl);
}

.pad-down-xl,
.pad-v-xl {
  padding-bottom: var(--offset-xl);
}

.pad-left-xl,
.pad-h-xl {
  padding-left: var(--offset-xl);
}

.pad-right-xl,
.pad-h-xl {
  padding-right: var(--offset-xl);
}

.pad-up-2xl,
.pad-v-2xl {
  padding-top: var(--offset-2xl);
}

.pad-down-2xl,
.pad-v-2xl {
  padding-bottom: var(--offset-2xl);
}

.pad-left-2xl,
.pad-h-2xl {
  padding-left: var(--offset-2xl);
}

.pad-right-2xl,
.pad-h-2xl {
  padding-right: var(--offset-2xl);
}

.pad-up-0,
.pad-v-0 {
  padding-top: 0;
}

.pad-down-0,
.pad-v-0 {
  padding-bottom: 0;
}

.pad-left-0,
.pad-h-0 {
  padding-left: 0;
}

.pad-right-0,
.pad-h-0 {
  padding-right: 0;
}

/* Border
----------------------------------------------------------------------------------------------------------------------*/
.border-signal,
.border-strong,
.border-muted,
.border-weak,
.border-faint,
.border-white,
.border-red,
.border-green,
.border-yellow,
.border-orange,
.border-blue,
.border-violet {
  border-style: solid;
}

[class^='border-top'],
[class*=' border-top'],
[class^='border-right'],
[class*=' border-right'],
[class^='border-bottom'],
[class*=' border-bottom'],
[class^='border-left'],
[class*=' border-left'] {
  border-color: var(--border-color);
  border-style: solid;
  border-width: 0;
}

.border,
.border-s,
.border-m,
.border-l,
.border-xl {
  border-width: var(--border-m);
}

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

.border-s {
  border-width: var(--border-s);
}

.border-m {
  border-width: var(--border-m);
}

.border-l {
  border-width: var(--border-l);
}

.border-xl {
  border-width: var(--border-xl);
}

.border-top-s {
  border-top-width: var(--border-m);
}

.border-top,
.border-top-m {
  border-top-width: var(--border-m);
}

.border-top-l {
  border-top-width: var(--border-l);
}

.border-top-xl {
  border-top-width: var(--border-xl);
}

.border-right-s {
  border-right-width: var(--border-m);
}

.border-right,
.border-right-m {
  border-right-width: var(--border-m);
}

.border-right-l {
  border-right-width: var(--border-l);
}

.border-right-xl {
  border-right-width: var(--border-xl);
}

.border-bottom-s {
  border-bottom-width: var(--border-m);
}

.border-bottom,
.border-bottom-m {
  border-bottom-width: var(--border-m);
}

.border-bottom-l {
  border-bottom-width: var(--border-l);
}

.border-bottom-xl {
  border-bottom-width: var(--border-xl);
}

.border-left-s {
  border-left-width: var(--border-m);
}

.border-left,
.border-left-m {
  border-left-width: var(--border-m);
}

.border-left-l {
  border-left-width: var(--border-l);
}

.border-left-xl {
  border-left-width: var(--border-xl);
}

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

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

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

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

.border-signal {
  border-color: var(--color-signal);
}

.border-strong {
  border-color: var(--color-strong);
}

.border-muted {
  border-color: var(--color-muted);
}

.border-weak {
  border-color: var(--color-weak);
}

.border-faint {
  border-color: var(--color-faint);
}

.border-white {
  border-color: var(--color-white);
}

.border-red {
  border-color: var(--color-red);
}

.border-green {
  border-color: var(--color-green);
}

.border-yellow {
  border-color: var(--color-yellow);
}

.border-orange {
  border-color: var(--color-orange);
}

.border-blue {
  border-color: var(--color-blue);
}

.border-violet {
  border-color: var(--color-violet);
}

.solid {
  border-style: solid;
}

.dashed {
  border-style: dashed;
}

.dotted {
  border-style: dotted;
}

/* Rounded corners
----------------------------------------------------------------------------------------------------------------------*/
.rounded-s {
  border-radius: var(--rounded-s);
}

.rounded-m,
.rounded {
  border-radius: var(--rounded-m);
}

.rounded-l {
  border-radius: var(--rounded-l);
}

.rounded-xl {
  border-radius: var(--rounded-xl);
}

.rounded-full {
  border-radius: 10000px;
}

.circular {
  border-radius: 100%;
}

.rounded-0 {
  border-radius: 0;
}

.rounded-0-top-left {
  border-top-left-radius: 0;
}

.rounded-0-top-right {
  border-top-right-radius: 0;
}

.rounded-0-bottom-right {
  border-bottom-right-radius: 0;
}

.rounded-0-bottom-left {
  border-bottom-left-radius: 0;
}

/* Shadows
----------------------------------------------------------------------------------------------------------------------*/
.shadow-s {
  box-shadow: var(--shadow-s);
}

.shadow-m {
  box-shadow: var(--shadow-m);
}

.shadow-l {
  box-shadow: var(--shadow-l);
}

.shadow-s-on-hover:hover {
  box-shadow: var(--shadow-s);
}

.shadow-m-on-hover:hover {
  box-shadow: var(--shadow-m);
}

.shadow-l-on-hover:hover {
  box-shadow: var(--shadow-l);
}

/* Transitions
----------------------------------------------------------------------------------------------------------------------*/
.tween-xs {
  transition: var(--transition-fastest);
}

.tween-s {
  transition: var(--transition-fast);
}

.tween-m,
.tween {
  transition: var(--transition-medium);
}

.tween-l {
  transition: var(--transition-slow);
}

.tween-xl {
  transition: var(--transition-slowest);
}

/* Scaling
----------------------------------------------------------------------------------------------------------------------*/
.scale-s {
  transform: scale(var(--scale-s));
}

.scale-m {
  transform: scale(var(--scale-m));
}

.scale-l {
  transform: scale(var(--scale-l));
}

.scale-s-on-hover:hover {
  transform: scale(var(--scale-s));
}

.scale-m-on-hover:hover {
  transform: scale(var(--scale-m));
}

.scale-l-on-hover:hover {
  transform: scale(var(--scale-l));
}

/* Opacity
----------------------------------------------------------------------------------------------------------------------*/
.opacity-0 {
  opacity: 0;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}

.opacity-0-on-hover:hover {
  opacity: 0;
}

.opacity-25-on-hover:hover {
  opacity: 0.25;
}

.opacity-50-on-hover:hover {
  opacity: 0.5;
}

.opacity-75-on-hover:hover {
  opacity: 0.75;
}

.opacity-100-on-hover:hover {
  opacity: 1;
}

/* Rotation
----------------------------------------------------------------------------------------------------------------------*/
.rotate-45 {
  transform: rotate(45deg);
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-135 {
  transform: rotate(135deg);
}

.rotate-180 {
  transform: rotate(180deg);
}

.rotate-225 {
  transform: rotate(225deg);
}

.rotate-270 {
  transform: rotate(270deg);
}

.rotate-315 {
  transform: rotate(315deg);
}

/* Mouse cursors
----------------------------------------------------------------------------------------------------------------------*/
.pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

.cursor-forbidden {
  cursor: no-drop;
}

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

.no-select {
  user-select: none;
}

/* Images
----------------------------------------------------------------------------------------------------------------------*/
.responsive {
  max-width: 100%;
  height: auto;
}

.responsive-full {
  width: 100%;
  height: auto;
}

.pixelate {
  image-rendering: pixelated;
}

/* Responsive modifiers
----------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 599px) {
  .hide-on-s,
  .hide-on-sm,
  .hide-on-sml {
    display: none !important;
  }
  .inline-on-s,
  .inline-on-sm,
  .inline-on-sml {
    display: inline-block !important;
  }
  .block-on-s,
  .block-on-sm,
  .block-on-sml {
    display: block !important;
  }
  .flex-on-s,
  .flex-on-sm,
  .flex-on-sml {
    display: flex !important;
  }
  .float-left-on-s,
  .float-left-on-sm,
  .float-left-on-sml {
    float: left;
  }
  .float-right-on-s,
  .float-right-on-sm,
  .float-right-on-sml {
    float: right;
  }
  .float-none-on-s,
  .float-none-on-sm,
  .float-none-on-sml {
    float: none;
  }
  .center-on-s,
  .center-on-sm,
  .center-on-sml {
    text-align: center;
  }
  .align-left-on-s,
  .align-left-on-sm,
  .align-left-on-sml {
    text-align: left;
  }
  .align-right-on-s,
  .align-right-on-sm,
  .align-right-on-sml {
    text-align: right;
  }
  .full-on-s,
  .full-on-sm,
  .full-on-sml {
    width: 100%;
  }
  .width-auto-on-s,
  .width-auto-on-sm,
  .width-auto-on-sml {
    width: auto;
  }
}
@media only screen and (min-width: 600px) and (max-width: 899px) {
  .hide-on-m,
  .hide-on-sm,
  .hide-on-ml,
  .hide-on-sml,
  .hide-on-smlx {
    display: none !important;
  }
  .inline-on-m,
  .inline-on-sm,
  .inline-on-ml,
  .inline-on-sml,
  .inline-on-smlx {
    display: inline-block !important;
  }
  .block-on-m,
  .block-on-sm,
  .block-on-ml,
  .block-on-sml,
  .block-on-smlx {
    display: block !important;
  }
  .flex-on-m,
  .flex-on-sm,
  .flex-on-ml,
  .flex-on-sml,
  .flex-on-smlx {
    display: flex !important;
  }
  .float-left-on-m,
  .float-left-on-sm,
  .float-left-on-ml,
  .float-left-on-sml,
  .float-left-on-smlx {
    float: left;
  }
  .float-right-on-m,
  .float-right-on-sm,
  .float-right-on-ml,
  .float-right-on-sml,
  .float-right-on-smlx {
    float: right;
  }
  .float-none-on-m,
  .float-none-on-sm,
  .float-none-on-ml,
  .float-none-on-sml,
  .float-none-on-smlx {
    float: none;
  }
  .center-on-m,
  .center-on-sm,
  .center-on-ml,
  .center-on-sml,
  .center-on-smlx {
    text-align: center;
  }
  .align-left-on-m,
  .align-left-on-sm,
  .align-left-on-ml,
  .align-left-on-sml,
  .align-left-on-smlx {
    text-align: left;
  }
  .align-right-on-m,
  .align-right-on-sm,
  .align-right-on-ml,
  .align-right-on-sml,
  .align-right-on-smlx {
    text-align: right;
  }
  .full-on-m,
  .full-on-sm,
  .full-on-ml,
  .full-on-sml,
  .full-on-smlx {
    width: 100%;
  }
  .width-auto-on-m,
  .width-auto-on-sm,
  .width-auto-on-ml,
  .width-auto-on-sml,
  .width-auto-on-smlx {
    width: auto;
  }
}
@media only screen and (min-width: 900px) and (max-width: 1199px) {
  .hide-on-l,
  .hide-on-ml,
  .hide-on-sml,
  .hide-on-smlx {
    display: none !important;
  }
  .inline-on-l,
  .inline-on-ml,
  .inline-on-sml,
  .inline-on-smlx {
    display: inline-block !important;
  }
  .block-on-l,
  .block-on-ml,
  .block-on-sml,
  .block-on-smlx {
    display: block !important;
  }
  .flex-on-l,
  .flex-on-ml,
  .flex-on-sml,
  .flex-on-smlx {
    display: flex !important;
  }
  .float-left-on-l,
  .float-left-on-ml,
  .float-left-on-sml,
  .float-left-on-smlx {
    float: left;
  }
  .float-right-on-l,
  .float-right-on-ml,
  .float-right-on-sml,
  .float-right-on-smlx {
    float: right;
  }
  .float-none-on-l,
  .float-none-on-ml,
  .float-none-on-sml,
  .float-none-on-smlx {
    float: none;
  }
  .center-on-l,
  .center-on-ml,
  .center-on-sml,
  .center-on-smlx {
    text-align: center;
  }
  .align-left-on-l,
  .align-left-on-ml,
  .align-left-on-sml,
  .align-left-on-smlx {
    text-align: left;
  }
  .align-right-on-l,
  .align-right-on-ml,
  .align-right-on-sml,
  .align-right-on-smlx {
    text-align: right;
  }
  .full-on-l,
  .full-on-ml,
  .full-on-sml,
  .full-on-smlx {
    width: 100%;
  }
  .width-auto-on-l,
  .width-auto-on-ml,
  .width-auto-on-sml,
  .width-auto-on-smlx {
    width: auto;
  }
}
@media only screen and (min-width: 1200px) {
  .hide-on-mlx,
  .hide-on-lx,
  .hide-on-smlx {
    display: none !important;
  }
  .inline-on-mlx,
  .inline-on-lx,
  .inline-on-smlx {
    display: inline-block !important;
  }
  .block-on-mlx,
  .block-on-lx,
  .block-on-smlx {
    display: block !important;
  }
  .flex-on-mlx,
  .flex-on-lx,
  .flex-on-smlx {
    display: flex !important;
  }
  .float-left-on-mlx,
  .float-left-on-lx,
  .float-left-on-smlx {
    float: left;
  }
  .float-right-on-mlx,
  .float-right-on-lx,
  .float-right-on-smlx {
    float: right;
  }
  .float-none-on-mlx,
  .float-none-on-lx,
  .float-none-on-smlx {
    float: none;
  }
  .center-on-mlx,
  .center-on-lx,
  .center-on-smlx {
    text-align: center;
  }
  .align-left-on-mlx,
  .align-left-on-lx,
  .align-left-on-smlx {
    text-align: left;
  }
  .align-right-on-mlx,
  .align-right-on-lx,
  .align-right-on-smlx {
    text-align: right;
  }
  .full-on-mlx,
  .full-on-lx,
  .full-on-smlx {
    width: 100%;
  }
  .width-auto-on-mlx,
  .width-auto-on-lx,
  .width-auto-on-smlx {
    width: auto;
  }
}