﻿.ajax-backdrop {
    display: none;
    position: fixed;
    z-index: 100;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    animation: backdropshow .25s forwards;
}

.ajaxwait {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 1px 0 rgba(60,64,67,.38),0 1px 3px 0 rgba(60,64,67,1);
    border-radius: 10px;
    width: 0px;
    height: 0px;
    background-color: white;
    animation: ajaxshow .25s forwards;
    animation-delay: .25s;

}

.ajaxwait p {
    padding: 5px 9px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    opacity: 0;
    animation: textshow .5s forwards;
    animation-delay: .5s;
    font-size: 16px!important;
}

.ajaxclose1 {
    animation: texthide .25s forwards!important;
}

.ajaxclose2 {
    animation: ajaxhide .125s forwards!important;
}

.ajaxclose3 {
    animation: backdrophide .125s forwards!important;
}

@keyframes textshow {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes texthide {
    0%   {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes backdropshow {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes backdrophide {
    0%   {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes ajaxshow {
    0%   {width: 0px; height: 0px;}
    100% {width: 247px; height: 60px;}
}

@keyframes ajaxhide {
    0%   {width: 247px; height: 60px;}
    100% {width: 0px; height: 0px;}
}