#loading_icon {
    width: auto;
    height: 41px;
    /*animation: spin 2s linear infinite;*/
    animation: spin 1s steps(12, end) infinite;
    display: block;       /* Ensures the img is treated as block-level for margin auto to work */
    margin: 0 auto;       /* Centers the image horizontally within its container */
}
#loading_icon_container {
    width: 112.44px;
    height: 41px;        /* Ensure the container has a fixed height as well */
    display: flex;       /* Use flexbox to center the child img both horizontally and vertically */
    align-items: center;
    justify-content: center;
}

/* Page Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.8); /* White background with opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* High z-index to cover everything else */
}

.loading-icon {
    width: 41px; /* Adjust size as needed */
    animation: spin 1s steps(12, end) infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}