/* Styles for the loading spinner container */
#loading-whole-app {
    width: 20vw; /* Set a default width in viewport units */
    height: auto;
    max-width: 100%;
}

/* Media queries to adjust the spinner size on smaller screens */
@media (max-width: 768px) {
    #loading-whole-app {
        width: 30vw; /* Adjust width for smaller screens */
    }
}

@media (max-width: 480px) {
    #loading-whole-app {
        width: 40vw; /*  width for very small screens */
    }
}

.no-gutter {
    --bs-gutter-x: 0;
}

.custom-gutter {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.fade-out {
    animation: fadeOut 1s ease-out forwards;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; display: none; }
}