/*------------- setting the squares for loading -------------*/

.mq-spinner--box {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    background-color: rgba(255, 255, 255, 0.8);
}

.mq-spinner--wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}

.mq-spinner--box-extra-small .mq-spinner--wrapper {
    height: 50px;
}

.mq-spinner--box-small .mq-spinner--wrapper {
    height: 78px;
}

.mq-spinner--box-normal .mq-spinner--wrapper {
    height: 93px;
}

.mq-spinner--box-large .mq-spinner--wrapper {
    height: 93px;
}

.wm-app .mq-btn--progress span,
.mq-spinner--animation span {
    content: "";
    background: #fff;
    display: block;
    vertical-align: middle;
    position: relative;
    line-height: 1px;
}


/*to remove icons in loader button*/

.mq-btn--loader i,
.mq-btn--loader.mq-btn--progress .sr-only {
    display: none;
}

.mq-spinner--animation span {
    background: var(--main-color);
}


/*------------- centering the squares -------------*/

.mq-btn--progress span,
.mq-spinner--animation span {
    top: 5px;
    left: 11px;
}


/*------------- size for normal buttons -------------*/

.wm-app .mq-btn.mq-btn--progress span,
.mq-spinner--animation span {
    width: 8px;
    height: 8px;
}


/*------------- size for extrasmall loaders -------------*/

.mq-spinner--box-extra-small .mq-spinner--animation span {
    width: 8px;
    height: 8px;
}


/*------------- size for small loaders -------------*/

.mq-spinner--box-small .mq-spinner--animation span {
    width: 15px;
    height: 15px;
}


/*------------- size for normal buttons -------------*/

.mq-spinner--animation span {
    width: 20px;
    height: 20px;
}


/*------------- size for small buttons -------------*/

.wm-app .mq-btn-sm.mq-btn--progress span {
    width: 6px;
    height: 6px;
}


/*------------- animations for normal buttons -------------*/

.mq-btn.mq-btn--progress span:last-child,
.mq-spinner--animation span:last-child {
    top: 0px;
    transform: translate3d(8px, 0px, 0px);
    -webkit-transform: translate3d(8px, 0px, 0px);
    /*animation: bottomshift 4s linear infinite;*/
    animation-name: bottomshift;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /*-webkit-animation: bottomshift 4s linear infinite;*/
    -webkit-animation-name: bottomshift;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

.mq-spinner--animation span:last-child {
    transform: translate3d(20px, 0px, 0px);
    -webkit-transform: translate3d(20px, 0px, 0px);
    animation-name: spinner-animantion--bottom;
}

.mq-btn.mq-btn--progress span:first-child,
.mq-spinner--animation span:first-child {
    top: 0px;
    transform: translate3d(8px, 0px, 0px);
    -webkit-transform: translate3d(8px, 0px, 0px);
    /*animation: topshift 4s linear infinite;*/
    animation-name: topshift;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /*-webkit-animation: topshift 4s linear infinite;*/
    -webkit-animation-name: topshift;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

.mq-spinner--animation span:first-child {
    transform: translate3d(20px, 0px, 0px);
    -webkit-transform: translate3d(20px, 0px, 0px);
    animation-name: spinner-animantion--top;
}


/*------------- animations for small buttons and extra small loaders -------------*/

.mq-btn-default-sm.mq-btn--progress span:last-child,
.mq-spinner--box-extra-small .mq-spinner--animation span:last-child {
    top: 0px;
    transform: translate3d(0px, 0, 0);
    -webkit-transform: translate3d(6px, 0px, 0px);
    /*animation: btn-sm-bottomshift 3s linear infinite;*/
    animation-name: btn-sm-bottomshift;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation: btn-sm-bottomshift 3s linear infinite;
    -webkit-animation-name: btn-sm-bottomshift;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

.mq-btn-default-sm.mq-btn--progress span:first-child,
.mq-spinner--box-extra-small .mq-spinner--animation span:first-child {
    top: 0px;
    transform: translate3d(0px, 0, 0);
    -webkit-transform: translate3d(6px, 0px, 0px);
    /*animation: btn-sm-topshift 3s linear infinite;*/
    animation-name: btn-sm-topshift;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /*-webkit-animation: btn-sm-topshift 3s linear infinite;*/
    -webkit-animation-name: btn-sm-topshift;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}


/*------------- reducing font etc. -------------*/

.wm-app .mq-btn--progress span,
.wm-app .mq-btn-default-sm.mq-btn--progress span.btn-caption,
.mq-spinner--animation span {
    top: 0;
    margin: 0 auto!important;
    left: 0;
    right: 0;
    font-size: 0!important;
}


/*------------- animations for normal buttons -------------*/

@keyframes topshift {
    3% {
        transform: translateX(8px);
    }
    17% {
        transform: translateX(-8px);
    }
    23% {
        transform: translateX(-8px);
    }
    37% {
        transform: translateX(-8px);
    }
    43% {
        transform: translateX(-8px);
    }
    57% {
        transform: translateX(8px);
    }
    63% {
        transform: translateX(8px);
    }
    77% {
        transform: translateX(-8px);
    }
    83% {
        transform: translateX(-8px);
    }
    97% {
        transform: translateX(8px);
    }
}

@-webkit-keyframes topshift {
    3% {
        -webkit-transform: translateX(8px);
    }
    17% {
        -webkit-transform: translateX(-8px);
    }
    23% {
        -webkit-transform: translateX(-8px);
    }
    37% {
        -webkit-transform: translateX(-8px);
    }
    43% {
        -webkit-transform: translateX(-8px);
    }
    57% {
        -webkit-transform: translateX(8px);
    }
    63% {
        -webkit-transform: translateX(8px);
    }
    77% {
        -webkit-transform: translateX(-8px);
    }
    83% {
        -webkit-transform: translateX(-8px);
    }
    97% {
        -webkit-transform: translateX(8px);
    }
}

@keyframes bottomshift {
    3% {
        transform: translateX(8px);
    }
    17% {
        transform: translateX(-8px);
    }
    23% {
        transform: translateX(-8px);
    }
    37% {
        transform: translateX(8px);
    }
    43% {
        transform: translateX(8px);
    }
    57% {
        transform: translateX(0);
    }
    63% {
        transform: translateX(0);
    }
    77% {
        transform: translateX(8px);
    }
    83% {
        transform: translateX(8px);
    }
    97% {
        transform: translateX(8px);
    }
}

@-webkit-keyframes bottomshift {
    3% {
        -webkit-transform: translateX(8px);
    }
    17% {
        -webkit-transform: translateX(-8px);
    }
    23% {
        -webkit-transform: translateX(-8px);
    }
    37% {
        -webkit-transform: translateX(8px);
    }
    43% {
        -webkit-transform: translateX(8px);
    }
    57% {
        -webkit-transform: translateX(0);
    }
    63% {
        -webkit-transform: translateX(0);
    }
    77% {
        -webkit-transform: translateX(8px);
    }
    83% {
        -webkit-transform: translateX(8px);
    }
    97% {
        -webkit-transform: translateX(8px);
    }
}


/*------------- animations for small buttons -------------*/

@keyframes btn-sm-topshift {
    3% {
        transform: translateX(6px);
    }
    17% {
        transform: translateX(-6px);
    }
    23% {
        transform: translateX(-6px);
    }
    37% {
        transform: translateX(-6px);
    }
    43% {
        transform: translateX(-6px);
    }
    57% {
        transform: translateX(6px);
    }
    63% {
        transform: translateX(6px);
    }
    77% {
        transform: translateX(-6px);
    }
    83% {
        transform: translateX(-6px);
    }
    97% {
        transform: translateX(6px);
    }
}

@-webkit-keyframes btn-sm-topshift {
    3% {
        -webkit-transform: translateX(6px);
    }
    17% {
        -webkit-transform: translateX(-6px);
    }
    23% {
        -webkit-transform: translateX(-6px);
    }
    37% {
        -webkit-transform: translateX(-6px);
    }
    43% {
        -webkit-transform: translateX(-6px);
    }
    57% {
        -webkit-transform: translateX(6px);
    }
    63% {
        -webkit-transform: translateX(6px);
    }
    77% {
        -webkit-transform: translateX(-6px);
    }
    83% {
        -webkit-transform: translateX(-6px);
    }
    97% {
        -webkit-transform: translateX(6px);
    }
}

@keyframes btn-sm-bottomshift {
    3% {
        transform: translateX(6px);
    }
    17% {
        transform: translateX(-6px);
    }
    23% {
        transform: translateX(-6px);
    }
    37% {
        transform: translateX(6px);
    }
    43% {
        transform: translateX(6px);
    }
    57% {
        transform: translateX(0);
    }
    63% {
        transform: translateX(0);
    }
    77% {
        transform: translateX(6px);
    }
    83% {
        transform: translateX(6px);
    }
    97% {
        transform: translateX(6px);
    }
}

@-webkit-keyframes btn-sm-bottomshift {
    3% {
        -webkit-transform: translateX(6px);
    }
    17% {
        -webkit-transform: translateX(-6px);
    }
    23% {
        -webkit-transform: translateX(-6px);
    }
    37% {
        -webkit-transform: translateX(6px);
    }
    43% {
        -webkit-transform: translateX(6px);
    }
    57% {
        -webkit-transform: translateX(-6px);
    }
    63% {
        -webkit-transform: translateX(-6px);
    }
    77% {
        -webkit-transform: translateX(6px);
    }
    83% {
        -webkit-transform: translateX(6px);
    }
    97% {
        -webkit-transform: translateX(6px);
    }
}

@-webkit-keyframes spinner-animantion--top {
    3% {
        -webkit-transform: translateX(20px);
    }
    17% {
        -webkit-transform: translateX(-20px);
    }
    23% {
        -webkit-transform: translateX(-20px);
    }
    37% {
        -webkit-transform: translateX(-20px);
    }
    43% {
        -webkit-transform: translateX(-20px);
    }
    57% {
        -webkit-transform: translateX(20px);
    }
    63% {
        -webkit-transform: translateX(20px);
    }
    77% {
        -webkit-transform: translateX(-20px);
    }
    83% {
        -webkit-transform: translateX(-20px);
    }
    97% {
        -webkit-transform: translateX(20px);
    }
}

@-webkit-keyframes spinner-animantion--bottom {
    3% {
        -webkit-transform: translateX(20px);
    }
    17% {
        -webkit-transform: translateX(-20px);
    }
    23% {
        -webkit-transform: translateX(-20px);
    }
    37% {
        -webkit-transform: translateX(20px);
    }
    43% {
        -webkit-transform: translateX(20px);
    }
    57% {
        -webkit-transform: translateX(0);
    }
    63% {
        -webkit-transform: translateX(0);
    }
    77% {
        -webkit-transform: translateX(20px);
    }
    83% {
        -webkit-transform: translateX(20px);
    }
    97% {
        -webkit-transform: translateX(20px);
    }
}


/* disable styles for loading buttons */

.wm-app .btn.mq-btn--progress[disabled],
.wm-app .btn.mq-btn--progress[disabled]:hover {
    opacity: 1;
    /*background-color: #493184;*/
    /*border-color: #493184;*/
}