@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

	.pay_kj.pay_upi_section {
		/* padding: 0px 16px; */
		margin: auto;
		max-width: 550px;
		background-image: url('/payment15/payment_assets/images/backgroundim.png');
		background-size: cover;
		height: 100dvh;
		display: flex;
		flex-direction: column;
        gap: 10px;
		overflow: hidden;
	}

	.pay_main::-webkit-scrollbar {
		display: none;
	}
	.pay_kj_top{
		/* height: 100vh; */
		padding: 0px 16px;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.pay_kj_top::-webkit-scrollbar{
		display: none;
	}
	/* header */
	.pay_kj_header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 10px;
	}
	.pay_kj_header p{
		font-family: "Inter", sans-serif;
		font-size: 18px;
		font-weight: 600;
		color: rgba(255, 255, 255, 1);
	}
	.pay_kj_headerarrow img{
		cursor:pointer;
	}
	.pay_upitypes a{
		cursor: unset;
	}
	.pay_kj_upityp{
		cursor:pointer;
	}
	/* banner */
	.pay_kj_banner{
		padding: 10px 0px;
		text-align: center;
	}
	.pay_kj_banner h2{
		font-family: "Inter", sans-serif;
		font-size: 12px;
		font-weight: 500;
		text-align: center;
		color: rgba(239, 237, 247, 1);
		padding: 10px 0px;
	}
	.pay_kj_banner p{
		font-family: "Inter", sans-serif;
		font-size: 30px;
		font-weight: 700;
		color: rgba(255, 255, 255, 1);
	}
	.pay_kj_banner span{
		font-family: "Inter", sans-serif;
		font-size: 30px;
		font-weight: 700;
		color: rgba(255, 255, 255, 1);
		padding-right: 10px;
	}
	/* pay QR code */
	.pay_kj_qrcode{
		border-radius: 20px;
		background: rgba(19, 19, 19, 0.4);
		border: 1px solid rgba(77, 54, 61, 1);
		box-shadow: 0px 0px 40px 0px rgba(255, 92, 141, 0.06);
	}
	.pay_kj_qr{
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.pay_kj_qrhead{
		padding: 12px;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid rgba(77, 54, 61, 1);		
	}
	.pay_kj_qrhead h2{
		font-family: "Inter", sans-serif;
		font-size: 14px;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}
	
	.pay_kj_qrscan{
		padding: 12px;
		display: flex;
        justify-content: start;
        align-items: center;
		gap: 10px;
	}
	.pay_kj_qrscanleft{
		padding: 5px;
		border-radius: 8px;
		border: 1px solid rgba(77, 54, 61, 1);
		text-align: center;
	}
	.pay_kj_qrscanleft img {
		width: 90px;
	}
	.pay_kj_qrscandetails h2{
		font-family: "Inter", sans-serif;
		font-size: 11px;
		font-weight: 400;
		color: rgba(173, 173, 173, 1);
	}
	.pay_kj_qrscandetails p{
		font-family: "Inter", sans-serif;
		font-size: 11px;
		font-weight: 400;
		color: rgba(157, 157, 157, 1);
	}
	.pay_kj_qrscandetails span{
		color: rgba(199, 120, 46, 1);
		font-family: "Inter", sans-serif;
		font-size: 11px;
		font-weight: 600;		
	}
	.pay_upitypes{
		display: flex;
		justify-content: start;
		align-items: center;
		gap: 10px;
		padding: 12px 0px;
	}
	.pay_kj_upiapps{
		padding: 12px;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid rgba(77, 54, 61, 1);	
	}
    .pay_kj_upiappsin p{
		font-family: "Inter", sans-serif;
		font-size: 10px;
		font-weight: 400;
		color: rgba(255, 102, 148, 1);
		margin: 5px 0px 0px;
	}
	.pay_kj_upiappsin span{
		font-family: "Inter", sans-serif;
		font-size: 10px;
		font-weight: 400;
		color: rgba(255, 102, 148, 1);
		padding-right: 5px;
	}
	.pay_kj_upiappsin h2{
		font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        margin: auto 0px;
	}
	.pay_kj_upi_types{
		padding: 12px;
		display: flex;
        justify-content: space-evenly;
        align-items: center;
		gap: 6px;
		
	}
	.pay_kj_upityp{
        display: flex;
        justify-content: center;
		align-items: center;
        flex-direction: column;
		gap: 8px;
		flex: 1;
		padding: 10px 0px;
		border-radius: 8px;
		background: rgba(19, 19, 19, 0.4);
		border: 1px solid rgba(77, 54, 61, 1);
		
	}
	.pay_kj_upityp p{
		font-family: "Inter", sans-serif;
		font-size: 10px;
		font-weight: 500;
		text-align: center;
		color: rgba(128, 128, 128, 1);
	}
	.pay_upi_active{
		background: linear-gradient(180deg, #72273E 0%, #29151B 100%);
		border: 1px solid rgba(224, 69, 116, 1);
	}

	.pay_kj_button{
		
		display: flex;
		justify-content: center;
		
	}
	.pay_kj_button h2 {
		width: 100%;
		padding: 15px;
		background: linear-gradient(90deg, #BF456A 0%, #8A324C 100%);
		color: #fff;
		border: none;
		border-radius: 8px;
		font-size: 16px;
		cursor: pointer;
		font-family: "Inter", sans-serif;
		font-size: 16px;
		font-weight: 500;
		text-align: center;
		color: rgba(255, 255, 255, 1);
	}
	.pay_btn_disabled{ 
		opacity:0.5; 
		cursor: not-allowed;
		pointer-events: none;
	}
	 /* .pay_paybut{
		position: sticky;
		bottom: 0;
	 } */
	 .pay_paybut {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 10px 15px;
		margin: 0px auto;
		width: 100%;
		max-width: 550px;
		/* background: linear-gradient(187.36deg, #001801 3.48%, #0C0D0E 23.52%); */
		background: rgba(20, 20, 20, 1);
		z-index: 9;
	}
	.makee_pym{
		font-size: 14px;
		font-family: "Inter", sans-serif;
		font-weight: 500;
		color: #fff;
		background: linear-gradient(90deg, #BF456A 0%, #8A324C 100%);
		border: unset;
		border-radius: 10px;
		padding: 15px;
		width: 100%;
	}
	/* pay succcess */

	.pay_kj_success{
		display: flex;

		flex-direction: column;
		gap: 16px;
	}
	.pay_kj_successfull{
		padding: 14px 0px;
		border-radius: 12px;
		background: rgba(19, 19, 19, 0.4);
		border: 1px solid rgba(77, 54, 61, 1);
		box-shadow: 0px 0px 40px 0px rgba(255, 92, 141, 0.06);
		text-align: center;
	}
	.pay_kj_successfull h2{
		font-family: "Inter", sans-serif;
		font-size: 16px;
		font-weight: 500;
		text-align: center;
		color: rgba(70, 215, 115, 1);
		margin: 8px 0px;
	}
	.pay_kj_successfull p{
		font-family: "Inter", sans-serif;
		font-size: 11px;
		font-weight: 400;
		text-align: center;
		color: rgba(149, 149, 149, 1);
		padding: 0px 16px;
	}
	.pay_kj_transactionback{
		border-radius: 20px;
		background: rgba(19, 19, 19, 0.4);
		border: 1px solid rgba(77, 54, 61, 1);
		box-shadow: 0px 0px 40px 0px rgba(255, 92, 141, 0.06);
	}
	.pay_kj_transactionhead{
		padding: 14px;
		border-bottom: 1px solid rgba(77, 54, 61, 1);	
	}
	.pay_kj_transactionhead h2{
		font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        margin: auto 0px;
		
	}
	.pay_kj_transactiondetails {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 14px;
	}
	.pay_kj_transactionlist {
		flex: 0 0 48%;
		margin-bottom: 20px;
		box-sizing: border-box;
	}
	.pay_kj_transactionlist h2{
		font-family: "Inter", sans-serif;
		font-size: 12px;
		font-weight: 400;
		text-align: left;
		color: rgba(149, 149, 149, 1);		
	}
	.pay_kj_transactionlist p{
		font-family: "Inter", sans-serif;
		font-size: 12px;
		font-weight: 500;
		text-align: left;
		color: rgba(255, 255, 255, 1);
		padding-top: 6px;
	}

	.pay_successbut {
		padding: 10px 0px;
		margin: 0px auto;
		width: 100%;
		max-width: 550px;
	}
	.pay_successdone{
		font-size: 16px;
		font-family: "Inter", sans-serif;
		font-weight: 500;
		color: #fff;
		background: linear-gradient(90deg, #BF456A 0%, #8A324C 100%);
		border: unset;
		border-radius: 10px;
		padding: 15px;
		width: 100%;
		cursor: pointer;
	}
	/* payment failed */
	.pay_failed {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
		.pay_failedmain{
			padding: 14px 0px;
			border-radius: 12px;
			background: rgba(19, 19, 19, 0.4);
			border: 1px solid rgba(77, 54, 61, 1);
			box-shadow: 0px 0px 40px 0px rgba(255, 92, 141, 0.06);
			text-align: center;
		}
		.pay_failedmain h2{
			font-family: "Inter", sans-serif;
			font-size: 16px;
			font-weight: 500;
			text-align: center;
			color: rgba(225, 78, 64, 1);
			margin: 8px 0px;
		}
		.pay_failedmain p{
			font-family: "Inter", sans-serif;
			font-size: 11px;
			font-weight: 400;
			text-align: center;
			color: rgba(149, 149, 149, 1);
			padding: 0px 16px;
		}
		.pay_failedbut {
			padding: 10px 0px	;
			margin: 0px auto;
			width: 100%;
			max-width: 550px;
		}
		.pay_failedretry{
			font-size: 16px;
			font-weight: 500;
			font-family: "Inter", sans-serif;
			color: #fff;
			background: linear-gradient(90deg, #BF456A 0%, #8A324C 100%);
			border: unset;
			border-radius: 10px;
			padding: 15px;
			width: 100%;
			cursor: pointer;
		}
	 @media screen and (min-width: 551px) {
		.pay_kj_upi_types {
			gap: 8px;
		}
		/* .pay_full{
			background-color: grey;
			height: 100dvh;
			display: flex;
			justify-content: center;
			align-items: center;
		 } */
		 .pay_kj.pay_upi_section {
			height: auto;
			max-height: 84vh;
			width: 100%;
		}
		/* .pay_kj_top{
			height: unset;
		} */
		body {
			background-color: grey;
			height: 100dvh;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
	   }
		.pay_paybut {
			position: unset;
			width:100% ;
			padding: 10px 16px;
		}
		.pay_kj_top{
		padding-bottom: 10px !important;
		}
		.pay_kj_transactionlist {
			margin-bottom: 10px;
		}
		.pay_kj_transactiondetails {
			padding: 10px 12px;
		}
		.pay_kj_transactionhead {
			padding: 12px;
		}
		.pay_kj_banner img{
			width: 90px;
		}
	}
	@media screen and (max-width: 550px){
		.pay_kj_successfull {
			padding: 10px 0px;
		}
		.pay_kj_transactionhead {
			padding: 10px;
		}
		.pay_kj_transactiondetails {
			padding: 10px;
		}
		.pay_kj_success {
			gap: 10px;
		}
		.pay_kj_successfull h2 {
			margin: 4px 0px;
		}
		.pay_kj_banner {
			padding: 5px 0px 10px;
		}
		.pay_failed{
			gap: 10px;
		}
		.pay_failedmain {
			padding: 10px 0px;
		}
		.pay_failedmain h2{
			margin: 4px 0px;
		}
		.pay_kj_transactionlist {
			margin-bottom: 10px;
		}
		.pay_kj_banner img{
			width: 100px;
		}
	
	}
	 @media screen and (max-width: 319px){
		.pay_kj_qrhead {
			gap: 5px;
		}
		.pay_kj_qrscan {
			flex-direction: column;
		}
		.pay_kj_upityp p {
			font-size: 9px;
		}
		.pay_upitypes {
			justify-content: center;
		}
		.pay_kj_qrscandetails {
			text-align: center;
		}
	 }

	 @media screen and (min-width: 1200px) {
		.pay_kj_qrscanleft img {
			width: 100px;
		}
		.pay_kj.pay_upi_section {
			height: auto;
			max-height: 98vh;
		}
		.pay_kj_banner img{
			width: 80px;
		}
	 }

	 @supports (-webkit-touch-callout: none) {
		@media screen and (max-width: 550px) {
		body{
			background: rgba(20, 20, 20, 1);
		}
	}
	}