/* ==========================================================
   GENERATION LOADING OVERLAY
========================================================== */

.png-loading-overlay{

    display:none;

    position:fixed;

    top:0;
    left:0;
    right:0;
    bottom:0;

    background:rgba(15,23,42,.55);

    z-index:10000;

    align-items:center;

    justify-content:center;

    padding:24px;

}

.png-loading-overlay.active{

    display:flex;

}

.png-loading-card{

    background:#fff;

    border-radius:20px;

    padding:44px 40px;

    text-align:center;

    max-width:360px;

    width:100%;

    box-shadow:0 24px 60px rgba(15,23,42,.28);

}

.png-loading-spinner{

    width:56px;

    height:56px;

    margin:0 auto 22px;

    border-radius:50%;

    border:5px solid #EDE9FE;

    border-top-color:#7C3AED;

    animation:png-spin .85s linear infinite;

}

@keyframes png-spin{

    to{
        transform:rotate(360deg);
    }

}

.png-loading-message{

    font-size:15.5px;

    font-weight:700;

    color:#111827;

    min-height:24px;

    transition:opacity .25s ease;

}

.png-loading-message.fade{

    opacity:0;

}

.png-loading-sub{

    font-size:13px;

    color:#94A3B8;

    margin-top:10px;

}

.png-loading-dots span{

    display:inline-block;

    width:6px;

    height:6px;

    margin:0 3px;

    border-radius:50%;

    background:#C4B5FD;

    animation:png-dot-pulse 1.2s ease-in-out infinite;

}

.png-loading-dots span:nth-child(2){
    animation-delay:.15s;
}

.png-loading-dots span:nth-child(3){
    animation-delay:.3s;
}

@keyframes png-dot-pulse{

    0%, 80%, 100%{
        opacity:.3;
        transform:scale(.8);
    }

    40%{
        opacity:1;
        transform:scale(1.15);
    }

}