/* =========================================================
   DASHBOARD PROJECT - LOADING OVERLAY
   ========================================================= */

#dashboardLoading.dashboard-loading {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #071225 !important;

    z-index: 999999 !important;

    padding: 20px !important;

    box-sizing: border-box !important;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}


/* =========================================================
   HIDDEN
   ========================================================= */

#dashboardLoading.dashboard-loading.is-hidden {

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;
}


/* =========================================================
   CARD
   ========================================================= */

#dashboardLoading .loading-card {

    position: relative !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 400px !important;

    max-width: calc(100vw - 40px) !important;

    min-height: 250px !important;

    padding: 32px !important;

    margin: 0 !important;

    background: #ffffff !important;

    border-radius: 22px !important;

    box-sizing: border-box !important;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .30) !important;

    overflow: hidden !important;
}


/* =========================================================
   CONTENT
   ========================================================= */

#dashboardLoading .loading-content {

    display: block !important;

    width: 100% !important;

    max-width: 330px !important;

    margin: 0 auto !important;

    padding: 0 !important;

    text-align: center !important;

    box-sizing: border-box !important;
}


/* =========================================================
   TITLE
   ========================================================= */

#dashboardLoading .loading-title {

    display: block !important;

    margin: 0 0 9px 0 !important;

    padding: 0 !important;

    color: #2448a6 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 27px !important;

    font-weight: 700 !important;

    line-height: 1.2 !important;

    text-align: center !important;
}


/* =========================================================
   MESSAGE
   ========================================================= */

#dashboardLoading .loading-message {

    display: block !important;

    min-height: 24px !important;

    margin: 0 0 20px 0 !important;

    padding: 0 !important;

    color: #52627c !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 16px !important;

    font-weight: 400 !important;

    line-height: 1.4 !important;

    text-align: center !important;
}


/* =========================================================
   PROGRESS WRAPPER
   ========================================================= */

#dashboardLoading .loading-progress-wrapper {

    display: block !important;

    width: 100% !important;

    height: 10px !important;

    margin: 0 !important;

    padding: 0 !important;

    background: #e5e7eb !important;

    border-radius: 999px !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* =========================================================
   PROGRESS BAR
   ========================================================= */

#dashboardLoading .loading-progress-bar {

    display: block !important;

    width: 10%;

    height: 100% !important;

    min-height: 10px !important;

    margin: 0 !important;

    padding: 0 !important;

    background: #3168e8 !important;

    border-radius: 999px !important;

    transition:
        width .35s ease !important;

    box-sizing: border-box !important;
}


/* =========================================================
   PERCENT
   ========================================================= */

#dashboardLoading .loading-percent {

    display: block !important;

    margin: 14px 0 0 0 !important;

    padding: 0 !important;

    color: #3168e8 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 34px !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    text-align: center !important;
}


/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 768px) {

    #dashboardLoading.dashboard-loading {

        padding: 16px !important;

    }


    #dashboardLoading .loading-card {

        width: 360px !important;

        max-width: calc(100vw - 32px) !important;

        min-height: 230px !important;

        padding: 28px 25px !important;

        border-radius: 20px !important;

    }


    #dashboardLoading .loading-content {

        max-width: 300px !important;

    }


    #dashboardLoading .loading-title {

        font-size: 25px !important;

    }


    #dashboardLoading .loading-message {

        font-size: 15px !important;

        margin-bottom: 18px !important;

    }


    #dashboardLoading .loading-progress-wrapper {

        height: 9px !important;

    }


    #dashboardLoading .loading-progress-bar {

        min-height: 9px !important;

    }


    #dashboardLoading .loading-percent {

        font-size: 32px !important;

        margin-top: 13px !important;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

    #dashboardLoading.dashboard-loading {

        padding: 14px !important;

    }


    #dashboardLoading .loading-card {

        width: 320px !important;

        max-width: calc(100vw - 28px) !important;

        min-height: 210px !important;

        padding: 25px 20px !important;

        border-radius: 18px !important;

    }


    #dashboardLoading .loading-content {

        max-width: 270px !important;

    }


    #dashboardLoading .loading-title {

        font-size: 22px !important;

        margin-bottom: 8px !important;

    }


    #dashboardLoading .loading-message {

        font-size: 14px !important;

        min-height: 20px !important;

        margin-bottom: 17px !important;

    }


    #dashboardLoading .loading-progress-wrapper {

        height: 8px !important;

    }


    #dashboardLoading .loading-progress-bar {

        min-height: 8px !important;

    }


    #dashboardLoading .loading-percent {

        font-size: 30px !important;

        margin-top: 12px !important;

    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    #dashboardLoading .loading-card {

        width: 290px !important;

        max-width: calc(100vw - 24px) !important;

        min-height: 195px !important;

        padding: 22px 18px !important;

        border-radius: 17px !important;

    }


    #dashboardLoading .loading-content {

        max-width: 245px !important;

    }


    #dashboardLoading .loading-title {

        font-size: 20px !important;

    }


    #dashboardLoading .loading-message {

        font-size: 13px !important;

        margin-bottom: 15px !important;

    }


    #dashboardLoading .loading-percent {

        font-size: 28px !important;

    }

}