/*!
 * exdi-angular-loading.css
 * http://www.exponencialdigital.com/
 * Version: 1.1.4
 *
 * Copyright 2017 Exponencial Digital
 * Released under the MIT license
 */

#exdi-loading {
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    transition-duration: 0.5s;

    opacity: 0;
    visibility: hidden;
    display: block !important;
}

#exdi-loading.on {
    opacity: 1;
    visibility: visible;
}

#exdi-loading .loader {
    position: absolute;
    left: 50%;
    top: 15px;
    margin-left: -20px;
    height: 40px;
    width: 40px;
    border-radius: 6px;
}

#exdi-loading #loadingcontent {
    color: white;
    display: block;
    left: 50%;
    position: relative;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
}

#exdi-loading > #loadingcontent > span {
    display: block;
    font-weight: bold;
    margin: 0 auto;
    text-transform: uppercase;
}
#exdi-loading > #loadingcontent > span[class*="l-"] {
    animation: 4s cubic-bezier(0.03, 0.615, 0.995, 0.415) 0s normal both infinite running loader;
    background: white none repeat scroll 0 0;
    border-radius: 100%;
    display: inline-block;
    height: 4px;
    margin: 12px 2px;
    width: 4px;
}
#exdi-loading > #loadingcontent > span.l-1 { animation-delay: 1s;   }
#exdi-loading > #loadingcontent > span.l-2 { animation-delay: 0.8s; }
#exdi-loading > #loadingcontent > span.l-3 { animation-delay: 0.6s; }
#exdi-loading > #loadingcontent > span.l-4 { animation-delay: 0.4s; }
#exdi-loading > #loadingcontent > span.l-5 { animation-delay: 0.2s; }

@keyframes loader {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 0;
    }
}

#admin-panel > md-content #exdi-loading {
    position: fixed;
    left: -15%;
    width: 150%;
}

#admin-panel > md-content #exdi-loading #loadingcontent {
    color: white;
    display: block;
    left: 50%;
    position: relative;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    float: left;
}