/**=====================
    Loader CSS Start
==========================**/


/* loader.css */




.sgrc-loader-wrapper {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

    .sgrc-loader-wrapper.active {
        opacity: 1;
        pointer-events: all;
    }

.sgrc-loader {
    width: 300px;
    height: 100px;
    position: relative;
}

    .sgrc-loader span {
        background-color: #e0e0e0; /* light gray fallback */
        height: 8px;
        width: 8px;
        border-radius: 80px;
        transform: translateX(-50%) translateY(-50%);
        position: absolute;
        top: 52.5%;
        left: 150px;
    }

        .sgrc-loader span:nth-child(1) {
            left: 120px;
            animation: sgrc-waveUp 2s ease-in-out infinite, sgrc-smallExtend 2s ease-in-out infinite;
        }

        .sgrc-loader span:nth-child(2) {
            left: 135px;
            animation: sgrc-waveUp 2s ease-in-out infinite, sgrc-largeExtend 2s ease-in-out infinite;
            animation-delay: 0.15s;
        }

        .sgrc-loader span:nth-child(3) {
            animation: sgrc-waveUp 2s ease-in-out infinite, sgrc-smallExtend 2s ease-in-out infinite;
            animation-delay: 0.3s;
        }

        .sgrc-loader span:nth-child(4) {
            left: 165px;
            animation: sgrc-waveUp 2s ease-in-out infinite, sgrc-largeExtend 2s ease-in-out infinite;
            animation-delay: 0.45s;
        }

        .sgrc-loader span:nth-child(5) {
            left: 180px;
            animation: sgrc-waveUp 2s ease-in-out infinite, sgrc-smallExtend 2s ease-in-out infinite;
            animation-delay: 0.6s;
        }

@keyframes sgrc-waveUp {
    0%, 15% {
        top: 50%;
    }

    45%, 65% {
        top: 42.5%;
    }

    85%, 100% {
        top: 50%;
    }
}

@keyframes sgrc-smallExtend {
    0%, 8% {
        background-color: #e0e0e0;
        height: 8px;
    }

    14%, 34% {
        background-color: #7366ff;
        height: 40.5px;
    }

    46%, 100% {
        background-color: #e0e0e0;
        height: 8px;
    }
}

@keyframes sgrc-largeExtend {
    0%, 8% {
        background-color: #e0e0e0;
        height: 8px;
    }

    14%, 34% {
        background-color: #7366ff;
        height: 60.5px;
    }

    46%, 100% {
        background-color: #e0e0e0;
        height: 8px;
    }
}



/**=====================
    Loader CSS End
==========================**/