.modal-popup-positioner{
	margin:auto;
	overflow:visible;
	position:absolute;
	top:0px;
	display:none;
	pointer-events: none;
}
.modal-popup-container{
	position:relative;
	pointer-events: auto;
	z-index:9;
	max-width:calc(100vw - 20px);
	margin:0px 10px;
}
.modal-popup-body{
	position:relative;
	padding:7px;
	border-radius:7px;
	background: #FFF;
	border:1px solid #999;
}
.modal-popup-body{
	box-shadow: 5px 5px 15px 0 rgba(0,0,0,.3);
}
.modal-popup-arrow-container{
	position:relative;
	pointer-events: none;
	height:6px;
	z-index: 1;
}
	.modal-popup-arrow-container.modal-popup-down-arrow-container
	{
		top:-7px;
	}
.modal-popup-arrow-pointer
{
	position:absolute;
	border: solid #999;
	border-width:0px 1px 1px 0px;
	width: 12px;
	height:13px;
	background-color:#FFF;
}
	.modal-popup-arrow-pointer.modal-popup-up-arrow
	{
		transform:rotate(225deg);
	}
	.modal-popup-arrow-pointer.modal-popup-down-arrow
	{
		transform:rotate(45deg);
	}
	.modal-popup-arrow-pointer.modal-popup-left-arrow
	{
		transform:rotate(135deg);
		left:-6px;
	}
.modal-popup-close{
	position:absolute;
	right:2px;
	top:1px;
	color:#AAA;
	/*font-size:   18px;
	line-height: 18px;*/
}
	.modal-popup-close > div{
		cursor: pointer;
		width:20px;
		height:20px;
		position:relative;
	}
		.modal-popup-close > div:before, .modal-popup-close > div:after
		{
			content:'';
			position:absolute;
			width:16px;
			height:3px;
			background: #AAA;
			/*border-radius:1px;*/
			top:8px;
		}
			.modal-popup-close > div:before
			{
				-webkit-transform:rotate(45deg);
				-moz-transform:   rotate(45deg);
				transform:        rotate(45deg);
				left:2px;
			}
			.modal-popup-close > div:after
			{
				-webkit-transform:rotate(-45deg);
				-moz-transform:   rotate(-45deg);
				transform:        rotate(-45deg);
				right:2px;
			}
.modal-popup-close + .modal-popup-message
{
	padding-top:7px;
	padding-right:20px;
}

.modal-popup-contains-black-background
{
	width:100%;
}
.modal-popup-black-background,
.modal-popup-grey-background
{
	position:fixed;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	background: #000;
	z-index:8;
	zoom: 1;
	filter: alpha(opacity=30);
	opacity: 0.3;
	pointer-events: auto;
}
.modal-popup-grey-background
{
	background: #2C2C2C;
	filter: alpha(opacity=60);
	opacity: 0.6;
}
.modal-type-plain
{
	display:none;
	align-items: center;
	justify-content: center;
	z-index:7;

	position:fixed;
	top: 0px;
	left:0px;
	width:100%;
	height:100%;
}

.modal-type-inline
{
	display:none;
	align-items: center;
	justify-content: center;

	position: static;
}


/*
	The following is for the default styling set by the new style guide.  Old styles are left intact of existing pages
*/
.accepting-default-styling .modal-type-plain .modal-popup-positioner,
.accepting-default-styling .modal-type-plain .modal-popup-positioner *
{
	box-sizing: border-box;
}
.accepting-default-styling .modal-type-plain > .modal-popup-container > .modal-popup-body
{
	border-radius: 4px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.06), 0 0 10px 0 rgba(0,0,0,0);
	border:0px;
	padding:24px;
}
.accepting-default-styling .modal-type-plain > .modal-popup-container > .modal-popup-body > .modal-popup-close + .modal-popup-message
{
	padding-top:  12px;
	padding-right: 0px;
}
.accepting-default-styling .modal-type-plain > .modal-popup-container > .modal-popup-body > .modal-popup-close,
.accepting-default-styling .modal-type-plain > .modal-popup-container > .modal-popup-body > .modal-popup-close *
{
	box-sizing: content-box;
}
.accepting-default-styling .modal-type-plain > .modal-popup-container > .modal-popup-body > .modal-popup-close
{
	right: 10px;
	top:   10px;
}
	.accepting-default-styling .modal-type-plain > .modal-popup-container > .modal-popup-body > .modal-popup-close > div{
		width: 24px;
		height:24px;
		position:relative;
		border:2px solid #505050;
		border-radius:50%;
		-moz-transform: scale(.75);
		-webkit-transform: scale(.75);
		-o-transform: scale(.75);
		-ms-transform: scale(.75);
		transform: scale(.75);
	}
		.accepting-default-styling .modal-type-plain > .modal-popup-container > .modal-popup-body > .modal-popup-close > div:before, 
		.accepting-default-styling .modal-type-plain > .modal-popup-container > .modal-popup-body > .modal-popup-close > div:after
		{
			width:14px;
			height:2px;
			background: #505050;
			top:11px;
		}
			.accepting-default-styling .modal-type-plain > .modal-popup-container > .modal-popup-body > .modal-popup-close > div:before
			{
				left:5px;
			}
			.accepting-default-styling .modal-type-plain > .modal-popup-container > .modal-popup-body > .modal-popup-close > div:after
			{
				right:5px;
			}