@charset "utf-8";
.form-group {display:flex;align-items:center;margin-bottom:15px;}
.form-group label {width:160px;font-weight:bold;}
.form-group input, select {flex:1;}
.responsive-form button {display:block;cursor: pointer;}
.app-title{margin-top:20px;padding:1.5rem 0;color:#FFF;background-color:var(--color4);font-size:2rem; text-align:center; font-weight:400}
@media (max-width: 600px) {
.form-group {flex-direction:column;align-items:flex-start;}
.form-group label {width:100%;margin-bottom: 5px;}
.form-group input, select {width:100%;}
}
.welcome-header { display: flex; align-items: center; gap: 15px; /* space between avatar and name*/ }
.welcome-header h6, h1 { flex: 1; line-height:normal }
.avatar { width: 60px; height: 60px; background-color: #282D71; color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 400; font-size: 28px; flex-shrink: 1;}
/*For alumni-directory*/
.directory-frm {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;width: 100%;margin: 0 auto; padding-bottom: 20px;}
.frm-group {display: flex;flex-direction: column;}
.frm-group label {font-weight: 500;margin-bottom: 6px;}
.frm-group input, select {height:38px;padding:6px 10px;border: 1px solid #ccc;font-size: 16px;width: 100%;box-sizing: border-box;}
.frm-group button {display:block;cursor: pointer;}
/* Mobile tweaks */
@media (max-width: 480px) {
  .directory-frm {grid-template-columns: 1fr;gap: 15px;  }
  .frm-group input, select {font-size: 15px;padding: 9px 10px;}
}