/* The overlay that darkens the background */
.ngx-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none; /* Hide by default */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(4px); /* Optional: Adds blur effect to the background */
}

/* Center the spinner */
.center-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The circular spinner container */
.ngx-foreground-spinner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    border-radius: 50%; /* Ensures the spinner is circular */
    border: 5px solid rgba(0, 0, 0, 0.1); /* Light border around the spinner */
    border-top: 5px solid #207abf; /* Spinner color */
    animation: spin 1.5s linear infinite; /* Rotation animation */
}

/* Define the spinner's animation (spin in a circle) */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Text for the loader */
.ngx-loading-text {
    font-size: 16px;
    font-weight: bold;
    color: rgb(50, 105, 45);
    margin-top: 15px;
}

/* Background spinner (optional) */
.ngx-background-spinner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9998;
    display: none; /* Hide by default */
}

/* Smaller background spinner animation */
.sk-ball-spin-clockwise div {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: currentColor;
    border-radius: 50%;
    animation: sk-ball-spin-clockwise 1.5s infinite ease-in-out;
}

@keyframes sk-ball-spin-clockwise {
    0% {
        opacity: 1;
        transform: rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: rotate(360deg);
    }
}