.wallet_preview{padding: 15px;}
.wallet_preview .wpHead{display: grid; grid-gap: 15px; grid-template-columns: 40px 1fr 15px;}
.wallet_preview .wpHead > div{width: 100%;}
.wallet_preview .wpHead > div:first-child > div{border-radius: 3px; background-color: var(--bg_silvercalm);}
.wallet_preview .wpHead > div:first-child > div.wh100{padding-bottom: 100%;}
.wallet_preview .wpHead > div:first-child > div.wh150{padding-bottom: 150%;}
.wallet_preview .wpHead > div:nth-child(2) > div:first-child{font-size: 15px; margin-top: 5px; font-family: 'bold'; display: grid;}
.wallet_preview .wpHead > div:nth-child(2) > div:first-child > div{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;}
.wallet_preview .wpHead > div:nth-child(2) > div:nth-child(2) > span{font-size: 11px; color: var(--text_silver); padding: 2px 7px 3px 7px; border-radius: 5px; background: var(--bg_bluecalm);}
.wallet_preview .wpHead > div:nth-child(3) > div{width: 15px; height: 15px; margin-top: 8px; cursor: pointer;}
.wallet_preview .wpOpt{margin-top: 15px;}
.wallet_preview .wpOpt > div{padding: 15px 20px; border: 1px solid var(--bg_silver); border-radius: 5px; transition: var(--transition); cursor: pointer; position: relative;}
.wallet_preview .wpOpt > div:not(:last-child){margin-bottom: 10px;}
.wallet_preview .wpOpt > div.notavail{opacity: 0.7; color: var(--text_silver); cursor: no-drop;}
.wallet_preview .wpOpt > div.active{background: var(--bg_silvercalm); border: 1px solid var(--bg_blue);}
.wallet_preview .wpOpt > div:not(.notavail):hover:not(.active){background: var(--bg_silvercalm);}
.wallet_preview .wpOpt > div > .wpoInfo{position: relative; z-index: 1;}
.wallet_preview .wpOpt > div > .wpoInfo .wiTitle{font-weight: bold;}
.wallet_preview .wpOpt > div > .wpoInfo .wiDesc{margin-top: 5px; color: var(--text_silver);}
.wallet_preview .wpOpt > div > .wpoInfo .wiNote{margin-top: 5px; color: var(--text_blue); font-size: 17px; font-family: 'bold';}
.wallet_preview .wpOpt > div.notavail > .wpoInfo > div:nth-child(3){color: var(--text_silver);}
.wallet_preview .wpOpt > div > .wpoInfo .wpoiOpt{display: grid; grid-template-columns: 1fr 70px; align-items: center;}
.wallet_preview .wpOpt > div > .wpoInfo .wpoiOpt > div{width: 100%;}
.wallet_preview .wpOpt > div > .wpoInfo .wpoiOpt > div select{width: 100%; text-align: center;}
.wallet_preview .wpOpt > div > .wpoInfo > div:nth-child(4){margin-top: 7px; color: var(--text_red);}
.wallet_preview .wpOpt > div > .wpoSelect{position: absolute; width: 30px; height: 30px; right: 5px; top: 5px;}
.wallet_preview .wpOpt > div > .wpoBg{position: absolute; bottom: 5px; right: 5px; opacity: 0.3; width: 45px; height: 45px; background-size: cover;}
.wallet_preview .wpOpt > div:not(.active) > div:nth-child(2){display: none;}
.wallet_preview .wpBtn{display: flex; gap: 15px; margin-top: 15px;}
.wallet_preview .wpBtn > div{width: 100%; display: grid; grid-template-columns: 20px 1fr; grid-gap: 15px; align-items: center; padding: 10px 15px; border-radius: 5px; color: var(--text_white); background: var(--bg_silver); opacity: 0.5; cursor: no-drop;}
.wallet_preview .wpBtn > div.active{opacity: 1; background: var(--bg_blue); cursor: pointer;}
.wallet_preview .wpBtn > div > div{width: 100%;}
.wallet_preview .wpBtn > div > div:first-child > div{width: 20px; height: 20px;}
.wallet_preview .wpBtn > div > div:nth-child(2){}

#popupWallet > div{display: none;}
#popupWallet > div:first-child{width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 87; background: var(--bg_blurblack);}
#popupWallet > div:nth-child(2){position: fixed; top: 20px; right: 420px; width: 25px; height: 25px; z-index: 89; cursor: pointer;}
#popupWallet > div:last-child{position: fixed; overflow: auto; width: 400px; height: 100%; top: 0px; z-index: 88; right: 0px; box-shadow: 0px 0px 100px #4e4e4e; background: var(--bg_white);}

.wallet_confirm{}
.wallet_confirm > div:first-child{height: 100px; overflow: hidden; position: relative;}
.wallet_confirm > div:first-child > div:first-child{position: relative; height: 75px; background: var(--bg_blue);}
.wallet_confirm > div:first-child > div:first-child:before{content: ""; display: block; position: absolute; border-radius: 100% 50%; width: 255px; height: 33px; background-color: var(--bg_white); right: -15px; top: 65px;}
.wallet_confirm > div:first-child > div:first-child:after{content: ""; display: block; position: absolute; border-radius: 100% 50%; width: 255px; height: 33px; background-color: var(--bg_blue); left: -18px; top: 48px;}
.wallet_confirm > div:first-child > div:last-child{height: 60px; width: 100%; position: absolute; top: 0px; left: 0px; color: var(--text_white);}
.wallet_confirm > div:first-child > div:last-child > div:first-child{position: absolute; top: 17px; left: 30px; font-size: 25px; font-family: 'bold';}
.wallet_confirm > div:first-child > div:last-child > div:last-child{position: absolute; top: 14px; right: 20px;}
.wallet_confirm > div:first-child > div:last-child > div:last-child{text-align: right;}
.wallet_confirm > div:first-child > div:last-child > div:last-child > div:first-child > span:first-child{font-size: 17px; font-family: 'bold';}
.wallet_confirm > div:first-child > div:last-child > div:last-child > div:first-child > span:last-child{font-size: 10px;}
.wallet_confirm > div:first-child > div:last-child > div:last-child > div:last-child span{color: #cee6ff; cursor: pointer;}
.wallet_confirm > div:nth-child(2){padding: 5px 20px 15px 20px; font-size: 17px; color: var(--text_silver);}
.wallet_payment > div:first-child{padding: 15px 20px;}
.wallet_payment > div:first-child:hover{color: var(--text_blue);}
.wallet_payment > div:last-child{padding: 15px 20px; font-size: 11px; color: var(--text_silver);}
.wallet_option{border: 1px solid var(--bg_line); border-left: 0px; border-right: 0px;}
.wallet_option > div{padding: 15px 20px; position: relative; cursor: pointer; transition: all 0.2s ease;}
.wallet_option > div.disabled{opacity: 0.2; cursor: no-drop;}
.wallet_option > div:not(:first-child){border-top: 1px solid var(--bg_line);}
.wallet_option > div:hover{background: var(--bg_hover);}
.wallet_option .wo_content{display: table; table-layout: fixed; width: 100%;}
.wallet_option .wo_content > div{display: table-cell; vertical-align: middle;}
.wallet_option .wo_content > div:first-child{font-size: 17px; width: 215px;}
.wallet_option .wo_content > div:first-child > div:first-child{font-family: 'bold';}
.wallet_option .wo_content > div:first-child > div:nth-child(2){margin-top: 5px; height: 15px;}
.wallet_option .wo_content > div:first-child > div:nth-child(2) > img{height: 100%;}
.wallet_option .wo_content > div:nth-child(2){margin-top: 3px; color: var(--text_silver); text-align: right;}
.wallet_option .wo_content .woc_before{font-size: 11px; color: var(--text_red); text-decoration: line-through;}

.wallet_subscription_layout{display: grid; grid-template-columns: 300px 1fr; grid-gap: 20px;}
.wallet_subscription_layout > div{width: 100%;}
.wallet_subscription_layout .wslTitle{font-size: 15px; font-weight: bold;}
.wallet_subscription_layout .wslMyPackage{padding: 20px; background: var(--bg_blue); border-radius: 10px; min-height: 150px; color: var(--text_white);}
.wallet_subscription_layout .wslMyPackage .wmpBox{padding: 10px 15px; margin-top: 15px; color: var(--text_black); border-radius: 10px; background: var(--bg_white);}
.wallet_subscription_layout .wslMyPackage .wmpBox > div:first-child{font-weight: bold;}
.wallet_subscription_layout .wslMyPackage .wmpBox > div:nth-child(2){font-size: 11px; color: var(--text_silver);}
.wallet_subscription_layout .wslPackage{margin-top: 15px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 15px;}
.wallet_subscription_layout .wslPackage > div{width: 100%; border: 1.5px solid var(--bg_silver); border-radius: 10px; transition: var(--transition); box-sizing: border-box; padding: 15px;}
.wallet_subscription_layout .wslPackage > div:not(.nonactive):hover{border: 1.5px solid var(--bg_blue); box-shadow: 0px 0px 10px var(--shadow);}
.wallet_subscription_layout .wslPackage > div.nonactive{opacity: 0.5; background: var(--bg_silvercalm);}
.wallet_subscription_layout .wslPackage > div > div:first-child{font-family: 'bold'; font-size: 15px;}
.wallet_subscription_layout .wslPackage > div > div:nth-child(2){color: var(--text_silver);}
.wallet_subscription_layout .wslPackage .wpList{margin-top: 10px; margin-bottom: 10px; padding: 10px 0px; border-bottom: 1px solid var(--bg_line); border-top: 1px solid var(--bg_line);}
.wallet_subscription_layout .wslPackage .wpList > div{font-size: 12px; font-weight: bold; position: relative; padding-left: 15px;}
.wallet_subscription_layout .wslPackage .wpList > div:not(:last-child){margin-bottom: 3px;}
.wallet_subscription_layout .wslPackage .wpList > div:before{content: ''; position: absolute; left: 0px; top: 7px; border-radius: 50%; width: 5px; height: 5px; background: var(--bg_blue);}
.wallet_subscription_layout .wslPackage .wpSelect{margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--bg_line);}
.wallet_subscription_layout .wslPackage .wpPrice > div:first-child{font-weight: bold; font-size: 17px; color: var(--text_blue);}
.wallet_subscription_layout .wslPackage .wpPrice > div:nth-child(2){font-size: 11px; color: var(--text_red);}
.wallet_subscription_layout .wslPackage .wpBtn{margin-top: 15px;}
.wallet_subscription_layout .wslPackage .wpBtn > button{width: 100%;}