.btn{
    padding:10px 20px;cursor:pointer; text-transform: uppercase;
    font-family:font(md);font-size: 16px;
    &:hover,&:focus,&:active,&:not(:disabled):not(.disabled):active {
        box-shadow: none;outline: none;
    }
    &.btn-primary{
        border-color:color(500);color: color(900);background-color:color(500);
        &:hover,&:focus,&:active,&:not(:disabled):not(.disabled):active {
            border-color:lighten(color(500), 8%);box-shadow: none;
            background: lighten(color(500), 8%);color:color(900);
        }
        .spinner-border{top: -4px;position: relative;left: 2px;}
    }
    &.btn-info{
        border-color:color(900);color: color(50);background-color:color(900);
        &:hover,&:focus,&:active,&:not(:disabled):not(.disabled):active {
            border-color:lighten(color(900), 8%);box-shadow: none;
            background: lighten(color(900), 8%);color:color(50);
        }
        .spinner-border{top: -4px;position: relative;left: 2px;}
    }
    &.btn-primary-outline{
        border-color:color(500);color: color(500);background-color: transparent;
        &:hover,&:focus,&:active,&:not(:disabled):not(.disabled):active {
            border-color:darken(color(500), 8%);box-shadow: none;
            background: darken(color(500), 8%);color:color(50);
        }
    }
    &.back_btn{ color: rgba(51, 50, 71, 44%);}
    &.minWidth{min-width: 160px;}
    .btnIcon{font-size: 18px;margin-right: 5px;vertical-align: middle;position: relative;top: -3px;}

    @media(max-width: 1599px){
        padding: 8px 16px;
        &.minWidth{min-width: 145px;}
    }
   
    @include media-breakpoint-down(lg) {
        font-size: 14px;
        &.minWidth{min-width: 135px;}
         .btnIcon{font-size: 16px;}
    }

    @include media-breakpoint-down(md) {
        &.minWidth{min-width: 115px;}
    }

    @include media-breakpoint-down(sm){
         padding: 6px 12px;
    }
     @include media-breakpoint-down(xs){
        &.minWidth{min-width: 100px;}
    }
}