.bg-gradient-primary {
    background-color: #484aa8;
    background-image: linear-gradient( 180deg ,#484aa8 10%,#484aa8 100%);
    background-size: cover;
}


.debug table {
    width: 100%;
    border: solid 0px black;
    background: rgba(102, 151, 136, 0.05);
    filter: hue-rotate(10deg);

}

.debug tr {
    border: solid 0.1px rgb(220,220,220);
}

.debug th {
    white-space: nowrap;
    padding: 5px;
}

.debug td {
    text-align: left;
    padding: 5px;
    width: 100%;
}

.debug td .value {
  width: 100%;
  padding: 5px;
}


.poc-target-pointer {
    cursor: pointer;
}






/* Blur effect for the entire screen */
.blur-hourglass {
    filter: blur(3px);
    pointer-events: none; /* Disable interactions with blurred elements */
}

/* Full-screen overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 8500; /* Make sure it stays on top */
}

/* Hourglass icon or spinner */
.loading-overlay .hourglass {
    font-size: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    animation: spin 2s linear infinite;
    z-index: 8000; /* Make sure it stays on top */
}


/* Keyframes for spinning animation (optional) */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Keyframes for fade-in effect on overlay */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Smooth blur transition for main content */
#main-content {
    transition: filter 0.3s ease; /* Adjust duration as needed */
}