/* custom */

.coverslipok_confirm_form {
display: block;
clear: both;
}

.coverslipok_confirm_form p.intro {
text-align: left;
font-size: 15px !important;
padding: 0;
margin: 0;
}


#slipok_confirm_form {
margin: 10px 0 0 0;
}

.error label {
background: red;
}

#slipok_confirm_form .coverint{
float: left;
display: block;
width:100%;
}

#coverslipok_confirm_form input.txtnumber::-webkit-outer-spin-button,
#coverslipok_confirm_form input.txtnumber::-webkit-inner-spin-button {
-webkit-appearance: none;
}

#coverslipok_confirm_form input.txtinput {
border: none;
display: inline;
font-size: 16px;
width: 100%;
background-color: #fff !important;
border: 1px solid #ccc!important;
}
#coverslipok_confirm_form {
background-image: url('../images/slipok_bg.png');
}
.coverslipok_confirm_form_inner {
background: #fff;
padding: 30px 12px 0 12px;
border-radius: 20px;
}
#coverslipok_confirm_form .subheader {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
align-items:center;
}
#coverslipok_confirm_form .subheader .slipok_col1 h2{
font-size: 23px;
}
#coverslipok_confirm_form .subheader .slipok_col2 img{
height: 18px;
}

#coverslipok_confirm_form .slipok_row{
display: flex;
justify-content: space-between;
margin-bottom: 0;
align-items:center;
}
#coverslipok_confirm_form .slipok_row > .slipok_col {
width:50%;
}
#coverslipok_confirm_form .slipok_row > .slipok_col1  {
padding-right: 4%;
}
#coverslipok_confirm_form .slipok_row > .slipok_col > input{
width:100%;
border-radius: 8px;
padding-left:10px;
line-height: 30px;
}
#coverslipok_confirm_form .slipok_row > select {
width: 100%;
border-radius: 8px;
padding-left: 10px;
line-height: 30px;
height: 46px;
border: 1px solid #ccc;
}
#coverslipok_confirm_form .slipok_row  > textarea{
width:100%;
border-radius: 8px;
background-color: #fff !important;
border: 1px solid #ccc !important;
}
#coverslipok_confirm_form input.error,
#coverslipok_confirm_form textarea.error,
#coverslipok_confirm_form .slipok_item.error,
#coverslipok_confirm_form .image-uploader.error{
border: 3px solid red !important;
}
#coverslipok_confirm_form #error.error{
color: red;
}
#coverslipok_confirm_form .slipok_row > input{
width:100%;
border-radius: 8px;
padding-left:10px;
line-height: 30px;
}
.sliphide{display:none!important;}
.slipok_coverbankinfo {
}
.slipok_item {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
align-items:center;
background: #F4F6F8;
border-radius: 8px;
padding: 15px 0;
}
.coverbutton {
text-align: center;
width: 100%;
}
td.radio input {
width: 20px !important;
}
.tbloption {
width: 100% !important;
}
@media only screen and (max-width: 720px) {
.tbloption {
width: 100% !important;
}
}
.tbloption tr td {
font-size: 15px !important;
padding: 4px !important;
}
.tbloption img {
margin-bottom: 0 !important;
margin-right: 5px;
}

.button {
font-weight: normal;
letter-spacing: 2px;
font-weight: bold;
}
.btn-pending {
background-color: #929EAC  !important;;
cursor: no-drop;
}
.btn-pending::before {
background-color: white;
cursor: no-drop;
content: url(../images/clock_pending_time_icon.png);
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
margin-right: 5px;
border-radius: 100px;
}
.btn-success {
background-color: green !important;
}
.btn-success::before {
background-color: white;
cursor: no-drop;
content: url(../images/success_verfied_icon.png);
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
margin-right: 5px;
border-radius: 100px;
}
.btn-fail {
background-color: red !important;
}
.btn-fail::before {
background-color: white;
cursor: no-drop;
content: url(../images/exclamation_circle_icon.png);
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
margin-right: 5px;
border-radius: 100px;
}

.bankname img {
margin-bottom: 0;
}

#slipok_confirm_form .bt {
padding: 25px 0 36px 0;
margin: 20px 0 0 0;
clear: both;
}
.uploadtext {margin:-20px 0 0 50px;}
.datepicker {
width: 140px;
background: url(../images/icon_calendar.png) no-repeat #fff 120px 11px !important;
}

#from-24hr {
width: 82px;
}

.coverslipok_confirm_form input.error {
border: 1px solid red !important;
}

.coverslipok_confirm_form label.error {
color: red;
display: block;
font-size: 16px;
}

.coverint input#orderid {
width: 200px;
padding: 2px !important;
background: #fff !important;
margin: 0 0 0 50px !important;
border: 1px solid #ccc!important;
}

.coverint input {
width: 200px;
margin: 0 0 0 50px !important;
padding: 2px !important;
}

.error label {
background: none!important;
color: red!important;
}

.errormsg {
text-align: left;
padding: 0 20px 20px 0;
}

.slipok_confirm_thankyou {
margin: 0 0 40px 0;
}

.slipok_confirm_thankyou p.thkintro {
text-align: left;
font-size: 16px !important;
padding: 0 0 13px 0;
margin: 0;
}

table.slipok_confirm_thk_tbl {
border: none;
margin: 0 0 0 0;
font-size: 18px;
}

table.slipok_confirm_thk_tbl tr.slipok_confirm_thk_tbl {
background: #cccccc;
}

table.slipok_confirm_thk_tbl tr.bg {
background: #eee;
}

table.slipok_confirm_thk_tbl tr td img {
margin: 20px;
width: 80%;
}

table.slipok_confirm_thk_tbl tr td {
text-align: left;
height: 40px;
font-size: 16px;
padding: 0;
}

table.slipok_confirm_thk_tbl tr td.col1 {
width: 30%;
padding: 10px 0 0 10px;
font-weight: normal;
font-size: 16px;
vertical-align: top;
}
.errormsg-container {color:red;}
.bt_title .ui-widget-header {
color: #222;
background: none;
border: none;
}
.bt_title .ui-widget-header .ui-icon {
background-image: url(../images/ui-icons_222222_256x240.png);
}
.btblnoti td, .btblnoti th {
border-width: 0;
}
.bubbletxt {
margin: 20px 0 20px 0;
font-size: 14px;
text-align: left;
}
.covertime{
float: left;
padding:0 0 0 50px;
}
.covertime select{margin:20px 20px 0 0;width:120px;float:left;display:block;}
.covertime .min{width:100px;float:left;display:block;}

div.coverslipfile {
width: 94px;
height: 94px;
}
div.coverslipfile input {
display: block !important;
width: 124px !important;
height: 50px !important;
opacity: 0;
cursor: pointer;
position: relative;
top: -40px;
left: 20px;
}
div.coverslipfile:before{
content: 'Select file';
background: #ccc;
color: #fff;
padding: 9px 44px;
margin: 0 0 -6px 48px;
}
.slipok_uploadrow .image-uploader{
min-height: 10rem;
border: 1px #d9d9d9;
border-style: dashed;
position: relative;
border-radius: 8px;
}
.slipok_item.active{
border: 3px solid #3E4CC2;
}
.slipok_item{
justify-content: flex-start;;
border: 3px solid #F4F6F8;
}

.slipok_item p{
font-size:13px;
color:#637381;
margin-bottom: 0;
}

.slipok_item .slipbankinfo_col2 {
display:flex;
align-items: center;
width:46%;
}
.slipbankinfo_subcol1 img{
width: 43px;
}
.slipbankinfo_subcol2 {
padding-left: 10px;
color: #000;
}
.slipok_accno{
display: flex;
color: #000;
}
.slipbankinfo_col4{
color: #000;   
}

.slipok_pp{
color: #000!important;
font-size: 17px!important;   
}

.slipok_accno img{
cursor: pointer;
width: 18px;
height: 18px;
margin-left: 5px;
margin-top: 4px;
}
#noti-submit{
margin-top: 30px;
color: #fff;
width: 100%;
height: 48px;
display: flex;
padding: 12px 15px;
border-radius: 10px;
font-size: 17px;
letter-spacing: 1px;
align-items: center;
justify-content: center;
}
#noti-submit img{
height: 22px;
}
#noti-submit span{
padding-left:4px;
}
.st-default #noti-submit{
background: linear-gradient(99.47deg, #3E4CC2 0.97%, #0092C7 100%);
}
.st-success #noti-submit{
background: #1CC684;
}
.st-success #noti-submit::before{
content: url(../images/complete.svg);
display: inline-block;
width: 24px;
height: 24px;
margin: 0 5px;
}
.st-pending #noti-submit{
background: #F2994A;
}
.st-fail-noqr #noti-submit{
background: #919EAB;
}
.st-pending #noti-submit::before{
content: url(../images/pending.svg);
display: inline-block;
width: 24px;
height: 24px;
margin: 0 5px;
}
.st-fail #noti-submit{
background: #E83737;
}
.st-fail #noti-submit::before{
content: url(../images/fail.svg);
display: inline-block;
width: 24px;
height: 24px;
margin: 0 5px;
}
.st-fail .slipok_paymentstatus {
color:#E83737;
}
.st-verifying #noti-submit{
background: #F2994A;
}
.mt10{
margin-top:40px;
}

.paymentslip_title{
margin-top:40px;
font-size: 20px;   
}

.slipok_paymentstatus {
font-size: 14px;
padding-top: 5px;
margin-bottom: 0;
}
.slipok_paymentstatus img {
height:12px;
display: inline;
}

.slipok-icon {
display: block;
padding: 15px;
border: solid 1px #ccc;
border-radius: 10px;
}
.slipok-icon::before{
content: '!';
display: block;
background-color: red;
color: white;
border-radius: 50%;
position: relative;
z-index: 100000;
left: 18px;
top: 10px;
width: 11px;
height: 12px;
font-size: 10px;
line-height: 12px;
text-align: center;
}

#slipok-bank-icon {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
float: left;
margin-right: 10px;
}
.qrtxt .slipok-view-full{
color: #3B51C3 !important;
background-image: url(/wp-content/plugins/wp-slipok-confirm/images/tab_scan.svg);
background-position: left;
background-repeat: no-repeat;
background-size: 12px;
margin-left: 0;
padding-left: 18px;
}
.slipok-view-full {
padding: 5px;
border-radius: 8px;
font-size: small;
text-align: center;
}
.slipok-view-full a.slipok-close{
background: #d2eaf8;
padding: 5px 20px;
border-radius: 6px;
}

@media only screen and (min-width: 769px) {
.cover_slipok_belowpowerby{
display:none!important;
}
#coverslipok_confirm_form {
padding: 10px;
}

.slipbankinfo_cover123.threeitem{
	width: 73%!important;
}
.slipbankinfo_col3_5.threeitem{
	width: 30%!important;
} 

.slipbankinfo_cover123 {
width:50%;
display: flex;
}
.slipbankinfo_cover23{
width: 100%;
display: flex;
margin-left: 5%;
align-items: center;
}
.slipbankinfo_cover123 .slipbankinfo_col1 input{
	padding: 0;
    margin: 0;
}

.slipbankinfo_col1{
width: 10%;
padding-left: 5%;
display: flex;
align-items: center;
}
.slipbankinfo_col2{
width: 40%;
padding-left: 0;
}
.slipbankinfo_col3{
width: 50%;
padding-left: 5%;
}
.slipbankinfo_col3_5{
width: 25%;
padding-left:0;
}
.slipbankinfo_col4{
width: 15%;
padding-left:0;
}
.slipok_coverbutton {
width: 252px;
margin: 0 auto;
}
.slipbankinfo_col4 a.qrimg{
width: 100px;
}
.slikokaccountname_m{
display:none;
}
.slipok_uploadrow .uploaded-image img{
height: 300px;
width: auto;
margin: 0 auto;
}
.slipbankinfo_col4 a.qrtxt{
padding: 0 0 0 0;
display: block;
text-align: left;
}
.slipbankinfo_subcol1 img {
width: 35px;
border-radius: 30px;
margin-top: 4px;
}
.slipok_uploadrow .image-uploader .uploaded .uploaded-image{
padding-bottom:0!important;
}

}
@media only screen and (max-width: 768px) {
#slipok-notice > .slipok-icon > img{
margin-bottom: 50px;
}
.image-uploader .uploaded .uploaded-image{
padding-bottom: 0!important;
}

.slipok_uploadrow .image-uploader{
min-height:7rem!important;
}


.slikokaccountname_d{
display:none;
}
.slikokaccountname_m{
width: 100% !important;
}
.slipbankinfo_col4 a.qrimg{
width: 100%;
}
.cover_slipok_belowpowerby img{
height: 20px;
display:block;
}
.slipok_item{
flex-wrap: wrap;
}
.slipok_toppowerby {
display:none;
}
.slipbankinfo_cover123 {
width:68%;
display: flex;
align-items: center;
}
.slipbankinfo_cover23{
width: 85%;
}
img.slipok_belowpowerby{
margin: 30px auto 0 auto;
}
#coverslipok_confirm_form {
padding:18px 12px;
}
.slipok_coverbutton {
width: 100%;
margin: 0 auto;
}
.slipbankinfo_subcol1 img {
width: 35px;
border-radius: 30px;
margin-top: 4px;
}
.slipbankinfo_col1{
width: 20%;
padding-left: 5%;
padding-right: 5%;
}
.slipbankinfo_col2{
width: 100%;
padding-left: 0;
}
.slipbankinfo_col3{
width: 100%;
margin-top: 10px;
padding-left: 0;
}
.slipbankinfo_col3_5{
margin-top:10px;
}
.slipbankinfo_col4{
width: 30%;
padding-left: 0;
}
.slipbankinfo_col4 a .slipok-view-full{
font-size: 10px;
}
.slipbankinfo_subcol2 {
font-size: 14px;
}
.slipbankinfo_col4{
font-size: 14px;   
}
.slikokaccountname {
width:100%;
}
.slipbankinfo_col4 a.qrtxt{
padding: 0 0 0 0;
display: block;
text-align: center;
}
}


.jquery-modal .modal{
max-width: 320px;
text-align: center;
color: #000;
background: #F9F7F7;
padding: 15px 30px 30px 30px;
}
.cover_slipok_popupimg {
background: #fff;
padding: 20px 10px;
border-radius: 20px;
margin-top: 20px;
margin-bottom: 10px;
}

.cover_slipok_popupimg .slippopupimg img{
height: 28px;
margin-bottom: 10px;
}
.slipok_popup_number{
font-size: 20px;
margin-bottom: 0;
}
.slipok_toppp{
width: 60px;
margin: -46px auto 20px auto;
}
.jquery-modal .modal a.close-modal{
top: 12.5px;
right: 12.5px;
background-image: url('/wp-content/plugins/wp-slipok-confirm/images/popup_close.svg')!important;
}
.cover_slipok_popupimg img{margin:0 auto;width: 90%;}
.slipok-close img{height:15px;display: inline;    margin-right: 6px;}
.slipok-close{
color: #000;
}
.slipok_amount{
color: #3B51C3;
background: #d2eaf8;
padding: 10px;
border-radius: 8px;
font-weight: bold;
}
.slipok_uploadrow i.iui-cloud-upload{
width: 40px;
height: 40px;
background: url(/wp-content/plugins/wp-slipok-confirm/images/upload_icon.svg);
background-repeat: no-repeat;
}
.slipok_uploadrow i.iui-cloud-upload:before{display:none;}
.slipbankinfo_col4 a {
color: #000;
text-decoration: none!important;
font-weight: bold;
}
.slipbankinfo_col4 a .slipok-view-full {
color:#000;
}
.slipbankinfo_col4 a.qrimg {
background: #fff;
display: block;
padding: 18px 8px 8px 8px;
border-radius: 10px;
border: 1px solid #C4CDD5;
background-image: url(/wp-content/plugins/wp-slipok-confirm/images/prompt-pay-logo_s.svg);
background-repeat: no-repeat;
background-size: 32px;
background-position: center 3%;
}


#upload-slip .uploaded .uploaded-image{
display: block;
margin: 0 auto;
}
.slipok_row.field_customer_email {
flex-direction: column;
}

.slipok_row.field_customer_email label.error {
text-align: left;
width: 100%;
color: red;
}

.slipok_row.slipok_orderid {
flex-direction: column;
}

.slipok_row.slipok_orderid #error {
text-align: left;
width: 100%;
color: red;
padding: 8px 0 0 0;
}
.slipok_popup_accountName{
margin: 8px 0;
}

#noti-submit:disabled{
opacity:1!important;
}
form#slipok_confirm_form .slipok_row_col{
flex-direction: column;
align-items: start;
}

form#slipok_confirm_form .slipok_row_col label{
text-align: left;
align-items: start;
}
form#slipok_confirm_form .slipok_row_col label span{
color:red;
}
.slipok_col label span{
color:red;
}
#slipok-notice .slipok-icon{
padding: 3px 15px 15px 15px;
font-size: 14px;
}