#header{border-top: 10px solid var(--bg_blue); box-shadow: 0px 0px 15px #e6e6e6;}
#header .hBox{padding: 15px 20px; display: grid; grid-template-columns: 25px 1fr; grid-gap: 15px; box-sizing: border-box; align-items: center;}
#header .hBox > div{width: 100%;}
#header .hBox > div:first-child{cursor: pointer;}
#header .hBox > div:first-child > div{width: 20px; height: 20px;}
#header .hBox > div:nth-child(2) > div{font-size: 17px; font-weight: bold;}

#content{min-height: calc(100vh - 300px);}

#footer{padding: 25px 0px 50px 0px; margin-top: 100px; border-top: 1px solid var(--bg_line);}
#footer .fBox{padding: 15px 20px; display: grid; grid-gap: 15px; grid-template-columns: 50px 1fr; box-sizing: border-box; align-items: center;}
#footer .fBox > div{width: 100%;}
#footer .fBox > div:first-child > div{width: 50px; height: 50px; opacity: 0.3;}
#footer .fBox > div:nth-child(2){text-align: right; color: var(--text_silver); font-size: 11px;}

#popup{width: 100%; top: 0px; left: 0px; height: 100%; position: fixed; z-index: 90; background: rgba(239, 239, 239, 0.55); overflow: auto;}
#popup table{width: 100%; height: 100%;}
#popup .p_canvas{max-width: 400px; width: 80%; margin-top: 50px; margin-bottom: 50px; box-shadow: 0 0 6px 0 rgba(161, 161, 161, 0.5); overflow: hidden;}

.popup_head_close{display: grid; grid-template-columns: 1fr 15px; padding: 10px 15px; box-sizing: border-box; background: var(--bg_silvercalm); grid-gap: 10px; align-items: center;}
.popup_head_close > div{width: 100%;}
.popup_head_close > div:first-child{font-weight: bold; font-size: 15px;}
.popup_head_close > div:nth-child(2) > div{width: 15px; height: 15px;}

#alert{width: 100%; height: 0px; position: fixed; top: 0px; left: 0px; z-index: 100;}
#alert > div{width: 90%; max-width: 450px; transition: 0.2s; box-shadow: 0 0 6px 0 rgba(161, 161, 161, 0.5); position: relative; top: -100px; border-radius: 20px;}
#alert > div > div{padding: 9px 15px 11px 15px; text-align: center; color: var(--text_white);}
#alert > div.success{background: var(--bg_alert_green);}
#alert > div.warning{background: var(--bg_alert_orange);}
#alert > div.failed{background: var(--bg_alert_red);}

section{max-width: 1000px;}
section .distance{padding: 0px 20px;}

.listSelectPayment{position: relative;}
.listSelectPayment > div:not(:last-child){margin-bottom: 15px;}
.listSelectPayment .lspOpt{font-weight: bold; cursor: pointer; align-items: center; background: var(--bg_bluecalm); transition: var(--transition); border-radius: 10px; padding: 10px; box-sizing: border-box; display: grid; grid-template-columns: 1fr 15px;}
.listSelectPayment .lspOpt > div{width: 100%;}
.listSelectPayment .lspOpt > div:nth-child(2) > div{width: 15px; height: 15px; transition: var(--transition);}
.listSelectPayment .lspItem{display: none; padding: 10px 0px; position: relative;}
.listSelectPayment .lspItem:not(.disabled){cursor: pointer;}
.listSelectPayment .lspItem:before{content: ''; position: absolute; top: 0px; left: -8px; height: 100%; width: 2px; background: var(--bg_blue); transition: var(--transition); opacity: 0;}
.listSelectPayment .lspItem:not(.disabled):hover:before{opacity: 1;}
.listSelectPayment .lspItem.disabled{opacity: 0.3;}
.listSelectPayment .lspItem > div{display: grid; grid-template-columns: 1fr 1fr; align-items: center;}
.listSelectPayment .lspItem > div > div{width: 100%;}
.listSelectPayment .lspItem > div > div:first-child > div:nth-child(2){font-size: 11px; color: var(--text_silver);}
.listSelectPayment .lspItem > div > div:nth-child(2) > div{height: 15px; float: right;}
.listSelectPayment .lspItem > div > div:nth-child(2) > div img{height: 15px;}
.listSelectPayment > div:not(.active):hover .lspOpt{box-shadow: inset 0px 0px 0px 1.5px var(--bg_blue);}
.listSelectPayment > div.active .lspOpt > div:nth-child(2) > div{transform: rotate(180deg);}
.listSelectPayment > div.active .lspItem{display: block;}

.paymentIcon{display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 15px; align-items: center;}
.paymentIcon > div{width: 100%;}
.paymentIcon > div:first-child{font-size: 17px; font-family: 'bold';}
.paymentIcon > div:nth-child(2){text-align: right;}
.paymentIcon > div:nth-child(2) img{height: 15px;}

.paymentKunciBox{border-radius: 10px; border: 1.5px solid var(--bg_blue); background: var(--bg_silvercalm); margin: 10px 0px 15px 0px; overflow: hidden;}
.paymentKunciBox > div:first-child{display: grid; color: var(--text_white); background: var(--bg_blue); grid-template-columns: 1fr 100px; margin-bottom: 5px; padding: 10px 15px; box-sizing: border-box;}
.paymentKunciBox > div:first-child > div{width: 100%;}
.paymentKunciBox > div:first-child > div:nth-child(2){text-align: right; font-weight: bold;}
.paymentKunciBox > div:nth-child(2){padding: 5px 15px 6px 15px;}
.paymentKunciBox > div:nth-child(3){padding: 5px 15px 7px 15px;}
.paymentKunciBox > div:nth-child(4){padding: 0px 15px 10px 15px; font-size: 11px; color: var(--text_silver);}

/**CHECK**/
.check_layout{padding-top: 30px;}
.check_layout .clInvoice{margin-bottom: 30px;}
.check_layout .clInvoice > div:first-child{font-size: 11px;}
.check_layout .clInvoice > div:nth-child(2){font-family: 'bold'; font-size: 17px;}
.check_layout .clInvoice > div:nth-child(3){margin-top: 3px; font-weight: bold;}
.check_layout .clAlert{padding: 15px 20px 17px 23px; background: var(--bg_silvercalm); position: relative;}
.check_layout .clAlert:before{content: ''; position: absolute; left: 0px; top: 0px; width: 5px; height: 100%; background: var(--bg_silver);}
.check_layout .clAlert .caTitle{font-size: 15px; font-weight: bold; margin-bottom: 5px;}
.check_layout .clAlert .caStatus{margin-bottom: 10px;}
.check_layout .clAlert .caStatus > span{padding: 4px 7px 5px 7px; font-weight: bold; color: var(--text_white); border-radius: 5px;}
.check_layout .clButtonBack{padding-top: 40px; text-align: center;}
.check_layout .clAlert.finish:before{background: var(--bg_green);}
.check_layout .clAlert.methodempty:before{background: var(--bg_blue);}
.check_layout .clAlert.failed:before{background: var(--bg_red);}
.check_layout .clAlert.finish .caStatus > span{background: var(--bg_green);}
.check_layout .clAlert.pending .caStatus > span{background: var(--bg_silver);}
.check_layout .clAlert.failed .caStatus > span{background: var(--bg_red);}

/**CHECKOUT**/
.checkout_layout{margin-top: 15px;}
.checkout_layout .clHead{padding: 10px 15px; border-radius: 10px; border: 1px solid var(--bg_line); position: relative;}
.checkout_layout .clHead:before{content: ''; bottom: 0px; right: 0px; width: 100px; height: 100px; position: absolute; background-size: 100%; background-image: url('../../../images/icon/checkout.png');}
.checkout_layout .clHead > div:first-child{font-size: 17px; font-weight: bold; color: var(--text_blue);}
.checkout_layout .clHead > div:nth-child(2){margin-top: 3px; padding: 3px 0px 4px 15px; position: relative;}
.checkout_layout .clHead > div:nth-child(2):before{content: ''; position: absolute; left: 0px; top: 0px; width: 2px; height: 100%; background: var(--bg_silver);}
.checkout_layout .clHead > div:nth-child(2) > div:nth-child(2){margin-top: 3px;}
.checkout_layout .clHead > div:nth-child(2) > div:nth-child(2) > span{padding: 3px 10px 4px 10px; font-size: 11px; border-radius: 50px; background: var(--bg_orange); color: var(--text_white);}
.checkout_layout .clBody{display: grid; grid-template-columns: 1fr 350px;}
.checkout_layout .clBody > div{width: 100%;}

.cart_summary{margin-top: 20px; padding: 15px; border: 1px solid var(--bg_line); border-radius: 5px;}
.cart_summary.sticky{position: sticky; top: 75px;}
.cart_summary > div:first-child{font-size: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--bg_line);}
.cart_summary .csContent .ccList{margin-top: 15px; border-bottom: 1px solid var(--bg_line); padding-bottom: 15px;}
.cart_summary .csContent .ccList > div:not(:last-child){margin-bottom: 10px;}
.cart_summary .csContent .ccList .clItem{display: grid; grid-template-columns: 1fr 100px; grid-gap: 15px;}
.cart_summary .csContent .ccList .clItem > div{width: 100%;}
.cart_summary .csContent .ccList .clItem > div:nth-child(2){text-align: right; font-family: 'bold';}
.cart_summary .csContent .ccTotal{margin-top: 15px; display: grid; grid-template-columns: 1fr min-content; color: var(--text_blue); grid-gap: 15px;}
.cart_summary .csContent .ccTotal > div{width: 100%;}
.cart_summary .csContent .ccTotal > div:first-child > div:first-child{font-family: 'bold';}
.cart_summary .csContent .ccTotal > div:first-child > div:nth-child(2){margin-top: 3px; color: var(--text_silver);}
.cart_summary .csContent .ccTotal > div:nth-child(2){font-family: 'bold'; text-align: right; font-size: 17px;}
.cart_summary .csVoucher{margin-top: 15px;}
.cart_summary .csVoucher .cvBtn{display: inline-block; padding: 2px 10px 3px 10px; color: var(--text_white); border-radius: 25px; background: var(--bg_silver); cursor: pointer;}
.cart_summary .csVoucher .cvBox{border-radius: 10px; display: none; border: 1px solid var(--bg_line); background: linear-gradient(to right, #e1ffff, #edf0ff);}
.cart_summary .csVoucher .cvBox > div:first-child{padding: 5px 10px; background: var(--bg_silvercalm); font-size: 11px; display: grid; grid-template-columns: 1fr min-content;}
.cart_summary .csVoucher .cvBox > div:first-child > div{width: 100%;}
.cart_summary .csVoucher .cvBox > div:nth-child(2){padding: 10px;}
.cart_summary .csVoucher .cvBox > div:nth-child(2) > div:first-child{font-weight: bold;}
.cart_summary .csVoucher .cvBox > div:nth-child(2) > div:nth-child(3){font-size: 11px;}
.cart_summary .csVoucher .cvBox .cbDetail{display: grid; grid-template-columns: 1fr min-content; grid-gap: 15px; align-items: center; margin-top: 10px; border-radius: 5px; padding: 5px 10px 7px 10px; background: var(--bg_white);}
.cart_summary .csVoucher .cvBox .cbDetail > div{width: 100%;}
.cart_summary .csVoucher .cvBox .cbDetail > div:nth-child(2) > span{padding: 3px 7px; white-space: nowrap; border-radius: 30px; font-size: 11px; font-weight: bold; background: var(--bg_black); color: var(--text_white);}
.cart_summary .csButton{margin-top: 15px;}
.cart_summary .csButton button{width: 100%; font-size: 17px; padding: 13px 0px;}

.cart_method{margin-top: 20px; padding: 15px; border: 1px solid var(--bg_line); border-radius: 5px;}
.cart_method .cmPickup{margin-bottom: 15px;}
.cart_method .cmPickup > div:nth-child(2){margin-top: 10px;}
.cart_method .cmPickup > div:nth-child(2) > div{padding: 10px; border: 1px solid var(--bg_line); border-radius: 5px; display: grid; grid-template-columns: 15px 1fr; align-items: center; box-sizing: border-box; grid-gap: 10px; transition: var(--transition); cursor: pointer;}
.cart_method .cmPickup > div:nth-child(2) > div:not(:last-child){margin-bottom: 10px;}
.cart_method .cmPickup > div:nth-child(2) > div.active{border: 1px solid var(--bg_blue); box-shadow: 0px 0px 0px 1px var(--bg_blue);}
.cart_method .cmPickup > div:nth-child(2) > div > div{width: 100%;}
.cart_method .cmPickup > div:nth-child(2) > div > div:first-child > div{width: 15px; height: 15px;}
.cart_method .cmPickup > div:nth-child(2) > div > div:nth-child(2) > div:first-child{font-weight: bold;}
.cart_method .cmPickup > div:nth-child(2) > div > div:nth-child(2) > div:nth-child(2){font-size: 11px; color: var(--text_silver);}
.cart_method .cmAddress > div:first-child{padding: 10px 15px 13px 15px; background: var(--bg_silvercalm); border-radius: 5px;}
.cart_method .cmAddress > div:first-child > div:nth-child(3){margin-top: 5px; color: var(--text_blue); font-size: 12px; text-decoration: underline; cursor: pointer;}
.cart_method .cmAddress > div:nth-child(2){display: none; margin-top: 10px;}
.cart_method .cmCourier{margin-top: 25px; border-top: 1px solid var(--bg_line); cursor: pointer; padding-top: 15px; padding-bottom: 15px;}
.cart_method .cmCourier > div{position: relative;}
.cart_method .cmCourier > div.warning{box-shadow: 0px 0px 0px 1px var(--bg_red);}
.cart_method .cmCourier > div:not(:last-child){margin-bottom: 10px;}
.cart_method .cmCourier > div:before{content: ''; position: absolute; top: 9px; left: -10px; width: 2px; height: 70%; background: var(--bg_blue); opacity: 0; transition: var(--transition);}
.cart_method .cmCourier > div:hover:before{opacity: 1;}
.cart_method .cmCourier .ccDesc{padding: 5px 0px; color: var(--text_silver);}
.cart_method .cmCourier .ccSelected{display: grid; grid-template-columns: 35px 1fr 15px; grid-gap: 15px; align-items: center;}
.cart_method .cmCourier .ccSelected > div{width: 100%;}
.cart_method .cmCourier .ccSelected > div:nth-child(2){text-align: right;}
.cart_method .cmCourier .ccSelected > div:nth-child(2) > div:first-child{font-family: 'bold';}
.cart_method .cmCourier .ccSelected > div:nth-child(2) > div:nth-child(2){font-size: 11px; color: var(--text_silver);}
.cart_method .cmCourier .ccSelected > div:nth-child(3) > div{width: 15px; height: 15px;}
.cart_method .cmPayment{border-top: 1px solid var(--bg_line); cursor: pointer; padding-top: 15px; padding-bottom: 15px; position: relative;}
.cart_method .cmPayment:before{content: ''; position: absolute; top: 9px; left: -10px; width: 2px; height: 70%; background: var(--bg_blue); opacity: 0; transition: var(--transition);}
.cart_method .cmPayment:hover:before{opacity: 1;}
.cart_method .cmPayment.warning{box-shadow: 0px 0px 0px 1px var(--bg_red);}
.cart_method .cmPayment .cpSelected{display: grid; grid-template-columns: 1fr 75px 15px; grid-gap: 15px; align-items: center;}
.cart_method .cmPayment .cpSelected > div{width: 100%; font-family: 'bold';}
.cart_method .cmPayment .cpSelected > div:nth-child(2){text-align: right;}
.cart_method .cmPayment .cpSelected > div:nth-child(2) > img{height: 15px; float: right;}
.cart_method .cmPayment .cpSelected > div:nth-child(3) > div{width: 15px; height: 15px;}

.cart_courier{margin-top: 15px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; margin-bottom: 15px;}
.cart_courier > div{width: 100%;}
.cart_courier .ccBox{display: grid; grid-template-columns: 25px 1fr; grid-gap: 15px; align-items: center; box-sizing: border-box; padding: 10px 10px; border: 1px solid var(--bg_line); border-radius: 5px; transition: var(--transition); cursor: pointer;}
.cart_courier .ccBox:hover:not(.active){border: 1px solid var(--bg_blue);}
.cart_courier .ccBox.active{border: 1px solid var(--bg_blue); background: var(--bg_silvercalm);}
.cart_courier .ccBox > div{width: 100%;}
.cart_courier .ccBox > div:first-child > div{width: 25px; height: 25px;}
.cart_courier .ccBox > div:nth-child(2){display: grid;}
.cart_courier .ccBox > div:nth-child(2) > div{width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.cart_courier_package{border: 1px solid var(--bg_line); border-radius: 5px; margin-top: 10px; overflow: hidden;}
.cart_courier_package > div{padding: 10px 15px;}
.cart_courier_package > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.cart_courier_package > div > div:first-child{color: var(--text_silver);}
.cart_courier_package > div > div:nth-child(2){display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin-top: 3px;}
.cart_courier_package > div > div:nth-child(2) > div{width: 100%;}
.cart_courier_package > div > div:nth-child(2) > div:nth-child(2){text-align: right;}

/**VIEW**/
.view_layout{display: grid; grid-template-columns: 1fr 400px; grid-gap: 15px;}
.view_layout > div{width: 100%;}

.view_head{margin-top: 25px; border: 1px solid var(--bg_line); border-radius: 10px; padding: 15px; position: relative; overflow: hidden;}
.view_head:before{content: ''; bottom: 0px; right: 0px; width: 65px; height: 65px; position: absolute; background-size: 100%; background-image: url('../../../images/icon/invoice.png');}
.view_head > div:first-child > div:first-child{font-size: 11px;}
.view_head > div:first-child > div:nth-child(2){font-family: 'bold'; font-size: 15px; color: var(--text_blue);}
.view_head > div:nth-child(2){margin-top: 3px;}
.view_head > div:nth-child(2) span{font-size: 9px; padding: 3px 7px; border-radius: 5px; background: var(--bg_orange); color: var(--text_white);}
.view_head > div:nth-child(2) span.expired{background: var(--bg_red);}

.view_status{margin-top: 15px;}
.view_status > div{padding: 10px 15px 11px 15px; border-radius: 10px; display: grid; grid-template-columns: 25px 1fr; grid-gap: 15px; align-items: center; box-sizing: border-box;}
.view_status.pending > div{background: var(--bg_pending);}
.view_status.finish > div{background: var(--bg_finish);}
.view_status.failed > div{background: var(--bg_failed);}
.view_status > div > div{width: 100%;}
.view_status > div > div:first-child > div{width: 25px; height: 25px;}

.view_payment_select{padding: 15px; border: 2px solid var(--bg_blue); margin-top: 15px; border-radius: 10px;}

.view_payment{margin-top: 15px; border: 1px solid var(--bg_line); border-radius: 10px; padding: 15px;}
.view_payment .vpIcon{display: inline-block; width: 100%; margin-bottom: 7px;}
.view_payment .vpIcon > img{height: 15px; float: right;}
.view_payment .vpInfo > div:first-child > div:first-child{margin-bottom: 2px;}
.view_payment .vpInfo .viPrice > div{display: inline-block; vertical-align: middle;}
.view_payment .vpInfo .viPrice > div:first-child{font-size: 20px; font-family: 'bold';}
.view_payment .vpInfo .viPrice > div:nth-child(2){color: var(--text_red); margin-left: 5px; text-decoration: line-through;}
.view_payment .vpInfo .viVoucher{padding: 10px 15px; font-size: 11px; margin-top: 10px; background: linear-gradient(to right, #e1ffff, #edf0ff); border-radius: 10px; border: 1.5px solid #edf0ff;}
.view_payment .vpInfo .viVoucher > div:first-child{border-bottom: 1px solid var(--bg_silver); padding-bottom: 5px; margin-bottom: 5px; font-weight: bold;}
.view_payment .vpInfo .viVoucher > div:first-child > div:first-child{color: var(--text_blue);}
.view_payment .vpInfo .viVoucher > div:nth-child(3){color: var(--text_silver);}
.view_payment .vpInfo .viWithKunci{font-size: 15px; color: var(--text_silver);}
.view_payment .vpInfo > div:nth-child(2){margin-top: 15px; border-top: 1px solid var(--bg_line); padding-top: 15px;}
.view_payment .vpDetail{margin-top: 5px;}
.view_payment .vpDetail .vdBtn > div:first-child{margin-top: 10px;}
.view_payment .vpDetail .vdBtn > div:nth-child(2){margin-top: 15px; font-size: 11px;}

.view_detail{margin-top: 15px;}
.view_detail .vdContent{margin-top: 10px; border: 1.5px solid var(--bg_line); border-radius: 10px; overflow: hidden;}
.view_detail .vdContent > div:first-child{padding: 15px; color: var(--text_silver); background: var(--bg_silvercalm);}
.view_detail .vdList > div{padding: 15px;}
.view_detail .vdList > div:not(:last-child){border-bottom: 1.5px solid var(--bg_line);}
.view_detail .vdList > div > div:first-child{}
.view_detail .vdList .vlItems{margin-top: 10px;}
.view_detail .vdList .vlItems > div{display: grid; grid-template-columns: 40px 1fr; grid-gap: 15px; padding: 5px 0px;}
.view_detail .vdList .vlItems > div:not(:last-child){margin-bottom: 5px;}
.view_detail .vdList .vlItems > div > div{width: 100%;}
.view_detail .vdList .vlItems > div > div:first-child > div{padding-bottom: 150%; background-color: var(--bg_silvercalm); border-radius: 5px;}
.view_detail .vdList .vlItems > div > div:nth-child(2) > div:first-child > span{padding: 2px 6px; border-radius: 5px; color: var(--text_white); font-size: 9px;}
.view_detail .vdList .vlItems > div > div:nth-child(2) > div:nth-child(2){margin-top: 5px; font-weight: bold;}
.view_detail .vdList .vlItems > div > div:nth-child(2) > div:nth-child(3){margin-top: 5px; font-size: 11px;}
.view_detail .vdList .vlShipping{margin-top: 10px;}
.view_detail .vdList .vlShipping .vpFrom{color: var(--text_silver);}
.view_detail .vdList .vlShipping .vpTracking{margin-top: 5px; padding: 7px 10px 8px 10px; transition: var(--transition); border-radius: 5px; cursor: pointer; border: 1.5px solid var(--bg_black);}
.view_detail .vdList .vlShipping .vpTracking:hover{background: var(--bg_silvercalm);}
.view_detail .vdList .vlShipping .vpTracking > div:first-child{font-weight: 'bold'; font-size: 12px;}
.view_detail .vdList .vlShipping .vpTracking > div:nth-child(2){text-decoration: underline; color: var(--text_blue);}
.view_detail .vdList .vlShipping .vpInfo{margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr;}
.view_detail .vdList .vlShipping .vpInfo > div{width: 100%;}
.view_detail .vdList .vlShipping .vpInfo > div > div:nth-child(2){font-family: 'bold';}
.view_detail .vdList .vlTotal{display: grid; margin-top: 15px; grid-template-columns: 1fr 135px; align-items: center; grid-gap: 15px;}
.view_detail .vdList .vlTotal > div{width: 100%;}
.view_detail .vdList .vlTotal > div:first-child{text-align: right; color: var(--text_silver);}
.view_detail .vdList .vlTotal > div:nth-child(2){font-weight: bold; color: var(--text_green);}

.view_alert{padding: 10px 15px; border-radius: 10px; background: var(--bg_orange); color: var(--text_white);}
.view_alert > div:not(:last-child){margin-bottom: 5px;}

.view_popup_ovo{}
.view_popup_ovo .vpoIcon{padding: 15px 0px;}
.view_popup_ovo .vpoIcon > div{width: 55px; height: 55px;}
.view_popup_ovo .vpoDesc{text-align: center; font-weight: bold;}
.view_popup_ovo .vpoTime{text-align: center; margin-top: 15px;}
.view_popup_ovo .vpoTime > div{width: 75px; padding: 10px 0px; border: 2px solid var(--bg_blue); border-radius: 10px;}
.view_popup_ovo .vpoTime > div > div{font-family: 'bold'; font-size: 35px; color: var(--text_blue);}
.view_popup_ovo .vpoInfo{margin-top: 15px; padding: 0px 25px; color: var(--text_silver); text-align: center;}

.view_qrcode_layout{padding-top: 10px; padding-bottom: 15px; text-align: center;}
.view_qrcode_layout > div:first-child{max-width: 300px; margin: 25px auto; padding: 0px 35px;}
.view_qrcode_layout > div:first-child > div{padding-bottom: 100%; background-color: var(--bg_silvercalm); background-size: 100%; border: 3px solid var(--bg_blue); border-radius: 10px;}

.view_va_layout{margin-top: 25px;}
.view_va_layout > div:first-child{display: table; table-layout: fixed; width: 100%;}
.view_va_layout > div:first-child > div{display: table-cell; vertical-align: middle;}
.view_va_layout > div:first-child > div:first-child{font-size: 20px; font-family: 'bold';}
.view_va_layout > div:first-child > div:last-child{text-align: right;}
.view_va_layout > div:first-child > div:last-child > img{height: 30px;}
.view_va_layout > div:nth-child(2){margin-top: 25px; padding: 15px 0px; border-top: 1px solid var(--bg_silver); border-bottom: 1px solid var(--bg_silver)}
.view_va_layout > div:nth-child(2) > div:first-child{font-family: 'bold';}
.view_va_layout > div:nth-child(2) > div:nth-child(2){font-size: 20px; letter-spacing: 2px; font-family: 'bold'; color: var(--text_blue); margin-top: 5px;}
.view_va_layout > div:nth-child(2) > div:nth-child(3){font-family: 'bold'; margin-top: 15px;}
.view_va_layout > div:nth-child(2) > div:nth-child(4){font-size: 20px; letter-spacing: 2px; font-family: 'bold'; color: var(--text_blue); margin-top: 5px;}
.view_va_layout > div:nth-child(3){margin-top: 20px; color: var(--text_green);}
.view_va_layout > div:nth-child(4){margin-top: 20px; padding: 15px 20px; background: var(--bg_silvercalm);}
.view_va_layout > div:nth-child(5){margin-top: 5px;}
.view_va_layout .vvl_steps > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.view_va_layout .vvl_steps > div > div:first-child{padding: 15px 0px; font-family: 'bold'; font-size: 17px; cursor: pointer;}
.view_va_layout .vvl_steps > div > div:nth-child(2){display: none; margin-bottom: 15px; padding-left: 30px;}
.view_va_layout .vvl_steps ol > li:not(:last-child){margin-bottom: 7px;}

.view_tracking_detail{margin-top: 15px; border-radius: 5px; border: 1px solid var(--bg_line);}
.view_tracking_detail > div{padding: 10px 15px;}
.view_tracking_detail > div.active{background: #dcffe6;}
.view_tracking_detail > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.view_tracking_detail > div > div:first-child{color: var(--text_silver); font-size: 11px;}
.view_tracking_detail .vtdLogin span{padding: 3px 7px; border-radius: 5px; background: var(--bg_bluedark); cursor: pointer; font-size: 11px; color: var(--text_white);}
.view_tracking_detail .vtdStatus{margin-top: 3px;}
.view_tracking_detail .vtdStatus span{padding: 3px 7px; color: var(--text_white); border-radius: 5px; font-size: 11px; background: var(--bg_silver);}
.view_tracking_detail .vtdStatus span.process{background: var(--bg_orange);}
.view_tracking_detail .vtdStatus span.delivered{background: var(--bg_green);}
.view_tracking_detail .vtdPod{margin-top: 5px; font-size: 11px;}
.view_tracking_detail .vtdPod span{font-family: 'bold';}

/**EXTERNAL: FILM**/
.extFilm_layout{max-width: 500px; margin-top: 25px; padding: 20px; border: 2px solid red; border-radius: 10px;}
.extFilm_layout > div:not(:first-child){margin-top: 20px;}

.extFilm_layout .elLogo{white-space: nowrap; width: 100%;}
.extFilm_layout .elLogo > div{width: 115px; height: 24px; display: inline-block;}
.extFilm_layout .elContent{display: grid; grid-template-columns: 55px 1fr; grid-gap: 15px; align-items: center;}
.extFilm_layout .elContent > div{width: 100%;}
.extFilm_layout .elContent > div:first-child > div{padding-bottom: 150%; border-radius: 5px; background-color: var(--bg_silvercalm);}
.extFilm_layout .elContent > div:nth-child(2) > div:first-child{font-size: 17px; font-weight: bold;}
.extFilm_layout .elContent > div:nth-child(2) > div:nth-child(2){color: var(--text_silver);}
.extFilm_layout .elActive{padding: 13px 15px 15px 15px; background: var(--bg_green); border-radius: 10px; color: var(--text_white);}
.extFilm_layout .elInfo{padding: 9px 15px 10px 15px; background: var(--bg_red); color: var(--text_white); border-radius: 10px;}
.extFilm_layout .elDesc{padding: 9px 15px 10px 15px; border: 1px solid var(--bg_silver); border-radius: 10px;}

.extFilm_layout .elPackage .epTitle{font-weight: bold; margin-bottom: 5px;}
.extFilm_layout .elPackage .epOpt{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 15px; box-sizing: border-box;}
.extFilm_layout .elPackage .epOpt > div{cursor: pointer; padding: 4px 0px 5px 0px; width: 100%; border-radius: 5px; font-weight: bold; color: var(--text_silver); text-align: center; border: 2px solid var(--bg_line); position: relative; transition: var(--transition);}
.extFilm_layout .elPackage .epOpt > div:before{content: ''; opacity: 0; width: 15px; height: 15px; position: absolute; top: 15px; left: 7px; background-image: url('../../../images/icon/checked_round.png'); background-size: 100%; transition: var(--transition);}
.extFilm_layout .elPackage .epOpt > div > div:first-child{font-size: 11px; color: var(--text_silver);}
.extFilm_layout .elPackage .epOpt > div:hover{color: var(--text_red); border: 2px solid var(--bg_red);}
.extFilm_layout .elPackage .epOpt > div.active{color: var(--text_red); border: 2px solid var(--bg_red);}
.extFilm_layout .elPackage .epOpt > div.active:before{opacity: 1;}

.extFilm_layout .elPayment{margin-top: 25px;}
.extFilm_layout .elPayment > div{padding: 15px 10px; cursor: pointer; display: grid; grid-template-columns: 1fr 100px; align-items: center; box-sizing: border-box; border: 1px solid var(--bg_line); border-radius: 10px;}
.extFilm_layout .elPayment > div:not(:last-child){margin-bottom: 10px;}
.extFilm_layout .elPayment > div:hover{background: var(--bg_silvercalm); border: 1px solid var(--bg_red);}
.extFilm_layout .elPayment > div > div{width: 100%;}
.extFilm_layout .elPayment > div > div:first-child{font-size: 0px;}
.extFilm_layout .elPayment > div > div:first-child img{height: 20px;}
.extFilm_layout .elPayment > div > div:nth-child(2){text-align: right; font-weight: bold; color: var(--text_silver);}

.extFilm_paymentPoints{padding: 15px 0px; border-top: 2px solid var(--bg_red); border-bottom: 2px solid var(--bg_red);}
.extFilm_paymentPoints > div:first-child{margin-bottom: 5px; font-weight: bold;}
.extFilm_paymentPoints > div:nth-child(2){margin-bottom: 15px;}
.extFilm_paymentPoints > div:nth-child(3){margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px;}
.extFilm_paymentPoints > div:nth-child(3) > div{width: 100%;}
.extFilm_paymentPoints > div:nth-child(3) button{width: 100%;}

.extFilm_popup_point{padding: 10px 25px 12px 25px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; box-sizing: border-box; border-bottom: 1px solid var(--bg_silver);}
.extFilm_popup_point > div{width: 100%; display: grid; grid-template-columns: 25px 1fr; grid-gap: 15px; align-items: center;}
.extFilm_popup_point > div > div{width: 100%;}
.extFilm_popup_point .ppIcon{height: 20px; width: 20px;}
.extFilm_popup_point .ppContent > div:first-child{font-size: 11px;}
.extFilm_popup_point .ppContent > div:nth-child(2){font-weight: bold;}

.extFilm_paymentPointsFinish > div:first-child{margin-bottom: 15px;}
.extFilm_paymentPointsFinish > div:nth-child(2){padding: 0px 15px;}
.extFilm_paymentPointsFinish > div:nth-child(2) > div:first-child{font-size: 15px;}
.extFilm_paymentPointsFinish > div:nth-child(3){padding: 15px;}

/**TRACKING**/
.tracking_layout{max-width: 500px;}
.tracking_detail{margin-top: 15px; border-radius: 5px; border: 1px solid var(--bg_line);}
.tracking_detail > div{padding: 10px 15px;}
.tracking_detail > div.active{background: #dcffe6;}
.tracking_detail > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.tracking_detail > div > div:first-child{color: var(--text_silver);}
.tracking_detail > div .tdBody{font-weight: bold;}
.tracking_detail .vtdLogin span{padding: 3px 7px; border-radius: 5px; background: var(--bg_bluedark); cursor: pointer; font-size: 11px; color: var(--text_white);}
.tracking_detail .vtdStatus{margin-top: 3px;}
.tracking_detail .vtdStatus span{padding: 3px 7px; color: var(--text_white); border-radius: 5px; font-size: 11px; background: var(--bg_silver);}
.tracking_detail .vtdStatus span.process{background: var(--bg_orange);}
.tracking_detail .vtdStatus span.delivered{background: var(--bg_green);}
.tracking_detail .vtdPod{margin-top: 5px; font-size: 11px;}
.tracking_detail .vtdPod span{font-family: 'bold';}

/**ERROR**/
.e_box{padding: 20px 25px 25px 25px; border-radius: 5px; margin: 50px auto; border: 1px solid var(--bg_line); text-align: center; max-width: 500px; box-sizing: border-box;}
.e_box .ebIcon{margin: 10px 0px 25px 0px;}
.e_box .ebIcon > div{width: 50px; height: 50px;}
.e_box .ebTitle{font-size: 20px; font-weight: bold;}
.e_box .ebDesc{margin-top: 10px; color: var(--text_silver);}