.overlay {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: lightgray;
	/* must use really high number so that it appears above everything including all popups */
    z-index: 100000;
}

/* the loading overlay requires using opacity to make transparent 
   which does not work for the dialog as it makes everything transparent.
*/
.overlay.loading {
    background: rgba(255, 255, 255, 0.4);
}

.overlay.loading .inner-container:after {
    content: url(throbber.gif);
    width: 48px;
    height: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -24px 0 0 -24px;
}

/* for errors only make the background transparent */
.overlay.error {
    background: #000000;
    background: rgba(0, 0, 0, 0.8);
}