/*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(255,255,255, 0.8); /*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: 0%; /*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 #0bbbe4;
                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;
            }

#alternative-paginations tbody tr:nth-child(odd) {
    background: #f7f7f7;
}

#alternative-paginations tbody tr:nth-child(even) {
    background: #ffffff;
}

#alternative-paginations tbody tr:hover {
    background: #ffe8a1;
}