.popupBackground
{
	position:				fixed;
	top:					0;
	left:					0;
	width:					100%;
	height:					100%;
	z-index:				900000;
	background-color:		black;
	filter:					alpha(opacity=50);
	opacity:				0.5;
}

.popupHtml
{
	height:					calc( 100vh + 1px );
	overscroll-behavior:	contain;
}

.popup,
.popupHtml
{
	overflow:				auto;
}

.popup.loading,
.overlayBox.loading
{
	background-color:		black;
	background-color:		rgba( 0, 0, 0, 0.75 );
	background-image:		url( '../images/spinner.gif' );
	background-position:	50% 50%;
	background-repeat:		no-repeat;
}

body.popup
{
	overflow:				visible;
	position:				absolute;
	background-color:		transparent;
}

body.hasPopup
{
	overflow:				hidden !important;
}

.popupBodyBackground
{
	height:					100%;
	overflow:               auto;
}

.popupBottomMarker
{
	display:				block;
	clear:					both;
	height:					0;
	line-height:			0;
}

.overlayBox
{
	background-color:       white;
	display:                flex;
	flex-direction:         column;
}

.overlayBox .titleBar,
.popup .titleBar
{
	background-color:		#3c3c3c;
	color:					white;
	display:				flex;
	align-items:			center;
	font-weight: 			bold;
	font-size: 				16px;
}

.overlayBox .titleBar,
.popup .titleBar span
{
	padding:				.5em 1ex .2ex;
}

.popup .titleBar
{
	padding:				0;
}

.overlayBox .titleBar > span,
.popup .titleBar > span
{
	flex:               	1 0 auto;
}

.popupBody
{
	padding:            	0 10px;
	overflow:           	auto;
	height:        			100%;
	box-sizing:				border-box;
	background-color:		white;
}