.red{
      background-color:#FF9999;
    }
    .green{
        background-color:#99FF99;
    }

/* sm超 */
@media (min-width: 575px) {

  .btn-s-sm{
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .btn-s-sm:hover, .btn-sm:focus {
    text-decoration: none;
  }
  
  .btn-s-sm:focus, .btn-s-sm.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }
  
  .btn-s-sm.disabled, .btn-s-sm:disabled {
    opacity: 0.65;
  }
  
  .btn-s-sm:not(:disabled):not(.disabled) {
    cursor: pointer;
  }
  
  a.btn-s-sm.disabled,
  fieldset:disabled a.btn {
    pointer-events: none;
  }

  .btn-s-sm-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
  }
  
  .btn-s-sm-info:hover {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
  }
  
  .btn-s-sm-info:focus, .btn-s-sm-info.focus {
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
  }
  
  .btn-sm-s-info.disabled, .btn-sm-s-info:disabled {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
  }
  
  .btn-sm-s-info:not(:disabled):not(.disabled):active, .btn-sm-info:not(:disabled):not(.disabled).active,
  .show > .btn-sm-info.dropdown-toggle {
    color: #fff;
    background-color: #117a8b;
    border-color: #10707f;
  }
  
  .btn-sm-s-info:not(:disabled):not(.disabled):active:focus, .btn-sm-s-info:not(:disabled):not(.disabled).active:focus,
  .show > .btn-sm-info.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
  }
}

@media (max-width: 574px) {
    .btn-u-sm-fontawesome{
        background-color:transparent;
        white-space: nowrap;
        vertical-align: middle;
        -webkit-user-select: none;
        border: 1px solid transparent;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        padding:0;
        cursor:pointer;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    .btn-u-sm-fontawesome .fas{
        font-size:200%;

    }
    .btn-u-sm-info-fontawesome-r .fas{
         color: #17a2b8;
         background-color: #fff;
         border-color: #17a2b8;
         border-radius:100%;
    }
  .btn-u-sm-info-fontawesome-r:hover .fas{
    color: #138496;
    background-color: #fff;
    border-color: #117a8b;
  }
  
  .btn-u-sm-info-fontawesome-r:focus .fas, .btn-u-sm-info-fontawesome-r.focus .fas{
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
  }

}
@media screen and (prefers-reduced-motion: reduce) {
  .btn-sm {
    transition: none;
  }
}