%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;
}

}