/****https://uiverse.io/forms ******/

/*******************************/
/***** loader-container  *******/
/*******************************/
.loader-container {
    margin: 100px auto 0; /* top right  bottom left;*/
    padding: 0 80px 0 0; /* top right  bottom left;*/
    width: 200px;
    text-align: center;
}

/*******************************/
/***** spinner loader-1  *******/
/*******************************/
.loader-1 {
    --cell-size: 52px;
    --cell-spacing: 1px;
    --cells: 3;
    --total-size: calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing)));
    display: flex;
    flex-wrap: wrap;
    width: var(--total-size);
    height: var(--total-size);
}

.cell {
    flex: 0 0 var(--cell-size);
    margin: var(--cell-spacing);
    background-color: transparent;
    box-sizing: border-box;
    border-radius: 4px;
    animation: 1.5s ripple ease infinite;
}

    .cell.d-1 {
        animation-delay: 100ms;
    }

    .cell.d-2 {
        animation-delay: 200ms;
    }

    .cell.d-3 {
        animation-delay: 300ms;
    }

    .cell.d-4 {
        animation-delay: 400ms;
    }

    .cell:nth-child(1) {
        --cell-color: #00FF87;
    }

    .cell:nth-child(2) {
        --cell-color: #0CFD95;
    }

    .cell:nth-child(3) {
        --cell-color: #17FBA2;
    }

    .cell:nth-child(4) {
        --cell-color: #23F9B2;
    }

    .cell:nth-child(5) {
        --cell-color: #30F7C3;
    }

    .cell:nth-child(6) {
        --cell-color: #3DF5D4;
    }

    .cell:nth-child(7) {
        --cell-color: #45F4DE;
    }

    .cell:nth-child(8) {
        --cell-color: #53F1F0;
    }

    .cell:nth-child(9) {
        --cell-color: #60EFFF;
    }

@keyframes ripple {
    0% {
        background-color: transparent;
    }

    30% {
        background-color: var(--cell-color);
    }

    60% {
        background-color: transparent;
    }

    100% {
        background-color: transparent;
    }
}




/*******************************/
/***** spinner loader-2  *******/
/*******************************/
.loader-2 {
    --dim: 3rem;
    width: var(--dim);
    height: var(--dim);
    position: relative;
    animation: spin988 2s linear infinite;
}

.loader-2 .circle {
--color: #333;
--dim: 1.2rem;
width: var(--dim);
height: var(--dim);
background-color: var(--color);
border-radius: 50%;
position: absolute;
}

.loader-2 .circle:nth-child(1) {
    top: 0;
    left: 0;
}

.loader-2 .circle:nth-child(2) {
    top: 0;
    right: 0;
}

.loader-2 .circle:nth-child(3) {
    bottom: 0;
    left: 0;
}

.loader-2 .circle:nth-child(4) {
    bottom: 0;
    right: 0;
}

@keyframes spin988 {
    0% {
        transform: scale(1) rotate(0);
    }

    20%, 25% {
        transform: scale(1.3) rotate(90deg);
    }

    45%, 50% {
        transform: scale(1) rotate(180deg);
    }

    70%, 75% {
        transform: scale(1.3) rotate(270deg);
    }

    95%, 100% {
        transform: scale(1) rotate(360deg);
    }
}


/*******************************/
/***** spinner loader-3  *******/
/*******************************/
.loader-3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
}

.dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    border-radius: 50%;
    -webkit-animation: dot-pulse2 1.5s ease-in-out infinite;
    animation: dot-pulse2 1.5s ease-in-out infinite;
}

.dot-1 {
    background-color: #4285f4;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.dot-2 {
    background-color: #34a853;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.dot-3 {
    background-color: #fbbc05;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.dot-4 {
    background-color: #ea4335;
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}

.dot-5 {
    background-color: #4285f4;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

@keyframes dot-pulse2 {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0.5;
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0.5;
    }
}