%card-stats {

hr {
  margin: 5px 15px;
}

}

.card-stats {

@extend %card-stats;

.info-icon {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  @include diagonal-gradient($primary, $primary-states);

  i {
    color: $white;
    font-size: 1.7em;
    padding: 14px 13px;

  }

  &.icon-danger {
    @include diagonal-gradient($danger, $danger-states);
  }

  &.icon-warning {
    @include diagonal-gradient($warning, $warning-states);
  }

  &.icon-success {
    @include diagonal-gradient($success, $success-states);
  }

  &.icon-info {
    @include diagonal-gradient($info, $info-states);
  }

  &.icon-primary {
    @include diagonal-gradient($primary, $primary-states);
  }
}

.numbers {
  text-align: right;

  .card-title {
    margin-top: 0;
  }

  .card-category {
    margin-bottom: 0;
    color: $dark-gray;
  }
}

.card-footer {
  padding: 0;
}

hr {
  border-color: lighten($black, 5%);
}

.stats {
  color: rgba($white, 0.6);
  margin: 10px 15px;
  font-size: 0.9em;
}

&.card-white {
  hr {
    border-color: rgba(43, 53, 83, 0.2)
  }
}

}

@include media-breakpoint-down(sm) {

.card-stats [class*="col-"] .statistics::after {
  display: none;
}

}