/* ======================================================
    Loader Overlay
====================================================== */

#app-loader{

    position:fixed;

    inset:0;

    z-index:9999999;

}

.loader-overlay{

    width:100%;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.70);

    backdrop-filter:blur(4px);

    animation:loaderFade .20s ease;

}

/* ======================================================
    Card
====================================================== */

.loader-card{

    width:320px;

    background:#fff;

    border-radius:16px;

    padding:35px 30px;

    text-align:center;

    box-shadow:

        0 15px 40px rgba(0,0,0,.18);

}

/* ======================================================
    Mofi Loader
====================================================== */

.loader-mofi{

    position:relative;

    width:70px;

    height:70px;

    margin:0 auto 20px;

}

.loader-outter{

    position:absolute;

    width:70px;

    height:70px;

    border-radius:50%;

    border:4px solid #e5e7eb;

    border-top:4px solid #2b5cc4;

    animation:loaderRotate 1.1s linear infinite;

}

.loader-inner{

    position:absolute;

    top:12px;

    left:12px;

    width:46px;

    height:46px;

    border-radius:50%;

    border:4px solid transparent;

    border-bottom:4px solid #16a34a;

    animation:loaderRotateReverse .9s linear infinite;

}

.loader-inner-1{

    position:absolute;

    top:24px;

    left:24px;

    width:22px;

    height:22px;

    background:#2b5cc4;

    border-radius:50%;

    animation:loaderPulse 1s ease infinite;

}

/* ======================================================
    Text
====================================================== */

.loader-title{

    font-size:19px;

    font-weight:600;

    color:#222;

    margin-bottom:8px;

}

.loader-message{

    font-size:14px;

    color:#666;

    line-height:1.6;

}

/* ======================================================
    Hide
====================================================== */

.loader-hide{

    animation:loaderOut .25s forwards;

}

/* ======================================================
    Animations
====================================================== */

@keyframes loaderRotate{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes loaderRotateReverse{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0);

    }

}

@keyframes loaderPulse{

    0%{

        transform:scale(.8);

        opacity:.7;

    }

    50%{

        transform:scale(1.1);

        opacity:1;

    }

    100%{

        transform:scale(.8);

        opacity:.7;

    }

}

@keyframes loaderFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes loaderOut{

    to{

        opacity:0;

    }

}