﻿.overlayLoader {
    position: fixed;
    z-index: 10000;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    /*filter: Alpha(Opacity=60);
    opacity: 0.60;
    -moz-opacity: 0.60;*/
}

* html .overlayLoader {
    position: absolute;
    height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
    width: expression(document.body.scrollWidth > document.body.offsetWidth ? document.body.scrollWidth : document.body.offsetWidth + 'px');
}

.loader {
    z-index: 8010;
    position: fixed;
    width: 180px;
    height: 120px;
    margin-left: -90px;
    margin-top: -60px;
    top: 50%;
    left: 50%;
    font-size: 30px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
}

* html .loader {
    position: absolute;
    margin-top: expression((document.body.scrollHeight / 4) + (0 - parseInt(this.offsetParent.clientHeight / 2) + (document.documentElement && document.documentElement.scrollTop || document.body.scrollTop)) + 'px');
}

.boxgroup {
    width: 82px;
    float: left;
    margin: 0 25px;
}

.box {
    width: 35px;
    height: 35px;
    background: rgba(0, 106, 70, 1);
    margin: 3px;
    float: left;
    display: block;
}

.box1 {
    animation: Box1Animation 2s linear infinite;
    -webkit-animation: Box1Animation 2s linear infinite;
}

.box2 {
    animation: Box2Animation 2s linear infinite;
    -webkit-animation: Box2Animation 2s linear infinite;
}

.box3 {
    animation: Box3Animation 2s linear infinite;
    -webkit-animation: Box3Animation 2s linear infinite;
}

.box4 {
    animation: Box4Animation 2s linear infinite;
    -webkit-animation: Box4Animation 2s linear infinite;
}

@keyframes Box1Animation {
    0% {
        opacity: 1;
    }

    25% {
        opacity: 0.2
    }

    50% {
        opacity: 0.2
    }

    75% {
        opacity: 0.2
    }

    100% {
        opacity: 0.2
    }
}

@-webkit-keyframes Box1Animation {
    0% {
        opacity: 1;
    }

    25% {
        opacity: 0.2
    }

    50% {
        opacity: 0.2
    }

    75% {
        opacity: 0.2
    }

    100% {
        opacity: 0.2
    }
}
/*Loader*/

@keyframes Box2Animation {
    0% {
        opacity: 0.2
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 0.2
    }

    75% {
        opacity: 0.2
    }

    100% {
        opacity: 0.2
    }
}

@-webkit-keyframes Box2Animation {
    0% {
        opacity: 0.2
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 0.2
    }

    75% {
        opacity: 0.2
    }

    100% {
        opacity: 0.2
    }
}

@keyframes Box3Animation {
    0% {
        opacity: 0.2
    }

    25% {
        opacity: 0.2
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0.2
    }

    100% {
        opacity: 0.2
    }
}

@-webkit-keyframes Box3Animation {
    0% {
        opacity: 0.2
    }

    25% {
        opacity: 0.2
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0.2
    }

    100% {
        opacity: 0.2
    }
}

@keyframes Box4Animation {
    0% {
        opacity: 0.2
    }

    25% {
        opacity: 0.2
    }

    50% {
        opacity: 0.2
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0.2
    }
}

@-webkit-keyframes Box4Animation {
    0% {
        opacity: 0.2
    }

    25% {
        opacity: 0.2
    }

    50% {
        opacity: 0.2
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0.2
    }
}

.ui-autocomplete-loading {
    background: white url("../image/loader.gif") right 5px center no-repeat;
    background-size: contain;
}
