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