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

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

.popup_panel {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	background: #fff;
	padding: 20px;
	border-radius: 4px;
	box-shadow: 0px 10px 20px #777;
	min-width: 300px;
	max-width: 50%;
	text-align: left;
	
	html.rtl & {
		text-align: right;
	}
	
	.close {
		display: inline-block;
		width: 30px;
		height: 30px;
		float: right;
		margin: -30px -30px 0 0;
		cursor: pointer;
		display: none;
		background: url("images/sprites.png?%VERSION%") no-repeat -480px 0px;
		
		.spritesX2();
		
		html.rtl & {
			float: left;
		}
	}
	
	.title {
		display: block;
		font-weight: bold;
		font-size: 12pt;
		margin-bottom: 10px;
	}
	
	.text {
		display: block;
	}
	
	.label {
		width: 150px;
	}
	
	.buttons {
		display: block;
		padding: 0px;
		
		.button {
			display: inline-block;
			padding: 4px 10px;
			font-size: 10pt;
			text-align: center;
			background: #6fa8de;
			border: 1px solid #5d97cd;
			border-radius: 4px;
			color: #fff;
			text-shadow: 0px 1px 0px #4d759b;
			
			&.state {
				text-shadow: none;
				cursor: default;

				background: #FFFFFF;
				border: 1px solid #6FA8DE;
				color: #4F88BE;
			}	
			
		}
	}
}
/*=== END Popup CSS ===*/