.spinner-busy {
    cursor: wait !important;
    pointer-events: none !important
}

@-moz-document url-prefix() {
    .spinner-busy {
        pointer-events: auto !important
    }

        .spinner-busy * {
            pointer-events: none !important
        }
}

@keyframes timer {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

/* page blocking overlay */
.spinner-mask-overlay {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    /* opacity: 1; obsolete, set by background color with transpaency */
    position: fixed;    /*  fix to window - had reset code side, so don't stick to top and now show up when scrolled down. */
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 10001;     /*  a pop up patient search modal is 10000 */
    /* fade background to white or black or ? */
    background-color: rgba(255, 255, 255, .6) /*  , transparent behind, background*/
}

/* clock face */
.spinner-mask-overlay .spinner-mask-outer {
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    -o-border-radius: 24px;
    border-radius: 24px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    left: 50%;
    top: 50%;
    border: 6px solid #1474bf;
    overflow: hidden;
    position: relative;
    text-indent: -9999px;
    height: 48px;
    width: 48px;
    background-color: rgba(255, 255, 255, 1);  /* fill clock face color, otherwise semi transparent */
}

/* clock hands decorations */
.spinner-mask-overlay .spinner-mask-outer::before,
.spinner-mask-overlay .spinner-mask-outer::after {
    display: block;
    position: absolute;
    width: 6px;
    left: 15px;
    top: 15px;
    content: '';
    -webkit-transform-origin: 3px 3px;
    -moz-transform-origin: 3px 3px;
    -ms-transform-origin: 3px 3px;
    -o-transform-origin: 3px 3px;
    transform-origin: 3px 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    background: #57823d
}

/* clock hand animation */
.spinner-mask-overlay .spinner-mask-outer::before {
    height: 19.2px;
    -webkit-animation: timer 1250ms infinite linear;
    -moz-animation: timer 1250ms infinite linear;
    -ms-animation: timer 1250ms infinite linear;
    -o-animation: timer 1250ms infinite linear;
    animation: timer 1250ms infinite linear;
}

/* clock hand animation */
.spinner-mask-overlay .spinner-mask-outer::after {
    height: 16px;
    -webkit-animation: timer 15000ms infinite linear;
    -moz-animation: timer 15000ms infinite linear;
    -ms-animation: timer 15000ms infinite linear;
    -o-animation: timer 15000ms infinite linear;
    animation: timer 15000ms infinite linear;
}

.spinner-mask-overlay .spinner-mask-inner {
    display: none
}