.loaderContainer{
    margin-top:50px;
}

.loader {
    display: grid;
    grid-template-columns: 0fr 0fr 0fr;
    grid-gap: 8px;
    justify-content:center;
}
.loader div {
    width: 25px;
    height: 25px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--main-color);
    border-radius: 50%;
}
.loader div:before,
.loader div:after {
    content: '';
    width: 25px;
    height: 25px;
    position: absolute;
    border-radius: 50%;
}
.loader div:before {
    background-color: var(--white-color);
    animation: scale-1 2400ms linear infinite;
}
.loader div:after {
    background-color: var(--main-color);
    animation: scale-2 2400ms linear infinite;
}
.loader div:nth-child(2):before,
.loader div:nth-child(2):after {
    animation-delay: 300ms;
}
.loader div:nth-child(3):before,
.loader div:nth-child(3):after {
    animation-delay: 600ms;
}
.loader div:nth-child(4):before,
.loader div:nth-child(4):after {
    animation-delay: 900ms;
}
.loader div:nth-child(5):before,
.loader div:nth-child(5):after {
    animation-delay: 1200ms;
}
.loader div:nth-child(6):before,
.loader div:nth-child(6):after {
    animation-delay: 1500ms;
}
.loader div:nth-child(7):before,
.loader div:nth-child(7):after {
    animation-delay: 1800ms;
}
.loader div:nth-child(8):before,
.loader div:nth-child(8):after {
    animation-delay: 2100ms;
}
.loader div:nth-child(9):before,
.loader div:nth-child(9):after {
    animation-delay: 2400ms;
}
@-moz-keyframes scale-1 {
    0% {
        transform: scale(0);
        z-index: 2;
    }
    50%, 100% {
        transform: scale(1);
    }
}
@-webkit-keyframes scale-1 {
    0% {
        transform: scale(0);
        z-index: 2;
    }
    50%, 100% {
        transform: scale(1);
    }
}
@-o-keyframes scale-1 {
    0% {
        transform: scale(0);
        z-index: 2;
    }
    50%, 100% {
        transform: scale(1);
    }
}
@keyframes scale-1 {
    0% {
        transform: scale(0);
        z-index: 2;
    }
    50%, 100% {
        transform: scale(1);
    }
}
@-moz-keyframes scale-2 {
    0%, 50% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@-webkit-keyframes scale-2 {
    0%, 50% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@-o-keyframes scale-2 {
    0%, 50% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes scale-2 {
    0%, 50% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
.endWaiting{
    margin-top: 20px !important;
}


.videoLoaderHolder{
    position: absolute;
    display: none;
    width: 100%;
    height: 300px;
    z-index: 99;
    justify-content: center;
    align-items: center;
    top: 65px;
}
.videoLoader {
    --b: 10px;  /* border thickness */
    --n: 10;    /* number of dashes*/
    --g: 10deg; /* gap  between dashes*/
    --c: white;   /* the color */

    width:75px; /* size */
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 1px; /* get rid of bad outlines */
    background: conic-gradient(#0000,var(--c)) content-box;
    --_m: /* we use +/-1deg between colors to avoid jagged edges */
      repeating-conic-gradient(#0000 0deg,
         #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
         #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
      radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
    -webkit-mask: var(--_m);
            mask: var(--_m);
    -webkit-mask-composite: destination-in;
            mask-composite: intersect;
    animation: load 1s infinite steps(var(--n));
  }
  @keyframes load {to{transform: rotate(1turn)}}