@-webkit-keyframes awg_valid {
    from {
        background-color: orange;
    }

    to {
        background-color: inherit;
    }
}

@-moz-keyframes awg_valid {
    from {
        background-color: orange;
    }

    to {
        background-color: inherit;
    }
}

@-o-keyframes awg_valid {
    from {
        background-color: orange;
    }

    to {
        background-color: inherit;
    }
}

@keyframes awg_valid {
    from {
        background-color: orange;
    }

    to {
        background-color: inherit;
    }
}

.awg_valid {
    -webkit-animation: awg_valid 1s infinite; /* Safari 4+ */
    -moz-animation: awg_valid 1s infinite; /* Fx 5+ */
    -o-animation: awg_valid 1s infinite; /* Opera 12+ */
    animation: awg_valid 1s infinite; /* IE 10+ */
}




@-webkit-keyframes awg_invalid {
    from {
        background-color: red;
    }

    to {
        background-color: inherit;
    }
}

@-moz-keyframes awg_invalid {
    from {
        background-color: red;
    }

    to {
        background-color: inherit;
    }
}

@-o-keyframes awg_invalid {
    from {
        background-color: red;
    }

    to {
        background-color: inherit;
    }
}

@keyframes awg_invalid {
    from {
        background-color: red;
    }

    to {
        background-color: inherit;
    }
}

.awg_invalid {
    -webkit-animation: awg_invalid 1s infinite; /* Safari 4+ */
    -moz-animation: awg_invalid 1s infinite; /* Fx 5+ */
    -o-animation: awg_invalid 1s infinite; /* Opera 12+ */
    animation: awg_invalid 1s infinite; /* IE 10+ */
}

.awg_loading, .awg_loading:focus, .awg_loading:hover {
    position: relative;
    color: rgba(80, 51, 14, 0.15) !important;
    text-shadow: none;
    background-color: rgb(255 255 255 / 90%) !important;
    border-color: #e4e4e4;
    transition: color 1s, background-color 0.2s, border-color 1s, background-image 10s;
    cursor: progress;
}

    .awg_loading:after {
        content: "";
        display: block;
        left: 0px;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        background-image: url("css/loading.gif");
        background-size: auto;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 1;
        transition: opacity 4s;
        transition: background 5s linear;
        -webkit-animation: awg_load_fadein 4s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: awg_load_fadein 4s; /* Firefox < 16 */
        -ms-animation: awg_load_fadein 4s; /* Internet Explorer */
        -o-animation: awg_load_fadein 4s; /* Opera < 12.1 */
        animation: awg_load_fadein 4s;
    }

    .awg_loading.awg_loading_pink:after {
        background-image: url("css/loading_pink.gif");
    }

    .awg_loading.awg_loading_blue:after {
        background-image: url("css/loading_blue.gif");
    }




@keyframes awg_load_fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes awg_load_fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes awg_load_fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-ms-keyframes awg_load_fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-o-keyframes awg_load_fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}