.brx-loading-animation {
    --brx-loader-color: #9e9e9e;
    display: grid;
    place-content: center;
    position: relative;
    width: 100%
}

.brx-loading-ellipsis {
    display: inline-block;
    height: 48px;
    position: relative;
    width: 48px
}

.brx-loading-ellipsis div {
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
    background: var(--brx-loader-color);
    border-radius: 50%;
    height: 8px;
    position: absolute;
    top: 20px;
    width: 8px
}

.brx-loading-ellipsis div:first-child {
    animation: brx-loading-ellipsis1 .6s infinite;
    left: 5px
}

.brx-loading-ellipsis div:nth-child(2) {
    animation: brx-loading-ellipsis2 .6s infinite;
    left: 5px
}

.brx-loading-ellipsis div:nth-child(3) {
    animation: brx-loading-ellipsis2 .6s infinite;
    left: 19px
}

.brx-loading-ellipsis div:nth-child(4) {
    animation: brx-loading-ellipsis3 .6s infinite;
    left: 34px
}

@keyframes brx-loading-ellipsis1 {
    0% {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}

@keyframes brx-loading-ellipsis3 {
    0% {
        transform: scale(1)
    }
    to {
        transform: scale(0)
    }
}

@keyframes brx-loading-ellipsis2 {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(15px)
    }
}

.brx-loading-dual-ring {
    display: inline-block;
    height: 48px;
    width: 48px
}

.brx-loading-dual-ring:after {
    animation: brx-loading-dual-ring 1.2s linear infinite;
    border: 4px solid var(--brx-loader-color);
    border-color: var(--brx-loader-color) transparent var(--brx-loader-color) transparent;
    border-radius: 50%;
    content: " ";
    display: block;
    height: 39px;
    margin: 5px;
    width: 39px
}

@keyframes brx-loading-dual-ring {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

.brx-loading-facebook {
    display: inline-block;
    height: 48px;
    position: relative;
    width: 48px
}

.brx-loading-facebook div {
    animation: brx-loading-facebook 1.2s cubic-bezier(0, .5, .5, 1) infinite;
    background: var(--brx-loader-color);
    display: inline-block;
    left: 5px;
    position: absolute;
    width: 10px
}

.brx-loading-facebook div:first-child {
    animation-delay: -.24s;
    left: 5px
}

.brx-loading-facebook div:nth-child(2) {
    animation-delay: -.12s;
    left: 19px
}

.brx-loading-facebook div:nth-child(3) {
    animation-delay: 0;
    left: 34px
}

@keyframes brx-loading-facebook {
    0% {
        height: 38px;
        top: 5px
    }
    50%,
    to {
        height: 19px;
        top: 15px
    }
}

.brx-loading-ring {
    display: inline-block;
    height: 48px;
    position: relative;
    width: 48px
}

.brx-loading-ring div {
    animation: brx-loading-ring 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
    border: 5px solid var(--brx-loader-color);
    border-color: var(--brx-loader-color) transparent transparent transparent;
    border-radius: 50%;
    box-sizing: border-box;
    display: block;
    height: 38px;
    margin: 5px;
    position: absolute;
    width: 38px
}

.brx-loading-ring div:first-child {
    animation-delay: -.45s
}

.brx-loading-ring div:nth-child(2) {
    animation-delay: -.3s
}

.brx-loading-ring div:nth-child(3) {
    animation-delay: -.15s
}

@keyframes brx-loading-ring {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

.brx-loading-roller {
    display: inline-block;
    height: 48px;
    position: relative;
    width: 48px
}

.brx-loading-roller div {
    animation: brx-loading-roller 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
    transform-origin: 24px 24px
}

.brx-loading-roller div:after {
    background: var(--brx-loader-color);
    border-radius: 50%;
    content: " ";
    display: block;
    height: 4px;
    margin: -2px 0 0 -2px;
    position: absolute;
    width: 4px
}

.brx-loading-roller div:first-child {
    animation-delay: -36ms
}

.brx-loading-roller div:first-child:after {
    left: 38px;
    top: 38px
}

.brx-loading-roller div:nth-child(2) {
    animation-delay: -72ms
}

.brx-loading-roller div:nth-child(2):after {
    left: 34px;
    top: 41px
}

.brx-loading-roller div:nth-child(3) {
    animation-delay: -.108s
}

.brx-loading-roller div:nth-child(3):after {
    left: 29px;
    top: 43px
}

.brx-loading-roller div:nth-child(4) {
    animation-delay: -.144s
}

.brx-loading-roller div:nth-child(4):after {
    left: 24px;
    top: 43px
}

.brx-loading-roller div:nth-child(5) {
    animation-delay: -.18s
}

.brx-loading-roller div:nth-child(5):after {
    left: 19px;
    top: 43px
}

.brx-loading-roller div:nth-child(6) {
    animation-delay: -.216s
}

.brx-loading-roller div:nth-child(6):after {
    left: 14px;
    top: 41px
}

.brx-loading-roller div:nth-child(7) {
    animation-delay: -.252s
}

.brx-loading-roller div:nth-child(7):after {
    left: 10px;
    top: 38px
}

.brx-loading-roller div:nth-child(8) {
    animation-delay: -.288s
}

.brx-loading-roller div:nth-child(8):after {
    left: 7px;
    top: 34px
}

@keyframes brx-loading-roller {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

.brx-loading-default {
    display: inline-block;
    height: 48px;
    position: relative;
    width: 48px
}

.brx-loading-default div {
    animation: brx-loading-default 1.2s linear infinite;
    background: var(--brx-loader-color);
    border-radius: 50%;
    height: 4px;
    position: absolute;
    width: 4px
}

.brx-loading-default div:first-child {
    animation-delay: 0s;
    left: 39px;
    top: 22px
}

.brx-loading-default div:nth-child(2) {
    animation-delay: -.1s;
    left: 37px;
    top: 13px
}

.brx-loading-default div:nth-child(3) {
    animation-delay: -.2s;
    left: 31px;
    top: 7px
}

.brx-loading-default div:nth-child(4) {
    animation-delay: -.3s;
    left: 22px;
    top: 4px
}

.brx-loading-default div:nth-child(5) {
    animation-delay: -.4s;
    left: 13px;
    top: 7px
}

.brx-loading-default div:nth-child(6) {
    animation-delay: -.5s;
    left: 7px;
    top: 13px
}

.brx-loading-default div:nth-child(7) {
    animation-delay: -.6s;
    left: 4px;
    top: 22px
}

.brx-loading-default div:nth-child(8) {
    animation-delay: -.7s;
    left: 7px;
    top: 31px
}

.brx-loading-default div:nth-child(9) {
    animation-delay: -.8s;
    left: 13px;
    top: 37px
}

.brx-loading-default div:nth-child(10) {
    animation-delay: -.9s;
    left: 22px;
    top: 40px
}

.brx-loading-default div:nth-child(11) {
    animation-delay: -1s;
    left: 31px;
    top: 37px
}

.brx-loading-default div:nth-child(12) {
    animation-delay: -1.1s;
    left: 37px;
    top: 31px
}

@keyframes brx-loading-default {
    0%,
    20%,
    80%,
    to {
        transform: scale(1)
    }
    50% {
        transform: scale(1.5)
    }
}

.brx-loading-ripple {
    display: inline-block;
    height: 48px;
    position: relative;
    width: 48px
}

.brx-loading-ripple div {
    animation: brx-loading-ripple 1s cubic-bezier(0, .2, .8, 1) infinite;
    border: 3px solid var(--brx-loader-color);
    border-radius: 50%;
    opacity: 1;
    position: absolute
}

.brx-loading-ripple div:nth-child(2) {
    animation-delay: -.5s
}

@keyframes brx-loading-ripple {
    0% {
        height: 0;
        left: 22px;
        opacity: 1;
        top: 22px;
        width: 0
    }
    to {
        height: 44px;
        left: -1px;
        opacity: 0;
        top: -1px;
        width: 44px
    }
}

.brx-loading-spinner {
    display: inline-block;
    height: 48px;
    position: relative;
    width: 48px
}

.brx-loading-spinner div {
    animation: brx-loading-spinner 1.2s linear infinite;
    transform-origin: 24px 24px
}

.brx-loading-spinner div:after {
    background: var(--brx-loader-color);
    border-radius: 20%;
    content: " ";
    display: block;
    height: 11px;
    left: 22px;
    position: absolute;
    top: 2px;
    width: 4px
}

.brx-loading-spinner div:first-child {
    animation-delay: -1.1s;
    transform: rotate(0deg)
}

.brx-loading-spinner div:nth-child(2) {
    animation-delay: -1s;
    transform: rotate(30deg)
}

.brx-loading-spinner div:nth-child(3) {
    animation-delay: -.9s;
    transform: rotate(60deg)
}

.brx-loading-spinner div:nth-child(4) {
    animation-delay: -.8s;
    transform: rotate(90deg)
}

.brx-loading-spinner div:nth-child(5) {
    animation-delay: -.7s;
    transform: rotate(120deg)
}

.brx-loading-spinner div:nth-child(6) {
    animation-delay: -.6s;
    transform: rotate(150deg)
}

.brx-loading-spinner div:nth-child(7) {
    animation-delay: -.5s;
    transform: rotate(180deg)
}

.brx-loading-spinner div:nth-child(8) {
    animation-delay: -.4s;
    transform: rotate(210deg)
}

.brx-loading-spinner div:nth-child(9) {
    animation-delay: -.3s;
    transform: rotate(240deg)
}

.brx-loading-spinner div:nth-child(10) {
    animation-delay: -.2s;
    transform: rotate(270deg)
}

.brx-loading-spinner div:nth-child(11) {
    animation-delay: -.1s;
    transform: rotate(300deg)
}

.brx-loading-spinner div:nth-child(12) {
    animation-delay: 0s;
    transform: rotate(330deg)
}

@keyframes brx-loading-spinner {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}