.loader {
    margin: 50px 0;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 10001;
}


.loading-content {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 990;
    opacity: 0.9;
    background-color: var(--Background-Secondary);
    backdrop-filter: blur(20px);
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: var(--app-panel-radius);
    border-bottom-right-radius: var(--app-panel-radius);
}
.loading-content img {
    width: 40px;
}
.loading-container  {
    position: relative;
    z-index: 1;
    min-height: 100px;
}
.modal.loading-container {
    position: fixed;
    z-index: 10000;
}

img.loader-limited-height {
    height: 50px;
}



:root {
    --loader-size: 35px;
    --loader-speed: 0.8s;
    --loader-dot-color1: var(--common-primary-brand-yellow-100);
    --loader-dot-color2: var(--common-primary-brand-coral-100);
    --loader-dot-color3: var(--common-primary-brand-emerald-100);
}
.loader-three-dots {
    position: relative;
    display: inline-block;
    height: var(--loader-size);
    width: var(--loader-size);
    animation: loader-spin calc(var(--loader-speed) * 2.5) infinite linear;
}
.loader-three-dots__dot {
    position: absolute;
    height: 100%;
    width: 30%;
}
.loader-three-dots__dot:after {
    content: '';
    position: absolute;
    height: 0%;
    width: 100%;
    padding-bottom: 100%;
    background-color: var(--loader-dot-color1);
    border-radius: 50%;
}
.loader-three-dots__dot:nth-child(1) {
    bottom: 5%;
    left: 0;
    transform: rotate(60deg);
    transform-origin: 50% 85%;
}
.loader-three-dots__dot:nth-child(1)::after {
    bottom: 0;
    left: 0;
    animation: wobble1 var(--loader-speed) infinite ease-in-out;
    animation-delay: calc(var(--loader-speed) * -0.3);
}
.loader-three-dots__dot:nth-child(2) {
    bottom: 5%;
    right: 0;
    transform: rotate(-60deg);
    transform-origin: 50% 85%;
}
.loader-three-dots__dot:nth-child(2)::after {
    bottom: 0;
    left: 0;
    animation: wobble1 var(--loader-speed) infinite calc(var(--loader-speed) * -0.15) ease-in-out;
    background-color: var(--loader-dot-color2);
}
.loader-three-dots__dot:nth-child(3) {
    bottom: -5%;
    left: 0;
    transform: translateX(116.666%);
}
.loader-three-dots__dot:nth-child(3)::after {
    top: 0;
    left: 0;
    animation: wobble2 var(--loader-speed) infinite ease-in-out;
    background-color: var(--loader-dot-color3);
}

@keyframes loader-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes wobble1 {
    0%,
    100% {
        transform: translateY(0%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateY(-66%) scale(0.65);
        opacity: 0.8;
    }
}

@keyframes wobble2 {
    0%,
    100% {
        transform: translateY(0%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateY(66%) scale(0.65);
        opacity: 0.8;
    }
}