.ug-gpa-wrap { max-width: 100%; overflow-x: auto; margin: 1em 0; font-family: Arial, sans-serif; } .ug-gpa-table { width: 100%; border-collapse: collapse; margin-bottom: 1em; } .ug-gpa-table th, .ug-gpa-table td { border: 1px solid #ddd; padding: 0.5em; text-align: left; } .ug-gpa-table th { background: #f4f4f4; } .ug-gpa-table input[type="text"], .ug-gpa-table input[type="number"], .ug-gpa-table select { width: 100%; box-sizing: border-box; } .ug-gpa-result p { margin: 0.5em 0; } .gpa-award.distinction { color: #2c3e50; font-weight: bold; } .gpa-award.credit { color: #16a085; font-weight: bold; } .ug-gpa-goal-wrap { margin: 1em 0; } @media (max-width: 600px) { .ug-gpa-table th, .ug-gpa-table td { font-size: 0.9em; padding: 0.3em; } }