#loading-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
}
#loading-container {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 12px;
}

    #loading-container .circle {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        animation: scaleAnimation 1.25s ease-in-out infinite;
    }

        #loading-container .circle:nth-child(1) {
            background-color: #1e40af;
            animation-delay: 0s;
        }

        #loading-container .circle:nth-child(2) {
            background-color: #06b6d4;
            animation-delay: 0.2s;
        }

        #loading-container .circle:nth-child(3) {
            background-color: #1e40af;
            animation-delay: 0.4s;
        }

        #loading-container .circle:nth-child(4) {
            background-color: #06b6d4;
            animation-delay: 0.6s;
        }

@keyframes scaleAnimation {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }
}

@keyframes pulseAnimation {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.7;
    }
}