@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500&subset=cyrillic");#animated-loader {
    height: 3px;
    width: 100%;
    background: url("/project/img/line.png");
    background-repeat: repeat;
    position: fixed;
    top: 0;
    left: 0;
    background-size: 160px;
    animation: animate-loader 20s infinite linear;
    pointer-events: none;
    z-index: 100000;
    transform: translateY(-30px);
    transition: all 1s ease-in-out, opacity 1s ease-in-out;
    animation-play-state: running;
    opacity: 0
}

#animated-loader.show {
    transform: translateY(0px);
    transition: all .1s linear, opacity 0.01s ease-in-out;
    opacity: 1
}

#animated-loader.success {
    background: #00bf00 !important;
    background: url("/project/img/loader-success.png") !important;
    animation-play-state: paused
}

#animated-loader.fail {
    background: #cb0000 !important;
    background: url("/project/img/loader-fail.png") !important;
    animation-play-state: paused
}

@keyframes animate-loader {
    from {
        background-position-x: -100%
    }

    to {
        background-position-x: 100%
    }
}

body.modal-body-open #animated-loader {
    background: url("/project/img/line-white.png")
}