@import "config.less";

@popup-text-padding-vert: 22 * @unit_base;
@popup-text-padding-hori: 16 * @unit_base;
@popup-ratio: 86.12%;

.ui-popup-screen {
    background: #000000;
    opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: @z_base_popup;
}

.ui-popup-scroller-bg {
	width : 100%;
}

.ui-popup-container {
	position: absolute;
	width: @popup-ratio;
	z-index: (@z_base_popup + 1) !important;
	background:		@color_popup_text_bg;
	text-align: center;
	outline-color: @color_list_bg;
	.LESSdisplaybox();
	.LESSbox-orient(vertical);
	.LESSbox-align(center);
	.LESSbox-pack(center);

	.ui-popup {
		padding : 3px 2px 2px 2px;
		background:		@color_popup_text_bg;
		width : 100%;
		> .ui-popup-title,
		> .ui-popup-text,
		> .ui-popup-button-bg {
			width : 100%;
		}
	}

	.ui-popup-title {
		width: 100%;
		height: 40 * @unit_base;
		text-align : left;
		color : @color_bar_title_text;

		font-size: @font_size_popup_basic_style_title;
		font-weight : bold;

		h1 {
			font-size: @font_size_popup_basic_style_title;
			font-weight : bold;
			color : @color_bar_title_text;

			margin : 0px;
			padding-top : 10 * @unit_base;
			padding-left : 16 * @unit_base;
		}
	}

	.ui-popup-text {
		margin-top: @popup-text-padding-vert;
		margin-bottom: @popup-text-padding-vert;
		color: @color_popup_text_font;
		font-size: 20 * @unit_base;
		background: @color_popup_text_bg;
		text-align: center;

	.ui-li .ui-radio, .ui-li .ui-checkbox {
		label {
			background : transparent;
		}
	}
	}

	.ui-popup-button-bg {
			font-size: @font_size_popup_button_text;
			height : 37 * @unit_base;
			padding-top: 10 * @unit_base;
			padding-bottom: 10 * @unit_base;
			width: 100%;
			vertical-align: middle;

			> .ui-btn {
				display : inline-block;
				margin:auto;
				height : 37 * @unit_base;
			}

			.ui-btn-inner {
				padding-top: 5 * @unit_base;
				padding-bottom: 5 * @unit_base;
				padding-left : 20 * @unit_base;
				padding-right : 20 * @unit_base;
		}
	}


/***** Normal Samples *****/
	.center_info,
	.center_title,
	.center_basic_1btn,
	.center_basic_2btn,
	.center_basic_3btn,
	.center_title_1btn,
	.center_title_2btn,
	.center_title_3btn {
	}

	.center_button_vertical {
		.ui-popup-button-bg {
			display : block;
			height : auto;
			.ui-btn {
				width: 200*@unit_base;
			}
		}
	}

	.center_checkbox {
		.ui-popup-check-bg {
			font-size: 20 * @unit_base;
			background: @color_popup_text_bg;
			width: 100%;
			padding-top: 0*@unit_base;
			padding-bottom: 22*@unit_base;
			vertical-align: middle;

			.ui-checkbox {
				.ui-btn {
					text-align: center;
					background: @color_popup_text_bg;
					border: 0*@unit_base;

					.ui-btn-inner {
						border: 0*@unit_base;
					}
				}
			}
		}

		.ui-popup-button-bg {
			font-size: @font_size_popup_button_text;
			background: @color_popup_button_bg;
			width: 100%;
			padding-top: 11*@unit_base;
			padding-bottom: 11*@unit_base;
			vertical-align: middle;

			.ui-btn {
				width: 130*@unit_base;
				height: 37*@unit_base;
				margin-top: 0*@unit_base;
				margin-bottom: 0*@unit_base;
				margin-left: 5*@unit_base;
				margin-right: 5*@unit_base;

				display: inline-block;
			}
		}
	}
	.center_liststyle_1btn {
		.ui-popup-scroller-bg {
			width: 100%;
			overflow: hidden;
			background: @color_popup_scroller_bg;
			height: 512*@unit_base;
		}
		.ui-popup-button-bg {
			padding-top: 11*@unit_base;
			padding-bottom: 11*@unit_base;
			vertical-align: middle;
		}
	}
	.center_liststyle_2btn {
		.ui-popup-scroller-bg {
			width: 100%;
			overflow: hidden;
			background: @color_popup_scroller_bg;
			height: 512*@unit_base;
		}
		.ui-popup-button-bg {
			padding-top: 11*@unit_base;
			padding-bottom: 11*@unit_base;
			vertical-align: middle;

			.ui-btn {
				width: 130*@unit_base;
				height: 37*@unit_base;
				margin-top: 0*@unit_base;
				margin-bottom: 0*@unit_base;
				margin-left: 5*@unit_base;
				margin-right: 5*@unit_base;

				display: inline-block;

				.ui-btn-inner {
					padding-top: 5 * @unit_base;
					padding-bottom: 5 * @unit_base;
					padding-left : 20 * @unit_base;
					padding-right : 20 * @unit_base;
				}
			}
		}
	}

	.center_title_2btn {
		.ui-popup-button-bg {
			.ui-btn {
				width: 130*@unit_base;
			}
		}
	}

	.center_liststyle_3btn {
		.ui-popup-scroller-bg {
			width: 100%;
			overflow: hidden;
			background: @color_popup_scroller_bg;
			height: 512*@unit_base;
		}
		.ui-popup-button-bg {
			padding-top: 11*@unit_base;
			padding-bottom: 11*@unit_base;
			vertical-align: middle;

			.ui-btn {
				width: 93*@unit_base;
				height: 37*@unit_base;
				margin-top: 0*@unit_base;
				margin-bottom: 0*@unit_base;
				margin-left: 5*@unit_base;
				margin-right: 5*@unit_base;

				display: inline-block;
			}
		}
	}

	.center_progressbar {

		text-align: center;

		.ui-popup-text {
			font-size: @font_size_popup_center_progressbar_title;
			font-color: @color_popup_center_progressbar_title;
			background: @color_popup_text_bg;
			width: 100%;
			height: 70*@unit_base;
			p {
				height: 100%;
				text-align: center;
				padding: 22*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
			}
		}

		.ui-popup-text-bottom-bg {
			font-size: @font_size_popup_center_progressbar_title;
			font-color: @color_popup_center_progressbar_title;
			background: @color_popup_text_bg;
			width: 100%;
			vertical-align: middle;

			.text-left {
				width: 40%;
				height: 48*@unit_base;
				padding: 0*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
				text-align: left;

				display: inline-block;
			}
			.text-right {
				width: 40%;
				height: 48*@unit_base;
				padding: 0*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
				text-align: right;

				display: inline-block;
			}

		}

		.ui-popup-button-bg {
			font-size: @font_size_popup_button_text;
			background: @color_popup_button_bg;
			width: 100%;
			padding-top: 11*@unit_base;
			padding-bottom: 11*@unit_base;
			vertical-align: middle;

			.ui-btn {
				width: 201*@unit_base;
				height: 37*@unit_base;
				margin:auto;

			}
		}

		.ui-popup-progress-bg {
			background: @color_popup_text_bg;
			width: 100%;
			height: 100%;
		}
	}

	.centertext_progressbar {

		text-align: center;

		.ui-popup-text {
			font-size: @font_size_popup_center_progressbar_title;
			font-color: @color_popup_center_progressbar_title;
			background: @color_popup_text_bg;
			width: 100%;
			padding-top: 22*@unit_base;
			padding-bottom: 16*@unit_base;
			p {
				text-align: center;
			}
		}

		.ui-popup-text-bottom-bg {
			font-size: @font_size_popup_center_progressbar_title;
			font-color: @color_popup_center_progressbar_title;
			background: @color_popup_text_bg;
			width: 100%;
			vertical-align: middle;

			.text-left {
				width: 40%;
				height: 40*@unit_base;
				padding: 16*@unit_base 16*@unit_base 22*@unit_base 16*@unit_base;
				text-align: left;

				display: inline-block;
			}
			.text-right {
				width: 40%;
				height: 40*@unit_base;
				padding: 16*@unit_base 16*@unit_base 22*@unit_base 16*@unit_base;
				text-align: right;

				display: inline-block;
			}

		}

		.ui-popup-button-bg {
			font-size: @font_size_popup_button_text;
			background: @color_popup_button_bg;
			width: 100%;
			padding-top: 11*@unit_base;
			padding-bottom: 11*@unit_base;
			vertical-align: middle;

			.ui-btn {
				width: 402*@unit_base;
				height: 37*@unit_base;
				margin:auto;

			}
		}

		.ui-popup-progress-bg {
			background: @color_popup_text_bg;
			width: 100%;
			height: 100%;
		}
	}
}