/*********************************** Customizable Css Starts ***********************************/ /* Customizable Classes Starts */ .transparent { background-color:transparent !important; } .noborder { border-width:0 !important; } .toolbar-bottom-border { border-width:1px 0; border-style:solid; border-color:#cccccc; } /*Available in the Customizable panel*/ .page-bg{background-color: #f0f0f0;} /*Available in the Customizable panel*/ .header-bg {background-color:#000000;} /*Available in the Customizable panel*/ .footer-bg {background-color:#ffffff;} /*Available in the Customizable panel*/ .webstore-name-text { color:#ffffff; font-size:30px; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; } /*Available in the Customizable panel*/ .content-bg{background-color:#ffffff;} /*Available in the Customizable panel*/ .content-text{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#474747;} /*Available in the Customizable panel*/ .secondary-text{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#878787;} /*Available in the Customizable panel*/ .heading-bg{background-color: #e4e4e4;} /*Available in the Customizable panel*/ .heading-text{font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#000000;} /*Available in the Customizable panel*/ .innerpanel-bg{background-color: #f8f8f8;} /*Available in the Customizable panel*/ .innerpanel-text{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#292929;} /*Available in the Customizable panel*/ .highlight-text {color:#259fd2;} /*Available in the Customizable panel*/ .coupon-text { font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ec423f; padding:3px 5px; } /*Not Available in the Customizable panel. Will be directly mapped to the ".coupon-text" color */ .coupon-border { border:dashed 1px #ec423f; } /*Available in the Customizable panel*/ .border, .divider {border:solid 1px #d9d7d7;} /*Available in the Customizable panel*/ .primary-button-bg {background-color:#6bbb69;} /*Available in the Customizable panel*/ .primary-button-text {font-family: Arial, Helvetica, sans-serif; font-size: 13px; color:#fff; text-decoration:none;} /*Available in the Customizable panel*/ .primary-button-bg:Hover {background-color:#6bbb69;} /*Available in the Customizable panel*/ .primary-button-text:Hover {color:#fff;} /*Available in the Customizable panel*/ .primary-button-border { border:solid 1px #6bbb69; } /*Available in the Customizable panel*/ .primary-button-border-hover:Hover { border:solid 1px #6bbb69; } /*Available in the Customizable panel*/ .primary-button-inside-border { border:solid 1px #6bbb69; } /*Available in the Customizable panel*/ .primary-button-inside-border-hover:Hover { border:solid 1px #6bbb69; } /*Available in the Customizable panel*/ .secondary-button-bg { background-color:#242a31; } /*Available in the Customizable panel*/ .secondary-button-text { font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#ffffff; text-decoration:none; } /*Available in the Customizable panel*/ .secondary-button-bg:Hover { background-color:#242a31; } /*Available in the Customizable panel*/ .secondary-button-text:Hover { color:#ffffff; } /*Available in the Customizable panel*/ .secondary-button-border { border:solid 1px #242a31; } /*Available in the Customizable panel*/ .secondary-button-border-hover:Hover { border:solid 1px #242a31; } /*Available in the Customizable panel*/ .secondary-button-inside-border { border:solid 1px #242a31; } /*Available in the Customizable panel*/ .secondary-button-inside-border-hover:Hover { border:solid 1px #242a31; } /*Available in the Customizable panel*/ .checkout-button-bg {background-color:#242a31;} /*Available in the Customizable panel*/ .checkout-button-text {color:#fff;} /*Available in the Customizable panel*/ .checkout-button-bg:Hover {background-color:#242a31;} /*Available in the Customizable panel*/ .checkout-button-text:Hover {color:#fff;} /*Available in the Customizable panel*/ A.primary-link:Link, A.primary-link:Visited {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#007fbd; text-decoration:none; outline:none;} /*Available in the Customizable panel*/ A.primary-link:Hover {color:#007fbd;} /*Available in the Customizable panel*/ A.secondary-link:Link, A.secondary-link:Visited {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#202020; text-decoration:none; outline:none;} /*Available in the Customizable panel*/ A.secondary-link:Hover {color:#202020;} /*Available in the Customizable panel*/ .cart-bg{background-color:#44b3e1;} /*Available in the Customizable panel*/ .cart-icon-color{color:#fff;} /*Available in the Customizable panel*/ .shopdetail-bg { background-color:#ffffff; } /*Available in the Customizable panel*/ .shopdetail-text { color:#292929; } .element-bg { background-color:#ffffff; } .element-text { color:#292929; } .element-border { border:solid 1px #dfdfdf;} /*Available in the Customizable panel Black Color Icons .icon-remove-black {background-image:url('../images/icon-remove-black.png'); background-position:center center; background-repeat:no-repeat;} .icon-cart-black {background-image:url('../images/icon-cart-black.gif'); background-position:left top; background-repeat:no-repeat;} .icon-arrow-black .right-arrow {background-image:url('../images/icon-right-arrow-black.png'); background-position:left top; background-repeat:no-repeat;} .icon-arrow-black .down-arrow {background-image:url('../images/icon-down-arrow-black.png'); background-position:left top; background-repeat:no-repeat;} .icon-edit-black {background-image:url('../images/icon-edit-black.png'); background-position:left top; background-repeat:no-repeat;} /*Available in the Customizable panel White Color Icons .icon-remove-white {background-image:url('../images/icon-remove-white.png'); background-position:center center; background-repeat:no-repeat;} .icon-cart-white {background-image:url('../images/icon-cart-white.gif'); background-position:left top; background-repeat:no-repeat;} .icon-arrow-white .right-arrow {background-image:url('../images/icon-right-arrow-white.png'); background-position:left top; background-repeat:no-repeat;} .icon-arrow-white .down-arrow {background-image:url('../images/icon-down-arrow-white.png'); background-position:left top; background-repeat:no-repeat;} .icon-edit-white {background-image:url('../images/icon-edit-white.png'); background-position:left top; background-repeat:no-repeat;} /* Customizable Classes Ends */ .paymentspanel-bg { background-color:#ffffff; } .paymentspanel-text { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#292929; } .paymentstab-bg { background-color:#f8f8f8; } .paymentstab-text { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#292929; } .paymentstab-active-bg { background-color:#ffffff; } .paymentstab-active-text { font-family:Arial, Helvetica, sans-serif; font-size:12px; /*color:#292929;*/ color:#367fe8; } .paymentstab-border { border:solid 1px #dfdfdf;} .paymentstab-active-border { border:solid 1px #000000;} /*********************************** Customizable Css Ends ***********************************/ .text-center { text-align: center; } /* .error { display: none; } */ #cards_form.span12 { margin: 0 !important; padding: 14px 20px 20px 20px; } #cards_form span.paymentspanel-text .title-text { font-size: 14px; color: #292929; text-transform: uppercase; margin-bottom: 10px; display: block; } .cp-option { margin-bottom:10px; display: flex; flex-wrap:wrap; } .cp-option .cp-heading { width: 100%; display: flex; align-items: center; padding: 12px 18px; flex: 0 1 100%; border-bottom: 1px solid #dfdfdf; } .cp-heading .payment-option-list { position: relative; margin-left: auto; } .icon-img { display: inline-flex; justify-content: center; align-items: center; text-align: center; /*margin-right: 6px;*/ margin-left: 6px; position: relative; } .icon-img.card-pay-icon{padding-right: 6px;} .icon-img.card-pay-icon:before { content: ''; width: 1px; height: 13px; position: absolute; right: 0; background: #7f7f7f; } .cp-heading .icon-list .icon-img .cards { width: 30px; } .cp-heading .cp-name { font-size:14px; font-weight:600; } .cp-option .cp-body { padding:20px; flex: 0 1 100%; } .cp-option .cp-body .enter-mobile .form-group.or { display:block; padding:10px 0px; } .cp-option .cp-body .enter-mobile .form-group { width:100%; float:left; display:block; } .or-option { display:block; font-weight:600; } .payment-option-list { position: relative; margin-left: auto; } .icon-circle { width:23px; height:23px; background-color:#ffffff; border-radius:12px; border:1px solid #dcdfe4; display:inline-flex; justify-content:center; align-items:center; text-align:center; margin-left:-5px; position:relative; z-index:1; float:left; } .icon-circle img { max-width: 13px; max-height: 13px; } .cp-body .enter-otp .content-text { font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 24px; padding-bottom: 12px; } .cp-body .enter-otp .otp-sec { display: flex; justify-content: center; gap: 10px; } .cp-body .enter-otp .otp-sec input.inputs { border: 1px solid #dfdfe1; border-radius: 6px; width: 40px; height: 45px; text-align: center; } .cp-body .enter-otp .resend-otp { text-align: right; width: 90%; margin: 10px auto 0 auto; } .cp-body .enter-otp .resend-otp a { text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #ef3e42; } .pnc-option { margin-top:10px; display: flex; flex-wrap:wrap; margin-bottom:10px; } .pnc-option .cp-heading { width: 100%; display: flex; align-items: center; padding: 12px 18px; flex: 0 1 100%; /* border-bottom: 1px solid #dfdfdf; */ } .pnc-option .pnc-body {padding: 3px 20px 0px 20px; flex: 0 1 100%; } div.creditcards { position:relative; } span.cards { position: absolute; height: 25px; overflow: hidden; top: 6px; right: 15px; } span.cards span.cardDefault { background-image: url('../images/card-icon.png'); background-position: right 3px; display: inline-block; } .pnc-option .pnc-body span.span12.form-group { margin-left: 0px; padding-bottom:15px; } .pnc-option .pnc-body span.form-group .expiry-date-col .span12 select { width:45%; } .pnc-option .pnc-body span.form-group .cvv-number-col .span12 input.textfield-55x25 { width: 65% !important; } #cards_form .cvv_number { position: relative; } #cards_form span.cvv { background-image: url(../images/cvv.png); background-position: 2px 2px; background-repeat: no-repeat; width: 50px; height: 34px; display: inline-block; position: absolute; left: auto; right: 0px; top: 0; } #savecard1.span12 span.content-text { margin: 5px 0px 20px 15px !important; } #savecard1 .span12.content-text .span1 { width: 15px; display: inline-block; } #savecard1 .span12.content-text .span11.note { margin: 0 !important; padding: 0 0 0 4px !important; font-weight: normal; font-size: 12px; display: inline-block; width: 96%; margin-top: 4px !important; } #amount { padding: 20px 0px 10px 0px; margin-left:0px; } #amount .paymentspanel-text { font-size:16px; padding-bottom:15px; } #buttons { margin-left:0px; padding-bottom:20px; } #buttons .primary-button.pEvents { pointer-events: none; } .card-details-list { padding-top: 12px; margin-bottom:10px;} .lc-heading { width: 100%; display: flex; font-size: 14px; font-family: 'Roboto', sans-serif; font-weight: 500; padding: 0px 0px 15px; } .lc-heading .payment-option-list { margin-top: -6px; } .icon-list { display: flex; align-items: center; } .lc-heading .payment-option-list .icon-img .cards { width: 22px; } #savecard-data .cp-heading { width: 100%; display: flex; font-size: 14px; font-family: 'Roboto', sans-serif; font-weight: 500; padding: 13px 0px 8px; } .grey-box { display: none;} .save-card-box { position: relative; padding-left: 10px; margin-bottom: 12px; /* display: none; */ } .grey-box .save-card-data { padding: 0; border: none; } .savecard-opt-4 .primary-button-border, .savecard-opt-4 .primary-button-border:hover { /* border: 1px solid rgba(229, 62, 66, 0.4); */ border: solid 1px #6bbb69; } .save-card-data { border: 1px solid #dcdfe4; padding: 6px 15px 6px 20px; border-radius: 6px; position: relative; } .grey-box .save-card-data .save-card-container { background-color: rgba(226, 228, 234, 0.7); padding: 20px 20px 20px 26px; position: relative; border-radius: 6px; } .grey-box .save-card-data .save-radio { width: 28px; border-radius: 50%; padding-left: 3px; padding-right: 3px; } .save-card-data .save-radio { width: 21px; height: 28px; /* border-radius: 50%; */ padding: 4px 0; background-color: #ffffff; position: absolute; left: -11px; top: 50%; transform: translateY(-50%); } .save-radio .check-radio input[type=radio] { width: 21px; height: 21px; margin: 0; } .save-radio .check-radio label { padding-left: 21px; } .check-radio input[type=radio]:checked + label .radio-before, .checkbox input[type=checkbox]:checked + label .checkbox-before { background: #ffffff; border-color: #6bbb69; } .save-radio .check-radio label .radio-before { width: 21px; height: 21px; background-color: #ffffff; border: 1px solid #c6c6c6; } .check-radio label .radio-before { position: absolute; top: 3px; left: 0; width: 19px; height: 19px; border-radius: 50%; background-color: #cecfd8; } .check-radio input[type=radio]:checked + label .radio-after, .checkbox input[type=checkbox]:checked + label .checkbox-after { border-color: #6bbb69; } .save-radio .check-radio label .radio-after { width: 5px; height: 10px; } .check-radio label .radio-after { position: absolute; left: 2px; top: 2px; width: 5px; height: 9px; border: 0; border-right-width: 2px; border-right-style: solid; border-bottom-width: 2px; border-bottom-style: solid; border-color: #ffffff; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; -webkit-transform: rotate(40deg) translate(5px, -2px); -ms-transform: rotate(40deg) translate(5px, -2px); transform: rotate(40deg) translate(5px, -2px); } .grey-box .save-card-top { min-height: 35px; } .save-card-details .save-card-top { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 25px; } .grey-box .save-card-data .save-card-logo { margin-left: 0; } .grey-box .save-card-data .save-card-logo img { width: 57px; } .save-card-data.save-card-active .save-ccv { display: block; } .save-card-data .save-ccv { margin-left: auto; display: none; } .save-card-data .save-delete-icon, .grey-box .save-card-data .gray-delete-icon, .save-card-data .save-ccv { margin-left: auto; } .save-ccv { position: relative; } .grey-box .save-ccv .save-cvv-input { width: 75px; height: 35px; background-color: #ffffff; border: 1px solid #cfd1d7; border-radius: 2px; padding:0px; } .save-ccv .save-cvv-input { width: 60px; height: 30px; border: 0; font-family: 'ccavenues'; color: #101010; /*padding: 6px 10px;*/ background-color: #eff2f3; } .grey-box .save-ccv label { top: 11px; } .save-ccv label { font-size: 13px; color: #101010; font-weight: normal; position: absolute; pointer-events: none; left: 10px; top: 8px; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; } .save-card-data .save-card-info { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; margin-top:0; } .grey-box .save-card-data .save-card-number { font-size: 14px; font-weight: 600; display:block; } .save-card-data .save-card-number { font-size: 14px; font-weight: 400; } .grey-box .save-card-data .card-title { display: block; text-transform: uppercase; opacity: 0.6; font-size: 12px; padding-bottom: 6px; } .save-card-data .save-card-number .space-number { display: inline-block; width: 8px; } .save-card-data .save-card-number .dot { list-style: none; display: inline-block; width: 5px; height: 5px; background-color: #101010; border-radius: 50%; margin: 0 2px; } .save-card-data .save-card-expire { margin-left: auto; font-size: 12px; color: #eb001b; align-self: flex-end; } .grey-box .card-holder { margin-top: 22px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .grey-box .save-card-data .save-card-name { padding: 0; text-transform: uppercase; font-weight: 600; } .save-card-data .save-card-name { width: 190px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 13px; padding: 5px 0 0 0; text-transform: capitalize; } .grey-box .save-card-data .card-title { display: block; text-transform: uppercase; opacity: 0.6; font-size: 12px; padding-bottom: 6px; } .grey-box .save-card-data .gray-delete-icon { align-self: flex-end; cursor: pointer; } .save-card-data .save-delete-icon, .grey-box .save-card-data .gray-delete-icon { cursor: pointer; width: 13px; } .save-card-data .save-delete-icon, .grey-box .save-card-data .gray-delete-icon, .save-card-data .save-ccv { margin-left: auto; } .save-card-data .save-delete-icon svg, .grey-box .save-card-data .gray-delete-icon svg { fill: #101010; fill-opacity: 0.7; } .save-card-data.save-card-active .save-delete-icon { display: none; } .save-card-data .save-card-details .save-card-logo { margin-left: 6px !important; margin-top: 0; } .save-card-info .master-card-l img { width: 27px !important; height: 17px; max-width: 100%; } .save-card-info .visa-card-l img { width: 30px !important; height: 10px; } .bank-emi-desc .save-card-info .save-card-logo.visa-card-l img { width: 85px !important; height:auto; } .another-card-main a .save-card-icon { width: 25px; margin-right: 8px; margin-top: -2px; } .another-card-main a span { display: inline-block; vertical-align: middle; font-size: 14px; font-family: 'Roboto', sans-serif; color: #367fe8; } .bank-option-list.save-card-data-form { padding: 0; margin-bottom: 0; border-radius: 0px; box-sizing: border-box; } .bank-option-list.bank-option-active { border-color: #e4e4e4; background: #f4f5f7; display: block; border-width:1px 0px 0px; } .bank-option-list { border-width: 1px; border-style: solid; border-color: #e4e4e4; transition: 0.3s all; position: relative; border-top: 0; margin-top: 25px; } .bank-option-list.save-card-data-form .bank-option-heading { padding-top: 15px; padding-bottom: 15px; border-bottom: 1px solid #e4e4e4; /*border-radius: 6px 6px 0 0;*/ } .bank-option-list .bank-option-heading { display: flex; align-items: center; height: auto; padding: 16px; padding-top: 16px; padding-bottom:16px; position:relative; cursor:pointer; background: #ffffff; } .bank-option-list .bank-option-heading .bank-logo { max-width: 19px; height: 21px; padding-top: 2px; background: #ffffff; border-radius: 50%; display: flex; flex: 0 0 19px; justify-content: center; align-items: center; } .bank-option-list .bank-option-heading { cursor: pointer; } .bank-option-list .bank-option-heading .bank-emi-desc { padding-left: 18px; flex: auto; } .bank-option-list.save-card-data-form .bank-option-heading .emi-heading { display: flex; flex-wrap: no-wrap; } .bank-option-list.save-card-data-form * { box-sizing: border-box; } .bank-option-list .emi-plan-list-all { position: relative; border: none; padding: 10px 10px 2px 10px; padding-bottom: 2px; display: flex !important; flex-wrap: wrap; /*margin: 0 -8px;*/ } .emi-banks-tenure { display: none; border-color: #e4e4e4; background: #fff; padding: 16px 16px 0 16px; padding-bottom: 0px; flex-wrap: wrap; } .emi-plan-list-all .emi-list { display: flex; max-width: 50%; flex: 0 0 50%; flex-wrap: wrap; align-items: center; padding: 0; background: #ffffff; padding: 0 8px; margin-bottom: 16px !important; } .emi-plan-list-all .emi-list.emi-active .emi-list-info { border-color: #e4e4e4; padding-bottom: 0; } .emi-plan-list-all .emi-list .emi-list-info { background: #f8f8f8; border-radius: 6px; border-width: 1px; border-style: solid; border-color: transparent; width: 100%; } .emi-plan-list-all .emi-list .emi-plan-check { padding: 10px 13px; width: 100%; display: flex; flex-direction: column; } .emi-plan-list-all .emi-list .title-heading { font-size: 13px; position: relative; cursor: pointer; width: 100%; padding-right: 20px; font-weight: 600; } .emi-plan-list-all .emi-list .title-heading strong.emi-nocost-text { color: #13b152; padding-top: 0; } .emi-plan-list-all .emi-list .title-heading strong { font-weight: 600; display: block; padding-top: 5px; } .emi-plan-list-all .emi-list .title-heading { font-size: 13px; cursor: pointer; font-weight: 600; } .emi-plan-list-all .emi-list .title-heading::after { content: ""; position: absolute; right: 0; width: 16px; height: 16px; margin-right: 0; background: url("../images/icons/circle-uncheck.svg") no-repeat right center; top: 0; } .emi-plan-list-all .emi-list.emi-active .emi-plan-check .title-heading::after { background: url("../images/icons/circle-check-solid.svg") no-repeat right center; } .emi-plan-list-all .emi-list .emi-total-cost { margin-left: 0; text-align: left; font-size: 13px; position: relative; font-weight: 600; } .emi-plan-list-all .emi-list .emi-total-cost span { display: block; font-size: 12px; padding-top: 8px; font-weight: 400; } .emi-plan-list-all .emi-list.make-full-payment { max-width: 100%; flex: 0 0 100%; margin-bottom: 0 !important; } .bank-option-list.save-card-data-form * .emi-option-details { padding: 0 16px 16px; /*display: none;*/ text-align:justify; } .emi-plan-list-all .emi-option-details .emi-info { display: none; } .emi-plan-list-all .emi-option-details .emi-info .checkbox label { line-height: 16px; font-size: 11px; padding-left: 5px; } /* Card Section 03/11/2025 start*/ .mobile-radio-check{ display:block; margin-bottom:10px; } .radio-check-value{ display:inline-block; margin-right:15px; } .mobile-radio-check label{ padding-left:20px; position:relative; } .mobile-radio-check label{ display:inline-block; } .mobile-radio-check label input{ position:absolute; left:0; margin:0; } .cp-option .cp-body .enter-mobile .form-group.card-login-group{ margin-bottom:10px;} .cp-option .cp-body .enter-mobile .form-group.card-mobileno{ display:none;} .card-payment-sec span.payment-title-group, #cards_form div.card-payment-sec span.paymentspanel-text{ width: 100%; display: flex; align-items: center; flex: 0 1 100%; } #cards_form div.card-payment-sec span.paymentspanel-text strong.title-text{ margin-bottom:0; display:inline-block;} #cards_form div.card-payment-sec span.paymentspanel-text span.back-page{ margin-left:auto; cursor:pointer} .save-card-check.span12 span.content-text{ width:auto;} div.save-check-contain{padding: 0 20px 20px; } .save-card-check{ display:flex; margin-bottom:10px;} .check-input{margin-right:8px;} .check-input input[type="checkbox"]{ margin-top:0;} .save-check-contain .card-small-text{ font-size:11px !important; display:block; margin:10px 0; color: #474747;} .save-check-contain .card-small-text a{font-size:11px !important;} .save-check-contain .icon-list .icon-img{ margin-right: 0; } .save-check-contain .icon-list .icon-img .cards { width: 30px; } .save-check-contain .icon-list .icon-img:last-child{ margin-right:0; padding-right:0;} .save-check-contain .icon-list .icon-img:first-child{margin-left:0;} #buttons .primary-button { padding: 12px 15px; border: 1px solid transparent; } .cursor-link{ cursor:pointer} .tooltip_trigger{ cursor:pointer; position: relative; } .tooltip_trigger .tooltip { background: #f7f7f7; border: 1px solid #d9d7d7; display:none; padding:10px 15px; margin-top: 8px; border-radius:5px; box-shadow: 0 2px 4px 0 rgba(20, 20, 19, .1); font-size:12px; line-height:18px; position: absolute; z-index:2; width:300px; } .tooltip_trigger .tooltip:after, .tooltip_trigger .tooltip:before { bottom: 100%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; } .tooltip_trigger .tooltip:after { border-color: rgba(247, 247, 247, 0); border-bottom-color: #f7f7f7; border-width: 7px; margin-left: -10px; } .tooltip_trigger .tooltip:before { border-color: rgba(217, 215, 215, 0); border-bottom-color: #d9d7d7; border-width: 8px; margin-left: -11px; } /* .tooltip_trigger:hover .tooltip { display:block; } */ .tooltip_trigger .tooltip.tooltip-show{ display:block; } .click-top-pay-link{ font-weight:bold; cursor:pointer;} .click-top-pay-popoup{margin-bottom: 6px;display: block;} .click-top-pay-popoup p { padding:10px 0} .click-top-pay-popoup strong{ display:block; margin-top: 10px; margin-bottom:5px;} .click-top-pay-popoup ul { margin:0; padding:0 0 0 15px; margin-top:10px;} /* .pnc-option .pnc-body{ display:none;} */ /* Card Section 03/11/2025 End*/ .or-option{ padding:5px 0;} .card-details-list{ padding: 12px 18px; margin-top: 10px; display:flex; flex-direction: column;} .save-card-data{ padding:10px 15px;} .card-details-list .lc-heading {font-size: 14px;font-weight: 600;} .savecard-data .or-option{ padding: 15px 0 0 0;} #savecard-data .cp-heading{ padding: 12px 18px; font-family: Arial, Helvetica, sans-serif; font-size: 12px;} .save-card-data .save-radio{ background-color:transparent;} .save-card-icons{ width:55px; margin-left:0; flex: 0 0 55px; /*margin-top:5px;*/} .save-card-data .save-radio{ top:0; left: 0; transform: translateY(0); margin-right:10px; position:absolute; left:0; top:0; width:100%; height:100%; padding:0;} .save-card-data .save-radio .check-radio input[type=radio]{ opacity:0;} .save-card-data .save-radio .check-radio label{ width:100%; height:100%; position:absolute; left:0; top:0; padding-left:0} .save-card-data .save-radio .check-radio label .radio-before{left:20px; top: 15px;} .save-ccv .save-cvv-input{ padding:5px 5px;} .save-card-box{ padding-left:0} .save-card-container{ display:flex; padding-left: 37px;} .save-card-container .save-card-details{ padding:0 0 0 10px; margin-top: -7px;} .otp-loader-full span.loader-title{ display:block; margin-bottom:20px; text-align:center} .loader-icons { position: relative; height: 55px; width: 55px; margin: 20px auto; } .anloader { border-radius: 50%; border-width: 4px; border: solid; border-color: rgba(21, 114, 231, 0.25); width: 50px; height: 50px; -webkit-animation: spin 0.9s linear infinite; animation: spin 0.9s linear infinite; } .loader-icon { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: auto; width:20px; } .anloader { border-top-color: var(--color); } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .otp-loader-full{ display:none;} .processing-btn-group{text-align: center;} .iframe-proceed{ display:inline-block; margin: 0 auto; padding: 12px 20px; text-align: center;} .not-your-card{ display:block; margin-bottom:15px;} .card-ico{ width:35px; margin-right:5px;} .card-information .tooltip_trigger .tooltip{left: 50%; margin-left: -165px;} .cp-top-heading{ border-bottom: 1px solid #dfdfdf;} .cp-heading span.back-page{ margin-left:auto} .cp-sub-heading{width: 100%; display: flex; align-items: center; padding: 12px 18px 0; flex: 0 1 100%; } .cp-sub-heading .cp-name {font-size: 14px; font-weight: 600;} .not-your-card{ margin-left: -18px; margin-right: -18px; border-top: 1px solid #dfdfdf; padding:15px 18px 5px;} select, textarea, input[type="text"], input.textfield{ padding: 10px 15px !important; height: 40px !important; border-radius: 6px !important; background-color: #ffffff; } #creditcard_form .span6.cvv-number-col{width:auto!important} #creditcard_form .span6.expiry-date-col, #creditcard_form .span6.cvv-number-col{width: 48.71%!important; } input[type="password"]#CVVNumberEMI{height: 40px; background-color: #ffffff; width: 65% !important; min-height: 40px; border-radius: 6px !important; box-sizing: border-box; padding:0 5px!important;} div.multilingual select.select-language{ height: 38px !important; } .pnc-option .pnc-body span.form-group .expiry-date-col .span12 select { width: 45%; padding: 10px 5px !important; } #cards_form .cvv_number { position: relative; } .pnc-option .pnc-body span.form-group .cvv-number-col .span12 input.textfield-55x25 { width: 65% !important; min-height: 40px; padding: 10px 12px !important; border-radius: 6px; } #ordertotal div.span5.innerpanel-text { position: relative; top: 7px; } #creditcard_form .cvv_number span.cvv { background-image: url(../images/cvv.png); background-position: 2px 2px; background-repeat: no-repeat; width: 50px; height: 34px; display: inline-block; position: absolute; left: auto; right: 0px; top: 0; } .icon-img .cards{width:30px;} .cpConsent .save-card-check{position: relative; margin-top: 12px; } .click-top-pay-popoup h1{ line-height: 32px; font-size: 28px; margin-bottom: 4px;} .click-top-pay-popoup h1 span{display:block; color:#ff3a00;} .tooltip_trigger .tooltip {width: 270px; left: 50%;margin-left: -135px;} .tooltip_trigger.info-trigger{} .tooltip_trigger.info-trigger .tooltip {left: 50%; margin-left: -150px;} #cards_form span.creditcards{position:relative} #cards_form span.creditcards span.cards,#cards_form span.creditcards span.emicards{position:absolute;width:35px;right:12px;top:7px;height:25px;overflow:hidden;text-align:right} #cards_form span.creditcards span.cards span,#cards_form span.creditcards span.emicards span{background-position:right center;background-repeat:no-repeat;width:35px;height:25px;display:inline-block} #cards_form span.creditcards span.cards span.Visa,#cards_form span.creditcards span.emicards span.Visa{background-image:url(../images/cards/visa.svg);background-position:right 7px} #cards_form span.creditcards span.cards span.Jaywan,#cards_form span.creditcards span.emicards span.Jaywan{background-image:url(../images/jaywan.svg);background-position:right 2px} #cards_form span.creditcards span.cards span.Amex,#cards_form span.creditcards span.emicards span.Amex{background-image:url(../images/amex.png);width:33px} #cards_form span.creditcards span.cards span.MasterCard,#cards_form span.creditcards span.emicards span.MasterCard{background-image:url(../images/mastercard_logo.png)} #cards_form span.creditcards span.cards span.JCB,#cards_form span.creditcards span.emicards span.JCB{background-image:url(../images/jcb_logo.png);width:25px} #cards_form span.creditcards span.cards span.Diners,#cards_form span.creditcards span.emicards span.Diners{background-image:url(../images/dinersclub_logo.png)} .amex-eze-click div.content-text{font-size:14px;padding:12px 0 0} .ctpCardsContainer{max-height: 210px; overflow-y: auto;} .save-ccv .save-cvv-input { padding: 5px 5px !important; box-sizing: border-box; margin-top: 10px !important; display: inline-block;} /*Arabic */ body.arabic .resp-vtabs .resp-tabs-container { text-align: initial; direction: rtl;} .arabic .cp-heading .cp-name .card-ico{ margin-right: 0;} .arabic .cp-heading .payment-option-list {margin-right: auto;margin-left: 0;} .arabic .lc-heading .payment-option-list{ margin-top:0 ; margin-right: auto;margin-left: 0;}; .arabic #buttons .paymentspanel-text {display: flex; float: none; align-items: center;} .arabic .save-card-check .check-input { margin-left: 8px; margin-right:0 } .arabic .input.textfield{ direction: rtl;} .arabic .cpConsent .save-card-check {padding-left:78px; padding-right:0} .arabic .cpConsent .save-card-check > span.payment-option-list{right: auto; left:0} /*.arabic .icon-img.card-pay-icon::before { left: 0; right:auto} .arabic .save-check-contain .icon-list .icon-img{ margin-right: 0; margin-left: 6px;}*/ .arabic .bank-option-list.save-card-data-form{direction: ltr;} .arabic .bank-option-list.save-card-data-form .bank-option-heading{direction: ltr;} .arabic .cpConsent > .icon-img.card-pay-icon::before {left:auto; right:0} .arabic .cpConsent > span.icon-list {justify-content: flex-end;direction: ltr;} .arabic .pnc-option .pnc-body span.form-group .cvv-number-col .span12 input.textfield-55x25{direction: rtl;} .arabic #cards_form span.cvv{right:auto;} .arabic #creditcard_form div.all-other-banks .span4{width:100%!important} .arabic .save-card-container{padding-left: 0; padding-right: 37px;} .arabic .save-card-data .save-radio .check-radio label{left:auto; right:0;} .arabic .save-card-data .save-radio .check-radio label .radio-before{left: auto; right: 20px;} .arabic .save-card-container .save-card-details{ padding: 0 10px 0 0;} .arabic .cp-heading span.back-page{margin-left: 0; margin-right: auto;} .arabic .save-card-data .save-card-number{direction: ltr;} .arabic .tooltip_trigger .tooltip{direction: ltr;} .arabic select, .arabic textarea, .arabic input[type="text"], .arabic input.textfield{direction: rtl;} .arabic #cards_form span.creditcards span.cards, .arabic #cards_form span.creditcards span.emicards{right:auto; left:0;} .arabic #buttons span.paymentspanel-text{float:none;direction: rtl;} .arabic .save-card-check .content-text.note{float:none;} .iframe #creditcard_form .span6.expiry-date-col .span12, .iframe #creditcard_form .span6.cvv-number-col .span12{display:inline-flex} .iframe #creditcard_form .span6.expiry-date-col .span12 select{flex:1;} .save-card-box label.span12.error{ float:none;} #verticalTab #creditcard_form #pay-by-qrcode *{ box-sizing:border-box; } #verticalTab #creditcard_form #pay-by-qrcode, #verticalTab #creditcard_form #pay-by-upi-id { margin-bottom: 36px !important; } #verticalTab .upi-new-flow .title { font-size: 14px !important; color: #191919; font-weight: 600 !important; margin: 12px 0 8px 0; } #verticalTab .pay-by-qrcode .upi-qr { background-color: #ffffff; padding: 6px; } #verticalTab .pay-by-qrcode .upi-qr .qrcode { max-width: 118px; max-height: 118px; vertical-align: top; position: relative; } #verticalTab .pay-by-qrcode .upi-qr .qrcode, #verticalTab .pay-by-qrcode .upi-qr .qrcontent { display: inline-block; } #verticalTab .pay-by-qrcode .upi-qr.active-qr .qrcode .qr-overlay, #verticalTab .pay-by-qrcode .upi-qr.active-qr .qrcode a.qr-button, #verticalTab .pay-by-qrcode .upi-qr .qrcontent .expire, #verticalTab .pay-by-qrcode .upi-qr .qrcontent .cancel-qr { display: none; } #verticalTab .pay-by-qrcode .upi-qr .qrcode .qr-overlay, #verticalTab .pay-by-qrcode .upi-qr .qrcode a.qr-button, #verticalTab .pay-by-qrcode .upi-qr.active-qr .qrcontent .expire, #verticalTab .pay-by-qrcode .upi-qr.active-qr .qrcontent .cancel-qr { display: inline-block; } #verticalTab .pay-by-qrcode .upi-qr .qrcode .qr-overlay { width: 100%; height: 100%; background-color: #ffffff; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; opacity: 0.8; } #verticalTab .pay-by-qrcode .upi-qr .qrcode a.qr-button { position: absolute; left: 0; top: 50%; z-index: 2; border-radius: 25px; min-height: 24px; display: flex; align-items: center; justify-content: center; -webkit-border-radius: 25px; -moz-border-radius: 25px; padding: 3px 10px; margin-left: 6px; width: 105px; margin-top: -11px; font-size: 12px !important; } /*GENERATING LOADER START*/ #verticalTab .pay-by-qrcode .upi-qr .qrcode a.qr-button .pretext { display: flex; align-items: center; justify-content: center; } #verticalTab .pay-by-qrcode .upi-qr .qrcode a.qr-button .preload { display: none; align-items: center; justify-content: center; column-gap: 5px; } #verticalTab .pay-by-qrcode .upi-qr .qrcode a.qr-button .preload .gen-loader { border: 2px solid #fff; border-radius: 50%; border-top: 2px solid transparent; width: 12px; height: 12px; display: inline-block; animation: genLoader 1s linear infinite; } @keyframes genLoader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /*GENERATING LOADER END*/ #verticalTab .pay-by-qrcode .upi-qr .qrcontent { font-size: 12px !important; max-width: 185px; margin-left: 12px !important; line-height: 18px !important; margin: 1px 0 0 5px !important; } #verticalTab .pay-by-qrcode .upi-qr .qrcontent .title { display: block; font-weight: 600 !important; margin: 2px 0 6px 0; font-size: 14px !important; color: #191919; } #verticalTab .pay-by-qrcode .upi-qr .qrcontent .expire { font-size: 12px !important; color: #787878; /*display:block;*/ } #verticalTab .pay-by-qrcode .upi-qr .qrcontent .expire .timer { font-size: 12px !important; font-weight: 800; color: #191919; } #verticalTab .pay-by-qrcode .upi-qr .qrcontent a { display: block; font-size: 12px !important; margin-top: 5px !important; color: #007fbd; } body.active-qr input, body.active-qr select, body.active-qr a, body.active-qr li, body.active-qr li span, body.active-qr h2.resp-accordion { pointer-events: none; touch-action: none; } body.active-qr #verticalTab .pay-by-qrcode .upi-qr.active-qr .qrcontent .cancel-qr, body.active-qr .cancel-upi-msg a.primary-button-bg, body.active-qr .cancel-upi-msg a.secondary-button-bg { pointer-events: auto; touch-action: auto; } /*body.active-qr .upi-overlay .cancel-upi-msg a.primary-button-bg, body.active-qr .upi-overlay .cancel-upi-msg a.secondary-button-bg*/ #verticalTab .pay-by-qrcode .upi-qr.active-qr .qrcode .qr-overlay, #verticalTab .pay-by-qrcode .upi-qr.active-qr .qrcode a.qr-button, #verticalTab .pay-by-qrcode .upi-qr .qrcontent .expire, #verticalTab .pay-by-qrcode .upi-qr .qrcontent .cancel-qr { display: none; } /* #verticalTab .pay-by-qrcode .upi-qr .qrcode .qr-overlay, #verticalTab .pay-by-qrcode .upi-qr .qrcode a.qr-button, #verticalTab .pay-by-qrcode .upi-qr.active-qr .qrcontent .expire, #verticalTab .pay-by-qrcode .upi-qr.active-qr .qrcontent .cancel-qr { display: inline-block; } */ #creditcard_form.upi-new-flow #amount span.paymentspanel-text strong { font-size:20px !important; } #creditcard_form.upi-new-flow #buttons.span12 span.paymentspanel-text { display:block; width:100%; margin:0 !important; text-align:center; } #creditcard_form.upi-new-flow #buttons.span12 span.paymentspanel-text a.primary-button { display:block; text-align:center; margin-bottom:5px; } #creditcard_form.upi-new-flow #buttons.span12 span.paymentspanel-text a.primary-button .primary-button-text { font-size:17px; } #verticalTab .pay-by-upi-id.border { border-width:1px 0 0 0; padding-top:15px; position:relative; text-align:center; } #verticalTab .pay-by-upi-id.border .or { position:absolute; left:50%; top:0; margin-top:-16px; margin-left:-16px; line-height:30px; display:inline-block; width:30px; height:30px; font-size:12px !important; font-weight:600; color:#000000; text-align:center; background-color:#ffffff; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; } /*#verticalTab .pay-by-upi-id.border a.primary-button-bg { padding:9px 60px 10px 60px; margin:18px 0; display:inline-block; font-size:15px !important; }*/ #verticalTab .pay-by-upi-id.border .collect-upi-id { text-align:left; } /* #verticalTab .pay-by-upi-id.border .collect-upi-id .title { margin-bottom:5px !important; } */ #verticalTab .pay-by-upi-id.border .collect-upi-id .collect-upi { margin-bottom:8px; } #verticalTab .pay-by-upi-id.border .collect-upi-id a.verify-vpa { color:#05c185; text-decoration:none; } #verticalTab .pay-by-upi-id.border .collect-upi-id span.verified-vpa { font-size:12px; color:#05c185; padding-left:15px; background-image: url('../images/icon-verified.png'); background-position:left center; background-repeat:no-repeat; display:none; } #verticalTab .pay-by-upi-id.border .collect-upi-id span.verified-vpa label { text-transform:uppercase; } .upi-overlay { display:none; position:fixed; top: 0; left: 0; height:100%; width: 100%; z-index: 1000; /* high z-index */ /* fallback */ background-color: rgba(0,0,0,0.10); background-image:url('../images/overlay.png'); background-repeat:no-repeat; background-scroll:fixed; background-position:center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .upi-overlay { background-color: rgba(114, 114, 114, 0.1); width:100%; height:100%; position:fixed; top:0; left:0; display:none; z-index: 999; } .upi-process { margin:10% auto auto auto; max-width:370px; padding:20px; background-color:#ffffff; z-index:99999; box-sizing:none; -webkit-box-sizing:none; -moz-box-sizing:none; } .upi-process div.upi-waiting .timer1 { font-weight:600; } .upi-process div.upi-waiting .cancel-upi-link { font-size:12px; text-decoration:underline; } .upi-payments-overlay .upi-process {padding-bottom: 0;} .upi-process div.upi-waiting { text-align:center; vertical-align:middle; padding:10px 0; font-size:13px; } .upi-process div.upi-waiting img.img-logo { width:100px; } .upi-process div.upi-waiting img.securedby-ccavenue { width:90px; vertical-align:bottom; margin-left:6px; } .upi-process div.upi-waiting.border { border-width:0 0 1px 0; margin-bottom:12px; } .upi-process div.upi-waiting span.payto, .upi-process div.upi-waiting span.amount { width:49%; display:inline-block; } .upi-process div.loader-icons { position: relative; height:64px; width:64px; margin: 20px auto; } .upi-process .anloader { border-radius: 50%; border-width: 4px; border: solid; border-color: rgba(21, 114, 231, .25); border-top-color:#1572e8; width: 64px; height: 64px; -webkit-animation: spin .9s linear infinite; animation: spin .9s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .upi-mobile-icon { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: auto; } .upi-process div.upi-waiting .timer1 { font-weight:600; } .upi-process div.upi-waiting .cancel-upi-link { font-size:12px; text-decoration:underline; } .cancel-upi-msg { display:none; position: fixed; left:0; right:0; margin:auto; top:50%; transform: translateY(-50%); z-index:1005; max-width:376px; height:208px; padding:25px; font-size:14px !important; background:#ffffff; text-align:center; border-radius:4px; } .cancel-upi-msg span { font-weight:600; font-size:16px !important; } .cancel-upi-msg a.primary-button-bg, .cancel-upi-msg a.secondary-button-bg { font-size:15px; padding:5px 20px; line-height:25px; } .cancel-upi-msg a.close-qr-msg, .cancel-upi-msg a.cancel-qr-payment, .cancel-upi-msg.cancel-qr-msg a.close-upi-msg, .cancel-upi-msg.cancel-qr-msg a.cancel-upi-payment { display:none; } .cancel-upi-msg.cancel-qr-msg a.close-qr-msg, .cancel-upi-msg.cancel-qr-msg a.cancel-qr-payment { display:inline-block; } .upi-msg-overlay { position: fixed; z-index: 1000; background-color: rgba(114, 114, 114, 0.7); width: 100%; height: 100%; top: 0; left: 0; display: none; box-sizing:border-box; } .cancel-upi-msg { display: none; position: fixed; left: 0; right: 0; margin: auto; top: 50%; transform: translateY(-50%); z-index: 1005; max-width: 376px; height: 208px; padding: 25px; font-size: 14px !important; background: #ffffff; text-align: center; border-radius: 4px; box-sizing:border-box; } .cancel-upi-msg *{ box-sizing:border-box; } .cancel-upi-msg span { font-weight: 600; font-size: 16px !important; line-height: 24px; } .cancel-upi-msg a.primary-button-bg, .cancel-upi-msg a.secondary-button-bg { font-size: 15px; padding: 5px 20px; line-height: 25px; } .cancel-upi-msg a.close-qr-msg, .cancel-upi-msg a.cancel-qr-payment, .cancel-upi-msg.cancel-qr-msg a.close-upi-msg, .cancel-upi-msg.cancel-qr-msg a.cancel-upi-payment { display: none; } .cancel-upi-msg.cancel-qr-msg a.close-qr-msg, .cancel-upi-msg.cancel-qr-msg a.cancel-qr-payment { display: inline-block; } select.select-90x25{ width:94px;} @media (max-width: 900px) { span.span6.expiry-date-col.card-col, span.span6.cvv-number-col.card-col{width: 100%;} span.span6.cvv-number-col.card-col{margin-left: 0; margin-top:15px;} .pnc-option .pnc-body span.form-group .expiry-date-col .span12 select{ width:47%;} .pnc-option .pnc-body span.form-group .expiry-date-col .span12 select.expiryYear{float:right;} .pnc-option .pnc-body span.form-group .cvv-number-col .span12 input.textfield-55x25{ width:47%!important} #cards_form span.cvv{ margin-left:10px;left: auto; right:auto; top: 50%; margin-top: -20px; } } @media (max-width: 767px) { #cards_form.span12 { padding: 0; } .tooltip_trigger .tooltip{ width:200px; margin-left:-100px; left:50%; } .card-information .tooltip_trigger .tooltip{ width:auto; margin-left:0; left:auto;} .card-information .tooltip_trigger .tooltip:after, .tooltip_trigger .tooltip:before{ right:15px; left:auto} input.textfield, select{ position: relative; margin-bottom: 15px; padding: 10px 15px !important; height: 45px!important; border-width: 1px; border-style: solid; border-color: #dcdfe4; border-radius: 2px; transition: all 300ms; border-radius: 6px!important;; } select.select-90x25{ width:94px;} #cards_form .cvv_number{ margin-top:10px;} .save-card-container{box-sizing: border-box; max-width: 100%; padding-left: 21px;} .save-card-data .save-radio .check-radio label .radio-before{left:5px;} #cards_form .cvv_number{ margin-top:0; } #cards_form span.ctp-country-code{width:23%;} #cards_form span.ctp-mobile-no{width:70%; float:right;} #cards_form span.creditcards{padding-bottom: 7px;} .pnc-option .pnc-body span.span12.form-group.expiry-cvv-group{padding-bottom:12px;} #verticalTab .pay-by-qrcode .upi-qr .qrcontent{ max-width:116px;} #verticalTab .upi-new-flow .title{margin: 12px 0 8px 0!important;} #verticalTab .upi-new-flow .title{margin-bottom:14px !important;} .collect-upi input.span2{width: 23%;} .collect-upi input.span10{width: 70%; float: right;} #verticalTab #creditcard_form #pay-by-upi-id { margin-bottom: 10px !important; } }