/* =========================================================
   VDays CRM - Common Application Loader
   ========================================================= */


/* ---------------------------------------------------------
   Full Screen Loader Overlay
   --------------------------------------------------------- */

.crm-loader-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /*
       Dark transparent layer over the existing page
    */
    background: rgba(15, 48, 65, 0.45);
    /*
       Blur everything behind the loader
    */
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    /*
       Keep loader above everything else
    */
    z-index: 99999;
    /*
       Hidden by default
    */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}


    /* ---------------------------------------------------------
   Active / Visible State
   --------------------------------------------------------- */

    .crm-loader-overlay.active {
        opacity: 1;
        visibility: visible;
    }


/* ---------------------------------------------------------
   Circular Loader
   --------------------------------------------------------- */

.crm-circular-loader {
    position: relative;
    width: 125px;
    height: 125px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /*
       Very subtle white background
       so the circle remains visible over the blurred image
    */
    background: rgba(255, 255, 255, 0.12);
    /*
       Subtle outer shadow
    */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.20);
}


    /* ---------------------------------------------------------
   Main Animated Circular Ring
   --------------------------------------------------------- */

    .crm-circular-loader::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        /*
       Faint complete ring
    */
        border: 5px solid rgba(255, 255, 255, 0.25);
        /*
       Teal animated portion
    */
        border-top-color: #1689a7;
        border-right-color: #1689a7;
        /*
       Circular rotation
    */
        animation: crmLoaderSpin 1.1s linear infinite;
    }


    /* ---------------------------------------------------------
   Inner Ring
   --------------------------------------------------------- */

    .crm-circular-loader::after {
        content: "";
        position: absolute;
        inset: 10px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.35);
    }


/* ---------------------------------------------------------
   Loading Text
   --------------------------------------------------------- */

.crm-loader-text {
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-align: center;
    white-space: nowrap;
    /*
       Small shadow so text remains readable
       over the background
    */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
}


    /* ---------------------------------------------------------
   Animated Loading Dots
   --------------------------------------------------------- */

    .crm-loader-text::after {
        content: "";
        display: inline-block;
        width: 18px;
        text-align: left;
        animation: crmLoadingDots 1.4s infinite;
    }


/* ---------------------------------------------------------
   Ring Rotation Animation
   --------------------------------------------------------- */

@keyframes crmLoaderSpin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* ---------------------------------------------------------
   Loading Dots Animation
   --------------------------------------------------------- */

@keyframes crmLoadingDots {

    0% {
        content: "";
    }

    25% {
        content: ".";
    }

    50% {
        content: "..";
    }

    75% {
        content: "...";
    }

    100% {
        content: "";
    }
}


/* ---------------------------------------------------------
   Mobile Adjustment
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .crm-circular-loader {
        width: 110px;
        height: 110px;
    }

        .crm-circular-loader::before {
            border-width: 4px;
        }

    .crm-loader-text {
        font-size: 13px;
    }
}