/*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; /*Must be relative*/
        border: 12px solid #00817f;
        border-top: 12px solid #263238;
        border-bottom: 12px solid #263238;
        /* border-left: ; */
        /* border-right: ; */
        border-radius: 50%;
        width: 80px;
        height: 80px;
        animation: loaderSpin 2s linear infinite;
        display: inline-block; /*Must be 'inline-block', else it will not be centered.*/
        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;
}