* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
	font-family: "Inter", sans-serif;
    -webkit-tap-highlight-color: transparent;
}
.payment_upi_container_top_wrapper{
	width: 100%;
	max-width: 550px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100dvh;
	margin: 0 auto;
	background: #F3F1FB;
	/* padding:0 15px; */
}
.payment_mthd_cntner {
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
} 
.payment_mthd_cntner::-webkit-scrollbar {
    display: none;
}
.slt_pymt_mthd {
    display: flex;
    text-align: center;
    color: #ffffff;
    justify-content: center;
    align-items: center;
    font-weight: 700;
	font-size: 18px;
	margin: 0;
    padding: 15px 0;
}
.payment_title {
    position: relative;
	padding: 0 15px;
}
.arrw_backed {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor:pointer;
}
/* .title_amnt_wrap {
    background: #089C6E;
} */
.amount_payeble {
	display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    align-items: center;
    background: #4F37B1;
    border: 1px solid #8975D4;
    border-radius: 20px;
    width: 100%;
    max-width: 250px;
    margin: 5px auto 0;
    padding: 7px 0;
}
.amount_vle {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin: 0;
}
.pyb_txt {
    font-size: 14px;
    margin: 0;
    color: #EFEDF7;
    font-weight: 500;
}
.top_bannr_bg {
    background-image: url(../img/bg_top_banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    /* height: 100%; */
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    background-position: 100% 50%;
	padding: 0 0 80px 0;
	position: relative;
	z-index: 9;
}
.title_amnt_wrap_bfat:before {
    content: url("../img/cash_left.png");
    position: absolute;
    bottom: -23px;
    left: 0px;
    transform: translate(-0%, -50%);
}
.title_amnt_wrap_bfat::after {
    content: url(../img/paytm_ryt.png);
    position: absolute;
    right: 0;
    top: 67px;
    transform: translate(-0%, -50%);
}
.scan_pay_wrapper {
    background: #fff;
    box-shadow: 0px 0px 40px 0px #C8C6D140;
    border-radius: 20px;
	margin: -3.5rem 20px 0;
	padding: 0 20px 10px;
	z-index: 9;
    position: relative;
}
.scpy_txt {
    font-size: 14px;
    font-weight: 500;
    color: #000;
}
.pay_thorugh_sec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0px;
}
.scn_qrcode_sec {
    border: 1px solid #EEEDED;
    border-radius: 10px;
    padding: 8px 0;
}
.pay_sc_txt {
    font-size: 14px;
    color: #000;
    font-weight: 500;
}
.mak_pmnt {
    font-size: 11px;
    font-weight: 400;
    color: #7B7B7B;
    width: 100%;
    max-width: 210px;
    text-align: center;
}
.valid_time_txt {
    font-size: 12px;
    font-weight: 400;
    color: #7B7B7B;
}
.time_count {
    color: #E83A54;
    font-weight: 600;
    padding: 0 5px;
}
.scn_qrcode_sec {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}
.overlay_qr {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: rgba(0, 0, 0, 0.5); */
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
    border-radius: 10px;
}
.gent_btn{
	background: #7459DA;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 400;
    padding: 4px 7px;
	width: 100%;
    max-width: 85px;
	cursor:pointer;
}
.qr_scan_wrap, .overlay_qr {
    width: 109px;
    height: 109px;
}
.qr_scan_wrap{
	position: relative;
}
.paym_upi_apps h4 {
	font-size: 14px;
    font-weight: 400;
    text-align: left;
    color: #000;
  }
  .paym_upi_apps {
	padding: 5px 0 0px;
  }
  .paym_upi_apps .app_paylist {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0 0px;
  }
  .app_paylist li {
	box-shadow: 0px 0px 4.3px 0px #0000001f;
	background: #ffffff;
	border-radius: 8px;
	border: 1px solid #EFEDED;
	list-style-type: none;
	display: flex;
	flex-direction: column;
	flex: 1;
	align-items: center;
	padding: 7px 0;
	cursor: pointer;
	border: solid 1px transparent;
  }
  .app_paylist li span {
	font-size: 11px;
    font-weight: 500;
    text-align: center;
    color: #666666;
  }
  .app_paylist li a{
     text-align: center;
  }
  li.pay_upi_active{
	border: 1px solid #6345E0;
	background: #6345E01A;
  }
  .paym_upi_apps {
    background: #fff;
    box-shadow: 0px 0px 40px 0px #C8C6D140;
    border-radius: 20px;
    padding: 0 20px 10px;
    position: relative;
    margin: 10px 20px;
	padding: 15px;
}
.secure_pay_txt span {
    color: #7A5EEB;
    font-size: 10px;
    font-weight: 400;
}
.secure_pay_txt {
    display: flex;
    align-items: center;
    padding: 6px 0 0 0;
}
.pay_now_btn_wrap {
    position: fixed;
    bottom: 0px;
    padding: 15px 20px 15px 20px;
    width: 100%;
	max-width: 550px;
    left: 0;
    right: 0;
    box-sizing: border-box;
    margin: 0 auto;
    background: #F3F1FB;
    z-index: 9;
}
.pay_now_btn {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    background: #6C50DD;
    border: unset;
    border-radius: 10px;
    padding: 13px;
    width: 100%;
    cursor: pointer;
}
.pay_btn_disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.upi_img_sec
{
display: flex;
align-items: center;
gap:6px;
}

/* Success and Failure screen  */
.sucess_txt {
    color: #69C759;
    font-size: 16px;
    font-weight: 500;
    margin: 7px 0px;
}
.failed_txt{
    color: #E63053;
    font-size: 16px;
    font-weight: 500;
    margin: 7px 0px;
}
.recvd_pymnt_txt {
    font-size: 11px;
    font-weight: 400;
    color: #959595;
}
.succss_sec {
    background: #fff;
    box-shadow: 0px 0px 40px 0px #C8C6D140;
    border-radius: 20px;
    margin: -3.5rem 20px 0;
    padding: 15px 20px 15px;
    z-index: 9;
    position: relative;
    text-align: center;
}
.transaction_sec_wrapper {
    background: #fff;
    border-radius: 20px;
    margin: 10px 20px;
    padding: 15px;
    box-shadow: 0px 0px 40px 0px #C8C6D140;
}
.trans_det {
    color: #000000;
    font-size: 14px;
    font-weight: 500;
}
.descript_dets {
    font-size: 12px;
    color: #959595;
    font-weight: 400;
}
.values_txt {
    font-size: 12px;
    color: #000000;
    font-weight: 400;
}
.trans_lst_wrap li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 0px;
    border-bottom: 1px solid #EDEDED
}
.trans_lst_wrap li:last-child {
    border-bottom: none;
}
.trans_lst_wrap {
    padding: 0px 15px;
    border: 1px solid #EDEDED;
    border-radius: 6px;
}
.transctn_dets_wrap {
    padding: 10px 0;
}
.done_now_btn{
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    background: #6C50DD;
    border: unset;
    border-radius: 8px;
    padding:14px;
    width: 100%;
    cursor: pointer;
}
.done_bttn_wrap {
    margin: 0;
    padding: 15px 20px;
}


@media screen and (min-width: 320px) and (max-width: 359px) {
	.amount_payeble{
		max-width: 210px;
	}
	.pyb_txt {
		font-size: 12px;
	}
	.amount_vle {
		font-size: 25px;
	}
}

@media screen and (min-width: 280px) and (max-width: 319px) {
	.amount_payeble{
		max-width: 180px;
	}
	.pyb_txt {
		font-size: 10px;
	}
	.amount_vle {
		font-size: 22px;
	}
	.scpy_txt {
		font-size: 12px;
	}
	.paym_upi_apps h4 {
		font-size: 12px;
	}
}

@media screen and (min-width: 551px) {
    body{
        height: 100dvh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        background: radial-gradient(circle, rgb(96 107 199 / 80%) 0%, rgb(233 233 233) 100%);
     }
    .payment_mthd_cntner{
         margin:0 auto;
         width: 100%;
         height: auto;
    }
    .payment_upi_container_top_wrapper {
          max-height: 85vh;
          height: auto;
     }
    .pay_now_btn_wrap{
        position: unset;
    }
	.scanner_wrap_sec {
    	padding-bottom: 5px !important;
	}
	.amount_payeble{
		margin: 0px auto 0;
	}
	.top_bannr_bg{
		padding: 0 0 75px 0;
	}
	.paym_upi_apps {
		margin: 10px 20px 0px;
		padding: 11px 15px;
	}
	.pay_thorugh_sec {
		padding: 12px 0px;
	}
}
@media screen and (min-width: 768px) {
    
    .payment_upi_container_top_wrapper {
          max-height: 95vh;
		  height: unset;
    }
    .pay_now_btn_wrap{
        position: unset;
    }
	.scanner_wrap_sec {
    	padding-bottom: 0px !important;
	}
}

@media screen and (min-width: 1100px) {
	.payment_upi_container_top_wrapper {
		max-height: 95vh;
		height: unset;
  }
}

@supports (-webkit-touch-callout: none) {
	html {
		 overscroll-behavior: none !important;
	}
}