.es-colorful-card {
  position: relative;
  height: 136px;
  border-radius: 4px;
  padding: 32px 20px 32px 72px;
  margin-bottom: 24px;
  @media(max-width: @screen-md-max) {
    padding: 32px 20px 32px 20px;
  }
  @media(max-width: @screen-xs-max) {
    padding: 16px;
    height: auto;
  }
  &.es-colorful-card-danger {
    background: #fe7d80;
    @media(min-width: @screen-lg-min) {
      .card-body {
        padding-top: 10px;
      }
    }
  }
  &.es-colorful-card-warning {
    background: #f5b476;
  }
  &.es-colorful-card-info {
    background: #76b3f5;
    @media(min-width: @screen-lg-min) {
      .card-body {
        padding-top: 10px;
      }
    }
  }
  .btn-card-danger {
    color: #fe7d80;
    border-color: #fff;
    background: #fff;
    &:hover {
      .cd-box-shadow(6px);
    }
  }
  .btn-card-warning {
    color: #f5b476;
    border-color: #fff;
    background: #fff;
    &:hover {
      .cd-box-shadow(6px);
    }
  }
  .btn-card-info {
    color: #76b3f5;
    border-color: #fff;
    background: #fff;
    &:hover {
      .cd-box-shadow(6px);
    }
  }
  .btn-card-white {
    border-color: #fff;
    color: #fff;
    .cd-transition;
    &:hover {
      .cd-box-shadow(6px);
    }
    &:hover,
    &:focus {
      .cd-transition;
      background: rgba(255, 255, 255, .2);
    }
  }

  .card-action {
    position: absolute;
    top: 50%;
    margin-top: -17px;
    right: 40px;
    @media(max-width: @screen-md-max) {
      right: 20px;
    }
    @media(max-width: @screen-xs-max) {
      position: static;
      margin-top: 0;
    }
    .btn + .btn {
      margin-left: 12px;
    }
  }
  .card-icon {
    position: absolute;
    top: 50%;
    margin-top: -36px;
    height: 72px;
    left: -16px;
    @media(max-width: @screen-md-max) {
      display: none;
    }
    i {
      color: rgba(255, 255, 255, .7);
      font-size: 72px;
    }
  }
  .card-body {
    line-height: 1;
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    p {
      margin-bottom: 8px;
    }
    a {
      color: #fff;
    }
  }
  .card-money {
    font-size: 32px;
    color: #fff;
    display: inline-block; 
  }
}