.PaymentRoot{
	width: 800px;
	height: 500px;
	background-color: #151515;
	border-radius: 5px;
	border: 1px solid #555;	
}


.line {
	flow-children: right;
}
.center {
	horizontal-align: center;
}
.margin-sm {
	margin: 10px;
}

#PetInputPage,
#InputPage,
#HtmlPage {
	horizontal-align: center;
	vertical-align: middle;
	transition-property: opacity, transform;
	transition-duration: 0.3s;
}

#PetInputPage,
#InputPage {
	flow-children: down;
}

#PetInputPage .t1,
#InputPage .t1 {
	horizontal-align: center;
	margin: 10px;
}

#PetInputPage .t2,
#InputPage .t2 {
	horizontal-align: center;
	flow-children: right;
}

#PetTextPanel,
#AvalonCoinPanel {
	width: 120px;
	background-color: #000;
	vertical-align: middle;
	border: 1px solid #FFED83;
}

#PetLevelText,
#AvalonCoin{
	width: fit-children;
	background-color: none;
	text-align: right;
	text-overflow: clip;
	horizontal-align: center;
	border: 0;
	transform: translateX(6px);
	font-size: 25px;
	min-width: 20px;
	color: gradient( linear, 0% 100%, 0% 0%, from( #FFED83 ), to( #DE8B00 ) );
}

#PetInputPage .title,
#InputPage .title{
	font-size: 30px;
	color: gradient( linear, 0% 100%, 0% 0%, from( #FFED83 ), to( #DE8B00 ) );
	vertical-align: middle;
}

#PetPrePayButton,
#PrePayButton{
	horizontal-align: center;
	margin: 30px;
	flow-children: down;
}

#PetPrePayButton .title,
#PrePayButton .title{
	font-size: 20px;
	color: gradient( linear, 0% 100%, 0% 0%, from( #FFED83 ), to( #DE8B00 ) );
	text-shadow: #000 0px 0px 4px 1.0;
	margin-top: 15px;
	margin-bottom: 15px;
	horizontal-align: center;
}

#PetPrePayButton .pay-btn,
#PrePayButton .pay-btn{
	padding: 10px 15px;
	flow-children: right;
	border-radius: 5px;
}

#PetPrePayButton .pay-btn.alipay,
#PrePayButton .pay-btn.alipay{
	background-color: #108EE9;
}

#PetPrePayButton .pay-btn.wechatpay,
#PrePayButton .pay-btn.wechatpay{
	background-color: #3eb94e;
	margin-left: 10px;
}

#PetPrePayButton .pay-btn Image,
#PrePayButton .pay-btn Image{
	width: 20px;
	height: 20px;
}

#PetPrePayButton .pay-btn Label,
#PrePayButton .pay-btn Label{
	font-size: 20px;
	color: #fff;
	margin-left: 5px;
}

#PetPrePayButton .pay-btn.alipay:hover,
#PrePayButton .pay-btn.alipay:hover{
	box-shadow: #108EE9 0px 0px 4px;
}

#PetPrePayButton .pay-btn.wechatpay:hover,
#PrePayButton .pay-btn.wechatpay:hover{
	box-shadow: #3eb94e 0px 0px 4px;
}

#PetPrePayButton .pay-btn:active,
#PrePayButton .pay-btn:active{
	transform: scale3d(0.9,0.9,1);
}

#AddPetLevel,
#AddAvalonCoin{
	horizontal-align: center;
	margin-top: 15px;
	flow-children: right;
}

#AddPetLevel .btn,
#AddAvalonCoin .btn{
	background-color: #414141;
	padding: 2px 4px;
	border-radius: 5px;
	margin: 0px 3px;
}

#AddPetLevel .btn Label,
#AddAvalonCoin .btn Label{
	margin-top: 3px;
	color: gradient( linear, 0% 100%, 0% 0%, from( #FFED83 ), to( #DE8B00 ) );
}

#AddPetLevel .btn:hover,
#AddAvalonCoin .btn:hover{
	brightness: 2;
}

#AddPetLevel .btn:active,
#AddAvalonCoin .btn:active{
	transform: scale3d(0.9,0.9,1);
}

/*=======================*/
#HtmlPage {
	flow-children: down;
}

#HtmlPage .btn{
	background-color: #414141;
	padding: 2px 4px;
	border-radius: 5px;
	margin: 0px 3px;
	horizontal-align: center;
}

#HtmlPage .btn Label{
	margin-top: 3px;
	color: gradient( linear, 0% 100%, 0% 0%, from( #FFED83 ), to( #DE8B00 ) );
}

#HtmlPage .btn:hover{
	brightness: 2;
}

#HtmlPage .btn:active{
	transform: scale3d(0.9,0.9,1);
}


#Html {
	width: 700px;
	height: 360px;
	background-color: #000;
}

#GoBackButton {
	padding: 5px 15px;
	horizontal-align: center;
	border-radius: 3px;
	margin-top: 10px;
	background-color: gradient(linear, 0% 100%, 0% 0%, from(#3F0600), to(#5B0900));
}
#GoBackButton:hover {
	box-shadow: #A41C00 0px 0px 5px;
}
#GoBackButton Label {
	color: #fff;
}

#CloseButton {
	width: 30px;
	height: 30px;
	background-image: url("s2r://panorama/images/control_icons/x_close_png.vtex");
	background-repeat: no-repeat;
	background-size: 100%;
	wash-color: #eee2dd;
	margin-top: 2px;
	margin-right: 5px;
	horizontal-align: right;
	vertical-align: top;
}

#CloseButton:hover {
	wash-color: #fac900;
}

#PageModeToggle {
	horizontal-align: center;
	vertical-align: top;
	margin-top: 30px;
}

#PageModeToggle {
	flow-children: right;
}

#PageModeToggle RadioButton {
	margin-right: 10px;
}

#PageModeToggle RadioButton .TickBox {
	background-color: #0000;
	border: 2px solid #6c9fcb;
	box-shadow: #abffff 0px 0px 0px;
}

#PageModeToggle RadioButton Label {
	color: #EEE;
}
#PageModeToggle RadioButton:selected Label {
	color: #fff;
}

#PageModeToggle RadioButton:selected .TickBox {
	background-color: #abffff;
	border: 2px solid #6c9fcb;
	box-shadow: #abffff 0px 0px 6px;
}


#PayQrPanel {
	width: 700px;
	height: 360px;
	background-color: #000;
	horizontal-align: center;
	vertical-align: middle;
}

#PayQrPanel Label {
	color: #EEE;
	font-size: 25px;
	horizontal-align: center;
	vertical-align: middle;
}

#PayQrImg {
	width: 312px;
	height: 312px;	
	horizontal-align: center;
	vertical-align: middle;
}