body{background:#F5F6F7 !important;font-family: 'Roboto' !important;}

.custom-page .home-header {
    background: #fff;
    font-weight: 600;
    padding: 8px 0 8px 0;
    /*border-radius: 12px;*/
}


    
.home-header .header-name {
    display: flex;
    width: 82%;
    padding: 5px 0px 10px;
    align-items: center;
    float: left;
}

.home-header .header-logo {
    display:flex;
    font-weight: 500;
}

.home-header .header-logo span img {
    max-height: 50px;
    max-width: 100%;
}

.home-header .header-logo span {
    height: 45px;
    max-width: 100px;
    /*width: 45px;*/
    /*background-color: #fff;*/
    /*border: 1px solid #DDDDDD;*/
    /*border-radius: 50%;*/
    text-align: center;
    line-height: 45px;
    padding-right:10px;
}

.home-header .header-name .arrow {
    width: 30px;
    font-size: 19px;
    font-weight: 600;
    padding-left: 10px;
    padding-top: 8px;
}
.home-header .header-name .header-text {
    padding-left: 5px;
}

.home-header .header-name .header-text-no-location{
    padding-top:8px;
}

.modal-header .modal-brand-details .brand-info.brand-info-no-location{
    padding-top:16px;
}



.home-header .header-name .header-text h5 {
    font-size: 22px;
    font-family: 'Roboto';
    color: #304256;
    font-weight: bold;
    margin: 0px;
}

.home-header .header-name .header-text h2 {
    font-size: 20px;
    font-family: 'Roboto';
    color: #304256;
    font-weight: bold;
    overflow: hidden;
    max-height: 27px;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    margin-bottom: 5px;
}

.home-header .header-name .header-text p {
    color: #304256;
    font-family: 'Roboto';
    font-size: 12px;
    line-height: 4px; 
    margin: 0;
    opacity: 71%;
}
.footer {
/*    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;*/
    text-align: center;
    background-color: transparent;
    max-width: 400px;
}

#payment_init_page{background:transparent;}

.footer span img {
    height: 35px;
}



.bill-amount-input {
    font-family: 'Roboto';
    width: 100%;
    text-align: center;
    background-color: #F5F6F7;
    padding:60px 0;
}

.bill-amount-input h5 {
    font-size: 18px;
    font-family: 'Roboto';
    font-weight: 600;
    color: #000101;
    text-align: center;
    opacity: 65%;
    margin-bottom: 3px;
}

.bill-amount-input p span {
   color:#304256;
   font-size: 41px;
   font-weight: bold;
   padding-right: 5px;
}

.bill-amount-input p input{
    
    font-size: 44px;
    font-family: 'Roboto';
    color: #2474EE;
    opacity: 100%; 
    font-weight: bold;
    letter-spacing: 1px;
    outline: 0;
    border: 0;
    min-width: 55px;
    max-width: 72%;
    background-color: #F5F6F7;
    text-align: center;
    padding:0;
}

.bill-amount-input p input::placeholder, .bill-amount-input p input::-webkit-input-placeholder{
    /*text-align: left;*/
}



 /*.bill-amount-input-focus p input {
   width: 50% !important; 
}*/


input[name="bill_amount"]::-webkit-input-placeholder {
  color: #2474EE;
  /*text-align: left;*/
}

.offer-items {
    /*padding-top: 10px;*/
    background-color: #FFFFFF;
    padding-bottom: 10px;
}
.offer-terms {
    float: right;
    font-size: 10px;
    color: #818181;
    font-weight: 400;
    padding-right: 5px;
    padding-top: 5px;
}

.carousel-indicators {
    bottom: 20px;
}
.carousel-indicators > li {
    border-radius: 10px;
    margin: 1px 3px;
    height: 10px;
    max-width: 10px;
    border: 0px;
    background-color: #C1C1C1;
}
.carousel-indicators .active{
    background-color: #fff;
    max-width: 12px;
    margin: 0 3px;
    height: 12px;
}

.payment-retrybtn button {
    font-size: 18px;
    color: #fff;
    font-weight: 500;
    font-family: 'Roboto';
    width: 95%;
    background: #FD581F;
    border: 0;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
}

.payment-failed {
    width: 100%;
    text-align: center;
    background: #fff;
    padding-top: 20px;
    padding-bottom: 40px;
}

.payment-failed h1 {
    font-size: 22px;
    margin: 12px 0px;
    font-family: 'Roboto';
    font-weight: 600;
    color: #E86868;
}

.payment-failed p {
    font-size: 14px;
    color: #8E8E8E;
    font-weight: 500;
    margin-bottom:20px;
}

.payment-failed p.failed_need_help{
    font-size:16px;
}

.payment-retrybtn a {
    /*font-size: 11px;
    color: #2D72F7;
    font-weight: bold;
    padding-top: 15px;
    display: inline-block;*/
}

.payment-process{
    text-align: center;
    padding-top: 50%;
    padding-bottom:10%;
 
}

.payment-process h1{
    font-size: 23px;
    font-family: 'Roboto';
    font-weight: bold;
    color: #304256;
 
}

.payment-process .sub-title {
    font-size: 12px;
    font-family: 'Roboto';
    font-weight: bold;
    color: #939393;
 
}

.swiper-container {
  width: 100%;
  height: 20%;
}

.swiper-slide {
  width: 360px;
  padding: 0 2px;
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
    min-height: 120px;
    max-height: 120px;
}

.swiper-slide-single{
    padding:0 10px;
    text-align:center;
    display:flex;
}

    
.swiper-pagination-bullet-active {
    background: #fff !important;
}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 19px !important;
}

.swiper-offer {
    background-image: url('https://cdn.twidpay.com/me/static/pwa_flipkart/img/offer_back.png');
    background-color: #F8D9DC;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 6px;
    max-height: 120px;
    min-height: 120px; 
/*    margin-left: 3px;
    margin-right: 3px;*/

}

.swiper-offer-center {
    margin-left: 15px !important;
    width:400px;
    max-width:94% !important
}

.swiper-offer .swipper-offer-details {
    width: 100%;
    padding: 0 8px;
}

.swiper-offer .swipper-offer-details .offer-title {
    font-size: 18px;
    font-weight: 500;
    color:#333333;
    text-align: left;
    margin-left: 15px;
    margin-bottom:3px;
}

.swiper-offer .swipper-offer-details .offer-sub-title {
    font-size: 13px;
    font-weight: 400;
    color:#333333;
    text-align: left;
    line-height: 15px;
    margin-left: 15px;
    height: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;   
    margin-bottom:3px;
}

.swiper-offer .swipper-offer-details .more-info {
    width: 40%;
    font-size: 14px;
    font-weight: bold;
    color: #6594E1;
    text-align: right;
    padding-right: 15px;
}

.swiper-offer .swipper-offer-details .min-bill-info {
   max-width: 55%;
   font-size: 12px;
   font-weight: 500;
   background-color: #fff;
   border:0;
   border-radius: 0 10px 10px 0;
   color:#333333;
   padding: 6px;
   margin-left: 5px;
    white-space: nowrap;
    /*overflow: hidden;*/
    text-overflow: ellipsis;    
    opacity:1;
    text-align:left;
    padding-left:12px;
    
}

.swiper-offer .swipper-offer-details .offer-expire-date {
    width: 40%;
    font-size: 12px;
    padding-top: 10px;
    padding-left: 5px;
}    
    
.success-content {
    background: #fff;
    border-radius: 20px 20px 0 0;
    margin: 0 8px;
    padding-bottom: 2px;
}

.payment-success-info {
    width: 100%;
    text-align: center;
    background: #fff;
}

.payment-success-info h1 {
    font-size: 27px;
    font-weight: bold;
    color: #1AB26C;
    font-family: 'Roboto';
    padding-top: 5px;
}

.payment-success-info h2 {
    font-size: 24px;
    font-weight: bold;
    color: #1AB26C;
    font-family: 'Roboto';
}

.payment-success-info .transaction-amount {
    font-size: 34px;
    font-weight: 900;
    color: #000000;
    line-height: 1em;
    font-family: 'Roboto';
}

.payment-success-info .transaction-date {
    font-size: 14px;
    font-weight: 500;
    color: #8E8E8E;
    padding-top: 15px;
    font-family: 'Roboto';

}

.payment-success-info .transaction-id {
    font-size: 16px;
    font-weight: bold;
    color: #8E8E8E;
    line-height: 2em;
    font-family: 'Roboto';
}
.paymentcode-info {
    border:1px dashed #D3CFCF;
    border-radius: 8px;
    padding:10px;
    text-align: center;
    width: 80%;
    margin-left: 35px;
    margin-top: 2px;
    line-height: 1em;
}

.paymentcode-info .payment-code-title {
    font-size: 14px;
    font-weight: bold;
    color:#585858;
    font-family: 'Roboto';
    
}

.paymentcode-info .payment-code {
    font-size: 24px;
    font-weight: bold;
    font-family: 'Roboto';
    color:#3478E9;
    line-height: 0.2em;
    letter-spacing: 0.21px;
}

.billing-instructions-info {
    font-family: 'Roboto';
    background: #EBEBEB;
    border-radius: 0 0 10px 10px;
    margin: 0 8px;
    padding-top: 10px;
    padding-bottom: 2px;
    background-image: url(https://cdn.twidpay.com/me/static/pwa_flipkart/img/billng-pos.png);
    background-repeat: no-repeat;
    background-position-x: 20em;
    background-position-y: bottom;
    background-size: 6em;
}

.billing-instructions-info .inst-heading {
    font-size: 16px;
    color: #484848;
    padding-left: 10px;
    font-weight: 600;
    font-family: 'Roboto';
}

.billing-instructions-info ul {
  width: 80%;
  list-style-type: square;
  padding-left: 20px;
  margin: 0;
  font-family: 'Roboto';
  list-style-position:outside;
  margin-left:5px; 
  color: #3478E9; 
  font-size:13px;
}

.billing-instructions-info ul li {
    font-size: 13px;
    color: #6F6F6F;
    font-weight: 400;
    font-family: 'Roboto';
    padding-left:0px;
}


/*.billing-instructions-info ul li::before {
  content: "\2022";
  color: #3478E9;
  display: inline-block; 
  width: 1em;
  font-size: 13px;

}*/

.billing-instructions-info ul li:last-child{
    margin-bottom:15px;
}

p.instructions_container{margin-bottom:10px;}

.billing-instructions p {
    width: 75%;
    font-size: 13px;
    padding-left: 10px;
    
}

.billing-info {
    
    padding-bottom: 20px;
}

.scratch-card-info .scratch-card {

  padding-top: 15px;
  padding-bottom: 20px;
  background-image: url('https://cdn.twidpay.com/me/static/pwa_flipkart/test/scratch-card-close.png');
  background-repeat: no-repeat; 
  background-position: center;
  background-size: 60px;
  background-position-y: 13rem;
  background-position-x: 9rem;

}


.precheckeckout-header {
    background-color: #F5F6F7;
}


.fk-super-coins {
    margin-top:10px;
    width:100%;
}

.fk-super-coins .supercoins-info {
    background-color: #FDF7EB;
    display: flex;
    padding: 10px;
}

label.mycheck-box-cu {display: inline-block;}

label.mycheck-box-cu span.vouchercheckmark {
    float: left;
    margin-left: 0;
    text-align: right;
    margin-top: 8%;
}
li.voucher-radio .vouchercheckmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 17px;
    width: 17px;
    background-color: #fff;
    border-radius: 100%;
    border: 2px solid #282FFB;
}

/* Voucher radio */
.voucher-radio {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.voucher-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
li.voucher-radio .vouchercheckmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 17px;
  width: 17px;
  background-color: #fff;
  border-radius: 100%;
  border: 2px solid #282FFB;
}

/* On mouse-over, add a grey background color */
.voucher-radio:hover input ~ .vouchercheckmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.voucher-radio input:checked ~ .vouchercheckmark {
  background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
li.voucher-radio .vouchercheckmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.voucher-radio input:checked ~ .vouchercheckmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.voucher-radio .vouchercheckmark:after {
  left: 5px;
  top: 2px;
  width: 4px;
  height: 7px;
  border: solid #002f06;
  border-width: 0px 1px 1px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.voucher-active {
    background: #FDF7EB !important;
    border: 1px solid #FDF7EB  !important;
}

.total-bill-summary {
    width: 100%;
    border: 0;
    padding: 5px;
    margin-top: 10px;
    background-color: #FFFFFF;
}

.total-bill-summary table {
    width: 100%;
}

.total-bill-summary table tr {
    min-height: 35px;
}

.total-bill-summary table th {
    padding-left:10px;
    padding-top: 5px;
    font-size: 16px;
    color: #3F3F3F;
    font-weight: 500;
    min-height: 35px;
}

.total-bill-summary table td {
    text-align: right;
    padding-right:10px;
    padding-top: 5px;
    font-size: 16px;
    color: #212121;
    font-weight: 600;
    font-family: 'Regular';
    opacity: 1;
    min-height: 35px;
}

.send-button {
    width: 40%;
    margin: 0 auto;
    padding-top: 5px;
}

.send-button button {
    background: #FF5800;
    width: 100%;
    border: 0px;
    border-radius: 2px;
    font-size: 16px;
    padding: 8px 0px;
    color: #FFFFFF;
    font-family: 'Roboto';
    font-weight: 500;
    opacity: 1;
}

.home-header .precheckout-header-name {
    width: 8% !important;
    padding: 0;
}

.home-header .brand-details {
    width:100%;
    display: flex;
    padding-top:5px;
}

.brand-details .brand-logo {
    height: 50px;
    width: 50px;
    background-color: #fff;
    border: 0;
    border-radius: 50%;
    text-align: center;
    line-height: 45px;
    margin-left:5px;
}

.brand-details .brand-logo span {
    height: 50px;
    width: 50px;
    background-color: #fff;
    border: 1px solid #DDDDDD;
    border-radius: 50%;
    text-align: center;
    line-height: 45px;
}
.brand-details .brand-logo img {
/*    max-height: 40px;*/
    max-width: 80%;
}

.precheckout-page .brand-details .brand-logo img {
    max-height: 80%;
    max-width: 80%;
    padding:2px;
}

.brand-details .brand-info {
    padding-left:10px;
    width: 50%;
}

.brand-details .brand-info .brand-name {
    font-size: 15px;
    font-weight: 600;
    font-family: 'Roboto';
    color: #304256;
    overflow:hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
    height:20px;
    margin-top:4px;
}

.brand-details .brand-info .store-loc {
    font-size: 12px;
    font-family: 'Open Sans';
    opacity: 0.71;
    
}

.brand-details .header-bill-info {
    width: 32%;
    float: right;
    text-align: right;
    margin-top: -5px;
    display:flex;
    align-items: center;
    justify-content: flex-end;
}

.brand-details .header-bill-info .header-bill-amount {
    font-size: 29px;
    font-weight: bold;
    font-family: 'Roboto';
    color: #304256;
    opacity: 1;
    max-height: 38px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;    
}

.brand-details .header-bill-info .edit-bill-link {
   font-size: 17px;
   font-weight: 600;
   color: #408BF9;
   font-family: 'Roboto';
   opacity: 1;
   line-height: 0.3;
   padding-top:5px;
   padding-left:3px;
}

.pay-btn {
  height: 70px;
  line-height: 70px;  
  width: 70px;  
  font-size: 20px;
  font-weight: bold;
  border-radius: 50%;
  background-color: #F69D77;
  color: white;
  text-align: center;
  cursor: default;
  border: 0;
  pointer-events: none; 
}

.pay-btn-active {
    pointer-events: all; 
    background-color: #FA6620;
    cursor: pointer;
}

.proced-pay-btn {
    background: rgba(253, 88, 31, 1) !important;
}
.payment-success-need-help {
    width: 50%;
    color: #171717;
    padding-left: 35px;
}


/* .payment-success-need-help p{
    width: 100%;
    font-size: 12px;
    font-family: 'Roboto';
    text-align:center;
    color: #535353;
    opacity: 1;
    padding-top: 10px;
    letter-spacing: 0.47px;
    font-weight: 600;
} */

.success-scratch-container{
    display:flex;
    margin-top:30px;
    position:relative;
}

.success-scratch-left{
    width:20%;float: left;display: flex;padding-left: 10px;position:absolute;bottom:0;left:0
}

.success-scratch-middle{
    width:100%;display: block;text-align: center;
}
.success-scratch-middle img{
    max-width:50%;display: block; margin:0 auto;
}

.process_scratch_card_img{
    box-shadow: 0 0 10px #888888;
    background: transparent;
    border-radius: 16px;
    margin-top:20px;
}

.success-scratch-right{
    width:20%;float: right;text-align: right;margin-right:10px;position:absolute;bottom:0;right:0;
}

.success_twid_powered{margin-top:30px !important;display:block;height: 35px;}
.home-header .header-logo p {
    background-color: #fff;
    /* height: 60px;
    width: 60px;
    border: 1px solid #DDDDDD;
    border-radius: 50%; 
   line-height: 50px; */
    text-align: center;
    
}
.success-content .home-header .header-logo p {
    align-items: center;
    justify-content: center;
    display: flex;
    margin-bottom:0;
    
    height: 60px;
    width: 60px;
    border: 1px solid #E8E8E8;
    border-radius: 50%; 
    padding:1px;
    
}

.success-header-logo-container{
    height: 50px;
    align-items: center;
}


.success-header{position:relative;height:60px}
.success-header-logo-container{position:absolute;width:100%;justify-content: center;}
.success-brand-logo{position: absolute;}
.success-brand-logo img {max-height: 50px;max-width: 100px;height:auto;width:auto;}

.success-content .success-brand-logo img {max-height: 44px;max-width: 44px;height:auto;width:auto;}

.success-tick{position: absolute;z-index: 2;height: 15px;top: 46px;left: 51%;margin-left: 10px;
    animation: fadeInOut 2s;
    animation-iteration-count: infinite;
}
.init-pay-btn {padding-top:20px; display: flex;align-items: center;justify-content: center;background-color: #F5F6F7;}
.precheckout-page {background: #F5F6F7;}
.precheckout-header {background: #F5F6F7 !important;font-size: 18px;}
.precheckout-header .header-txt {padding: 8px 0;}
.super-coins-info {float: left;width:60%;}
.billing-inst-arrow {float: right;color:#2474EE;font-size: 18px;padding-right:10px;}
.hide-background-image {background-image: none !important;}
.orderlist-menu {width:100%;background-color: #F5F6F7;height:50px;font-family: 'Roboto';font-size: 17px;font-weight: bold;color: #5C5C5C;text-align: center;padding:10px;}
.orderlist-menu .txn-order-list {width:50%;float: left;color: #5C5C5C;}
.orderlist-menu .scratch-card-list {width:50%;float: right;color: #5C5C5C;}
.orderlist-menu .scratch-card-list a {color: #5C5C5C;}
.orderlist-menu-active {color: #2474EE !important;}
.success-surprise-text {font-size: 22px;font-weight: 600;color:#304256;opacity: 0.74;text-align: center;padding-top: 20px;}

.txn-order-data {border-radius: 0px 0px 10px 10px;opacity: 1;padding: 8px;}
.txn-order-box {background: #fff;border: 0;border-radius: 8px;width: 100%;margin: 8px 0;}
.txn-order-box .txn-info {width:100%;display: flex;}
.txn-order-box .txn-info .txn-details {width: 50%;float: left;padding: 10px;}
.txn-order-box .txn-info .txn-details h3 {font-size: 16px;font-weight: bold;font-family: 'Roboto';color: #5C5C5C;;opacity: 1;padding-top: 5px;}
.txn-order-box .txn-info .txn-details p {font-size: 12px;font-weight: 400;font-style: normal;font-family: 'Roboto';color: #304256;opacity: 0.71;line-height: 0.2;}
.txn-order-box .txn-info .brand-logo {width: 30%;float: left;text-align: right;margin-right: 10px;}
.txn-order-box .txn-info .brand-logo img {max-height: 50px;}

.txn-info .payment-status-details {float: right;padding-top: 15px;padding-right: 10px; width: 50%;text-align: right;}
.txn-info .payment-status-details .payment-status {font-size: 14px;font-weight: 500;font-family: 'Roboto';color: #6DB720;opacity: 1;}
.txn-info .payment-status-details .txn-date {font-size: 12px;font-weight: 500;font-family: 'Roboto';color: #A2A2A2;;opacity: 1;}
.txn-info .payment-status-details .payment-fail-status {color: #FD5252 !important;}
.txn-info .payment-status-details .payment-progress-status {color: #F89625 !important;}

.txn-order-box .order-summary {width:100%;display: flex;padding: 5px;border-top:1px solid #D3CFCF;}
.txn-order-box .order-summary .amount_spent {width:50%;float:left;font-size:15px;font-family: 'Roboto';font-weight: 600;color: #304256;padding-left: 8px;}
.txn-order-box .order-summary .cashback_earn {width:50%;float:right;font-size:14px;font-family: 'Roboto';font-weight: 600;text-align: right;color: #408BF9;opacity: 1;}
.order-summary .cashback_earn .arrow-right {font-size:13px !important;color: #488BF9;font-weight: 400 !important;padding-left: 5px;}


#bill_amount::placeholder{opacity:0.4;line-height:50px;font-size:44px;}
.arrow a {
    color:#304256;
}

.payConfirmModal .modal-confirm .modal-content{background:white;height:auto;padding:0;}
.payConfirmModal .modal-body .confirm-border-top{margin:0;}

.modal-header .modal-brand-details {
    display: flex;
    width: 100%;
    padding-top:0;
    padding-left: 15%;
    border-bottom:none;
}
.modal-header .modal-brand-details .brand-logo {
    height: 55px; 
    width: auto;
    max-width:80px;
    background-color: #fff;
    margin-left: 5px;
    /*border: 1px solid #DDDDDD;*/
    /*border-radius: 50%;*/
    text-align: center;
    line-height: 45px;
}

.modal-header .modal-brand-details .brand-logo img {
    max-height: 100%;
}

#payConfirmModal .btn-success:focus{
    box-shadow:none;
}


.modal-header .modal-brand-details .brand-info {
    padding-left: 15px;
    padding-top: 4px;
    width: 70%;
}

.modal-brand-details .brand-info .brand-name {
   font-size: 18px;
   font-weight: 600;
   font-family: 'Roboto';
   color: #304256;
   opacity: 100%;
   overflow: hidden;
   text-overflow: ellipsis; 
   white-space: nowrap;
} 

.modal-brand-details .brand-info .store-loc {
    font-size: 12px;
    font-weight: 500;
    color: #304256;
    opacity: 71%;
}

.modal-confirm .modal-header {
    border-bottom:none;
}

.modal-confirm .modal-error-title {
    border-bottom: 1px dashed grey;
}

.modal-body .confirm-border-top {
    border-top:1px solid #C9C9C9;
    margin: 0 5%;
}

.modal-confirm .bill-edit-btn {
    width: 90%;
    background-color: #fff !important;
    color: #408BF9;
    border: 1px solid #408BF9;
    font-size: 16px;
    font-weight: 600;
    border-radius:3px;
}

.modal-confirm .bill-continue-btn {
    width: 90%;
    font-size: 16px;
    font-weight: 600;
    border-radius:3px;
}
    

.pay_confirm_bill_amount_str{font-size: 18px;font-weight: 600;text-align: center;color: #304256;opacity: 0.8;padding-top:20px;}
.pay_confirm_bill_amount{font-size: 42px;font-weight: 600;text-align: center;color:#304256;line-height: 0.5;padding-bottom:10px;}
.pay_confirm_bill_amount .rupees-icon{font-size: 42px !important;color:#304256 !important;padding-right: 8px;font-weight: 500;} 

#payConfirmModal .modal-confirm .modal-header {padding: 10px 10px 0 10px}

.enter-number {text-align: left; padding: 25px;}
.enter-number h3 {
    font-size: 18px;
    font-family: 'Roboto';
    font-weight: 500;
    color: #000000DE;
}
.enter-number p {
    font-size: 14px !important;
    color: #00000099 !important;
    font-weight: 400;
}
.otp-sec {width:100%;}
.otp-timer {font-size: 16px;font-weight: 600;width: 50%;float:right; text-align: right; padding-right: 10px;color:#2170F4;}

.otp_button {
    
    width: 94% !important; 
    padding-top: 100px !important;
    padding-bottom: 50px;
}

.otp-capture-str {
    font-size: 15px;
    color: rgba(42, 46, 72, 0.72);
    margin: 0;
}
.otp-value-box{
    -webkit-box-shadow: -5px 2px 30px -1px rgba(193,193,193,0.5);
    -moz-box-shadow: -5px 2px 30px -1px rgba(193,193,193,0.5);
    box-shadow: -5px 2px 30px -1px rgba(193,193,193,0.5);
    float:left;
    border:0;
    border-radius: 8px;
    padding: 2px 8px;
}
.otp-value-box img {
    max-height: 20px;
}

.otp-value-box .otp-value {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 1px;
}

.otp-value-box .otp-value {
    font-size: 22px;
    font-weight: 600;
    color: #212121;
    letter-spacing: 1px;
}

.otp-value-box .otp-info-str {
    line-height: 0;
    font-size: 10px;
    color: #00000099;
    margin-top: -6px;
    padding-left: 10px;
}
.faq-custom-page {
    padding-bottom: 100px !important;
    background: #F5F6F7 !important;
}

.faq-custom-page .faq-header-name .arrow {
    font-size:19px;
    padding:20px 10px;
    color:#1D1D1D;
    border-bottom: solid 1px #DBDBDB;
}

.faq-custom-page .faq-header-name .header-title {
    font-size:23px;
    font-weight: bold;
    padding-left:15px;
}

.need-help-list {
    width: 100%;
}

.need-help-list ul {
    margin: 0px;
    padding: 0;
    list-style: none;
}

.need-help-list ul li {
    width:100%;
    font-size: 15px;
    font-weight: bold;
    font-family: 'Open Sans';  
    color:#575757;
    padding: 20px 15px;
    border-bottom: solid 1px #DBDBDB;
}

.faq-list .faq-item {
    width:100%;
    
}

.faq-list .faq-item .faq-title {
    width:95%;
    float:left;
}

.faq-list .content {
    font-size: 14px;
    font-weight: 200;
    padding: 8px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
    margin-top: 20px;
}

.faq-list .faq-right-arrow {
    
    font-size: 16px;
    font-weight: 400;
    color:#2474EE;
}

.faq-list .faq-down-arrow {
    
    font-size: 16px;
    font-weight: 400;
}

.need-help-list .faq-heading {
    font-size: 26px;
    font-weight: bold;
    font-family: 'Open Sans';
    color:#575757;
    padding-left:15px;
    margin-top:10px;

}

.complaint-list  {
    padding-left:10px;
    padding-top:10px;
}

.complaint-data {
    width:100%;
    display: flex;
}


.complaint-data .complaint-heading {
    width:50%;
    float:left;
    font-size: 24px;
    font-weight: bold;
    font-family: 'Open Sans';
    color:#575757;
}

.complaint-data .complaint-btn {
    font-size:14px;
    font-weight: bold;
    width:40%;
    background: #FDE5DD;
    color: #575757;
    padding:5px;
    border:none;
    border-radius: 10px;
    margin-top: 5px;
    margin-left: 10px;
}

/*.custom-page {
    padding-bottom: 100px;
    background: #fff !important;
} */

.complaint-reason-list {
  width: 100%;
}

.complaint-reason-list ul {
  margin: 0px;
  padding: 0;
  list-style: none;
}

.complaint-reason-list ul li {
  width:100%;
  font-size: 16px;
  font-weight: bold;
  font-family: 'Open Sans';  
  color:#575757;
  padding: 15px 10px;

}
.complaint-send-button {

  margin: 0 auto;
  padding-top: 5px;
  padding-bottom: 10px;
}
.complaint-send-button button {

  background: #FF5800;
  width: 90%;
  border: 0px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: bold;
  padding: 8px 0px;
  color: #FFFFFF;
  font-family: 'Roboto';
  opacity: 1;
}

.complaint-list .my-complaint-list {
    font-size:14px;
    font-weight:bold;
    color:#408BF9;
    padding-top: 5px;
}

.complaint-list .complaint-issues-text {
    font-size:14px;
    font-weight: 400;
    padding-top: 15px;
}
.my-complaint-list .my-complaint-list .right-arrow{
    font-size:13px;
}
.complaint-reason-list .reason-title-text {
    font-size:15px;
    color:#2A2E43;
    opacity: 0.7;
    padding:10px 10px;
}
.complaint-reason-list .faq-list .reason-text {
    color:#4E4E4E;
    padding-left:8px;
}

.reason-input {
   padding:10px 10px; 
}
.reason-input .reason-label {
    font-size:15px;
    color:#2A2E43;
    opacity: 0.7;
}
.reason-input  textarea {
    border: none;
    border-radius: 5px;
    background: #fff;
}
.complaint-reason-list .complaint-reason-heading {
    background: #F0F0F0;
    font-size:16px;
    font-weight: 600;
    color:#A2A2A2;
    opacity: 0.7;
    padding:5px 10px;
}
.complaint-info {
    width: 100%;
    display: flex;
    padding:10px;
}
.complaint-info .complaint-box{
    width:85%;
}
.complaint-box .complaint-id {
    color:#3B3B3B;
    font-size: 16px;
    font-weight: bold;
}

.complaint-box .complaint-date {
    font-size: 12px;
    font-weight: 400;
    color:#78849E;
}

.complaint-box .complaint-txn-id {
    font-size: 12px;
    font-weight: 400;
    color:#78849E;
}
.complaint-info .brand-logo {
    float:right;
}
.complaint-info .brand-logo img {
    max-height: 40px;
}

.complaint-status-summary {
    width: 100%;
    display: flex;
    padding-bottom: 10px;
    padding-left:10px;
}
.complaint-status-summary .complaint-completed-status {
    width: 90%;
    float: left;
    color:#3D9D93;
    font-size:14px;
    font-weight: bold;
}

.complaint-status-summary .complaint-processing-status {
    width: 90%;
    float: left;
    color: #F99540;
    font-size:14px;
    font-weight: bold;
}

.custom-page .home-bg {
    background: #fff !important;
}

.complaints-desc {
    background-color: #FFFFFF;
    padding: 10px;
}

.complaints-desc .desc-header {
    color:#3B3B3B;
}

.complaints-desc .desc-content {
    font-size: 12px;
    font-weight: 400;
    color: #9EA6B9;
    padding-top:5px;
}


@media (max-width: 321px){
    
    .swiper-offer-center{
        width:290px;
    }
    
    .swiper-offer .swipper-offer-details .min-bill-info {
       font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;              
    }

    .swiper-offer .swipper-offer-details .offer-expire-date {
        font-size: 11px;
    }  
    
    .brand-details .header-bill-info .header-bill-amount{
        font-size:25px;
        width:75%;
    }    
    
}

/****media*****/
/*@media only screen and (max-width: 767px) {*/
@media only screen {
    
.voucher-discount {
    width: 100%;
    background: #fff;
    padding: 20px 0;
}

.voucher-heading {
    margin-left: 10px;
    color: #304256;
}

.voucher-heading h3 {
    padding: 0px;
    font-size: 16px;
    font-family: 'Roboto';
    color: #304256;
    font-weight: 700;
}

.voucher-heading p {
    font-size: 11px;
    color: #5A5656;
}

.voucher-discount .voucher-boxs {
    width: 100%;
    overflow: auto;
    display:flex;
}

.voucher-discount .voucher-boxs ul {
    
    width: 126px;
    display: flex;
    background: #FFFFFF;
    padding: 5px 10px;
    margin: 0px;
    float: left;
    margin-right: 10px;
    list-style: none;

}

.voucher-discount .voucher-boxs ul li.radio {
    text-align: left;
}

.voucher-discount .voucher-boxs ul li {
    font-size: 16px;
    display: flex;
    color: #3C3C3C;
    font-weight: 500;
    padding: 10px 5px;
    border-radius: 5px;
    border: solid 1px #F2E5CB;
    margin-right: 10px;
    min-width: 140px;
}


.voucher-discount .voucher-boxs ul li span {
    display: block;
    font-size: 20px;
}

.voucher-discount .voucher-boxs ul li .voucher-title {
    font-size: 15px !important;
    font-family: 'Roboto';
    font-weight: bold;
    color: #3C3C3C;
    text-align: right;
    opacity: 1;
}

.voucher-discount .voucher-boxs ul li input {
    margin-right: 12px;
    height: 1.2em;
    width: 1.2em;
    margin-top: 2%;
}

.fk-super-coins {
    margin-top:10px;
    width:100%;
}

.fk-super-coins .supercoins-info {
    background-color: #FDF7EB;
    display: flex;
    padding: 10px;
}
.supercoins-info .supercoins-heading {
    font-size:16px;
    font-weight: 500; 
    font-family: 'Roboto';
    color: #212121;
    opacity: 1;
}

.fk-super-coins .supercoins-applied-str {
    font-size:14px;
    font-family: 'Roboto';
    font-weight: 500;
    background-color: #FFFFFF;
    padding: 10px;
    color: #1BA63B;
    opacity: 1;
}

.supercoins-info .supercoins-balance {
    font-size:15px;
    font-weight: 400;
    font-family: 'Roboto';
    color: #212121;
}

.voucher-active {
    background: #FDF7EB !important;
    /*border: 0 !important;*/
}

.total-bill-summary {
    font-family: 'Roboto';
    width: 100%;
    border: 0;
    padding: 5px;
    margin-top: 10px;
    background-color: #FFFFFF;
}

.total-bill-summary table {
    width: 100%;
    font-family: 'Roboto';
}

.total-bill-summary table th {
    padding-left:10px;
    padding-top: 5px;
    font-size: 16px;
    color: #3F3F3F;
    font-weight: 400;
    width: 38%;
}

.total-bill-summary table td {
    text-align: right;
    padding-right:10px;
    font-size: 16px;
    color: #212121;
    font-weight: 400;
    font-family: 'Roboto';
    opacity: 1;
}

.apply-fk-points {
    float: right;
    padding-left: 25px;
    margin-top: -10px;
}


.apply-fk-points input[type=checkbox]{
	height: 0;
	width: 0;
	visibility: hidden;
}

.apply-fk-points label {
	cursor: pointer;
	text-indent: -9999px;
	width: 35px;
	height: 10px;
	background: #E4E4E4;
	display: block;
	border-radius: 100px;
	position: relative;
}

.apply-fk-points label:after {
	content: '';
	position: absolute;
	left: 0px;
        right: 0px;
	width: 20px;
	height: 20px;
	background: #C1C1C1;
	border-radius: 30px;
        margin-top:-5px;
}

.apply-fk-points input:checked + label {
	background: #93B7F1;
}

.apply-fk-points input:checked + label:after {
	left: calc(100%);
	transform: translateX(-95%);
        background: #2874F0;
}

.apply-fk-points label:active:after {
	width: 35px;
        background: #2874F0;
}

.summary-table-row {
    border-bottom: 1px solid #F0F0F0;
}

.summary-table-row-heading {
    font-size: 16px !important;
    color: #878787 !important;
    font-weight: 500;
}
.summary-total-row {
    border-top: 1px dashed #f4f4f4;
    padding-bottom: 5px;
}
.summary-total-row-heading {
    font-size: 16px !important;
    color: #212121 !important;
    font-weight: 600 !important;
    font-family: 'Roboto';
}
.summary-total-row-amount {
    font-size: 16px !important;
    color: #212121 !important;
    font-weight: 600 !important;
    font-family: 'Roboto';
}

.summary-saved-amt-row {
    /* border-top: 1px solid #f4f4f4; */

}

.summary-saved-amount {
    font-size: 14px;
    color: #60B244;
    font-weight: 400;
    padding: 8px;
    background: #EDFBE9;
    border-radius: 8px;
    margin-top: 10px;
}

.summary-saved-amount-piggy-img {
    margin-right: 5px;
    margin-left: 5px;
}


.twid-powered-logo {
    margin-top: 10px;
}
.footer-summary {
    background-color: #FFFFFF;
    display: flex;
    padding: 8px;
}

.footer-total-amount-payable {
    font-size: 21px;
    font-weight: 600;
    font-family: 'Roboto';
    color: #212121;
    opacity: 1;
    padding-top:10px;
    padding-left:5px;
}

.footer-total-amount {
    text-align: left;
    float: left;
    width:60%;
}
.supercoins-apply-input {
    width:40%;
    float:right;
    text-align: right;
    display:flex;
    align-items: center;
    justify-content: flex-end;
}

}


.bill-amount-input #bill_amount-error{display:none !important;}

.home-header .header-name .header-text p.location_text{
    font-size:11px;
    line-height: 14px !important;
    color: #304256;
    font-family: 'Roboto';
    margin-top: -3px;
    opacity: 71%;
    height: 16px;
    font-weight:500;
}

.success-scratch-container .rewards-wrapper{
    width: 220px;
    height: 220px;
    margin: 20px 5px 15px 5px;
    position: relative;
    user-select: none;
    display:inline-flex;
}

.success-scratch-container .rewards-card{
    opacity: 1;
    flex: 0 0 100%;
    max-width: 100%;
    height: 220px;
    position: relative;
}


.success-scratch-container  .rewards-card{
    width: 250px;
    height: 255px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    background: #ffffff url('https://cdn.twidpay.com/me/static/pwa_flipkart/img/scratch_card_success_bg_updated.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    border-radius: 10px;
    text-align: center;
    position: relative;
    box-shadow: 0 0 12px #888888;
}
.rewards-info h2:before{
	content: '';
	position: relative;
	display: inline-block;
	margin-top: 7px;
	margin-right: 4px;
	width: 34px;
	height: 34px;
	background: url('https://cdn.twidpay.com/me/static/pwa_flipkart/img/coin.png');
	background-size: 32px 32px;
	background-repeat: no-repeat;
	background-position: center;
}

.brand-logobox{
	background-color: #fff;
	position: relative;
	width: 90px; 
	height: 90px; 
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%; 
	overflow: hidden; 
	box-shadow: 0 0 0 1px #dddddd; 
	margin-top: 0;
}
.brand-logobox img{
	width: 100%;
        max-width: 100%;
}

.coupon-text{
	font-family: 'OpenSans',Arial,sans-serif;
	background: #EBEBEB;
	background-size: 15px 15px;
	background-repeat: no-repeat;
        background-position: 95% 8.5px; 
	text-align: center;
	color: #404040;
	height: 32px;
	font-size: 13px;
	border-radius: 5px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 90%;
}
.setto-bottom{
	position: absolute;
	bottom: 12px;
	text-align: center;
	width: 100%;
	left: 0;
	padding: 0 12px;
}

.success-scratch-container .cashback-text{margin-bottom:35px;}
.success-scratch-container .success-scratch-middle .rewards-branding{
  background-image: url(https://cdn.twidpay.com/me/static/pwa_flipkart/img/top-bg.svg), url(https://cdn.twidpay.com/me/static/pwa_flipkart/img/stars.svg);
  background-position: right -4px, center top;
  background-repeat: no-repeat,  no-repeat;
  background-size: 100% auto, 80% 80% 
}
.success-scratch-container .cashback-text{font-weight:500;}

.bonus-coins-text{
    position: absolute;
    top: 25px;
    font-size: 35px;
    color: white;
    left: 25px;
}

@media (max-width: 480px){
    
    .swiper-offer-center{
        width:430px;
    }
    
    .success-scratch-container .rewards-wrapper{
        width: 190px;
        height: 200px;
    }
    .success-scratch-container .rewards-card {
        height: 200px;
    }
    .rewards-tnc{
        font-size: 11px;
    }
}



@media (max-width: 440px) {

    .swiper-offer-center{
        width:410px;
    }
        
    
    .success-scratch-container .rewards-wrapper{
        width: 164px;
        height: 174px;
    }
    .success-scratch-container .rewards-card{
        height: 174px;
    }
    .success-scratch-container .rewards-info h5 {
        font-size: 14px;
    }
    .success-scratch-container .rewards-info h2 {
        font-size: 38px;
        line-height: 38px;
    }
    .success-scratch-container .rewards-info h2:before{
        margin-top: 6px;
        width: 30px;
        height: 30px;
        background-size: 26px 26px;
    }
    .success-scratch-container .setto-bottom {
        bottom: 10px;
    }
    .success-scratch-container .rewards-info h6 {
        font-size: 12px;
        line-height: 12px;
        margin: 10px 0 3px 0;
    }
    .success-scratch-container .rewards-info p {
        font-size: 9px;
        line-height: 13px;
        width: 100%;
        padding: 0 12px;
    }
    .success-scratch-container .rewards-noluck h4 {
        font-size: 20px;
        line-height: 26px;
    }
    .rewards-noluck h4{
        font-size: 28px;
        line-height: 34px; 
    }
    /*/*/
    .success-scratch-container .brand-logobox{
        width: 60px; 
        height: 60px; 
        margin-top: 0px;
    }
    .success-scratch-container .cashback-text {
        font-size: 14px;
        line-height: 18px;
        padding: 5px 10px 10px 10px;
    }
    .success-scratch-container .coupon-text {
        height: 30px;
        font-size: 12px;
        border-radius: 4px;
    }
}


@media (max-width: 374px){

    .swiper-offer-center{
        width:345px;
    }
        
    
    .middle-box ul li,
    .tap-toreveal,
    .rewards-card{
        width: 184px;
        height: 188px;
    }

    .rewards-tnc{
        font-size: 8px;
        line-height: 9px;
        top: -14px;
    }
    .rewards-noluck h4 {
        font-size: 22px;
        line-height: 28px;
    }
    .rewards-info h6 {
        font-size: 12px;
        line-height: 12px;
        margin: 5px 0 4px 0;
    }
    .rewards-info p {
        font-size: 11px;
        line-height: 14px;
    }



    .success-scratch-container .rewards-wrapper, .success-scratch-container .rewards-wrapper{
        width: 160px;
        height: 166px;
        margin: 12px 4px 15px 4px;
    }	
    .success-scratch-container .rewards-card{
        height: 166px;
    }
    .success-scratch-container .rewards-noluck h4 {
        width: 140px;
    }
    .success-scratch-container .cashback-text {
        font-size: 13px;
        line-height: 17px;
        padding: 5px 9px 10px 9px;
    }
    .success-scratch-container .coupon-text {
        width: 100%;
    }
    
    .brand-details .header-bill-info .header-bill-amount{
        font-size:24px;
        width:75%;
    }  

    
}

@media(max-width: 359px){
    
    .swiper-offer-center{
        width:330px;
    }
        
    
    .rewards-info h5{
        margin: 0 0 1px 0;
        font-size: 13px;
        line-height: 16px;
    }
    .rewards-info h2{
        font-size: 42px;
        line-height: 42px;
        margin: 11px 0 11px 0 ;
    }
    .setto-bottom{
        bottom: 10px;
    }
    .rewards-info h6{
        font-size: 12px;
        line-height: 14px;
        color: #4E4E4E;
        margin: 0px 0 5px 0;
    }
    .rewards-info p{
        font-size: 10px;
        line-height: 12px;
        color: #4E4E4E;
        margin: 0;
        display: inline-block;
        white-space: normal;
    }
    .rewards-noluck h4 {
        font-size: 20px;
        line-height: 26px;
    }
    .success-scratch-container .rewards-wrapper, .success-scratch-container .rewards-wrapper{
        width: 140px;
        height: 150px;
    }
    .success-scratch-container .rewards-card{
        height: 150px;
    }
    .success-scratch-container .rewards-info h5 {
        font-size: 13px;
    }
    .success-scratch-container .rewards-info h2 {
        font-size: 32px;
        line-height: 32px;
    }
    .success-scratch-container .rewards-info h2:before {
        margin-top: 3px;
        width: 24px;
        height: 24px;
        background-size: 22px 22px;
    }
    .success-scratch-container .rewards-info p {
        font-size: 8.5px;
        line-height: 12px;
    }
    .success-scratch-container .rewards-noluck h4 {
        font-size: 18px;
        line-height: 24px;
    }
    .success-scratch-container .brand-logobox{
        width: 50px; 
        height: 50px; 
        margin-top: 0;
    }
    .success-scratch-container .cashback-text {
        font-size: 12px;
        line-height: 16px;
        padding: 5px 8px 10px 8px;
    }
    .success-scratch-container .coupon-text {
        height: 26px;
        font-size: 10px;
        border-radius: 3px;
        padding-right: 20px;
        background-position: 95% 5.5px;
    }
    
     .brand-details .header-bill-info .header-bill-amount{
        font-size:25px;
        width:75%;
    }  
    
    .brand-details .header-bill-info .edit-bill-link{
        padding-top:0;
    }
    
    .bonus-coins-text{
        position: absolute;
        top: 25px;
        font-size: 30px;
        color: white;
        left: 25px;
    }    
    
}

@media(max-width: 320px){
    .bonus-coins-text{
        position: absolute;
        top: 25px;
        font-size: 28px;
        color: white;
        left: 25px;
    }
    
}

.success-scratch-container .rewards-info h2{display: flex;
    align-items: center;
    justify-content: center;}

.resend-init-otp {font-size: 16px;font-weight: 600;float:right; text-align: right;color:#2170F4;}

.swiper-slide .swipper-offer-details .min-bill-info {border-radius: 0 4px 4px 0; padding-right:10px;}

.swiper-offer-background-1, .swiper-offer-background-2, .swiper-offer-background-3 {overflow:visible; background-size: cover; }

.swiper-offer-background-1{background-image:url('https://cdn.twidpay.com/me/static/pwa_flipkart/img/offer_background_1.jpg')}
.swiper-offer-background-2{background-image:url('https://cdn.twidpay.com/me/static/pwa_flipkart/img/offer_background_2.jpg')}
.swiper-offer-background-3{background-image:url('https://cdn.twidpay.com/me/static/pwa_flipkart/img/offer_background_3.jpg')}
.swiper-offer-background-1 .swipper-offer-details .min-bill-info{
    background-color: #CDE8FD;
}
.swiper-offer-background-2 .swipper-offer-details .min-bill-info{
    background-color: #FBC5C5;
}
.swiper-offer-background-3 .swipper-offer-details  .min-bill-info{
    background-color: #FBE8A5;
}
.swiper-slide .sub-title-icon {
    height: 13px !important;
    width: 13px !important;
    min-width: 13px;
    min-height: 13px;
    max-height: 13px;
    margin-right: 3px;
}

.swiper-slide{margin-bottom:20px;}
.swiper-slide .slider-bottom-text{
    position: absolute;
    bottom: -20px;
    font-size: 9px;
    right: 5px;
    font-weight:500;
    color:#304256;
}

.swiper-slide .no_offer_banner{
    padding:0 10px; background-size:cover; height:120px;border-radius: 10px;
}



@media(min-width: 320px){
    .swiper-slide .no_offer_banner{
        min-width: 300px;
        max-width:310px;
        width:100%;
    }
    
}

@media(min-width: 360px){
    .swiper-slide .no_offer_banner{
        min-width: 340px;
        max-width:350px;
        width:100%;
    }
    .otp-timer{padding-right:35px}
    #authorize_otp #resend_init_otp{padding-right:35px}
}

@media(min-width: 375px){
    .swiper-slide .no_offer_banner{
        min-width: 330px;
        max-width:365px;
        width:100%;
    }
    .otp-timer{padding-right:40px}
    #authorize_otp #resend_init_otp{padding-right:35px}
}

@media(min-width: 400px){
    .swiper-slide .no_offer_banner{
        min-width: 330px;
        max-width:380px;
        width:100%;
    }
    .otp-timer{padding-right:50px}
    #authorize_otp #resend_init_otp{padding-right:35px}
}
    

.precheckout-header .header-txt {
    font-size:16px;
    color:#304256;
}

.home-header .header-name .arrow{
    font-size: 17px;
    color:#304256;
}

#authorize_otp #resend_init_otp{color:#2170F4}

/*.brand-details .header-bill-info{
    position:relative;
}

.brand-details .header-bill-info .edit-bill-link{
    position:fixed;
    top:5px;
}*/

.brand_voucher_selected{background:#FDF7EB;border:0;}

.success-tick-alt{
    height: 20px;
    margin-left: 10px;
/*    animation: fadeInOut 2s;
    animation-iteration-count: infinite;*/
    margin-top: -5px;
    border-radius:50%;
}

.failure-tick-alt{
    height: 20px;
    margin-left: 10px;
    animation: fadeInOut 2s;
    animation-iteration-count: infinite;
    margin-top: -5px;
}

.brand-details .brand-info .brand-name-no-location{
    padding-top:10px;
    height:30px !important;
}



.rewards-card .brand-logobox{
    margin-top: 0;
    padding:5px;
}

.scratch-card-empty{
    text-align: center;
    padding-top: 30%;
 
}

.scratch-card-empty .message-text {
    font-size: 18px;
    font-family: 'Roboto';
    font-weight: 500;
    color: #FFFFFF;
    padding: 0 40px;
 
}

.order-list-empty {
    text-align: center;
    padding-top: 50%;
 
}

.order-list-empty .message-text {
    font-size: 18px;
    font-family: 'Roboto';
    font-weight: 500;
    color: #1D2027;
    padding: 0 40px;
}

.lets-start button {
    font-size: 18px;
    color: #fff;
    font-weight: 400;
    font-family: 'Roboto';
    width: 80%;
    background: #FD581F;
    border: 0;
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.payment-errorbtn button {
    font-size: 18px;
    color: #fff;
    font-weight: 500;
    font-family: 'Roboto';
    width: 80%;
    background: #FD581F;
    border: 0;
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.payment-error {
    text-align: center;
    padding-top: 40%;
}

.payment-error .error-heading {
    font-size: 19px;
    font-family: 'Roboto';
    font-weight: 600;
    color: #484848;
    opacity: 0.66;
    text-transform: uppercase;
    padding: 0 30px;
}

.payment-error .error-message {
    font-size: 16px;
    font-family: 'Roboto';
    font-weight: 500;
    color: #585858;
    opacity: 0.66;
    padding: 0 30px;
}

.success-header-right{
    width: 25%;
    float: right;
    text-align: right;
    padding-top:15px;
    padding-right:15px;
    position:absolute;
    right:0;
    z-index:1;
}

.success-content{
    border-radius: 0;
    margin:0 10px;
    margin-top:5px;
}

.success-content .payment-success-info{
    margin-top:20px;
}

.success-content .payment-success-info .transaction-amount{
    font-size:28px;
}

.success-content h3{
    font-size:16px;
    color:#1AB26C;
    margin-top:14px;
    margin-bottom:2px;
}

.success-content .payment-success-info .transaction-id{
    font-size:13px;
}

.success-content .payment-success-info .transaction-date{
    font-size:11px;
    color:#8E8E8E;
    padding-top:4px;
    margin-bottom: 15px; 
    
}

.success-content .paymentcode-info{
    margin-bottom: 10px;
}

.paymentcode-info .payment-code-title{
    font-size:11px;
    color:#585858;
    margin-bottom:8px;
}

.paymentcode-info .payment-code{
    font-size:21px;
    margin:0;
    line-height:21px;
}

.billing-instructions-info .inst-heading{
    font-size:14px;
}

.success-surprise-text{font-size:20px;font-weight:900}

.success-scratch-container{margin-top:0px;}
.success-content .rewards-info h2:before{margin-right: 0px;}

.custom-page .home-header{border-radius: 15px 15px 0 0;}

.faq-item{display:flex;}
.faq-title{font-size:14px;font-weight: 500;}
.faq-custom-page .faq-header-name .header-title{font-size:19px;}

.order-help-section {
    display: flex;
    font-size: 16px;
    font-family: 'Roboto';
    padding: 10px 0;
    letter-spacing: 0px;
    font-weight: 500;
}

.order-help-section .payment-cancel-oder {
    width: 50%;
    color: #3478E9;
    text-align: center;
    opacity:1;
    padding-left: 15px;
}

.payment-success-need-help a {
    color: #171717 !important;
} 

.cancelConfirmModal .modal-confirm .modal-content{background:white;height:auto;padding:0;}
.cancelConfirmModal .modal-body .confirm-border-top{margin:0;}
.cancel-confirm-msg{font-size: 16px;font-weight: 600;text-align: center;color: #575757;opacity: 0.8;padding-top:20px;}
.cancel-arn-details{font-size: 16px;font-weight: 600;padding-top: 5px;}
.cancel-arn-label{color: #8E8E8E;}
.cancel-arn-no{color: #6C6C6C;}
.cancel-refund-details{display: flex;font-size: 16px;font-weight: 400;color: #8E8E8E;padding-top: 8px;}
.refund-details-label{width:50%;text-align: right;}
.refund-details-value{width:50%;text-align: left;padding-left: 60px;}
.cancel-refund-total{display: flex;font-size: 16px;font-weight: 600;color: #000000;padding-top: 8px;}
.refund-total-label{width:50%;text-align: right;}
.refund-total-value{width:50%;text-align: left;padding-left: 60px;}
.refund-cancelled-on{font-size: 13px;font-weight: 600;color: #8E8E8E;padding-top:0;letter-spacing: 0.4px;}
.refund-error-message{font-size: 16px;font-weight: 600;color: #8E8E8E;padding-top: 5px;}
.cancel-confirm-str{
    font-size: 17px;
    font-weight: 500;
    font-family: 'Roboto';
    text-align: center;
    color: #575757;
    letter-spacing: 0.15px;
    padding-top: 25px;
}


#myModal3 .modal-dialog{max-width: 400px;}

#modal_upi_error_message_heading{
    font-size: 20px;
    /*font-family: 'Roboto';*/ 
    font-weight: 600;
    color: #E86868;
}

#modal_upi_error_message_txt{font-size:13px;font-weight:600;}

#upiErrorMessageModal .modal-container{background:white;border-radius: 10px;margin: 15px;padding:10px;}
#upiErrorMessageModal .modal-content{z-index:1100;height:auto;bottom:0px;width: 100%;position: absolute;padding:0;}
#upiErrorMessageModal .modal.show .modal-dialog{padding:10px;}
#upiErrorMessageModal .modal-confirm{padding:0;width:auto;}


/* Absolute Center Spinner */
.upi_txn_status_screen {
    display:none;
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  align-items: center;
  align-content: center; 
  max-width: 400px;
}

/* Transparent Overlay */
.upi_txn_status_screen_block {
display:block;
text-align: center;
   position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  
}

.upi_txn_section1{font-size:13px;max-width: 65%;margin: 0 auto;margin-top:40%;margin-bottom:30px;}
.upi_txn_section2{font-size:13px;max-width: 75%;margin: 0 auto;}
.upi_txn_section3{font-size:14px;max-width: 75%;font-weight: 600;margin: 20px auto;}
.upi_txn_section4{font-size:13px;max-width: 55%;margin: 20px auto;}
.upi_txn_section5{font-size:13px;max-width: 75%;margin: 20px auto;}
.upi_txn_section6{font-size:15px;max-width: 75%;color:buttonface;margin: 20px auto;}

.upi_txn_section2 .counter_item_upi {
    position: relative;
}

.upi_txn_section2 .counter_item_upi h2 {
    text-align:center;
    position: absolute;
    line-height: 100px;
    width: 100%;
    font-size: 23px;
}

#payment_init_page .home-header .header-name .header-text {
    max-width: 100%;
    overflow: hidden;
}

/*.upi_txn_section2 svg {
    transform: rotate(-90deg);
}*/

/*.upi_txn_section2 .circle_animation {
  stroke-dasharray: 252;  this value is the pixel circumference of the circle 
  stroke-dashoffset: 252;
  transition: all 1s linear;
}*/

.precheckout-page .brand-details .brand-info{
    width:42%;
}

.precheckout-page .header-bill-info{
    width:55%;
    padding-right:10px;
}

.earn_banner{padding:15px;}

.min-bill-amount-str {
    font-size: 12px;
    color: #B1B1B1;
}

.min-bill-amount-str-error {
    color: red !important;
}

.payment_brand_logo {
    
    align-items: center;
    justify-content: center;
    display: flex;
    margin-bottom: 0;
    height: 60px;
    width: 60px;
    border: 1px solid #E8E8E8;
    border-radius: 50%;
    padding: 1px;
}

.payment_brand_logo img {max-height: 44px;
    max-width: 44px;
    height: auto;
    width: auto;
}

.cancel-bill-summary {
    font-family: 'Roboto';
    width: 100%;
    border: 0;
    padding: 5px;
    margin-top: 10px;
    background-color: #FFFFFF;
}

.cancel-bill-summary table {
    width: 100%;
    font-family: 'Roboto';
}

.cancel-bill-summary table th {
    text-align: left;
    padding: 5px 3px;
    font-size: 15px;
    color: #3F3F3F;
    font-weight: 500;
    width: 50%;
}

.cancel-bill-summary table td {
    text-align: right;
    padding-right:10px;
    font-size: 15px;
    color: #212121;
    font-weight: 500;
    font-family: 'Roboto';
    opacity: 1;
}

.cancel-summary-total-row {
    border-bottom: 1px solid #f4f4f4;
    padding-bottom: 5px;
}

.payment-success-need-help-center {
    width: 100%;
    color: #171717;
    text-align: center;
}

.payment-success-need-help-center a {
    color: #171717 !important;
}

.zero-pay-text {
    
    background: #526776;
    color: #ffffff;
    font-size: 12px;
    font-weight: 400;
    padding: 6px;
    text-align: center;
}

.summary-saved-row-up-arrow-img {
    float: right;
    margin-right: 18px;
    margin-top: -13px; 
}

.summary_supercoin_row {
    color: #60B244 !important;
}
  
.fk-voucher-section {
	background-color: #FDF7EB;
    margin-top: 10px;
    width: 100%;
}

.fk-voucher-section .fk-voucher-info {
    background-color: #FDF7EB;
    display: flex;
    padding: 10px;
}

.fk-voucher-img {
    float: left;
    width: 12%;
	max-width:12%;
}

.fk-voucher-wallet {
    width: 100%;
	max-width:100%;
}

.fk-voucher-balance {
    float: left;
    width: 35%;
}
.voucher-details-info {
    width: 42%;
    float: right;
    text-align: right;
}
.voucher-apply-input {
    width: 10%;
    float: right;
    text-align: center;
}


.fk-bonus-card {
    border: none;
    box-shadow: rgb(0 0 0 / 8%) 0px 4px 12px;
}	
	
.fk-bonus-card.h-70 {
    height: 70px;
    padding-top: 1rem;
}

.fk-bonus {
    background: linear-gradient(90deg, #F8FFF5 0%, #F4FFFC);
    border: 1px solid #E7F5EA;
    box-sizing: border-box;
    border-radius: 10px;
	padding-top: 0.5rem;
}

.mx-10 {
    margin: 0px 10px;
}

.round5 {
   margin-top: -10px;
   margin-left: 2px;
}

.round5 label {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    height: 20px;
    left: 0;
    position: relative;
    top: 3px;
    width: 20px;
}

.round5 input[type="radio"] {
    visibility: hidden;
    display: none;
}

.round5 label:after {
    border: 2px solid #ffffff;
    border-top: none;
    border-right: none;
    content: "";
    height: 6px;
    left: 3px;
    position: absolute;
    top: 4px;
    transform: rotate(-45deg);
    width: 12px;
}

.round5 input[type="radio"]:checked+label {
    background-color: rgb(1, 138, 215);
}

.voucher-bonus-txt {
	font-size: 14px;
    font-weight: 500;
}

.voucher-balance-txt {
	font-size: 11px;
}

.f-14 {
	font-size: 14px;
}

.f-12 {
	font-size: 12px;
}
.f-11 {
	font-size: 11px;
}
.fw-600 {
	font-weight: 600;
}

.voucher-save-txt {
	font-size: 14px;
    font-weight: 500;
	color: #018AD7;
}