*{
    margin:0px;
    padding:0px;
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}
html, body{
    width:100%;
    height:100%;
}

p {
    -webkit-text-decoration-skip: none;
    text-decoration: none;
    color: inherit; 
}

p a {
    text-decoration: none;
    color: inherit;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body{
    background-color: #F5F5F5;
}
.backarrow-outer{
    display:flex;
}

.payment21_section{
    font-family: "Inter", sans-serif;
    margin: auto;
    width: 100%;
    max-width: 550px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* background:linear-gradient(18deg, #F5F5F5 46%, #5CCC88 54.58%, #58B84D 100%);  */
    background-image: url("../images/greenbg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.payment21_section_outer::-webkit-scrollbar{
    display:none;
}
.payment21_section_outer{
    height: 100dvh;
    overflow: scroll;
}
header {
    border: 1px solid #FFFFFF;
    padding: 10px;
    border-radius:8px;
}

.upi_text{
    font-family: "Inter", sans-serif;
    font-size:16px;
    font-weight:600;
    color:#FFFFFF;
}

.inner_header {
    display: flex;
    justify-content: space-between;
}
.upi_payment {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}
.hand-symbol {
    max-width: 100px;
}
.amount,.topay,.payer_name{
    font-family: "Inter", sans-serif;
    color:#FFFFFF;
}
.amount {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 6px;
}
.topay,.payer_name{
    font-size:14px;
    font-weight:500;
}
.dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background-color:#FFFFFF;
    margin-top: 2px;
}
.amount_outer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 0px 15px 0px;
}
.payer_details {
    display: flex;
    align-items: center;
    gap: 10px;
}
.scan_pay_box{
    background-color:#FFFFFF;
    padding:14px;
    border-radius:8px;
    margin-bottom:20px;
    
}
.spb_txt {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin-bottom:10px;
}
.hand-symbol{
    width:80px;
}
.qr_image{
    width:100px;
}
.qr_section {
    display: flex;
    align-items: center;
    gap: 18px;
}

.qr_content p:nth-child(1) {
    font-size:12px;
    font-weight:400;
    margin-bottom:8px;
    line-height: 160%;
}
.qr_content p:nth-child(2) {
    font-size:12px;
    font-weight:300;
    color:#B1B1B8;
}

.timer{
        color: #F74B40;
        font-size:12px;
        font-weight:400;
}
.paywith_apps{
    background-color:#FFFFFF;
    border-radius:8px;
    padding:14px;
}
.pa_txt{
    color:#1C1D20;
    font-size:16px;
    font-weight:600;
    text-align:center;
    margin-bottom:20px;
}
.pm_box {
    border: 1px solid #E7E8EA;
    padding:12px 8px;
    border-radius:8px;
    text-align: center;
    width:45%;
    cursor:pointer;
}

.payment_mode {
    display: flex;
    gap: 6px;
    justify-content: center;
}
.pm_box p{
    color:#1A1A1A;
    font-size:13px;
    font-weight:500;
}

.paynow_button, .payment_done_btn, .payment_tryagain_btn{
    width: 100%;
    padding: 12px;
    color: #ffffff;
    border: none;
    border-radius:8px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 600;
    background:#00B74C;
    font-family: "Inter", sans-serif;
    cursor: pointer;
    
}
.pay_btn_disabled{
    opacity:0.5;
    cursor:not-allowed;
    pointer-events: none;
}

.paynow_button_outer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    padding: 10px 15px 10px;
}
.scrollable_section {
    height: 100%;
    overflow: scroll;
    padding: 16px; 
}

.scrolltop{
    overflow-y: scroll;
    height:100%;
}
.scrollable_section::-webkit-scrollbar{
    display:none;
}

.pm_box.active{
    border-color:#00B74C;
    background-color:#E7FEF1;
}
.paynow_button.active {
    opacity: 1;
}
.paynow_button_outer{
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: center;
    padding: 10px 15px 10px;
    background-color:white;
    box-shadow:0 -2px 10px rgba(0, 0, 0, 0.1);
}
.scrolltop::-webkit-scrollbar{
    display:none;
}
.payment_su_fa_value::before { 
    content: attr(data-value); 
  }
@media screen and (min-width:550px){

    .paywith_apps{
        margin-bottom:0px;
    }
    .payment_mode{
        justify-content:space-evenly;
    }   
    .pm_box{
        width:90px;
    }
    .qr_content p:nth-child(1),.qr_content p:nth-child(2){
        font-size:15px;
    }


    

/* =====Success Screen====== */

.payment21_section_outer_success {
    max-width: 550px;
    margin: 0 auto;
}

/* == Failure Screen */
.pss_info{
    margin-bottom:0px;
}


    
}



/* =====Success Screen====== */

.scrollable_section_success::-webkit-scrollbar{
    display:none;
}
.scrollable_section_success{
    position: relative;
    height: 90vh;
    overflow-y: scroll;
    padding:16px;
}
.payment21_section_success{
    background:linear-gradient(18deg, #F5F5F5 46%, #5CCC88 54.58%, #58B84D 100%); 
    font-family: "Inter", sans-serif;
    height:100dvh;
}
.ps_image{
    width:120px;
}
.payment_success_holder{
    display:flex;
    justify-content:center;
    padding:28px 0px 23px 0px;
}
.payment_status_box{
    background-color:#FFFFFF;
    border-radius:8px;
    text-align: center;
    padding:28px 16px 12px 16px;
    border: 1px solid #DADADA;
}
.pss_amount {
    color: #01B84D;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 6px;
}
.pss_status{
    color: #01B84D;
    font-size:16px;
    font-weight:500;
    margin-bottom:8px;
}
.pss_info {
    color: #525252;
    font-size: 12px;
    font-weight: 400;
    margin: 12px 0px 30px 0px;
}
.hrline {
    border: 1px solid #F0F0F0;
    width: 100%;
    margin: 0 auto;
}
.transaction_details{
    border:1px dashed #E5E7EA;
    padding: 16px 16px 0px 16px;
    border-radius: 6px;
}
.transaction_details h5:nth-child(1){
    color:#201C3E;
    font-size:14px;
    font-weight:600;
}
.tc_details_sec {
    display: flex;
    justify-content: space-between;
    border-bottom:1px solid #F1F1F1;
    padding:17px 0px;
}
.tc_details_sec:last-child{
    border-bottom:none;
}
.done_button{
    background: #00B74C;
    border:1px none;
    padding:10px 0px;
    border-radius:8px;
    color:#FFFFFF;
    text-align:center;
    font-size:16px;
    font-weight:600;
    width:100%;
}


/* Failure Screen */

.payment_status_box.paymentfailure .pss_amount,.payment_status_box.paymentfailure .pss_status{
    color: #FF521E;
}

.pf_image{
    width:110px;
}



@media (max-width: 549px) {
    .paynow_button_outer {
        position: fixed;
        width: 100%;
    }
}
@media (min-width: 550px) and (max-width: 809px) {
    .payment21_section {
        max-height: 95dvh;
        height: unset;
    }
    .scrollable_section{
        /* overflow: hidden; */
        overflow-y: scroll;
        height: 90vh;
        
    }
}
@media (min-width: 810px) {
    .payment21_section {
        max-height: 95dvh;
        height: unset;
    }
}

@media (min-width: 551px) {
    .payment21_section_outer{
        overflow-y: hidden;
        height: 100dvh;
        display: flex;
        justify-content: center;
        align-items: center;
        width:100%;
    }
    .paywith_apps{
        padding-bottom: 20px !important;
    }
    .payment20_sec_sub {
        row-gap: 10px;
    }
    .payment_trans_details_ul {
        margin-top: 45px;
    }
    .pu_outer{
        padding-bottom:0px !important;
    }
    body{
        background-color:grey;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: grey;
        overflow: hidden;
    }
    .payment20_main_section {
        height: 100dvh;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        width: 100%;
        max-height: 92dvh;
    }
}

@media (min-width: 1100px) {
    .payment21_section {
        height: unset;
        max-height: 97vh;
    }
}

.payment_done_btn, .payment_tryagain_btn {
    margin-top: 15px;
}