/* loading-overlay.css
   Minimal, non-invasive styles for the full-page loading overlay.
   - Use in your skin (head) so CSS is available before navigation.
   - Keeps selectors small and avoids touching body layout.
*/
#dnn-loading-overlay {
    position: fixed;
    /*inset: 0;   */
    z-index: 2147483000;
    /*display: flex;
    align-items: center;*/
	display: grid;
    place-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    visibility: hidden;
    opacity: 0;
    pointer-events: none; /* blocked when hidden */
    /*transition: opacity 160ms ease-in-out, visibility 0s linear 160ms;*/
	transition: opacity 0ms ease-in-out, visibility 0s linear 0ms;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

    /* visible state: blocks interaction and prevents pointer events on page */
    #dnn-loading-overlay.dnn-visible {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    /* inner container for spinner (non-invasive) */
    #dnn-loading-overlay .dnn-loading-inner {
        display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
        pointer-events: none; /* allow overlay to capture events, inner is passive */
        box-sizing: border-box;
        max-width: calc(100% - 40px);
    }

    /* spinner image */
    #dnn-loading-overlay .dnn-loading-image {
        width: 64px;
        height: 64px;
        /*max-width: 100%;*/
        object-fit: contain;
        -webkit-user-drag: none;
        user-select: none;
        pointer-events: none;
        display: inline-block;
    }

    /* optional text under spinner */
    #dnn-loading-overlay .dnn-loading-text {
        margin-top: 0px;
        font-size: 14px;
        color: #fff;
        pointer-events: none;
		display:none;
    }

#dnn-loading-overlay {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100%;
    /*z-index: 9999;  0117940: CCDC UAT - Member - Live Chat - ENG/FR */
	z-index: 9999999999;
    /*opacity: 0.8 !important;*/
    background-position: 50% 50%;
    background-repeat: no-repeat;
    /*background-color: rgb(249,249,249) !important;*/
	background-color: rgba(249,249,249,0.8) !important;
}

#dnn-loading-overlay .dnn-loading-image {
    width: 64px;
    height: 64px;
    max-width: 64px;
    max-height: 64px;
    transform-origin: center center;
    will-change: transform;
}

@media (max-width: 480px) {
    #dnn-loading-overlay .dnn-loading-image {
        width: 64px;
        height: 64px;
    }
}