#tc2_app { max-width: 1120px; } #tc2_app h3 { font-family: var(--secondary-font); color: var(--primary-color); font-weight: 700; } #tc2_app .form-label { color: var(--primary-color); font-family: var(--secondary-font); } /* ---- Native selects (residency, campus, housing): gray rounded fields ---- */ #tc2_app .form-select { background-color: var(--lightest-gray-color) !important; border: 0 !important; border-radius: 10px; padding: .7rem 2.25rem .7rem 1rem; color: var(--primary-color); font-weight: 600; box-shadow: none; } #tc2_app .form-select:focus { box-shadow: 0 0 0 0.2rem rgba(40, 121, 191, .25); } /* ---- Select2 (course picker): match the gray rounded native selects ---- Scoped to #tc2_app + the always-present .select2-container--default so it wins over Select2's own stylesheet without depending on a custom class. */ #tc2_app .select2-container { width: 100% !important; } #tc2_app .select2-container--default .select2-selection--single { height: auto !important; min-height: 50px; background-color: var(--lightest-gray-color) !important; border: 0 !important; border-radius: 10px !important; padding: .65rem 2.25rem .65rem 1rem; display: flex; align-items: center; outline: none; } #tc2_app .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--primary-color); font-weight: 600; font-size: 1.05rem; padding: 0; line-height: 1.4; } #tc2_app .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--light-gray-color); font-weight: 400; } #tc2_app .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; right: 14px; } /* match the red caret of the native selects */ #tc2_app .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--secondary-color) transparent transparent transparent; margin-top: -2px; } #tc2_app .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--secondary-color) transparent; } #tc2_app .select2-container--default.select2-container--focus .select2-selection--single, #tc2_app .select2-container--default.select2-container--open .select2-selection--single { box-shadow: 0 0 0 0.2rem rgba(40, 121, 191, .25); } /* dropdown panel (appended to ) */ .select2-dropdown { border: 1px solid var(--lightest-gray-color); border-radius: 10px; box-shadow: 0 8px 24px rgba(14, 33, 82, .12); } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--primary-color); } .select2-search--dropdown .select2-search__field { border: 1px solid var(--lightest-gray-color); border-radius: 8px; padding: .5rem; } /* ---- Courses table ---- */ #tc2_app .tc2-table { border-collapse: separate; border-spacing: 0; } #tc2_app .tc2-table > thead th { border: 0; border-bottom: 2px solid var(--lightest-gray-color); color: var(--primary-color); font-family: var(--secondary-font); font-weight: 700; padding-bottom: .75rem; } #tc2_app .tc2-table > tbody td { border-top: 1px solid #ececec; vertical-align: middle; padding-top: 1rem; padding-bottom: 1rem; } #tc2_app .tc2-table > tbody tr:first-child td { border-top: 0; } #tc2_app .tc2-calc { color: var(--light-gray-color); white-space: nowrap; } #tc2_app .tc2-total { font-weight: 700; color: var(--primary-color); white-space: nowrap; } #tc2_app .tc2-table > tfoot td { border-top: 2px solid var(--primary-color); padding-top: 1rem; font-size: 1.05rem; } #tc2_app #tc2_tuition_total { color: var(--primary-color); } /* collapse the remove (x) column so the totals sit at the far right */ #tc2_app .tc2-table th.tc2-remove-head, #tc2_app .tc2-table > tbody td.tc2-remove-cell { width: 1px; white-space: nowrap; padding-left: .35rem; padding-right: 0; text-align: center; } /* ---- Buttons ---- */ #tc2_app #tc2_add_course { background-color: var(--primary-color); border: 0; color: #fff; border-radius: 10px; font-weight: 600; padding: .6rem 1.4rem; } #tc2_app #tc2_add_course:hover { background-color: var(--primary-color-hover); } #tc2_app .tc2-remove { border: 0; background: transparent; color: var(--secondary-color); font-size: 1.4rem; line-height: 1; padding: 0 .4rem; opacity: .75; transition: opacity .15s ease; } #tc2_app .tc2-remove:hover { opacity: 1; } /* ---- Calculation details ---- */ #tc2_app .tc2-details-toggle { color: var(--primary-color); font-weight: 600; text-decoration: none; } #tc2_app #tc2_details_body { background-color: var(--lightest-gray-color) !important; border: 0; border-radius: 10px; padding: .25rem 1.25rem; } #tc2_app .tc2-detail-row { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; padding: 1rem 0; border-bottom: 1px solid #dcdcdc; } #tc2_app .tc2-detail-row:last-child { border-bottom: 0; } #tc2_app .tc2-detail-course { font-weight: 700; color: var(--primary-color); font-family: var(--secondary-font); } #tc2_app .tc2-detail-meta { color: var(--light-gray-color); font-size: .9rem; margin-top: .15rem; } #tc2_app .tc2-detail-calc { white-space: nowrap; color: var(--primary-color); font-size: 1.05rem; text-align: right; } #tc2_app .tc2-detail-calc strong { font-size: 1.2rem; } /* ---- Housing / fee summary ---- */ #tc2_app .tc2-summary-label { color: var(--primary-color); font-weight: 700; } #tc2_app .tc2-line-item { padding: .9rem 0; border-bottom: 1px solid #ececec; font-size: 1.05rem; } #tc2_app .tc2-line-item span:last-child { font-weight: 700; color: var(--primary-color); } /* housing & meal plan subtotal (room + board + laundry + fee) */ #tc2_app .tc2-line-item.tc2-subtotal { border-top: 2px solid var(--primary-color); border-bottom: 0; margin-top: .35rem; padding-top: 1rem; font-size: 1.1rem; } /* drop the gray divider on the row right above the subtotal so only the blue line shows */ #tc2_app .tc2-line-item:has(+ .tc2-subtotal) { border-bottom: 0; } /* ---- Grand total ---- */ #tc2_app .tc2-grand-wrap { border-top: 2px solid var(--primary-color); padding-top: 1.25rem; } #tc2_app #tc2_grand_total { font-family: var(--secondary-font); font-weight: 700; color: var(--primary-color); } /* ---- Disclaimer ---- */ #tc2_app .disclaimer { color: var(--light-gray-color); } /* ---- Mobile: re-flow the course table into stacked cards ---- Desktop is untouched; below 768px the same markup becomes one card per course. */ @media (max-width: 767px) { /* hide the column headers */ #tc2_app .tc2-table thead { display: none; } /* make table elements block-level so rows stack */ #tc2_app .tc2-table, #tc2_app .tc2-table tbody, #tc2_app .tc2-table tfoot, #tc2_app .tc2-table tr, #tc2_app .tc2-table td { display: block; width: 100%; } /* each course = a card */ #tc2_app .tc2-table tbody tr { background: #fff; border: 1px solid #e4e4e4; border-radius: 12px; box-shadow: 0 2px 10px rgba(14, 33, 82, .06); padding: .5rem 1rem 1rem; margin-bottom: 1.25rem; } /* label + value rows inside a card */ #tc2_app .tc2-table tbody td { border: 0 !important; border-top: 1px solid #f0f0f0 !important; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 0; text-align: right; } #tc2_app .tc2-table tbody td[data-label]::before { content: attr(data-label); font-weight: 700; color: var(--primary-color); text-align: left; white-space: nowrap; } /* course picker sits on top, full width, no label */ #tc2_app .tc2-table tbody td.tc2-course-cell { display: block; border-top: 0 !important; padding: .25rem 0 .85rem; } /* campus dropdown shrinks so the label fits beside it */ #tc2_app .tc2-table tbody td.tc2-campus-cell .form-select { width: auto !important; min-width: 150px; max-width: 65%; } /* remove button row: "Remove" label left, × right (default space-between) */ #tc2_app .tc2-table tbody td.tc2-remove-cell { width: 100%; white-space: normal; padding: .6rem 0; text-align: left; } #tc2_app .tc2-table tbody td.tc2-remove-cell .tc2-remove { font-size: 1.6rem; } /* tuition total footer as a single line */ #tc2_app .tc2-table tfoot tr { display: flex; justify-content: space-between; align-items: center; border-top: 2px solid var(--primary-color); padding-top: .85rem; margin-top: .25rem; } #tc2_app .tc2-table tfoot td { display: inline-block; width: auto; border: 0 !important; padding: 0; } #tc2_app .tc2-table tfoot td:empty { display: none; } /* let the add-course button go full width for an easy tap target */ #tc2_app #tc2_add_course { width: 100%; } }