/* Text */

.root {
  font-family: 'WebFaktSoftPro', sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 0;
  cursor: inherit;
  vertical-align: middle;
  line-height: 1.6em;
}

.resetTransform {
  text-transform: none;
}

.weight-normal {
  font-weight: 400;
}

.weight-semi-bold {
  font-weight: 500;
}

.size-extra-extra-small {
  font-size: 10px;
}

.size-extra-small {
  font-size: 12px;
}

.size-small {
  font-size: 14px;
}

.size-medium {
  font-size: 16px;
}

.size-large {
  font-size: 18px;
}

.size-extra-large {
  font-size: 20px;
}

.size-extra-extra-large {
  font-size: 32px;
}

.size-huge {
  font-size: 42px;
}

.margin-none {
  margin-bottom: 0;
}

.margin-small {
  margin-bottom: 10px;
}

.margin-medium {
  margin-bottom: 15px;
}

.margin-large {
  margin-bottom: 30px;
}

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

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

.color-dark-blue {
  color: var(--color-brand-blue-darker);
}

.color-dark-grey {
  color: var(--color-grey-charcoal);
}

.color-grey {
  color: var(--color-grey-slate);
}

.color-light-grey {
  color: var(--color-grey-silver);
}

.color-white {
  color: #fff;
}

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

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

.color-purple {
  color: var(--color-brand-purple);
}

.color-navy {
  color: var(--color-grey-charcoal);
}


.color-none {

}

.hover-color-black:hover {
  color: var(--color-grey-charcoal);
}

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

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

.hover-color-dark-blue:hover {
  color: var(--color-brand-blue-darker);
}

.hover-color-dark-grey:hover {
  color: var(--color-grey-charcoal);
}

.hover-color-grey:hover {
  color: var(--color-grey-silver);
}

.hover-color-light-grey:hover {
  color: var(--color-grey-platinum);
}

.hover-color-white:hover {
  color: #fff;
}

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

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

.hover-color-navy:hover {
  color: var(--color-grey-charcoal);
}

.hover-color-none:hover {

}

.multiline {
  white-space: normal;
  text-overflow: initial;
  overflow: visible;
  white-space: pre-wrap;
  word-break: break-word;
}

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

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

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

.align-none {
  text-align: initial;
}

.interactive {
  cursor: pointer;
}

.interactive:hover {
  text-decoration: underline;
}

.not-interactive {
  cursor: default;
}

.no-underline,
.no-underline:hover {
  text-decoration: none
}