/*Reference for overlay: https://www.w3schools.com/howto/howto_css_overlay.asp*/
/*Reference for spinning loading circle: https://www.w3schools.com/howto/howto_css_loader.asp*/
/*Design reference: https://jgerigmeyer.github.io/jquery-loading-overlay/demo/*/

@keyframes loaderSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);

    }
}

.loading-base {
    /* display: none; */
    position: relative; /*Position must be relative so that it can be used to cover a specific element rather than the whole page only*/
    cursor: not-allowed; /*Prevent mouse click while loading by setting it to 'not-allowed'.*/
    /* height: 100%; */
    /* width: 100%; */
    z-index: 3000; /*Z-index must be higher than any element in the document.*/
}

    .loading-base .loading-overlay {
        position: fixed; /*Must be fixed! Else, it will not cover the entire element or page.*/
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(73,73,73, 0.5); /*Default colour is black with 50% opacity*/
        text-align: center;
    }

        .loading-base .loading-overlay .loading-box {
            position: absolute; /*Must be absolute to make it align!*/
            top: 40%; /*Default is 50%*/
            left: 0; /*Must be 0 and must override the parent's property*/
            bottom: 0; /*Must be 0 and must override the parent's property*/
            right: 0; /*Must be 0 and must override the parent's property*/
            text-align: center;
        }

            .loading-base .loading-overlay .loading-box .loading-loader {
                position: relative;
                border: 8px solid white; /* Initial border width */
                border-top: 8px solid transparent;
                border-radius: 50%;
                width: 80px;
                height: 80px;
                animation: loaderSpin 1.5s cubic-bezier(0.6, 0.2, 0.1, 1) infinite;
                display: inline-block;
                vertical-align: middle;
            }

            .loading-base .loading-overlay .loading-box .loading-text {
                position: relative; /*Must be relative*/
                font-size: 1.0rem;
                line-height: normal;
                display: block; /*'block' or 'inline-block'*/
                font-weight: bold;
                color: white;
            }