body .btn {
    font-family: 'Titillium Web' !important;
    font-weight: 500;
    color: var(--default-text-c);
    height: 40px;
    line-height: 36px;

    transition: background-position .4s,background .4s, background-color .4s, color .5s!important;
    border: 2px solid transparent;
    border-radius: 40px !important;

    margin-bottom: 0px;
    padding: 0 15px !important;
    background-size: unset!important;
    background: none;
    background-color: #fff;
}
body .btn i{
    margin: 0 5px;
   // color: #fff;
}

body .btn:hover {
    background-color:  var(--btn-default);
}
body .btn.btn-default{
    border: 2px var(--btn-default-hover) solid;
}
body .btn.btn-default:hover{
    background-color:  var(--btn-default-hover);
}


body .btn.is-active{
    outline: 2px var(--primary-c) solid;
    background-position: 100%;

}
body .btn-primary {
    color: #fff;
    line-height: 40px;
    margin: 2px;
    border: 0px solid transparent;
    transition: background-position .5s;
    background-size: 200% 200%!important;
    min-width: 100px;
    background-color: var(--primary-c);
    /*
    background: linear-gradient(
            90deg,
            var(--primary-c) 0%,
            rgba(0,167,198,0.753658963585434205) 70%,
            rgba(0,167,198,0.753658963585434205) 70%,
            var(--primary-c)  100%);

     */
}
body .btn-primary:hover {
    color: #fff;
    background-position: 100%;
    background-color: var(--primary-c-hover);
}
body .btn-primary i, body .btn-secondary i{
    color: #fff!important;
}
body .btn-secondary {
    line-height: 40px;
    margin: 2px;
    border: 0px solid transparent;
    color: #fff;
    transition: background-position .5s;
    background-size: 200% 200%!important;
    background-color: var(--secondary-c);
    /*
    background: linear-gradient(
            90deg,
            var(--secondary-c) 0%,
            var(--secondary-c-hover) 70%,
            var(--secondary-c-hover) 70%,
            var(--secondary-c) 100%);
     */
}
body .btn.btn-secondary--outline {
    background-color: #fff;
    border: 2px var(--secondary-c) solid ;

}
body .btn.btn-delete {
    border: 2px solid #920012;
    color: #920012;
}
body  .btn-.btn-secondary.is-active {
    outline: 2px var(--primary-c) solid;
    background-position: 100%;
}
body .btn-secondary:hover {
    background-position: 100%;
    color: #fff;
    background-color: var(--secondary-c-hover);
}

body .btn-add {
    margin: 0px;
    line-height: 36px;
    border: 2px solid #76BB29;
    background-color: transparent;
    color: #76BB29;
}
body .btn-small {
    display: inline-block;
    margin-right: 3px;
    margin-bottom: 3px;
    vertical-align: top;
    font-size: 12px;
    line-height: 28px;
    padding: 0 7px!important;
    border: 1px solid #eaeaea;
    border-radius: 3px!important;
    max-height: 30px!important;;
}

body .btn.btn-alarm {
    color: #fff;
    margin: 2px;
    border: 0px solid transparent;
    background-color: var(--alarm);
}
body .btn.btn-alarm:hover {
     background-position: 0 -30px;
     color: #fff;
     background: var(--alarm-hover);
 }

body .btn-add:hover {
    color: #fff;
    background-color: #76BB29;
}


@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
a i{
    color: var(--default-text-c);
}