/* ALL LOADERS */
.loader.simple-loader {
    /*background-color: transparent !important;*/
    background-color: rgba(0,0,0,.6) !important;
}
    .loader {
    width: 100px;
    height: 100px;
    /*border-radius: 100%;*/
    position: relative;
    margin: 0 auto;
}

/* LOADER 5 */

/*#loading span {
    display: block;
    position: absolute;
    left: calc(50% - 20px);
    top: calc(50% - 20px);
    width: 20px;
    height: 20px;
    background-color: var(--bs-primary);
}*/

    #loading span:nth-child(2) {
        animation: moveanimation1 1s ease-in-out infinite;
    }

    #loading span:nth-child(3) {
        animation: moveanimation2 1s ease-in-out infinite;
    }

    #loading span:nth-child(4) {
        animation: moveanimation3 1s ease-in-out infinite;
    }

@keyframes moveanimation1 {
    0%, 100% {
        -webkit-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
    }

    75% {
        -webkit-transform: translateX(30px);
        -ms-transform: translateX(30px);
        -o-transform: translateX(30px);
        transform: translateX(30px);
    }
}

@keyframes moveanimation2 {
    0%, 100% {
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }

    75% {
        -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
        -o-transform: translateY(30px);
        transform: translateY(30px);
    }
}

@keyframes moveanimation3 {
    0%, 100% {
        -webkit-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }

    75% {
        -webkit-transform: translate(30px, 30px);
        -ms-transform: translate(30px, 30px);
        -o-transform: translate(30px, 30px);
        transform: translate(30px, 30px);
    }
}


/* BORDER TOP SPINNER */
.bt-spinner {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: transparent;
    border: 5px solid transparent;
    border-top-color: var(--sbn-cornflower-blue) !important;
    -webkit-animation: 1s spin linear infinite;
    animation: 1s spin linear infinite;
}

#loaderModal .bt-spinner {
    /*background-color: rgba(0,0,0,.6) !important;*/
}

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

-webkit-@keyframes spin {
    -webkit-from

{
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}

-webkit-to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

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

@keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

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

@-webkit-keyframes spinBack {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(-720deg);
        transform: rotate(-720deg);
    }
}

@keyframes spinBack {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(-720deg);
        transform: rotate(-720deg);
    }
}

@-webkit-keyframes spinBorder {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        border-width: 15px;
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border-width: 3px;
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border-width: 15px;
    }
}

@keyframes spinBorder {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        border-width: 15px;
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border-width: 3px;
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border-width: 15px;
    }
}