@body-bg: #FFFFFF;
@body-color: #5A5A5A;
@transition: 300ms;

#MyAlert {
	z-index: 30;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0,0,0,.2);;
	display: none;
	
	.btn-popup-close {
		z-index: 9;
		cursor: pointer;
		&:before, &:after {
			content: '';
			position: absolute;
			right: 20px;
			top: 20px;
			width: 32px;
			height: 32px;
			background-color: @body-bg;
			border-top: @body-color 2px solid;
			border-bottom: @body-color 2px solid;
			transition: @transition;
		}
		&:before {
			top: 21px;
		}
		&:after {
			bottom: 21px;
		}
		&.active {
			&:before, &:after {
				height: 2px;
				border-top-width: 0px;
				border-bottom-width: 0px;
				border-color: @body-color;
				background-color: @body-color;
			}
			&:before {
				top: 40px;
				transform: rotate(45deg) scale(.8);
			}
			&:after {
				top: 40px;
				transform: rotate(-45deg) scale(.8);
			}
		}
	}
	
	>div {
		position: absolute;
		padding: 24px 24px;
		left: 50%;
		top: 50%;
		width: auto;
		min-width: 150px;
		max-width: 80vw;
		transform: translate(-50%, -50%);
		color: @body-color;
		background: rgb(255,255,255);
		border-radius: 5px;
		
		max-height: 90vh;
		overflow: auto;
		
		.title {
			margin-bottom: 24px;
			color: @body-color;
			font-size: 16px;
		    font-weight: bold;
			line-height: 1.5;
			
			span {
				vertical-align: middle;
			}
		}
		.content {
			margin-top: 24px;
			margin-bottom: 30px;
			color: @body-color;
			font-size: 18px;
			line-height: 1.5;
		
			max-height: calc(~'90vh - 146px');
			overflow: auto;
			
			ul {
				/* padding-left: 20px; */
				
				li {
					padding-left: 20px;
					background-image: url('./../images/draft/alert_li.jpg');;
					background-size: auto 1px;
					background-position: 5px 10px;
					background-repeat: no-repeat;
				}
				&.decimal {
					padding-left: 20px;
					list-style-type: decimal;
					
					li {
						padding: 0;
						background: none;
					}
				}
			}
		}
		.confirm, .cancel {
			display: inline-block;
			display: -webkit-inline-block;
			margin-left: 20px;
			color: @body-bg;
			font-size: 14px;
			line-height: 1.5;
			text-align: right;
			background-color: @body-color;
		}
		.cancel {
			color: @body-color;
			background-color: transparent;
		}
		
		.username {
			vertical-align: middle;
		
			.user-icon-small {
				position: relative;
				margin: 0;
				width: 70px;
				height: 70px;
				float: left;
				broder-width: 2px;
				vertical-align: middle;
				
				.vip-icon {
					position: absolute;
					right: 0;
					bottom: 0;
					width: 25px;
					height: 25px;
					background-image: url('./../images/output/ic_vip_club.png');;
					background-size:  27px 27px;
					background-position: center center;
					background-repeat: no-repeat;
					
				}
			}
			.user-name {
				margin-left: 20px;
				color: @body-color;
				font-size: 14px;
				line-height: 1.5;
				vertical-align: middle;
			}
		}
	}
	
	&[data-size=full] {
		div {
			width: 100%;
		}
	}
	
	&[data-size=half] {
		&>div {
			width: 50%;
		}
	}
}
@media (max-width: 575px) {
	#MyAlert, #MyQR, #MyConfirm, #MyChoice, #MyConfirmGrand, #MyShare {
		>div {
			max-width: 100%;
			max-height: 100%;
			.content {
				max-height: calc(~'90% - 146px');
			}
		}
	}
}