.col-flex {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1.5rem;
}
.row-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1.5rem;
}
#donation-block{
    padding: 3vw 5vw;
}
.donation-container{
    max-width: 700px;
    margin:auto
}
.progress-container { display: flex; justify-content: center; margin-bottom: 1.5rem; gap:7rem; position:relative;}
        .progress-step { width: 4rem; height: 4rem; border-radius: 50%; background: #F1F1F1; display: flex; align-items: center; justify-content: center; 
            font-weight: 500;
            font-size: 1.375rem;
            line-height: 1.25;
            letter-spacing: -2%;
            text-align: center;
            position: relative;
            color:#000000;
             }
        .progress-step.active { background: #2B3B94; color: white; }
        .progress-step:not(:last-child)::after{
            content: "";
            width: 7rem;
            height: 2px;
            background: #F1F1F1;
            left: 100%;
            position: absolute;
            
        }

        .progress-step.active:has(+ .progress-step.active)::after{
            background: #2B3A95;
        }

        

.donation-container *{
    box-sizing: border-box;
}
.donation-block h2{
    font-weight: 600;
    font-size: 2.25rem;
    line-height: 1;
    margin:1.5rem 0;
    width: 100%;
    text-align: center;
}
.step{
    display: none !important;
}
.step.active{
    display: flex  !important;
}
.donation-container input[type="radio"] {
    appearance: none;
    width: 1rem;
    height: 1rem;
    border: 1px solid #BDBDBD;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    cursor: pointer;
    outline: none;
    margin: 0;
    z-index: -1;
}
.donation-container input[type="radio"]:checked{
    border: 1px solid #000000;
}
button{
    cursor: pointer;
}
.donation-container input[type="radio"]:checked::before {
    content: "";
    width: .5rem;
    height: .5rem;
    background: #FCC726;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.donation-block label{
    font-weight: 400;
    font-size: 1.125rem;
    line-height:1.25;
    color:#2B3A95;
}


.donation-block hr {
    border: none;
    height: 2px;
    background-color: #E7E4E4;
    margin: 20px 0;
}
.donation-block .hints,.donation-block span.hints{
font-weight: 400;
font-size: .9rem;
line-height:1.25;
color:#000000;
}
#otherdetails{
    display: none;
}
#otherdetails.show{
    display: flex  !important;
}
.donation-block .row-flex .input-group{
    flex: 0 0 100%;
}
.donation-block .row-flex:has( .input-group + .input-group) .input-group{
    flex: 0 1 50%;
    isolation: isolate;
}
.donation-block label:has(input[type=radio]){
    border: 1px solid #BDBDBD;
    color:#BDBDBD;
    padding: .8125rem 1rem;
    border-radius: 5px;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: -2%;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: start;
    gap: 1rem;
    align-items: center;
    

}

.donation-block input[type="checkbox"] {
    flex: 0 0 1rem;
    appearance: none;
    width: 1rem;
    height: 1rem;
    border: 1px solid #BDBDBD;
    display: inline-block;
    position: relative;
    cursor: pointer;
    outline: none;
}
.donation-block input[type="checkbox"]:checked::before {
    content: "";
    width: .5rem;
    height: .5rem;
    background: #FCC726;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.donation-block label:has(input[type=radio]:checked),.donation-block  input[type="text"]:not(:placeholder-shown),.donation-block  input[type="tel"]:not(:placeholder-shown),.donation-block  input[type="email"]:not(:placeholder-shown) {
          
    border: 1px solid #000000;
    color:#000000
}
.donation-block .error{
    font-size: .75rem;
    color: #F00;
}
.donation-block  input[type="text"],.donation-block  input[type="tel"],.donation-block  input[type="email"]{
    border:1px solid #D3D3D3;
    border-radius: 5px;
    padding: .8125rem 1rem;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: -2%;
    width: 100%;
    outline: none !important;
}


.donation-block  input::placeholder{
    color:#D3D3D3;
}
.gap-0-5rem{
    gap:0.5rem !important;
}
.txt-center{
    text-align: center;
}
.jc-center{
    justify-content: center;
}

label:has(+ input:required)::after {
    content: "*";
    color: #F00;
}

.totalarea p{
    font-weight: 600;
}
.back-btn{
    padding: .6875rem 1.5rem;
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    text-align: center;
    background: #2B3A95;
    color:#FFF;
    border: none;
    border-radius: 5px;
    min-width: 11.25rem;
}
.continue-btn,.submit-btn{
    padding: .6875rem 1.5rem;
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    text-align: center;
    background: #fcc726;
    border: none;
    border-radius: 5px;
    min-width: 17.25rem;
}
a.change-total{
    font-size: .875rem;
    margin-left: 2rem;
    color: #2B3B94;
    font-weight: 600;
}
.radio-btn label{
    cursor: pointer;
    display: inline-block;
}
.totalarea .total-displayamount{
    font-weight: 600;
}
.totalarea {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}
.dispaly-area.hide,#donaterdetails.hide{
    display: none;
}

.edit-area{
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    gap:1rem;
    align-items: end;
}
.edit-area.show{
    display: flex;
}
.edit-area .input-group{
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: .5rem;
}
.edit-area .input-group input{
    max-width: 125px;
    padding: .5rem 1rem;
}

.edit-area  button{
    padding: .5rem 1rem;
    background: #fcc726;
    width: 125px;
    border: none;
    line-height: 1;
    border-radius: .25rem;
    font-size: 20px;
    font-weight: 500;
}
@media screen and (max-width: 781px) {
   .donation-container .row-flex,.donation-container .col-flex{
        flex-direction: column;
        gap:1rem;
   }

   .donation-container .m-row-flex{
        flex-direction: row  !important;
    }
    .m-grid-2{
        display: grid !important;
        grid-template-columns: repeat(2,1fr);
        gap:1rem;
    }
    .progress-container{
        gap: 5rem;
    }
    .progress-step:not(:last-child)::after {
        width: 5rem;
    }
    .progress-step {
        width: 3rem;
        height: 3rem;
    }
    
}