/**
* @description Iterates over the $space-gap values and creates a class for each one.
* @param {list} $space-gap - A list of space gap values.
*/
.gap-8 {
  gap: 8px;
}

.gap-16 {
  gap: 16px;
}

.gap-24 {
  gap: 24px;
}

.message-cards {
  border-radius: 8px;
  font: normal 500 0.875rem/1.1875rem "FinalSix-light", sans-serif;
  margin: 15px 0;
  padding: 20px 25px;
}
.message-cards .close {
  opacity: 1;
  text-shadow: none;
}
.message-cards .close:hover {
  color: unset;
}
.message-cards.alert-dismissible {
  padding: 20px 40px 20px 25px;
}

.message-cards-error-card {
  background: #f24e6d;
  color: #fff;
}
.message-cards-error-card .card-icon {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 25px;
          flex: 1 0 25px;
}
.message-cards-error-card .card-icon circle {
  fill: #f3f2f2;
}
.message-cards-error-card .card-icon text,
.message-cards-error-card .card-icon path {
  fill: #f24e6d;
}

.message-cards-warning-card {
  background: #ffee75;
  color: #4d4c53;
}
.message-cards-warning-card .card-icon {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 25px;
          flex: 1 0 25px;
}
.message-cards-warning-card .card-icon circle {
  fill: #4d4c53;
}
.message-cards-warning-card .card-icon text,
.message-cards-warning-card .card-icon path {
  fill: #ffee75;
}

/*# sourceMappingURL=messageCards.css.map*/