body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#fff;margin:0}
.page-title{margin:60px 0 20px;text-align:center;font-size:54px;color:#777;font-weight:500}

.dn-wrap{    
    width: 520px;
    max-width: 92vw;
    margin: 0 auto 60px;
    border: 2px solid #cdc6c6;
    border-radius: 12px;
    padding: 35px 25px;
    box-shadow: 0px 40px 50px -48px gray;
}
.dn-tabs {
    text-align: center;
}
.dn-tab{
  border:2px solid #7CB9C5;background:#fff;color:#6a6a6a;padding: 8px 34px;
    border-radius: 57px;
    margin-bottom: 26px;
  font-weight:800;cursor:pointer;
}
.dn-tab.active{background:#7CB9C5;color:#fff}
.dn-or{
    margin: 0 10px;font-weight:900;color:#666}

.dn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.dn-grid.hidden{display:none}

.dn-amt{
    color: #707070;
  background:#fff;border:1px solid #eee;border-radius:7px;padding:14px 10px;
  font-weight:800;cursor:pointer;text-align:center;
}
.dn-amt.selected{border:2px solid #7cb9c5}

.dn-other{
  grid-column:span 2;display:flex;align-items:center;gap:10px;
  background:#f5f5f5;border:1px solid #eee;border-radius:7px;padding:0 10px;
}
.dn-cur{font-weight:900;color:#666}
.dn-other input{
  border:none;background:transparent;width:100%;padding:14px 6px;outline:none;
  font-style:italic;font-size:16px;
}

.dn-btn{
  width:100%;padding:7px 16px;border-radius:229px;border:none;cursor:pointer;
  background:#707070;color:#fff;font-size:18px;font-weight:900;letter-spacing:.8px;
}
.dn-msg{margin-top:12px;font-weight:800;color:#b00020}
/* Donor form */
.dn-form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin: 10px 0 14px;
}

.dn-inp{
  border:1px solid #cfcfcf;
  border-radius:8px;
  padding:12px 12px;
  font-size:15px;
  outline:none;
}

.dn-inp:focus{border-color:#7cb9c5;}

#dn_phone{grid-column: span 2;}