.wallet_payment_preview{padding: 15px;}
.wallet_payment_preview .wpHead{display: grid; grid-gap: 15px; grid-template-columns: 40px 1fr 15px;}
.wallet_payment_preview .wpHead > div{width: 100%;}
.wallet_payment_preview .wpHead > div:first-child > div{border-radius: 3px; background-color: var(--bg_silvercalm);}
.wallet_payment_preview .wpHead > div:first-child > div.wh100{padding-bottom: 100%;}
.wallet_payment_preview .wpHead > div:first-child > div.wh150{padding-bottom: 150%;}
.wallet_payment_preview .wpHead > div:nth-child(2) > div:first-child{font-size: 15px; margin-top: 5px; font-weight: bold; display: grid;}
.wallet_payment_preview .wpHead > div:nth-child(2) > div:first-child > div{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;}
.wallet_payment_preview .wpHead > div:nth-child(2) > div:nth-child(2){margin-top: 3px; color: var(--text_blue);}
.wallet_payment_preview .wpHead > div:nth-child(3) > div{width: 15px; height: 15px; margin-top: 8px; cursor: pointer;}
.wallet_payment_preview .wpVoucher{margin-top: 15px;}
.wallet_payment_preview .wpVoucher .wvBtn > div{padding: 3px 15px; border-radius: 25px; border: 1.5px solid var(--bg_green); color: var(--text_green); display: inline-grid; font-size: 11px; cursor: pointer;}
.wallet_payment_preview .wpVoucher .wvInput{display: none;}
.wallet_payment_preview .wpVoucher .wvInput > div{display: grid; grid-template-columns: 1fr 90px; grid-gap: 10px; align-items: center;}
.wallet_payment_preview .wpVoucher .wvInput > div > div{width: 100%;}
.wallet_payment_preview .wpVoucher .wvInput .wiBtn{padding: 8px 0px; text-align: center; width: 90px; border-radius: 25px; border: 1.5px solid var(--bg_green); color: var(--text_green); display: inline-grid; font-size: 11px; cursor: pointer;}
.wallet_payment_preview .wpVoucher .wvItem{display: none; padding: 5px 15px 6px 15px; border-radius: 50px; border: 1.5px solid var(--bg_blue); background: var(--bg_bluesoft);}
.wallet_payment_preview .wpVoucher .wvItem > div{display: grid; font-size: 12px; font-weight: bold; grid-template-columns: 15px 1fr 15px; grid-gap: 10px; align-items: center;}
.wallet_payment_preview .wpVoucher .wvItem > div > div{width: 100%;}
.wallet_payment_preview .wpVoucher .wvItem .wiIcon{width: 15px; height: 15px;}
.wallet_payment_preview .wpOpt{margin-top: 15px;}
.wallet_payment_preview .wpOpt > div{background: var(--bg_blue); transition: var(--transition); cursor: pointer; color: var(--text_white); border-radius: 10px; padding: 13px 20px; box-sizing: border-box; display: grid; grid-template-columns: 15px 1fr; grid-gap: 15px; align-items: center;}
.wallet_payment_preview .wpOpt > div:hover{box-shadow: inset 0px 0px 0px 2px var(--bg_white);}
.wallet_payment_preview .wpOpt > div:not(:last-child){margin-bottom: 10px;}
.wallet_payment_preview .wpOpt > div > div{width: 100%;}
.wallet_payment_preview .wpOpt > div > div:first-child > div{width: 15px; height: 15px;}
.wallet_payment_preview .wpLine{text-align: center; padding: 20px 0px; position: relative;}
.wallet_payment_preview .wpLine:before{content: ''; position: absolute; top: 30px; left: 0px; width: 100%; height: 1.5px; background: var(--bg_line);}
.wallet_payment_preview .wpLine > span{padding: 3px 10px; background: var(--bg_line); font-size: 13px; position: relative; z-index: 1; border-radius: 50px;}
.wallet_payment_preview .wpKunci{border-radius: 10px; cursor: pointer; transition: var(--transition); border: 1.5px solid var(--bg_blue); color: var(--text_blue); padding: 10px;}
.wallet_payment_preview .wpKunci:hover{background: var(--bg_bluesoft);}
.wallet_payment_preview .wpKunci > div:first-child{font-weight: bold; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid var(--bg_line);}
.wallet_payment_preview .wpKunci > div:nth-child(2){font-size: 11px; color: var(--text_silver);}
.wallet_payment_preview .wpTopupKunci{margin-top: 5px; font-size: 11px;}
.wallet_payment_preview .wpTopupKunci > span{font-weight: bold;}

.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-weight: 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 .wpLine{text-align: center; padding: 20px 0px; position: relative;}
.wallet_preview .wpLine:before{content: ''; position: absolute; top: 30px; left: 0px; width: 100%; height: 1.5px; background: var(--bg_line);}
.wallet_preview .wpLine > span{padding: 3px 10px; background: var(--bg_line); font-size: 13px; position: relative; z-index: 1; border-radius: 50px;}
.wallet_preview .wpKunci{border-radius: 6px; cursor: pointer; transition: var(--transition); border: 1.5px solid var(--bg_blue); color: var(--text_blue); padding: 10px;}
.wallet_preview .wpKunci:hover{background: var(--bg_blue);}
.wallet_preview .wpKunci > div:first-child{font-weight: bold; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid var(--bg_line);}
.wallet_preview .wpKunci:hover > div:first-child{color: var(--text_white);}
.wallet_preview .wpKunci > div:nth-child(2){font-size: 11px; color: var(--text_silver);}
.wallet_preview .wpTopupKunci{margin-top: 5px; font-size: 11px;}
.wallet_preview .wpTopupKunci > span{font-weight: bold;}

#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;}