@-webkit-keyframes fadeIn {
    from { opacity: 0 }
    to { opacity: 1 }
}
@keyframes fadeIn {
    from { opacity: 0 }
    to { opacity: 1 }
}
.icon-click-to-pay:before {content: "\ea9a";}
.click-to-pay { border-radius: 6px; background: #fff;}
.click-to-pay.section-loading { max-height: 80vh; }
.click-to-pay.add-bank-account-success h2 { font-size: 22px; }
.click-to-pay .agreement { padding: 18px 21px 21px 21px; }
.click-to-pay .agreement .error-text { margin: 5px 0 0 !important; cursor: default; }
.click-to-pay .agreement p { margin: 0 0 10px; }
.click-to-pay .agreement.green { margin-top: 33px; margin-left: auto; margin-right: auto; }
.click-to-pay.no-bank-account { text-align: center; white-space: nowrap }
.click-to-pay.no-bank-account > * { white-space: normal }
.click-to-pay.no-bank-account:before, .click-to-pay.no-bank-account > * { float: none; display: inline-block; vertical-align: middle; }
.click-to-pay.no-bank-account:before { content: ''; height: 469px }
.click-to-pay .no-account { margin: 15px 0; width: 28.625em; min-height: 28.625em; border-radius: 100%; white-space: nowrap; }
.click-to-pay .no-account > * { white-space: normal; }
.click-to-pay .no-account:before, .click-to-pay .no-account > * { float: none; display: inline-block; vertical-align: middle; }
.click-to-pay .no-account:before { content: ''; height: 29.625em; }
.click-to-pay .no-account strong { font-size: 1.07143em; line-height: 1.46667; color: #777 }
.click-to-pay .no-account .btn { min-width: 179px }
.click-to-pay .no-account .btn .plus { margin: 0 5px 0 0 }
.click-to-pay p { margin: 0 0 33px; font-size: .92857em; line-height: 1.46154; letter-spacing: .09px }
.click-to-pay .head { padding: 20px }
.click-to-pay h2 { float: left; font-size: 1em; line-height: 1.5; margin: 7px 0 0; }
@media (max-width:768px) {
    .click-to-pay h2 { float: none; }
}
.click-to-pay h3 { margin: 0 0 1px; font-weight: 500; font-size: 1em; line-height: 1.5 }
.click-to-pay .actions { top: 0; left: 0; margin: 0; opacity: 0; z-index: 5; padding: 20px; width: 100%; height: 100%; position: absolute; text-align: center; -webkit-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; white-space: nowrap }
.click-to-pay .actions > * { white-space: normal }
.click-to-pay .actions:before, .click-to-pay .actions > * { float: none; display: inline-block; vertical-align: middle }
.click-to-pay .actions:before { content: ''; height: 100% }
.click-to-pay .actions li { margin: 0 12px }
.click-to-pay .actions a { font-weight: 500; font-size: 0.8571428571428571em; line-height: 1.5 }
.click-to-pay .actions a .ico { top: -1px; font-size: 120%; margin: 0 6px 0 0; position: relative; vertical-align: middle }

@media (max-width:479px) {
    .click-to-pay.no-bank-account .ico-holder { max-width: 80px }
}
.click-to-pay.no-bank-account .no-account { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 28.571em; height: 28.571em; max-width: 28.571em; max-height: 28.571em; min-width: 0; min-height: 0; margin: 0 auto; background: transparent !important; border-radius: 0 }
@media (max-width:479px) {
    .click-to-pay.no-bank-account .no-account { width: 19.55em; height: 19.55em; max-width: 19.55em; max-height: 19.55em }
}
.click-to-pay.no-bank-account .no-account:before { content: ''; background: rgba(225, 237, 249, 0.31); border-radius: 100%; width: 100%; height: 100%; max-width: 28.571em; max-height: 28.571em }
.click-to-pay.no-bank-account .no-account .circle { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%) }
@media (min-width:769px) {
    .click-to-pay.no-bank-account .no-account .circle { width: 100%; max-width: 19.643em }
}
@media (max-width:479px) {
    .click-to-pay.no-bank-account .no-account .circle { top: 46% }
}
.click-to-pay.no-bank-account .no-account strong { font-weight: 700 }
@media (max-width:479px) {
    .click-to-pay.no-bank-account .no-account strong { font-size: 1em; line-height: 1.57143 }
}
@media (max-width:479px) {
    .click-to-pay.no-bank-account .no-account p { font-size: .85714em; line-height: 1.83333 }
}
.click-to-pay.no-bank-account .no-account .btn { font-size: 1em; line-height: 1 }
@media (max-width:479px) {
    .click-to-pay.no-bank-account .no-account .btn { min-width: 125px }
}
.click-to-pay .chosen-container .chosen-results { height: auto !important }
.click-to-pay .was-validated .form-control { border-color: #DFE6EE !important }
.click-to-pay .was-validated .error-field.form-control { border-color: #C33A3A !important }
.click-to-pay-main .alert { margin: 0 0 20px; padding: 16px 56.85px 15px !important }
@media (max-width:480px) {
    .click-to-pay-main .alert { padding: 16px 35px 15px 55px !important }
}
.click-to-pay-main .alert.alert-success > .ico, .click-to-pay-main .alert.alert-success > .icon-info, .click-to-pay-main .alert.alert-success:before, .click-to-pay-main .alert.alert-primary > .ico, .click-to-pay-main .alert.alert-primary > .icon-info, .click-to-pay-main .alert.alert-primary:before, .click-to-pay-main .alert.alert-danger > .ico, .click-to-pay-main .alert.alert-danger > .icon-info, .click-to-pay-main .alert.alert-danger:before { left: 16px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin: 0 }
.click-to-pay-main .alert.alert-success:before { content: '\e97d' !important; border: none !important; border-radius: 0 !important; font-weight: 500 !important; font-size: 1.15357em !important; line-height: 1; line-height: 1 !important; width: auto !important; height: auto !important }
.click-to-pay-main .alert.alert-danger:before { line-height: 1.2 !important; padding-left: 4.5px }
.click-to-pay-main .alert ~ .alert { margin-top: -12px }

.click-to-pay-main > #main .verification-success { margin: 0 0 45px }
.click-to-pay-main > #main .info-list li { min-height: 36px }
@media (max-width:991px) {
    .click-to-pay-main > #main .agreement { padding: 18px 21px; }
}
@media (min-width:1201px) and (max-width:1599px) {
    .click-to-pay-main > #main .click-to-pay .box { width: 100%; max-width: 100%; }
}
.click-to-pay-main > #main .click-to-pay .box.box-hover, .click-to-pay-main > #main .click-to-pay .box:hover, .click-to-pay-main > #main .click-to-pay .box:focus, .click-to-pay-main > #main .click-to-pay .box.focused { border-color: #D8DDE4 }
.click-to-pay-main > #main .click-to-pay .box .actions:focus, .click-to-pay-main > #main .click-to-pay .box .actions:focus-within, .click-to-pay-main > #main .click-to-pay .box:hover .actions:hover, .click-to-pay-main > #main .click-to-pay .box.box-hover .actions, .click-to-pay-main > #main .click-to-pay .box.focused .actions, .click-to-pay-main > #main .click-to-pay .box:hover .actions, .click-to-pay-main > #main .click-to-pay .box:focus .actions { border-color: #1434CB; background-color: #fff; -webkit-box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.1); padding: 23px 20px; z-index: 3 }
.click-to-pay-main > #main .click-to-pay .box .actions:focus, .click-to-pay-main > #main .click-to-pay .box .actions:focus-within, .click-to-pay-main > #main .click-to-pay .box:hover .actions:hover, .click-to-pay-main > #main .click-to-pay .box.box-hover .actions, .click-to-pay-main > #main .click-to-pay .box.focused .actions, .click-to-pay-main > #main .click-to-pay .box:hover .actions, .click-to-pay-main > #main .click-to-pay .box:focus .actions { opacity: 1; -webkit-transition: border-color .5s ease, opacity .5s ease; -o-transition: border-color .5s ease, opacity .5s ease; transition: border-color .5s ease, opacity .5s ease }
.click-to-pay-main > #main .click-to-pay .box .actions { height: 100%; max-width: fit-content; width: auto; right: 0; left: unset; background-color: #fff; border-radius: 4px; border-width: 1px; border-style: solid; border-color: #fff; display: flex; flex-direction: column; justify-content: center;  align-self: start }
@media (max-width:991px) {
    .click-to-pay-main > #main .click-to-pay .box .actions { right: 0 }
}
@media (max-width:379px) {
    .click-to-pay-main > #main .click-to-pay .box .actions { max-width: 55%; padding: 20px 10px }
    .click-to-pay-main > #main .click-to-pay .box .actions > li a { font-size: .78571em; line-height: 1.72727 }
}
.click-to-pay-main > #main .click-to-pay .box .actions:before { top: 0; left: 0; margin: 0; opacity: 0; width: 100%; height: 100%; position: absolute; background: #fff; z-index: -1 }
.click-to-pay-main > #main .click-to-pay .box .actions > * { display: block; text-align: left; margin: 0; padding: 0; height: auto !important; -ms-flex-item-align: start; -ms-grid-row-align: start; align-self: start; width: 100% }
.click-to-pay-main > #main .click-to-pay .box .actions > * > a { display: block; width: 100%; }
.click-to-pay-main > #main .click-to-pay .num { font-weight: 400; }
.click-to-pay-main > #main .click-to-pay .account-type { color: #106EB8; font-size: .85714em; line-height: 1.5; font-weight: 500; }
.click-to-pay-main > #main .click-to-pay .desc > .mb25 { margin-bottom: 24px !important }
.click-to-pay-main > #main .click-to-pay .head { padding: 18px 30px 17px 19px; border-bottom: 1px solid #EFEFEF; }
.click-to-pay-main > #main .click-to-pay .head h2 { color: #222; font-weight: 400; }
@media (max-width:767px) {
    .click-to-pay-main > #main .click-to-pay .head h2 { float: left; margin: 10px 0 0; }
}
.click-to-pay-main > #main .click-to-pay .head .btn { max-height: 34px; }
.click-to-pay-main > #main .click-to-pay .head .btn, .click-to-pay-main > #main .click-to-pay .head .btn .ico { font-size: .92857em; line-height: 0.875; font-weight: 500 }

.click-to-pay-main > #main .click-to-pay .box .desc .clearfix:nth-child(2) { display: flex; justify-content: space-between; align-items: flex-end; }
.click-to-pay-main > #main .click-to-pay .box .desc .clearfix:nth-child(2)::after { display: none !important; }
.click-to-pay-main > #main .click-to-pay .head .btn .ico { font-size: 20px !important; line-height: 0 !important; position: relative; top: 4px; right: 4px; }
.click-to-pay .actions a .ico.icon-edit { font-size: 0.929em; }
.click-to-pay.add-bank-account-success .success h2 { font-size: 1.57143em; line-height: 1.45455; }
.click-to-pay.add-bank-account-success .success .sub-text { font-size: 0.92857em; line-height: 1.4; color: #444; margin: 0 0 40px; }

@media screen and (max-width:580px) {
    .click-to-pay-main > #main .account-frame { padding: 20px; }
}
@media screen and (max-width:375px) {
    .click-to-pay-main > #main .click-to-pay .head { display: flex; justify-content: space-between; flex-direction: column; }
    .click-to-pay-main > #main .click-to-pay .head h2 { margin: 0 0 10px; }
}

@media(max-width:767px) {
    .btn.btn-click-to-pay { float: left; margin: 10px 0 0; }
    .click-to-pay-main > #main .click-to-pay .box .actions { position: static; opacity: 1; background: none !important; overflow: hidden; height: auto; max-width: none; display: block; padding: 15px 15px !important; box-shadow: none !important; transition: none !important; animation: none !important; margin: 15px -20px -17px; border-top: solid; border-color: #D8DDE4 !important; border-width: 1px 0 0; border-radius: 0; }
    .click-to-pay-main > #main .click-to-pay .box .actions li { float: left; margin: 0; padding: 0 5px 5px 0; }
    .click-to-pay-main > #main .click-to-pay .box { height: auto !important; }
    .click-to-pay-main > #main .click-to-pay .desc > .mb25 { margin-bottom: 15px !important; }
}
.click-to-pay-main .alert>strong { font-weight: 500 !important; color: #2D619F !important; }

.click-to-pay-lists{ padding: 30px 15px 15px; max-height: 465px;overflow: auto;}
.click-to-pay-lists .box { border: 1px solid #EFEFF1; margin: 0 0 15px; background: #fff; border-radius: 4px; position: relative; padding: 20px;}
.click-to-pay-lists .box .desc{ display: flex; align-items: flex-start; gap: 10px;}
.click-to-pay-lists .box .desc div{ position: relative; padding-left: 12px}
.click-to-pay-lists .box .desc div.Payinfo {display: flex; justify-content: space-between;width:100%;}
.click-to-pay-lists .box .desc div.Payinfo::before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 2px; height: 100%; background-color: #ECEDF3;}
.click-to-pay-lists .box .desc div h3{ margin: 0 0 9px; color: #1B223A; font-size: 14px; font-weight: 500; line-height: 20px;}
.click-to-pay-lists .box .desc div p{ margin: 0; color: #1B223A; font-size: 14px; font-weight: 700;}
.click-to-pay-lists .box .desc .tag { color: #FFF; text-align: center; font-size: 8px; font-weight: 500; border-radius: 10px; text-transform: uppercase; min-width: 62px; padding: 5px 7px 3px; line-height:1;}
.click-to-pay-lists .box .desc .tag.A{ background: #57D175; border: 1px solid #57D175;}
.click-to-pay-lists .box .desc .tag.S{ background: #FA727A; border: 1px solid #FA727A;}
.click-to-pay-lists .box .desc .tag.L{ background: #FA9E3A; border: 1px solid #FA9E3A;}
.click-to-pay-lists .box .desc .tag.R{ background: #FA727A; border: 1px solid #FA727A;}
.click-to-pay-lists .box .desc .tag.N{ background: #868997; border: 1px solid #868997;}

/* Click to Pay Details */

.click-to-pay-detail { min-height: 583px; border-radius: 6px; background-color: #FFF; border: 1px solid #FFF; -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.02); box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.02);}
.click-to-pay-detail .head { display: flex; margin: 0 30px 0; padding: 24px 0 16px; border-bottom: 1px solid #EFEFEF; align-items: center; justify-content: space-between; }
.click-to-pay-detail .head h2 { font-size: 16px; margin: 0; color: #1B223A; font-weight: 500; flex-basis: 50%; }
.click-to-pay-detail .head .clearfix {display: flex; flex-basis: 50%; justify-content: flex-end;}
.click-to-pay-detail .head .clearfix label span { font-size: 14px; color: #1B223A; font-weight: 500; }
.click-to-pay-detail .head .clearfix .slider-checkbox { margin: 6px 0 -6px 8px; }

.click-to-pay-detail #clickToPayDetails { padding: 20px 30px 36px; }
.click-to-pay-detail #clickToPayDetails .card-details { display: flex; flex-direction: column; gap: 150px; }
.click-to-pay-detail #clickToPayDetails .card-details img { width: 220px; max-width: 100%; height: auto; margin: 0 0 30px; display: inline-block; }
.click-to-pay-detail #clickToPayDetails .card-details .card-details-inner-content { display: flex; flex-wrap: wrap; gap: 22px 88px; }
.click-to-pay-detail #clickToPayDetails .card-details .card-details-inner-content div { flex-basis: calc(50% - 44px); }
.click-to-pay-detail #clickToPayDetails .card-details .card-details-inner-content h3 { color: #6B7080; font-size: 12px; }
.click-to-pay-detail #clickToPayDetails .card-details .card-details-inner-content .card-number,
.click-to-pay-detail #clickToPayDetails .card-details .card-details-inner-content .email,
.click-to-pay-detail #clickToPayDetails .card-details .card-details-inner-content .mob-num { color: #1B223A; font-size: 16px; }
.click-to-pay-detail #clickToPayDetails .card-details .card-details-inner-content .tag { color: #FFF; text-align: center; font-size: 8px; font-weight: 500; border-radius: 10px; text-transform: uppercase; min-width: 62px; padding: 5px 7px 3px; line-height:1; }
.click-to-pay-detail #clickToPayDetails .card-details .card-details-inner-content .tag.A{ background: #57D175; border: 1px solid #57D175;}
.click-to-pay-detail #clickToPayDetails .card-details .card-details-inner-content .tag.S{ background: #FA727A; border: 1px solid #FA727A;}
.click-to-pay-detail #clickToPayDetails .card-details .card-details-inner-content .tag.L{ background: #FA9E3A; border: 1px solid #FA9E3A;}
.click-to-pay-detail #clickToPayDetails .card-details .card-details-inner-content .tag.R{ background: #FA727A; border: 1px solid #FA727A;}
.click-to-pay-detail #clickToPayDetails .card-details .card-details-inner-content .tag.N{ background: #868997; border: 1px solid #868997;}
.click-to-pay-detail #clickToPayDetails .form-holder .alertClicktoPay {width: 100%; min-height: 50px; background-color: #FFF7EE;border: 1px solid #FBAE58;display: flex;align-content: center;align-items: center;padding: 0 21px; border-radius:4px; margin-top:36px;}
.click-to-pay-detail #clickToPayDetails .form-holder .alertClicktoPay.checkbox-checked{border-color:#22973F; background-color:#F1FCF3;}
.click-to-pay-detail #clickToPayDetails .form-holder .alertClicktoPay  #agreeOptInMessagesDiv {margin:0 !important;padding:0;display: flex;align-items: center;gap:18px;align-content: center;}
.click-to-pay-detail #clickToPayDetails .form-holder .alertClicktoPay  #agreeOptInMessagesDiv .icheckbox_flat-grey{top: 0;}
.click-to-pay-detail #clickToPayDetails .form-holder .alertClicktoPay  #agreeOptInMessagesDiv .label-slide {margin: 0;}
.click-to-pay-detail #clickToPayDetails .form-holder .btns {margin-top: 22px !important; display: flex; gap: 12px; flex-wrap:wrap;}
.click-to-pay-detail #clickToPayDetails .form-holder .btns .btn{margin: 0 !important;}
.click-to-pay-detail #clickToPayDetails .card-details .btns{ display: flex; gap: 12px; }
.click-to-pay-detail #clickToPayDetails .card-details .btns .btn { padding: 10px 14px; margin: 0 0 12px; }
.click-to-pay-detail #clickToPayDetails .card-details .btns a.btn { min-width: 116px; }
.click-to-pay-detail .img-holder { display: flex; justify-content: center; margin-top: 70px; }
.click-to-pay-detail .img-holder img { width: 300px; }
#deletebankaccountdialog strong.title {font-size: 22px;line-height: 28px; font-weight: 500;color: #1B223A;margin-bottom: 45px;}
#deletebankaccountdialog .title-desc {padding: 16px 26px;border: 1px solid #EFEFF1;}
#deletebankaccountdialog  .btns {text-align: left;}

@media(max-width:767px){
    .click-to-pay-detail #clickToPayDetails .card-details .btns .btn { width: auto; }
}

@media(max-width:575px){
    .click-to-pay-detail .head { flex-direction: column; align-items: flex-start; gap: 15px;}
    .click-to-pay-detail .head .clearfix { width: 100%; justify-content: space-between; }
    .click-to-pay-detail #clickToPayDetails .card-details  {gap: 70px; }
    .click-to-pay-detail #clickToPayDetails .card-details .card-details-inner-content{ flex-direction: column; }
    .click-to-pay-detail #clickToPayDetails .card-details .btns { flex-direction: column; gap: 15px; }
    .click-to-pay-detail #clickToPayDetails .card-details .btns > div:last-child { margin: 0; }
    .click-to-pay-detail #clickToPayDetails .card-details .btns .btn { margin: 0; }
}

/* FAQs */
.click-to-pay-faqs { border-radius: 6px; background-color: #FFF; border: 1px solid #FFF;  padding: 0 30px 24px; }
.click-to-pay-faqs .ctp_accordion_container { width: 100%; }
.click-to-pay-faqs .ctp_accordion_wrap {border-bottom: 1px solid #D3DAE5;background-color:#ffffff; padding: 24px 0;}
.click-to-pay-faqs .ctp_accordion_head {  color: #1B223A; cursor: pointer; font-size: 18px; font-weight: 500; line-height: 24px; margin: 0 0 1px 0; font-weight: 500; position: relative; padding-right:22px}
.click-to-pay-faqs .ctp_accordion_head:before {position: absolute; right:8px;top: 50%; transform:translateY(-50%); content:''; background-color:#999999; width:9px; height: 1px;}
.click-to-pay-faqs .ctp_accordion_head:after {position: absolute; right:12px;top: 50%; transform:translateY(-50%); content:''; background-color:#999999; width:1px; height: 9px;}
.click-to-pay-faqs .ctp_accordion_head.active:after{
    opacity: 0;
}
.click-to-pay-faqs .ctp_accordion_wrap:last-of-type { border-bottom: none; }
.click-to-pay-faqs .ctp_accordion_head.active { color: var(--ch32-brand); }
.click-to-pay-faqs .ctp_accordion_body p { padding: 10px 0 0 ; margin-top: 0; color: #6B7080; font-size: 14px; line-height: 19px; letter-spacing: 0.233px; }
.click-to-pay-faqs .ctp_accordion_body p:last-child{margin:0;}
.click-to-pay-faqs .plusminus { float:right; color: #999999; } 
.click-to-pay-detail .alertClicktoPay{margin-top:36px;}
.click-to-pay-detail .alertClicktoPay{margin-top:36px;}
.clicktopay-dialog  p {color: #6B7080; font-weight: 300; font-size: 13px;}
.jumbotron { margin: 0 0 22px;}
.ui-dialog .ui-dialog-content.generic-dialog .title-desc {color: #6B7080;}
.clicktopay-dialog-close {font-size: 15px; color: #6B7080; position: absolute; right: 20px;top: 20px;}
.dialog_tnc_gen.ui-dialog .clicktopay-dialog .dialog-inner-content {
padding: 18px 24px;
}
.dialog_tnc_gen.ui-dialog.dialog_tnc .ui-dialog-content.clicktopay-dialog {
border: 1px solid #EFEFF1;
box-shadow: none;
border-radius: 4px;
}
.dialog_tnc_gen.ui-dialog.clicktopay-dialog-parent .ui-dialog-title {
margin-bottom: 45px;
}
.dialog_tnc_gen.ui-dialog.clicktopay-dialog-parent .modalAction {
margin-top: 50px;
display: flex;
flex-wrap: wrap;
}
body .dialog_tnc_gen.ui-dialog.clicktopay-dialog-parent {
width: calc(100% - 30px) !important;
max-width: 720px !important;
}
.brand-color{
    color: var(--ch32-brand) !important;
}
.iconclicktopay-black{
    color: #121521 !important;
}
@media screen and (max-width: 1025px) {
body .dialog_tnc_gen.ui-dialog {
    margin-left: 0;
}
}