.popup {
	display: none;
	height: 100%;
	left: 0px;
	position: fixed;
	text-align: center;
	top: 0px;
	width: 100%;
	z-index: 2000;
	white-space: nowrap;
	
	&.visible {
		display: block;
		
		.mask {
			opacity: 0.2;
		}
	}
	
	.mask {
		background: #000000;
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
		height: 100%;
		opacity: 0;
		position: absolute;
		width: 100%;

		.transition(opacity 200ms linear);
	}
	
	.helper {
		display: inline-block;
		height: 100%;
		vertical-align: middle;
		width: 1px;
	}
}

.popup_panel {
	background: #ffffff;
	border-radius: 4px;
	box-shadow: 0px 10px 20px fade(#000, 40%);
	display: inline-block;
	max-width: 50%;
	min-width: 270px;
	max-height: 100%;
	box-sizing: border-box;
	padding: 20px;
	position: relative;
	text-align: left;
	vertical-align: middle;
	white-space: normal;
	
	html.rtl & {
		text-align: right;
	}
	
	.close {
		cursor: pointer;
		display: none;
		float: right;
		height: 30px;
		margin: -30px -30px 0 0;
		width: 30px;
		
		html.rtl & {
			float: left;
		}
	}
	
	.popup_heading {
		display: block;
		font-weight: bold;
		font-size: 12pt;
		margin-bottom: 20px;
	}

	.text {
		display: block;
	}
	
	.label {
		width: 150px;
	}
}

.popup.player_popup {
	&.visible .mask {
		opacity: 0.8;
	}

	.popup_panel {
		background: none;
		border-radius: 0;
		box-shadow: none;
		max-width: inherit;
		min-width: inherit;
		padding: 0;
	}
}
