/**
    * 按钮样式
    */
/* Radomir */

.ripple {
    position: relative;
    /*//隐藏溢出的径向渐变背景*/
    overflow: hidden;
}

.ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    /*//设置径向渐变*/
    background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .3s, opacity .5s;
}

.ripple:active:after {
    transform: scale(0, 0);
    opacity: .3;
    /*//设置初始状态*/
    transition: 0s;
}
.btn-sign-alipay {
    border-width:0px;
    background:url(/img/pay_btn_alipay.svg) no-repeat 0 0;
	background-size: 190px;
    width: 190px;
    height: 65px;
    outline: none;
}

.btn-sign-wxpay {
    border-width:0px;
    background:url(/img/pay_btn_wxpay.svg) no-repeat 0 0;
    /* opacity:0.3; */
	background-size: 190px;
    width: 190px;
    height: 65px;
}

.btn-sign-paypal {
    border-width:0px;
    background:url(/img/pay_btn_paypal.png) no-repeat 0 0;
    background-color: #ffffff;
    /* opacity:0.3; */
	background-size: 190px;
    width: 190px;
    height: 65px;
}

/* button:focus {
    border: none !important;
    outline: none !important;
    outline-style: none !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, .0);
} */

.mdlg-btn {
    border-width:0px;
    background:url(/img/close_default.png) no-repeat 0 0;
	background-size: 48px;
    width: 48px;
    height: 48px;

    padding: 1rem 1rem;
    margin: -1rem -1rem -1rem auto;
}

/* .btn:focus, .btn.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  } */

.mdlg-btn:hover, .mdlg-btn.hover {
    /* background:url(/img/close_hover.png) no-repeat 0 0; */
    background-size: 48px;
    width: 48px;
    height: 48px;
}

.mdlg-btn:focus, .mdlg-btn.focus {
    /* background:url(/img/close_click.png) no-repeat 0 0; */
    background-size: 48px;
    width: 48px;
    height: 48px;
} 

/* .mymodal-close:hover {
    background:url(/img/logout_hover.png) no-repeat 0 0;
    background-size: 48px;
    width: 48px;
    height: 48px;
}

.mymodal-close:focus {
    background:url(/img/logout_click.png) no-repeat 0 0;
    background-size: 48px;
    width: 48px;
    height: 48px;
} */

.light-gray {
    color: var(--light-gray);
	/* margin-bottom:0px; */
}

.dark-gray {
    color: var(--dark-gray);
}

.input-uname {
    /* border: 1px solid #8189c7;  */
    border: solid 1px;
    border-color: #6067a1;
    padding: 7px 0px 7px 5px;
    height: 64px;
    width: 35rem;
    border-radius: 8px; 
    background-color: var(--bk-dark);
    color:#FFFFFF;
    /* -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);  */
    /* box-shadow: inset 0 1px 1px rgba(0,0,0,.075);  */
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; 
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;     
    margin-left: 1rem;
   
}            

.input-uname:focus{ 
    /* border-color: #66afe9;  */
    /* border-radius: 8px;  */
    /* background-color: #1B1F34; */
    border: solid 1px;
    border-color: #abb4fd;
    outline: 0;
    /* -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); */
    /* box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)    */
}

/* Sets the input autofill style, works */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 9999999s ease-in-out 0s;
    -webkit-text-fill-color: white !important;
    caret-color:white;
    /* transition-property: background-color !important;
    -webkit-transition-property: background-color !important; */

}

input::-webkit-input-placeholder {
    /* placeholder颜色  */
     color: var(--dark-gray);
    /* placeholder字体大小  */
    /* font-size: 12px; */
    /* placeholder位置  */
    /* text-align: right; */
}

.wxpay-qrcode {
    width:200px;
    height:200px;
}

.wxpay-qrcode.loading {
    opacity: 0.1;
}

.wxpay-qrcode.ready {
    opacity: 1.0;
}

.ads-text {
	/* line-height: 3; */
  /*opacity: 0.59;*/
  /* Avoid child element inherit the opacity */
  /* color: rgba(255, 255, 255, 0.59);  */
  color: #e7c743;
  font-size: 16px;
  /* width: 800px; */
  margin-top: 13px;
  letter-spacing: 2px;
}

.text-color {
    color: #d1d4ea;
}

.label-text {
    margin-left:1rem;width:90px;text-align:right;
    letter-spacing: 1px;
}

/* the price card row max-width */
.mycard-row  {
    width: 996px;
    margin-left: auto;
    margin-right: auto;
}

/* the price card padding, control horiz-spacing of every cards */
.mycard-col {
    padding-left: 24px;
    padding-right: 24px;
}

.pitem-container {
	/* width: 300px; */
	height: 400px;
	background-color: var(--price-bk);
	box-shadow: 0px 4px 12px 0px var(--price-shadow);
	border-radius: 24px;
	cursor: pointer;
    margin: 0px auto 2rem auto !important;
}

.pitem-img {
    margin-top: 36px;
    width: 100px;
}

.pitem-title-text {
	/* font-family: Microsoft Yahei UI; */
	font-size: 20px;
	font-weight: 600;
	font-stretch: normal;
	letter-spacing: 1px;
    color: #a3a7bf;
    margin-top: 16px;
	/* border-bottom: dashed 1px #a5abc2 opacity 0.5; */
}

.pitem-horiz-line {
	height: 0px;
	opacity: 0.5;
    border-bottom:1px dashed #a5abc2;
    margin-top: 32px;
    margin-left: 68px;
    margin-right: 68px;
    /* width: 224px; */
    
}

.pitem-price-num {
	/* font-family: HYQiHei-FZS; */
	font-size: 40px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 3px;
    color: #ebebf3;
    margin-top: 32px;
}
.pitem-yuan {
	width: 26px;
	height: 29px;
	/* font-family: HYQiHei-FZS; */
	font-size: 20px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 1px;
	color: #ebebf3;
}

.pitem-dis-count {
    color: #A3A7BF;
    font-size: 20px;
    margin-top: 16px;
}


/* overrite card style */
/* .card-deck .card {
    margin-left: 24px;
    margin-right: 24px;
} */

