﻿.ui-loader .ui-icon-loading{
    background-color:transparent !important;
    margin-left:-100% !important;
    width: 7.75em !important;
    height: 7.75em !important;
}

.ui-icon-loading {
    background-size: 7.875em 7.875em !important;
}

.ui-loader-default{
    opacity:1 !important;
}

.ui-body-a{
    background-color:transparent !important;
    border-color:transparent !important;
}


/*css loaders*/

/*
            loader 1
            HTML Code : <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
            
            TMA COLORS
            colors.Add("#ee7352");  //orange
            colors.Add("#afcc46");  //light_green
            colors.Add("#d24291");  //purple
            colors.Add("#fab400");  //yellow
            colors.Add("#50b47e");  //dark_green
            colors.Add("#0085C8");  //dark_blue
            colors.Add("#5cc0c4");  //sky_blue
            colors.Add("#9d9d9d");   //gray
    */

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 24px;
    height: 24px;
}

    .lds-ellipsis div {
        position: absolute;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #00abff;
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
    }

        .lds-ellipsis div:nth-child(1) {
            background: #D24291;
            left: 6px;
            animation: lds-ellipsis1 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(2) {
            background: #ee7352;
            left: 6px;
            animation: lds-ellipsis2 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(3) {
            background: #fab400;
            left: 26px;
            animation: lds-ellipsis2 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(4) {
            background: #50b47e;
            left: 45px;
            animation: lds-ellipsis3 0.6s infinite;
        }

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(19px, 0);
    }
}
