.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;
}
}