#progressPopup {
    display: none;
}

    #progressPopup.show {
        display: block;
        position: fixed;
        vertical-align: middle;
        text-align: center;
        z-index: 999999;
        opacity: 1;
        filter: alpha(opacity=90);
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        /*background-color: #000;
        background-repeat: no-repeat;
        background-position: center;*/
    }

        #progressPopup.show::before {
            position: absolute;
            content: '';
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.25);
        }

#loader {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-shadow: 0 1px 0 #000;
    --border-angle: 0turn;
    --main-bg: conic-gradient( from var(--border-angle), #213, #08f 5%, #112 60%, #213 95% );
    border: solid 5px transparent;
    --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #08f, #f03 99%, transparent);
    background: var(--main-bg) padding-box, var(--gradient-border) border-box, var(--main-bg) border-box;
    background-position: center center;
    /*-webkit-animation: bg-spin 1s linear infinite;*/
    animation: bg-spin 7.5s linear infinite;
    z-index: 99999;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

@-webkit-keyframes bg-spin {
    to {
        --border-angle: 1turn;
    }
}

@keyframes bg-spin {
    to {
        --border-angle: 1turn;
    }
}

@property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}

#loader img {
    background-color: rgba(255,255,255,1);
    border-radius: 50%;
}

/*#loader {
    position: relative;
    width: 124px;
    height: 124px;
    background: url(../../Images/loaderDarpan.gif);
    background-size: 100%;
    background-repeat: no-repeat;
    left: 48%;
    top: 35%;
    background-color: #fff;
    border-radius: 50%;
    opacity: 1;
    z-index: 99999;
}*/

/*===========================================================================================*/
/*===========================================================================================*/
/*===========================================================================================*/

/*#loader {
    position: relative;
    width: 5em;
    height: 5em;
    transform: rotate(165deg);
}

@media all and (max-width:479px) {
    #loader:before, #loader:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 64px;
        height: 64px;
        border-radius: 0.25em;
        transform: translate(0%, 0%);
    }

    #loader:before {
        background-image: url('../img/balls-spinner.gif');
        background-size: 64px 64px;
        background-repeat: no-repeat;
    }

    #loader:after {
        background-image: url('../img/balls-spinner.gif');
        background-size: 64px 64px;
        background-repeat: no-repeat;
    }
}

@media all and (min-width:480px) {
    #loader:before, #loader:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 5em;
        height: 5em;
        border-radius: 0.25em;
        transform: translate(-50%, -50%);
    }

    #loader:before {
        animation: before 1s infinite;
    }

    #loader:after {
        animation: after 1s infinite;
    }

    @keyframes before {
        0% {
            width: 0.5em;
            box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
        }

        35% {
            width: 2.5em;
            box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
        }

        70% {
            width: 0.5em;
            box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
        }

        100% {
            box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
        }
    }

    @keyframes after {
        0% {
            height: 0.5em;
            box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
        }

        35% {
            height: 2.5em;
            box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
        }

        70% {
            height: 0.5em;
            box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
        }

        100% {
            box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
        }
    }
}

#loader {
    position: absolute;
    top: calc(50% - 1.25em);
    left: calc(50% - 1.25em);
}*/

/*===========================================================================================*/
/*===========================================================================================*/
/*===========================================================================================*/

#loader-1 .loader-container {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    filter: url('#goo');
    animation: rotate-move 2s ease-in-out infinite;
}

#loader-1 .loader-dot {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#loader-1 .loader-dot-3 {
    background-color: #f74d75;
    animation: dot-3-move 2s ease infinite, index 6s ease infinite;
}

#loader-1 .loader-dot-2 {
    background-color: #10beae;
    animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
}

#loader-1 .loader-dot-1 {
    background-color: #ffe386;
    animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
}

@keyframes dot-3-move {
    20% {
        transform: scale(1);
    }

    45% {
        transform: translateY(-18px) scale(.45);
    }

    60% {
        transform: translateY(-90px) scale(.45);
    }

    80% {
        transform: translateY(-90px) scale(.45);
    }

    100% {
        transform: translateY(0px) scale(1);
    }
}

@keyframes dot-2-move {
    20% {
        transform: scale(1);
    }

    45% {
        transform: translate(-16px, 12px) scale(.45);
    }

    60% {
        transform: translate(-80px, 60px) scale(.45);
    }

    80% {
        transform: translate(-80px, 60px) scale(.45);
    }

    100% {
        transform: translateY(0px) scale(1);
    }
}

@keyframes dot-1-move {
    20% {
        transform: scale(1);
    }

    45% {
        transform: translate(16px, 12px) scale(.45);
    }

    60% {
        transform: translate(80px, 60px) scale(.45);
    }

    80% {
        transform: translate(80px, 60px) scale(.45);
    }

    100% {
        transform: translateY(0px) scale(1);
    }
}

@keyframes rotate-move {
    55% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    80% {
        transform: translate(-50%, -50%) rotate(360deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes index {
    0%, 100% {
        z-index: 3;
    }

    33.3% {
        z-index: 2;
    }

    66.6% {
        z-index: 1;
    }
}

/*===========================================================================================*/
/*===========================================================================================*/
/*===========================================================================================*/

@keyframes g_bar1 {
    0%,27.67% {
        transform: translateY(60px);
    }

    36.60% {
        transform: translateY(68px);
    }

    81.25%,100% {
        transform: translateY(-100px);
    }
}

@keyframes g_bar2 {
    0%,30.35% {
        transform: translateY(150px);
    }

    85.71% {
        transform: translateY(68px);
    }

    76.78%,94.64%,100% {
        transform: translateY(60px);
    }
}

@keyframes r_bar1 {
    0%,14.28% {
        transform: translateY(30px);
    }

    23.21% {
        transform: translateY(38px);
    }

    81.25%,100% {
        transform: translateY(-120px);
    }
}

@keyframes r_bar2 {
    0%,30.35% {
        transform: translateY(130px);
    }

    81.25% {
        transform: translateY(38px);
    }

    72.32%,90.17%,100% {
        transform: translateY(30px);
    }
}

@keyframes b_bar1 {
    0%,3.47% {
        transform: translateY(0);
    }

    11.6% {
        transform: translateY(10px);
    }

    81.25%,100% {
        transform: translateY(-145px);
    }
}

@keyframes b_bar2 {
    0%,30.34% {
        transform: translateY(100px);
    }

    66.7%,88.92%,100% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(10px);
    }
}

.loadingSpan {
    display: inline-block;
    position: relative;
    height: 85px;
    top: calc((100% - 85px) / 2) !important;
    transform: scale(0.75);
}

    .loadingSpan span {
        position: absolute;
        height: 85px;
        width: 15px;
        bottom: 0;
        outline: inset;
        outline-color: transparent;
    }

    .loadingSpan > span:nth-of-type(1) {
        height: 85px;
        width: 15px;
        overflow: hidden;
        z-index: 1;
        margin-left: 0px;
    }

        .loadingSpan > span:nth-of-type(1) span:nth-child(1) {
            background-color: #30beae;
            transform: translateY(60px);
            -webkit-animation: g_bar1 1.86s ease-in-out infinite;
            -moz-animation: g_bar1 1.86s ease-in-out infinite;
            animation: g_bar1 1.86s ease-in-out infinite;
        }

        .loadingSpan > span:nth-of-type(1) span:nth-child(2) {
            background-color: #30beae;
            transform: translateY(60px);
            -webkit-animation: g_bar2 1.86s ease-in-out infinite;
            -moz-animation: g_bar2 1.86s ease-in-out infinite;
            animation: g_bar2 1.86s ease-in-out infinite;
        }

    .loadingSpan > span:nth-of-type(2) {
        height: 85px;
        width: 15px;
        overflow: hidden;
        z-index: 1;
        margin-left: 15px;
    }

        .loadingSpan > span:nth-of-type(2) span:nth-child(1) {
            background-color: #e36b6b;
            transform: translateY(30px);
            -webkit-animation: r_bar1 1.86s ease-in-out infinite;
            -moz-animation: r_bar1 1.86s ease-in-out infinite;
            animation: r_bar1 1.86s ease-in-out infinite;
        }

        .loadingSpan > span:nth-of-type(2) span:nth-child(2) {
            background-color: #e36b6b;
            transform: translateY(30px);
            -webkit-animation: r_bar2 1.86s ease-in-out infinite;
            -moz-animation: r_bar2 1.86s ease-in-out infinite;
            animation: r_bar2 1.86s ease-in-out infinite;
        }

    .loadingSpan > span:nth-of-type(3) {
        height: 85px;
        width: 15px;
        overflow: hidden;
        z-index: 1;
        margin-left: 30px;
    }

        .loadingSpan > span:nth-of-type(3) span:nth-child(1) {
            background-color: #448acb;
            transform: translateY(0);
            -webkit-animation: b_bar1 1.86s ease-in-out infinite;
            -moz-animation: b_bar1 1.86s ease-in-out infinite;
            animation: b_bar1 1.86s ease-in-out infinite;
        }

        .loadingSpan > span:nth-of-type(3) span:nth-child(2) {
            background-color: #448acb;
            transform: translateY(0);
            -webkit-animation: b_bar2 1.86s ease-in-out infinite;
            -moz-animation: b_bar2 1.86s ease-in-out infinite;
            animation: b_bar2 1.86s ease-in-out infinite;
        }