/* Heading */

.root {
  font-family: 'WebFaktSoftPro', sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 1.25em;
  align-items: center;
  vertical-align: middle;
}

.root strong {
  font-weight: 500;
}

.root > i {
  position: relative;
  left: 2px;
  vertical-align: top;
}

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

.border {
  border-bottom: 1px solid var(--color-grey-platinum);
}

.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: 24px;
}

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

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

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

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

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

.color-white,
.color-white > i {
  color: #fff;
}

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

.margin-tiny {
  margin-bottom: 2px;
}

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

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

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

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

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

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

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

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

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

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

.align-none {

}

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

.hover-none {

}