/* ================================================================================	*/
/* ====================					VARIABLES				===================	*/
/* ================================================================================	*/
:root {
	--OuterShadow: rgba(188, 188, 188, 0.9);
	--OuterShadow: rgba(188, 188, 188, 1);
	--PopupWindowBackground: #e6e6e6;
	--PopupBorder: 1px solid #ab2422;
	--PopupTitleHeight: 30px;
	--PopupTitleWeight: bold;
	--PopupTitleBackground: rgba( 70, 70, 70, 0.75 );
	--PopupTitleColor: white;
	--PopupTitleSize: 16px;
	--PopupTitlePadding: 12px;
	--PopupCloseHoverColor: #ab2422;
	--PopupContentColor: #464646;
	--PopupContentPadding: 6px;
	--PopupContentLinkColor: #ab2422;
	--PopupContentLinkDecoration: none;
	--PopupContentLinkHoverColor: #ab2422;
	--PopupContentLinkHoverDecoration: underline;
}
/* ================================================================================	*/
/* ====================			VARIABLE BASED DEFINITIONS		===================	*/
/* ================================================================================	*/
.popup {
	position: fixed;
	background: var( --OuterShadow );
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	display: block;
}
.popupWindow {
	width: 95%;
	height: 95%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	background-color: var(--PopupWindowBackground);
	border: var(--PopupBorder);
}
.popupTitle {
	height: var(--PopupTitleHeight);
	line-height: var(--PopupTitleHeight);
	background: var(--PopupTitleBackground);
	border-bottom: var(--PopupBorder);
	color: var(--PopupTitleColor);
	text-align: left;
	font-size: var(--PopupTitleSize);
	font-weight: var(--PopupTitleWeight);
	width: calc(100% - calc( var( --PopupTitleHeight ) + var( --PopupTitlePadding ) ) );
	padding: 0 var( --PopupTitleHeight ) 0 var( --PopupTitlePadding );
}
.popupTitle:first-letter {
	text-transform: capitalize;
}
.popupClose {
	cursor: pointer;
	line-height: var(--PopupTitleHeight);
	font-size: var(--PopupTitleSize);
	color: var(--PopupTitleColor);
	transition: .5s ease;
	text-align: center;
	position: absolute;
	right: 0;
	top: 0;
	height: var(--PopupTitleHeight);
}
.popupClose:hover {
	color: var(--PopupCloseHoverColor);
}
.popupContentOuter {
	vertical-align: middle;
	overflow: auto;
}
.popupContent {
	color: var(--PopupContentColor);
	background: var(--PopupWindowBackground);
	padding: var(--PopupContentPadding);
}
.popupContent.LeftAligned {
	text-align: left;
}
.popupContent.RightAligned {
	text-align: right !important;
}
.popupContent.Centered {
	text-align: center;
}
.popupContent.Justified {
	text-align: justify;
}
.popupContent a:link, .popupContent a:visited {
	text-decoration: var(--PopupContentLinkDecoration);
	color: var(--PopupContentLinkColor);
	transition: .5s ease;
}
.popupContent a:hover {
	text-decoration: var(--PopupContentLinkHoverDecoration);
	color: var(--PopupContentLinkHoverColor);
}
.popupContent img {
	max-width: 100%;
	max-height: 100%;
}