.ba-button {
    background-color: #039BE5;
    cursor: pointer;
    width: calc(100%);
    height: 50px;
    color: white;
    padding-top: 5px;
    padding-left: 7px;
    padding-right: 7px;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid #3fc0ff;
    display: inline-block;
    border-radius: 5px;
}

    .ba-button.orange {
        background-color: #F57C00;
        border: 1px solid #ffa03e;
    }

    .ba-button.yellow {
        background-color: #FFCA28;
        border: 1px solid #ffdf7c;
    }

    .ba-button.lower {
        text-transform: unset;
    }

    .ba-button.transparent {
        background-color: transparent;
    }

    .ba-button:hover {
        background-color: #35afea;
    }

    .ba-button.orange:hover {
        background-color: #f79632;
    }

    .ba-button.yellow:hover {
        background-color: #ffd452;
    }

.ba-button:active{
    transform: matrix(0.98,0,0,0.98,0,0);
}

.ba-button-icon{
    text-align: initial;
    cursor: pointer;
    margin-bottom: 15px;
    color: #039be5;
}

.dark .ba-button-icon:hover{
    background-color: #2D2D2D;
}
.light .ba-button-icon:hover{
    background-color: #ECECEC;
}


.ba-button-icon>img{
    height: 24px;
    width:24px;
    vertical-align:middle;  
    padding: 7px;  
}

.ba-button:focus {
    outline: 0;
}

.ba-button-icon>img{

    filter: invert(46%) sepia(66%) saturate(2530%) hue-rotate(171deg) brightness(95%) contrast(98%);
}

.light .ba-button.transparent {
    color: #039be5;
}
.light .ba-button.transparent:hover {
    color: #ffffff;
}

.ba-button-loading {
    background-color: transparent;
    cursor: pointer;
    width: calc(100% - 2px);
    height: 50px;
    color: white;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid #027cb7;
    display: inline-block;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
    border-radius: 5px;
}

    .ba-button-loading .ba-loading-dots div {
        margin: 0 10px;
    }



.ba-link-ba-button {
    position: absolute;
    right: 10px;
    top: -1px;
}

[data-ba-input-disabled] .ba-link-ba-button {
    display: none;
}

[dir="rtl"] .ba-link-ba-button {
    left: 10px;
    right: unset;
}

.ba-img-button {
    width: 48px;
    height: 48px;
    cursor: pointer;
    border-radius: 50%;
    background-color: #039BE5;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: center center;
    margin: 3px;
    display: inline-block;
}


    .ba-img-button:hover {
        background-color: #F57C00;
    }

.ba-button img.ba-icon-24 {
    filter: invert(100%);
}