#email-messages .email-item__from { margin-bottom: 0.125rem !important; } #email-messages .email-item__subject { margin-top: 0 !important; } #email-messages .email-item__subject h3.font-size-lg { margin-top: 0 !important; } /* Undo earlier aggressive tightening that affected subject-to-content gap */ #email-messages .usa-card h3.font-size-lg { margin-bottom: 0.25rem !important; line-height: 1.2 !important; } #email-messages .usa-card .display-flex:not(.flex-justify-between) { margin-top: 0 !important; } /* Reduce action button height in From row to avoid tall row causing visual gap */ #email-messages .email-item__from .text-right { display: flex; align-items: center; } #email-messages .email-item__from .usa-button { min-height: 0 !important; padding: 0 !important; height: auto !important; line-height: 1 !important; } #email-messages .email-item__from .usa-button i { font-size: 1rem; } #email-messages .email-item__from { margin-bottom: 0.75rem !important; } #email-messages .email-item__subject { margin-top: 0 !important; } #email-messages .email-item__subject h3 { margin: 0 !important; line-height: 1.1; } .professional-resource-card__container { border-top: 1px solid #dfe1e2 !important; border-radius: 0.25rem !important; } #course-offerings .header-text { color: #1b1b1b !important; } #course-offerings .usa-table { background-color: #ffffff !important; } #course-offerings .usa-table thead { display: none !important; } #course-offerings .usa-table tbody tr { border-bottom: 0 !important; } #course-offerings .dropdown-menu { z-index: 1055 !important; } /* Remove stray horizontal rule/gap under header on offerings page */ #course-offerings hr { border: 0 !important; height: 0 !important; } #course-offerings .align-with-cards { border: 0 !important; box-shadow: none !important; } #course-offerings .align-with-cards + .row { border: 0 !important; } #course-offerings .row { border-top: 0 !important; border-bottom: 0 !important; } /* Reduce excessive gap between header button and search card */ @media (min-width: 768px) { #course-offerings .status-bar { display: none !important; } } /* Desktop: remove top corner radius on search results card to align with tabs */ @media (min-width: 641px) { #course-offerings .usa-card, #course-offerings .usa-card .usa-card__container { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-top: 0 !important; /* remove faint line under tabs */ } } #course-offerings .usa-card, #course-offerings .usa-card__container, #course-offerings .usa-card__body, #course-offerings .usa-table tbody td, #course-offerings table.dataTable tbody td { overflow: visible !important; } /* Remove ALL focus indicators from Filter buttons (desktop + mobile) - maintain default USWDS outline button style */ #course-offerings #openFilterBtnDesktop, #course-offerings #openFilterBtnDesktop:focus, #course-offerings #openFilterBtnDesktop:focus-visible, #course-offerings #openFilterBtnDesktop:focus-within, #course-offerings #openFilterBtnDesktop:active, #course-offerings #openFilterBtnDesktop:hover, #course-offerings #openFilterBtnMobile, #course-offerings #openFilterBtnMobile:focus, #course-offerings #openFilterBtnMobile:focus-visible, #course-offerings #openFilterBtnMobile:focus-within, #course-offerings #openFilterBtnMobile:active, #course-offerings #openFilterBtnMobile:hover, #course-offerings #openOfferingFilterBtn, #course-offerings #openOfferingFilterBtn:focus, #course-offerings #openOfferingFilterBtn:focus-visible, #course-offerings #openOfferingFilterBtn:focus-within, #course-offerings #openOfferingFilterBtn:active, #course-offerings #openOfferingFilterBtn:hover { outline: none !important; box-shadow: none !important; outline-offset: 0 !important; border: 1px solid #005ea2 !important; /* maintain USWDS outline button border */ background-color: transparent !important; color: #005ea2 !important; /* maintain navy blue text color on hover */ } /* Same for CourseTemplate */ #course-catalog #openFilterBtnDesktop, #course-catalog #openFilterBtnDesktop:focus, #course-catalog #openFilterBtnDesktop:focus-visible, #course-catalog #openFilterBtnDesktop:focus-within, #course-catalog #openFilterBtnDesktop:active, #course-catalog #openFilterBtnDesktop:hover, #course-catalog #openFilterBtnMobile, #course-catalog #openFilterBtnMobile:focus, #course-catalog #openFilterBtnMobile:focus-visible, #course-catalog #openFilterBtnMobile:focus-within, #course-catalog #openFilterBtnMobile:active, #course-catalog #openFilterBtnMobile:hover { outline: none !important; box-shadow: none !important; outline-offset: 0 !important; border: 1px solid #005ea2 !important; /* maintain USWDS outline button border */ background-color: transparent !important; color: #005ea2 !important; /* maintain navy blue text color on hover */ } /* WebinarClassroom: mobile-only button reflow under the title (CSS-only) */ @media (max-width: 767.98px) { header.align-with-cards > div:has(#startSessionBtn) { flex-wrap: wrap !important; } header.align-with-cards > div:has(#startSessionBtn) > .d-flex.align-items-center.gap-2 { width: 100% !important; margin-top: .75rem !important; margin-bottom: 1rem !important; justify-content: space-between !important; gap: 0.5rem !important; } /* Make buttons evenly distributed with smaller text on mobile */ header.align-with-cards > div:has(#startSessionBtn) > .d-flex.align-items-center.gap-2 .usa-button { flex: 1 1 0 !important; min-width: 0 !important; font-size: 0.8rem !important; padding: 0.5rem 0.25rem !important; white-space: normal !important; line-height: 1.2 !important; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; /*flex-direction: column !important;*/ } /* Ensure icons stay visible */ header.align-with-cards > div:has(#startSessionBtn) > .d-flex.align-items-center.gap-2 .usa-button i { font-size: 0.875rem !important; margin-right: 0.25rem !important; } } /* Remove faint header/border lines inside offerings results table */ #course-offerings .usa-table thead { border-bottom: 0 !important; } #course-offerings .usa-table { border-collapse: collapse !important; border-spacing: 0 !important; } #course-offerings .usa-table tbody { border-top: 0 !important; } #course-offerings .usa-table, #course-offerings .usa-table--bordered, #course-offerings table.dataTable.usa-table--bordered { border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; } #course-offerings .usa-table--bordered tbody tr { border-top: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-right: 0 !important; } #course-offerings .usa-table--bordered tbody td { border-top: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-right: 0 !important; } #course-offerings .usa-table--bordered tbody tr:first-child td, #course-offerings table.dataTable.usa-table--bordered tbody tr:first-child td { border-top: 0 !important; } #course-offerings .usa-table--bordered tbody tr:first-child { border-top: 0 !important; } #course-offerings .usa-table tbody tr:first-child { border-top: 0 !important; } #course-offerings table.dataTable tbody tr:first-child { border-top: 0 !important; } /* Hard override: remove all borders from the first data row - target usa-table--bordered.dataTable specifically */ #course-offerings .usa-table--bordered.dataTable tbody tr:first-child, #course-offerings table.usa-table--bordered.dataTable tbody tr:first-child, #course-offerings .usa-table.usa-table--bordered.dataTable tbody tr:first-child { border: 0 !important; border-top: 0 !important; } #course-offerings .usa-table--bordered.dataTable tbody tr:first-child td, #course-offerings table.usa-table--bordered.dataTable tbody tr:first-child td, #course-offerings .usa-table.usa-table--bordered.dataTable tbody tr:first-child td { border: 0 !important; border-top: 0 !important; } /* Remove top padding and add 1rem vertical gap between each item in the results */ #course-offerings .usa-table--bordered.dataTable tbody tr td, #course-offerings table.usa-table--bordered.dataTable tbody tr td, #course-offerings .usa-table.usa-table--bordered.dataTable tbody tr td { padding-top: 0 !important; } #course-offerings .usa-table--bordered.dataTable tbody tr:not(:last-child) td, #course-offerings table.usa-table--bordered.dataTable tbody tr:not(:last-child) td, #course-offerings .usa-table.usa-table--bordered.dataTable tbody tr:not(:last-child) td { padding-bottom: 1rem !important; } /* Remove top padding from MyCourses table cells */ #course-offerings #myCoursesTable tbody tr td { padding-top: 0 !important; } #course-offerings table.dataTable tbody th, #course-offerings table.dataTable tbody td { border-bottom: 0 !important; } #course-offerings table.dataTable.no-footer { border-bottom: 0 !important; } #course-offerings .dataTables_wrapper table { margin-top: 0 !important; } #course-offerings .usa-table--bordered, #course-offerings table.dataTable.usa-table--bordered { border: none !important; border-radius: 0 !important; box-shadow: none !important; background-color: #ffffff !important; } /* Email subject spacing adjustments (Email page only) */ #email-messages .usa-card h3.font-size-lg { margin-top: 0 !important; margin-bottom: 0.25rem !important; line-height: 1.2 !important; } #email-messages .usa-card .display-flex + .display-flex { margin-top: 0 !important; } /* CourseOffering Details: mobile-only button reflow for Enroll and Contact Instructor buttons */ @media (max-width: 767.98px) { /* Target header when it contains Enroll button (non-webinar courses) */ header.align-with-cards > div:has(#enroll) { flex-wrap: wrap !important; } header.align-with-cards > div:has(#enroll) > .d-flex.align-items-center.gap-2 { width: 100% !important; margin-top: .75rem !important; margin-bottom: 1rem !important; justify-content: space-between !important; gap: 0.5rem !important; } /* Make Enroll/Contact buttons evenly distributed with smaller text on mobile */ header.align-with-cards > div:has(#enroll) > .d-flex.align-items-center.gap-2 .usa-button { flex: 1 1 0 !important; min-width: 0 !important; font-size: 0.8rem !important; padding: 0.5rem 0.25rem !important; white-space: normal !important; line-height: 1.2 !important; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; /*flex-direction: column !important;*/ } /* Ensure icons stay visible for Enroll/Contact buttons */ header.align-with-cards > div:has(#enroll) > .d-flex.align-items-center.gap-2 .usa-button i { font-size: 0.875rem !important; margin-right: 0.25rem !important; } /* Also target header when it contains Contact Instructor button (fallback) */ header.align-with-cards > div:has(#contactInstructorBtn) { flex-wrap: wrap !important; } header.align-with-cards > div:has(#contactInstructorBtn) > .d-flex.align-items-center.gap-2 { width: 100% !important; margin-top: .75rem !important; margin-bottom: 1rem !important; justify-content: space-between !important; gap: 0.5rem !important; } /* Make Contact Instructor button evenly distributed with smaller text on mobile */ header.align-with-cards > div:has(#contactInstructorBtn) > .d-flex.align-items-center.gap-2 .usa-button { flex: 1 1 0 !important; min-width: 0 !important; font-size: 0.8rem !important; padding: 0.5rem 0.25rem !important; white-space: normal !important; line-height: 1.2 !important; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; /*flex-direction: column !important;*/ } /* Ensure icons stay visible for Contact Instructor button */ header.align-with-cards > div:has(#contactInstructorBtn) > .d-flex.align-items-center.gap-2 .usa-button i { font-size: 0.875rem !important; margin-right: 0.25rem !important; } } /* ===== Global DataTables pagination chevron icons (Bootstrap Icons) ===== */ /* Works for DataTables v2 (.dt-container) and v1 (.dataTables_wrapper) */ /* Ensure all pagination buttons have consistent height */ .dt-container .dt-paging ul.pagination .page-link, .dataTables_wrapper .dataTables_paginate ul.pagination .page-link { height: 2.25rem !important; min-height: 2.25rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0.5rem 0.75rem !important; line-height: 1 !important; } .dt-container .dt-paging ul.pagination .page-link.first, .dataTables_wrapper .dataTables_paginate ul.pagination .page-link.first, .dt-container .dt-paging ul.pagination .page-link.previous, .dataTables_wrapper .dataTables_paginate ul.pagination .page-link.previous, .dt-container .dt-paging ul.pagination .page-link.next, .dataTables_wrapper .dataTables_paginate ul.pagination .page-link.next, .dt-container .dt-paging ul.pagination .page-link.last, .dataTables_wrapper .dataTables_paginate ul.pagination .page-link.last { position: relative !important; font-size: 0 !important; /* hide fallback characters like « ‹ › » */ width: 2.25rem !important; height: 2.25rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } .dt-container .dt-paging ul.pagination .page-link.first::before, .dataTables_wrapper .dataTables_paginate ul.pagination .page-link.first::before { content: "\f27f"; font-family: "bootstrap-icons" !important; font-size: 1rem; line-height: 1; color: #1B4480; } .dt-container .dt-paging ul.pagination .page-link.previous::before, .dataTables_wrapper .dataTables_paginate ul.pagination .page-link.previous::before { content: "\f284"; font-family: "bootstrap-icons" !important; font-size: 1rem; line-height: 1; color: #1B4480; } .dt-container .dt-paging ul.pagination .page-link.next::before, .dataTables_wrapper .dataTables_paginate ul.pagination .page-link.next::before { content: "\f285"; font-family: "bootstrap-icons" !important; font-size: 1rem; line-height: 1; color: #1B4480; } .dt-container .dt-paging ul.pagination .page-link.last::before, .dataTables_wrapper .dataTables_paginate ul.pagination .page-link.last::before { content: "\f280"; font-family: "bootstrap-icons" !important; font-size: 1rem; line-height: 1; color: #1B4480; } /* Keep dark-blue active state consistent app-wide */ .dt-container .dt-paging ul.pagination .page-item.active .page-link, .dataTables_wrapper .pagination .page-item.active .page-link { background-color: #1B4480 !important; border-color: #1B4480 !important; color: #ffffff !important; } /* Educator Register Page Styles - USWDS Styling Override */ #educator-register { /* Match Educator dashboard layout - no max-width constraint */ margin: 0 auto; padding: 0 1rem; } #educator-register .icon-back-btn { border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #d1d5db; background-color: #ffffff; color: #374151; flex-shrink: 0; } #educator-register .icon-back-btn:hover { background-color: #f9fafb; border-color: #9ca3af; } #educator-register .help-icon { border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; } /* Apply USWDS styling to existing Bootstrap cards */ #educator-register .card { border: 1px solid #d1d5db; border-radius: 0.25rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); background-color: #ffffff; margin-bottom: 2rem; overflow: hidden; } #educator-register .card-header { background-color: #f5f6f7; border-bottom: 1px solid #dfe1e2; padding: .75rem 1rem; font-weight: 600; font-size: 1rem; color: #1b1b1b; line-height: 1.2; min-height: 3.25rem; display: flex; align-items: center; border-top-left-radius: .5rem; border-top-right-radius: .5rem; } #educator-register .card-header-icon { font-size: 1.25rem; margin-right: 0.5rem; color: #005ea2; flex-shrink: 0; } /* Add space between card header text and tooltip icon */ #educator-register .card-header .review-label2 { margin-right: 0.5rem; } /* Required asterisk color — global override (validation errors unchanged) */ .usa-label--required, .col-form-label--required, .dynamic-required-label, label > .text-danger, .usa-label > .text-danger { color: inherit !important; } body.required-field-audience-educator .usa-label--required, body.required-field-audience-educator .col-form-label--required, body.required-field-audience-educator .dynamic-required-label, body.required-field-audience-educator label > .text-danger, body.required-field-audience-educator .usa-label > .text-danger, .required-field-audience-educator .usa-label--required, .required-field-audience-educator .col-form-label--required, .required-field-audience-educator .dynamic-required-label { color: #71767a !important; } /* Ensure tooltip icon has proper spacing */ #educator-register label i[data-bs-toggle="tooltip"] { margin-right: 0.25rem; } #educator-register .card-body { padding: 1rem 2rem; } /* USWDS card styling for nested contact cards */ #educator-register .card .border.rounded { border: 1px solid #d1d5db !important; border-radius: 0.25rem !important; background-color: #ffffff; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); padding: 1.5rem !important; margin: 0; } /* Apply USWDS styling to form controls */ #educator-register .form-control, #educator-register .form-select { border: 1px solid #d1d5db; border-radius: 4px; padding: 0.5rem 0.75rem; font-size: 1rem; line-height: 1.5; color: #374151; background-color: #ffffff; } #educator-register .form-control:focus, #educator-register .form-select:focus { border-color: #005ea2; box-shadow: 0 0 0 2px rgba(0, 94, 162, 0.2); outline: none; } #educator-register .form-control:disabled, #educator-register .form-select:disabled { background-color: #f9fafb; color: #6b7280; cursor: not-allowed; } /* Apply USWDS styling to labels */ #educator-register label { font-weight: 600; color: #374151; margin-bottom: 0.25rem; display: block; } /* Apply USWDS styling to buttons */ #educator-register .btn-primary { background-color: var(--uswds-accent-alt); border-color: var(--uswds-accent-alt); color: #ffffff; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 4px; border: 1px solid transparent; } #educator-register .btn-primary:hover { background-color: var(--uswds-accent); border-color: var(--uswds-accent); } #educator-register .btn-secondary { background-color: #ffffff; border-color: #d1d5db; color: #374151; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 4px; border: 1px solid #d1d5db; } #educator-register .btn-secondary:hover { background-color: #f9fafb; border-color: #9ca3af; } /* Apply USWDS styling to validation feedback */ #educator-register .text-danger { color: #d54309; font-size: 0.875rem; margin-top: 0.25rem; } /* USWDS styling for error messages and validation feedback */ #educator-register .alert, #educator-register .alert-info, #educator-register .alert-warning { background-color: #f0f8ff; border: 1px solid #005ea2; border-radius: 0.25rem; color: #1b1b1b; padding: 0.75rem 1rem; margin-top: 0.5rem; } #educator-register .alert .bi, #educator-register .alert i { color: #005ea2; margin-right: 0.5rem; } #educator-register .alert a { color: #005ea2; text-decoration: underline; } #educator-register .alert a:hover { color: #1a4480; } /* USWDS styling for dropdown no results message */ #educator-register .dropdown-item.text-muted { background-color: #f0f8ff; color: #1b1b1b; } #educator-register .dropdown-item .text-primary { color: #005ea2 !important; } #educator-register .dropdown-item .contact-admin-link { color: #005ea2 !important; text-decoration: underline; } #educator-register .dropdown-item .contact-admin-link:hover { color: #1a4480 !important; } /* Fix dropdown overflow issue - allow dropdown to extend beyond card boundaries */ #educator-register .card { overflow: visible !important; } #educator-register .card-body { overflow: visible !important; } #educator-register .dropdown-menu { z-index: 1050 !important; position: absolute !important; max-height: 300px; overflow-y: auto; } #educator-register .dropdown { position: relative; } #educator-register .form-control:focus + .dropdown-menu, #educator-register .dropdown-menu.show { display: block !important; z-index: 1050 !important; } /* Apply USWDS styling to radio buttons */ #educator-register .form-check-input[type="radio"] { width: 1rem; height: 1rem; border: 2px solid #d1d5db; border-radius: 50%; background-color: #ffffff; appearance: none; -webkit-appearance: none; -moz-appearance: none; } #educator-register .form-check-input[type="radio"]:checked { background-color: #ffffff; border-color: #005ea2; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23005ea2'/%3e%3c/svg%3e"); background-size: 8px 8px; background-position: center; background-repeat: no-repeat; } #educator-register .form-check-input[type="radio"]:focus { border-color: #005ea2; box-shadow: 0 0 0 2px rgba(0, 94, 162, 0.2); outline: none; } /* Apply USWDS styling to checkboxes */ #educator-register .form-check-input[type="checkbox"] { width: 1rem; height: 1rem; border: 1px solid #d1d5db; border-radius: 2px; } #educator-register .form-check-input[type="checkbox"]:checked { background-color: #005ea2; border-color: #005ea2; } #educator-register .form-check-label { font-weight: 400; margin-left: 0.5rem; } /* Global USWDS checkbox styling */ .form-check-input[type="checkbox"] { width: 1rem !important; height: 1rem !important; border: 1px solid #d1d5db !important; border-radius: 2px !important; background-color: #ffffff !important; } .form-check-input[type="checkbox"]:checked { background-color: #005ea2 !important; border-color: #005ea2 !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important; } .form-check-input[type="checkbox"]:focus { border-color: #005ea2 !important; box-shadow: 0 0 0 2px rgba(0, 94, 162, 0.2) !important; outline: none !important; } /* Apply USWDS styling to input groups */ #educator-register .input-group-text { background-color: #f8fafc; border: 1px solid #d1d5db; color: #6b7280; font-size: 0.875rem; } /* Apply USWDS styling to contact sections */ #educator-register .fw-semibold { font-weight: 600; color: #1b1b1b; font-size: 1.125rem; margin-bottom: 1rem; } /* Mobile responsive adjustments for register page */ @media (max-width: 767.98px) { #educator-register .col-md-1-5 { flex: 0 0 100%; max-width: 100%; } #educator-register .btn { width: 100%; margin-bottom: 0.5rem; } #educator-register .btn:last-child { margin-bottom: 0; } } /* USWDS Component Style Overrides */ /* This file only overrides colors, spacing, and other properties of standard USWDS components */ /* No custom classes are defined - only USWDS component styling modifications */ /* ===== TOAST NOTIFICATION STYLING ===== */ /* Override Bootstrap toast styling to match USWDS design system */ .toast { min-width: 400px !important; max-width: 600px !important; font-size: 15px !important; line-height: 1.3 !important; border-radius: 6px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; border: none !important; margin-bottom: 12px !important; } .toast-body { padding: 16px 20px !important; word-wrap: break-word !important; white-space: normal !important; line-height: 1.4 !important; display: flex !important; align-items: center !important; flex: 1 !important; } .toast .d-flex { align-items: center !important; min-height: 56px !important; padding: 0 !important; } .toast .btn-close { margin: 0 16px 0 8px !important; flex-shrink: 0 !important; padding: 8px !important; opacity: 0.8 !important; } .toast .btn-close:hover { opacity: 1 !important; } /* Error toasts - red background */ .text-bg-danger { background-color: #dc3545 !important; color: white !important; } .text-bg-danger .toast-body { font-weight: 500 !important; color: white !important; } .text-bg-danger .toast-body i { margin-right: 10px !important; font-size: 18px !important; flex-shrink: 0 !important; } .text-bg-danger .btn-close { color: white !important; opacity: 0.9 !important; } /* Warning toasts - yellow background */ .text-bg-warning { background-color: #ffc107 !important; color: #212529 !important; } .text-bg-warning .toast-body { color: #212529 !important; } .text-bg-warning .btn-close { color: #212529 !important; } /* Success toasts - green background */ .text-bg-success { background-color: #198754 !important; color: white !important; } .text-bg-success .toast-body { color: white !important; } .text-bg-success .btn-close { color: white !important; } /* Toast container positioning */ .toast-container { z-index: 1055 !important; } .toast-container .toast { margin-bottom: 12px !important; } /* Better text flow for long messages */ .toast-body span { display: inline !important; word-break: break-word !important; } /* ===== COLOR THEME VARIABLES ===== */ :root { --uswds-accent: #1b1f3b; /* deep blue */ --uswds-accent-alt: #0b4778; /* blue-60v */ --uswds-surface: #f0f6ff; /* light blue surface */ } /* ===== USWDS ACCORDION COMPONENT OVERRIDES ===== */ /* Accordion button styling */ .usa-accordion__button { font-size: 1rem !important; font-weight: 500 !important; } /* ===== USWDS DROPDOWN OVERRIDES (global) ===== */ /* Normalize dropdown item spacing across the app */ .dropdown-menu { padding: .25rem 0 !important; /* tight container padding, items handle vertical rhythm */ } .dropdown-menu .dropdown-item { padding-top: .5rem !important; /* 8px vertical */ padding-bottom: .5rem !important; padding-left: 1rem !important; padding-right: 1rem !important; line-height: 1.4 !important; } /* ===== USWDS CARD COMPONENT OVERRIDES ===== */ /* Card container styling */ .usa-card { background: #fff; border: 1px solid #dfe1e2; border-radius: .5rem; box-shadow: 0 1px 2px rgba(0,0,0,.06); overflow: hidden; } /* Card headers */ .usa-card__header { padding: .75rem 1rem; border-bottom: 1px solid #dfe1e2; font-weight: 600; background-color: #f5f6f7; border-top-left-radius: .5rem; border-top-right-radius: .5rem; display: flex; min-height: 3.25rem; } /* Card body */ .usa-card__body { padding: 0.5rem; } /* Card headings */ .usa-card__heading { margin: 0; font-size: 1.125rem; color: var(--uswds-accent); } /* Make the link look and behave like a button */ .usa-card__body .display-block.text-no-underline:hover, .usa-card__body .display-block.text-no-underline:focus { background-color: #003366; /* Darker blue on hover/focus */ color: #fff; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,0.12); outline: none; } /* Card group layout - make it responsive 3-column grid */ .usa-card-group { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: .75rem; } @media (min-width: 640px) { .usa-card-group { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .usa-card-group { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Ensure cards in groups have equal height AND proper card styling */ .usa-card-group .usa-card { height: 100%; display: flex; flex-direction: column; background: #fff !important; border: 1px solid #dfe1e2 !important; border-radius: .5rem !important; box-shadow: 0 1px 2px rgba(0,0,0,.06) !important; overflow: hidden !important; } .usa-card-group .usa-card__container { display: flex; flex-direction: column; height: 100%; } .usa-card-group .usa-card__body { flex: 1; display: flex; flex-direction: column; } /* My Courses should use the same grid layout as Newly Added Courses */ /* Individual card styling for Assignments sections */ #assignments-grid .usa-card { margin-bottom: .75rem; background: #fff; border: 1px solid #dfe1e2; border-radius: .5rem; box-shadow: 0 1px 2px rgba(0,0,0,.06); overflow: hidden; } #assignments-grid .usa-card:last-child { margin-bottom: 0; } /* My Courses grid - no margin-bottom to preserve grid layout */ #my-courses-grid.usa-card-group .usa-card { background: #fff !important; border: 1px solid #dfe1e2 !important; border-radius: .5rem !important; box-shadow: 0 1px 2px rgba(0,0,0,.06) !important; overflow: visible !important; /* Allow dropdown to show */ margin-bottom: 0 !important; /* Remove margin for proper grid */ position: relative !important; } /* Ensure dropdown buttons are visible in My Courses */ #my-courses-grid .card-action-menu .dropdown-toggle { background: white !important; border: 1px solid #ddd !important; color: #666 !important; font-size: 16px !important; line-height: 1 !important; padding: 6px 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 100 !important; } /* Suppress any extra caret or pseudo-icons on the dropdown button in My Courses */ #my-courses-grid .dropdown-toggle::after, #my-courses-grid .dropdown-toggle::before { content: '' !important; display: none !important; background: none !important; border: 0 !important; } /* ===== USWDS COLLECTION COMPONENT OVERRIDES ===== */ .usa-collection { padding: .25rem 0; margin: 0; } .usa-collection__item { list-style: none; background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem; padding: .25rem .25rem; margin-bottom: .75rem; box-shadow: 0 1px 1px rgba(0,0,0,.03); } .usa-collection__heading { font-size: 1.05rem; color: #0b4778; margin: 0; } /* ===== USWDS BUTTON COMPONENT OVERRIDES ===== */ .usa-button { appearance: none; border: 1px solid var(--uswds-accent-alt); background: var(--uswds-accent-alt); color: #fff !important; padding: .6rem 1rem; /* increase tappable area */ min-height: 44px !important; /* enhanced target size */ height: 44px !important; /* force exact height */ border-radius: .25rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; line-height: 1; box-sizing: border-box; } .usa-button:hover, .usa-button:focus { background: var(--uswds-accent); border-color: var(--uswds-accent); color: #fff !important; } .usa-button--outline { background: transparent; color: var(--uswds-accent-alt) !important; border-color: var(--uswds-accent-alt); } .usa-button--outline:hover { background: var(--uswds-accent-alt); color: #fff !important; } .usa-button--outline:focus { color: #fff !important; } .usa-button--danger { background: #dc3545; border-color: #dc3545; color: #fff !important; cursor: pointer; } .usa-button--danger:hover, .usa-button--danger:focus { background: #b02a37; border-color: #b02a37; color: #fff !important; cursor: pointer; } /* Ensure webinar classroom buttons are clickable */ .usa-button[id="deenroll"], .usa-button[id="startSessionBtn"] { cursor: pointer !important; pointer-events: auto !important; } /* ===== USWDS LINK COMPONENT OVERRIDES ===== */ .usa-link { text-decoration: none; color: var(--uswds-accent-alt); } .usa-link:hover, .usa-link:focus { color: var(--uswds-accent); } /* Global link styling */ a { color: var(--uswds-accent-alt); } a:hover, a:focus { color: var(--uswds-accent); } /* ===== USWDS SIDENAV COMPONENT OVERRIDES ===== */ .usa-sidenav__item a { color: var(--uswds-accent-alt); } .usa-sidenav__item a.usa-current { font-weight: 700; color: var(--uswds-accent); } /* ===== TYPOGRAPHY OVERRIDES ===== */ body { font-family: "Public Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; color: #1b1b1b; line-height: 1.6; /* ensure base line-height meets AAA */ } h1 { font-size: 1.625rem; margin: .5rem 0 1rem; color: var(--uswds-accent); } h2 { font-size: 1.25rem; color: var(--uswds-accent); } /* Paragraphs and muted lead text */ p, .text-base-dark { line-height: 1.6 !important; /* ensure 1.5x font-size or greater */ } /* ===== BADGE STYLING (Bootstrap badges used in components) ===== */ .badge { display: inline-block; background: #f1f3f6; color: #fff; border-radius: 999px; padding: .2rem .6rem; font-size: .75rem; line-height: 1.25; border: 0; } /* Session badge styling - use USWDS dark blue to match button background */ .session-badge { background-color: var(--uswds-accent-alt) !important; /* #0b4778 - blue-60v */ border: 1px solid #083755 !important; color: #fff !important; } /* Enrolled status: use blue theme for strong contrast */ .enrolled, .course-status.enrolled { background: #0b4778 !important; /* USWDS blue-60v */ border: 1px solid #083755 !important; color: #fff !important; } .badge-enrolled, .badge.badge-enrolled, .usa-card .badge-enrolled, span.badge.badge-enrolled { background-color: #0b4778 !important; /* Blue theme for Enrolled */ border: 1px solid #083755 !important; color: #fff !important; } /* Revert: in-progress uses warning yellow; server-side badges control other colors */ /* Overdue/Danger badges: enforce deep red for AAA contrast with white text */ .badge-warning, .badge-danger, .badge.bg-danger, .badge.badge-danger, .bg-danger, .text-bg-danger, .badge-overdue, .overdue, .status-overdue { background: #6b0f0f !important; /* deep red for 7:1 against white */ border: 1px solid #4a0c0c !important; color: #ffffff !important; border-radius: 999px; padding: .3rem .7rem; } /* Align In progress badge with Instructor dashboard style */ .in-progress { background: #0b3d20 !important; color: #fff !important; border-radius: 999px; padding: .2rem .6rem; /* match base .badge sizing for consistency */ } /* Ensure any success badge used for course status renders as 'Enrolled' blue */ .badge.bg-success { background-color: #0b4778 !important; border: 1px solid #083755 !important; color:#fff !important; } .badge-danger, .badge.bg-danger, span.badge.bg-danger { background: #dc3545 !important; color: #fff !important; } .badge.status-active { background-color: #0b3d20 !important; /* darker green for AAA contrast */ color: #fff !important; border-radius: 999px; padding: .2rem .6rem; /* match base badge */ font-size: .75rem; /* match base badge */ line-height: 1.25; } /* ===== CONTENT STYLING CLASSES (used in card content) ===== */ .card-description { color: #475569; font-size: .875rem; margin-top: .25rem; margin-bottom: .25rem; } .card-meta { color: #6b7280; font-size: .875rem; margin-top: .25rem; margin-bottom: .25rem; } .card-content { margin-top: .25rem; margin-bottom: .5rem; } .card-bottom { margin-top: auto; /* Push to bottom in flex containers */ padding-top: .25rem; } .card-bottom-bordered { border-top: 1px solid #dfe1e2; padding: .25rem; } .rc-pill { font-size: .8rem; border-radius: 2rem; border: 1px solid #cbd3dd; padding: .125rem .5rem; background: #f8fafc } .rc-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem } .age-badge { background: #eef2ff; color: #3b5bdb; border: 1px solid #cdd6f4; font-weight: 600; font-size: .75rem; border-radius: 2rem; padding: 0.2rem 0.6rem; } .inbox-item { background: #fff; display: flex; gap: .6rem; transition: box-shadow .15s ease, border-color .15s ease; margin-bottom: .55rem } .inbox-item:hover { box-shadow: 0 6px 16px rgba(0,0,0,.06); border-color: #d7dce4 } .inbox-icon { flex: 0 0 22px; height: 22px; border-radius: .35rem; background: #eef5ff; color: var(--uswds-accent); display: flex; align-items: center; justify-content: center; font-size: .9rem; margin-top: .65rem } /* ===== DROPDOWN MENU STYLING ===== */ .card-action-menu { position: absolute; z-index: 10; } /* Standard square 3-dot button across dashboards */ .card-action-menu .dropdown-toggle { width: 32px !important; height: 32px !important; padding: 0 !important; border: 1px solid #ddd !important; background: #fff !important; color: #1b1b1b !important; /* darker glyph color for AAA contrast */ border-radius: .375rem !important; /* match educator */ display: flex !important; align-items: center !important; justify-content: center !important; } .card-action-menu .dropdown-toggle:hover, .card-action-menu .dropdown-toggle:focus { background: #e9ecef; /* slightly darker hover for contrast */ border-color: #6c757d; /* darker border */ outline: none; box-shadow: none; } .card-action-menu .dropdown-toggle::after { display: none; /* Hide default Bootstrap arrow */ } .card-action-menu .dropdown-menu { position: absolute; border: 1px solid #e0e6ed; box-shadow: 0 4px 8px rgba(0,0,0,0.1); min-width: 160px; z-index: 1000; top: 32px; right: 0; background: white; border-radius: 4px; margin-top: 0; transform: none; } /* ===== ICON STYLING ===== */ .card-header-icon { color: var(--uswds-accent-alt); margin-right: .75rem; font-size: 1.1rem; } .icon-blue { color: var(--uswds-accent-alt) !important; } .help-icon { border-radius: 50% !important; width: 44px !important; z-index:10000; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Tooltip icon styling - use USWDS dark blue to match button background */ .text-info, .popover-tooltip .bi-info-circle, .bi-info-circle.text-info { color: var(--uswds-accent-alt) !important; /* #0b4778 - blue-60v */ } /* ===== LAYOUT OVERRIDES ===== */ /* Section spacing */ .usa-section + .usa-section { margin-top: .5rem; } /* Ensure grid system works properly */ .grid-row { display: flex; flex-wrap: wrap; gap: 1rem; } .grid-col-12 { width: 100%; flex: 0 0 100%; } /* Simple 2-column layout for educator dashboard: main (8) + sidebar (4) */ @media (min-width: 1024px) { .desktop\:grid-col-8 { flex: 0 0 calc(66.667% - 0.5rem) !important; max-width: calc(66.667% - 0.5rem) !important; width: auto !important; } .desktop\:grid-col-4 { flex: 0 0 calc(33.333% - 0.5rem) !important; max-width: calc(33.333% - 0.5rem) !important; width: auto !important; } .desktop\:display-block { display: block !important; } /* Force grid items to be inline */ .grid-row > [class*="grid-col"] { flex-shrink: 0; } } /* Fallback for smaller screens - try desktop layout at 768px too */ @media (min-width: 768px) { .desktop\:grid-col-8 { flex: 0 0 calc(66.667% - 0.5rem) !important; max-width: calc(66.667% - 0.5rem) !important; width: auto !important; } .desktop\:grid-col-4 { flex: 0 0 calc(33.333% - 0.5rem) !important; max-width: calc(33.333% - 0.5rem) !important; width: auto !important; } } .display-none { display: none !important; } /* ===== ALIGNMENT & SPACING UTILITIES ===== */ .align-with-cards { padding-left: 0; margin-left: 0 !important; } header.align-with-cards { margin-top: 0 !important; margin-bottom: 0.5rem !important; /*display:flex;*/ /*align-items:center;*/ /*height:44px !important;*/ } /* Header with title only (no input/search/button on right): match vertical padding (top/bottom) to headers that have inputs */ header.align-with-cards:not(:has(input, .ffx-search, .usa-button)) > div { padding-top: 0.42rem; padding-bottom: 0.42rem; } /* Sidenav positioning */ .dashboard-sidenav { position: sticky; top: 2rem; } /* Page content alignment - only override if needed for layout */ .pagecontent .grid-container { padding-left: 1rem !important; padding-right: 1rem !important; margin-top: 0.75rem !important; /* reduced gap from header for better spacing */ } /* Ensure Course Catalog uses the same left alignment as dashboards */ #course-catalog.align-with-cards, #course-catalog .align-with-cards { padding-left: 0 !important; margin-left: 0 !important; } #course-catalog { /* match educator/instructor grid-container padding */ padding-left: 1rem !important; padding-right: 1rem !important; } /* Minimal USWDS search input: global 44px height and spacing */ .usa-search .usa-input { min-height: 44px !important; } .usa-search .usa-button { min-height: 44px !important; } .usa-search { display: flex !important; align-items: stretch !important; gap: .5rem !important; width: 100% !important; } /* Ensure search input grows to fill available space; show one inline magnifier on all sizes */ .usa-search .usa-input { flex: 1 1 320px !important; min-width: 0 !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3e%3ccircle cx='11' cy='11' r='6.5' stroke='%2371767a' stroke-width='1.5'/%3e%3cpath d='M16 16l4 4' stroke='%2371767a' stroke-width='1.5' stroke-linecap='round'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: .75rem center !important; background-size: 1.25rem !important; padding-left: 2rem !important; } /* Add a bit more space between icon and text on listing pages */ #course-catalog .usa-search .usa-input, #course-offerings .usa-search .usa-input { padding-left: 2.5rem !important; } /* Prevent duplicate inline icons in the search container */ .usa-search .bi-search, .usa-search .search-icon { display: none !important; } /* Remove native search field decorations so icons don't float oddly on mobile */ .usa-search .usa-input[type="search"] { -webkit-appearance: none !important; appearance: none !important; } .usa-search .usa-input[type="search"]::-webkit-search-decoration, .usa-search .usa-input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none !important; appearance: none !important; } /* Mobile: truncate long course template dropdown text */ @media (max-width: 640px) { /* Course template dropdown text truncation for mobile */ #CourseTemplateId { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; /* Ensure there's enough space for the dropdown arrow */ padding-right: 3rem !important; } .usa-search { flex-wrap: wrap !important; } .usa-search .usa-input { flex: 1 1 100% !important; width: 100% !important; /* Add magnifier only on mobile to avoid overlap with desktop icons */ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3e%3ccircle cx='11' cy='11' r='6.5' stroke='%2371767a' stroke-width='1.5'/%3e%3cpath d='M16 16l4 4' stroke='%2371767a' stroke-width='1.5' stroke-linecap='round'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: .75rem center !important; background-size: 1.25rem !important; padding-left: 2rem !important; } /* Increase space next to icon for listing pages on mobile too */ #course-catalog .usa-search .usa-input, #course-offerings .usa-search .usa-input { padding-left: 2.5rem !important; } /* put all three buttons on the same next line, share available width equally */ .usa-search .usa-button { flex: 1 1 0 !important; min-width: 0 !important; } /* spacing above the row of buttons */ .usa-search .usa-button { margin-top: .5rem !important; } /* Stack label above select for mobile tab selector */ #course-catalog .d-md-none label[for="mobileTabSelect"] { display: block !important; margin-bottom: .25rem !important; } #course-catalog #mobileTabSelect { display: block !important; width: 100% !important; } } /* Ensure Course Template select2 text is not clipped when zoomed on Edit page */ #CourseOfferingEditor #CourseTemplateId + .select2 .select2-selection--single { height: auto !important; min-height: 2.75rem; display: flex; align-items: center; } #CourseOfferingEditor #CourseTemplateId + .select2 .select2-selection__rendered { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; } /* Ensure Course Language select2 text is not clipped when zoomed on Edit page */ #CourseOfferingEditor #CourseLanguageId + .select2 .select2-selection--single { height: auto !important; min-height: 2.75rem; display: flex; align-items: center; } #CourseOfferingEditor #CourseLanguageId + .select2 .select2-selection__rendered { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; } /* Match input border to USWDS select border globally */ .usa-input { border: 1px solid #dfe1e2 !important; border-radius: .25rem !important; } /* Search form inline layout */ #course-catalog .usa-card__body .display-flex { align-items: stretch; } #course-catalog .usa-card__body .usa-search { display: flex; align-items: stretch; } /* Ensure all buttons have same height and proper alignment */ #course-catalog .usa-card__body button { /* height: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;*/ } /* Responsive behavior for smaller screens */ @media (max-width: 768px) { #course-catalog .usa-card__body .display-flex { flex-direction: column; gap: 0.5rem !important; } #course-catalog .usa-search { min-width: unset; width: 100%; } } /* Template Type Tabs - Tab Style */ #course-catalog .nav-pills { background: none !important; display: inline-flex; border-bottom: 2px solid #dfe1e2 !important; } /* Offerings Tabs - mirror template tab style */ #course-offerings .nav-pills { background: none !important; display: inline-flex; border-bottom: 2px solid #dfe1e2 !important; } #course-offerings .nav-pills .nav-link { border: none !important; background: none !important; color: inherit !important; text-decoration: none !important; border-radius: 0 !important; } #course-offerings .nav-pills .nav-link:not(.active) { background-color: transparent !important; border: none !important; border-bottom: 2px solid transparent !important; color: #565c65 !important; padding: 0.75rem 1.5rem 0.5rem 1.5rem !important; margin-right: 0 !important; margin-bottom: -2px !important; font-weight: 500 !important; position: relative; } #course-offerings .nav-pills .nav-link:not(.active):hover { background-color: #f8f9fa !important; color: #212529 !important; border-bottom-color: #adb5bd !important; } #course-offerings .nav-pills .nav-link.active { background-color: #ffffff !important; border: none !important; border-bottom: 2px solid #005ea2 !important; color: #005ea2 !important; padding: 0.75rem 1.5rem 0.5rem 1.5rem !important; margin-right: 0 !important; margin-bottom: -2px !important; font-weight: 600 !important; position: relative; } /* Course Offerings USWDS Table Styling - mirror Course Template listing */ #course-offerings .usa-table, #course-offerings table.dataTable { width: 100% !important; margin-top: 1rem; background-color: #ffffff !important; border-collapse: collapse !important; } /* Ensure dropdowns within results card are not clipped */ #course-offerings .usa-card, #course-offerings .usa-card__container, #course-offerings .usa-card__body { overflow: visible !important; position: relative !important; } /* Dropdown placement: bottom-left under button */ #course-offerings .dropdown > .dropdown-menu { right: 0 !important; left: auto !important; top: 100% !important; transform: none !important; margin-top: .25rem !important; z-index: 9999 !important; } #course-offerings .dropdown > .dropdown-menu.show[style] { right: 0 !important; left: auto !important; top: 100% !important; transform: none !important; z-index: 9999 !important; } /* Chevron dropdown button style matching catalog */ #course-offerings .btn.btn-ellipsis.dropdown-toggle { background: #fff !important; border: 1px solid #ddd !important; color: #1b1b1b !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; border-radius: .375rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } #course-offerings .btn.btn-ellipsis.dropdown-toggle i.bi-chevron-down { display: inline-block !important; line-height: 1 !important; margin: 0 !important; position: relative !important; top: 0 !important; font-size: 18px !important; color: var(--uswds-accent-alt) !important; } #course-offerings .btn.btn-ellipsis:focus, #course-offerings .btn.btn-ellipsis:active:focus { outline: none !important; box-shadow: none !important; } #course-offerings .btn.btn-ellipsis.dropdown-toggle::after { display: none !important; } #course-offerings .dropstart .dropdown-toggle::before { display: none !important; } /* Force dropdown item text color to black - maximum specificity */ #course-offerings .dropdown > .dropdown-menu .dropdown-item, #course-offerings .dropdown-menu .dropdown-item, #course-offerings .dropdown-item { color: #1b1b1b !important; } #course-offerings .dropdown > .dropdown-menu .dropdown-item:hover, #course-offerings .dropdown > .dropdown-menu .dropdown-item:focus, #course-offerings .dropdown-menu .dropdown-item:hover, #course-offerings .dropdown-menu .dropdown-item:focus, #course-offerings .dropdown-item:hover, #course-offerings .dropdown-item:focus { color: #1b1b1b !important; background-color: #f8f9fa !important; } /* MyCourses page specific styling for static table structure */ #course-offerings .list-group-item .btn.btn-ellipsis.dropdown-toggle { background: #fff !important; border: 1px solid #ddd !important; color: #1b1b1b !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; border-radius: .375rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } #course-offerings .list-group-item .btn.btn-ellipsis.dropdown-toggle i.bi-chevron-down { display: inline-block !important; line-height: 1 !important; margin: 0 !important; position: relative !important; top: 0 !important; font-size: 18px !important; color: var(--uswds-accent-alt) !important; } /* Hide header row */ #course-offerings .usa-table thead, #course-offerings table.dataTable thead { display: none !important; } /* Remove outer borders when using --bordered variant so it matches card edge */ #course-offerings .usa-table--bordered, #course-offerings table.dataTable.usa-table--bordered { border: none !important; border-radius: 0 !important; box-shadow: none !important; background-color: white !important; } /* Comfortable vertical padding for each result row */ #course-offerings .usa-table tbody td, #course-offerings table.dataTable tbody td { padding-top: 0.85rem !important; padding-bottom: 0.85rem !important; } /* Match course title link color in offerings to template listing */ #course-offerings .course-title a, #course-offerings .usa-collection__heading a, #course-offerings a.usa-link { color: var(--uswds-accent-alt) !important; text-decoration: none !important; } #course-offerings .course-title a:hover, #course-offerings .usa-collection__heading a:hover, #course-offerings a.usa-link:hover { color: var(--uswds-accent) !important; } /* Remove left padding on muted meta text under the course title */ #course-offerings .course-meta { padding-left: 0 !important; } /* Mobile layout tweaks to mirror Course Template listing */ @media (max-width: 800px) { /* Make table cells positioning context and add padding for dropdown */ #course-offerings .usa-table tbody td, #course-offerings table.dataTable tbody td { padding-top: 1rem !important; padding-bottom: 1rem !important; display: block !important; position: relative !important; } /* Position dropdown at top right like course catalog (legacy rows only) */ #course-offerings .usa-table tbody td > .dropdown, #course-offerings .item-content > .item-header .dropdown { position: absolute !important; top: 1rem !important; right: -0.25rem !important; margin: 0 !important; z-index: 10 !important; } /* New card layout: keep chevron in .course-quick clickable */ #course-offerings .course-item .course-quick .dropdown { position: relative !important; top: auto !important; right: auto !important; left: auto !important; z-index: 20 !important; pointer-events: auto !important; } #course-offerings .course-item .course-quick .btn.btn-ellipsis.dropdown-toggle { position: relative !important; pointer-events: auto !important; cursor: pointer !important; background: #fff !important; border: 1px solid #ddd !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; } /* Style dropdown button for mobile (keep minimum tap target) */ #course-offerings .course-item .course-quick .dropdown .btn-ellipsis { border: 1px solid #ddd !important; background: #fff !important; padding: 0 !important; margin: 0 !important; min-width: 32px !important; min-height: 32px !important; width: 32px !important; height: 32px !important; pointer-events: auto !important; cursor: pointer !important; } #course-offerings .course-item .course-title { padding-right: 0 !important; } /* Force stacked layout; prevent unintended side-by-side columns */ /* Keep desktop-only elements hidden on mobile */ #course-offerings .d-none.d-lg-flex { display: none !important; } /* Allow wrapping for any residual flex containers */ #course-offerings .flex-wrap { flex-wrap: wrap !important; } #course-offerings .course-title { width: 100% !important; margin-bottom: .5rem !important; display: block !important; } #course-offerings .course-meta { width: 100% !important; } #course-offerings .course-title a { white-space: normal !important; } #course-offerings p { margin-top: .5rem !important; } /* Only one chevron and one status on mobile */ #course-offerings .course-meta .btn-ellipsis { display: none !important; } #course-offerings .course-title .badge:not(.badge-counter) { display: none !important; } /* Reset mobile action group to flow; we will position the button itself */ #course-offerings .course-title > .d-lg-none { position: static !important; margin: 0 !important; } /* Hide seat-count badge next to the chevron on mobile */ #course-offerings .course-title > .d-lg-none .badge-counter { display: none !important; } /* Anchor chevron to top-right of the row/card */ #course-offerings table.dataTable tbody td { position: relative !important; } #course-offerings .btn.btn-ellipsis.dropdown-toggle { position: static !important; margin: 0 !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } #course-offerings .btn.btn-ellipsis.dropdown-toggle:hover, #course-offerings .btn.btn-ellipsis.dropdown-toggle:focus, #course-offerings .btn.btn-ellipsis.dropdown-toggle:active { background-color: transparent !important; border: 0 !important; box-shadow: none !important; } /* Ensure dropdown container has proper positioning context (legacy rows only) */ #course-offerings .usa-table tbody td > .dropdown, #course-offerings .item-content > .item-header .dropdown { position: absolute !important; right: 0.5rem !important; top: 0.5rem !important; z-index: 10 !important; } /* Mobile dropdown menu positioning - appear below the button */ #course-offerings .dropdown > .dropdown-menu { right: 0 !important; left: auto !important; top: 100% !important; transform: none !important; margin-top: 0.25rem !important; min-width: 150px !important; z-index: 9999 !important; } /* Override any inline styles from JavaScript */ #course-offerings .dropdown > .dropdown-menu.show[style] { right: 0 !important; left: auto !important; top: 100% !important; transform: none !important; margin-top: 0.25rem !important; z-index: 9999 !important; } /* Fix dropdown item text color in mobile mode - use maximum specificity */ #course-offerings .dropdown > .dropdown-menu .dropdown-item, #course-offerings .dropdown-menu .dropdown-item, #course-offerings .dropdown-item { color: #1b1b1b !important; } #course-offerings .dropdown > .dropdown-menu .dropdown-item:hover, #course-offerings .dropdown > .dropdown-menu .dropdown-item:focus, #course-offerings .dropdown-menu .dropdown-item:hover, #course-offerings .dropdown-menu .dropdown-item:focus, #course-offerings .dropdown-item:hover, #course-offerings .dropdown-item:focus { color: #1b1b1b !important; background-color: #f8f9fa !important; } } /* Remove border and hover styles from chevron dropdown button for both desktop and mobile */ #course-offerings .btn.btn-ellipsis.dropdown-toggle { background-color: transparent !important; border: 0 !important; box-shadow: none !important; } #course-offerings .btn.btn-ellipsis.dropdown-toggle:hover, #course-offerings .btn.btn-ellipsis.dropdown-toggle:focus, #course-offerings .btn.btn-ellipsis.dropdown-toggle:active { background-color: transparent !important; border: 0 !important; box-shadow: none !important; } /* Course Offering listing: mobile status filter above search */ #course-offerings .course-offering-toolbar { display: flex; flex-direction: column; gap: 0.5rem; } #course-offerings .course-offering-toolbar__status .usa-select { width: 100%; } @media (min-width: 768px) { #course-offerings .course-offering-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 1rem; row-gap: 0.5rem; } #course-offerings .course-offering-toolbar__main { grid-column: 1; grid-row: 1; margin-bottom: 0 !important; } #course-offerings .course-offering-toolbar__status { grid-column: 2; grid-row: 1; width: auto; min-width: 12rem; } #course-offerings .course-offering-toolbar__status .usa-select { width: auto; min-width: 12rem; } #course-offerings .course-offering-toolbar__search { display: none !important; } } @media (max-width: 767.98px) { #course-offerings .course-offering-toolbar__main { margin-bottom: 0.5rem !important; } #course-offerings .course-offering-toolbar__status { width: 100%; } #course-offerings .course-offering-toolbar__search { width: 100%; margin-top: 0.25rem; } } /* Mobile: add 1rem gap between search bar and result card */ @media (max-width: 640px) { #course-offerings .mobile-search-section { margin-bottom: 1rem !important; } /* Tighten vertical gap between header and offering dropdown to 1rem */ #course-offerings .d-md-none.margin-bottom-2 { margin-top: 1rem !important; } /* Remove top margin from usa-section in mobile mode */ #course-offerings .usa-section { margin-top: 0 !important; } } /* Desktop: limit search input field width to 350px total (including button) */ @media (min-width: 641px) { #course-offerings #searchFormDesktop .ffx-search-container { max-width: 350px !important; } #course-offerings #searchFormDesktop .ffx-search-input-group { max-width: 100% !important; } /* Same for CourseTemplate listing */ #course-catalog #searchFormDesktop .ffx-search-container { max-width: 350px !important; } #course-catalog #searchFormDesktop .ffx-search-input-group { max-width: 100% !important; } /* Same for Certification listing */ #certification-listing #searchFormDesktop .ffx-search-container { max-width: 350px !important; } #certification-listing #searchFormDesktop .ffx-search-input-group { max-width: 100% !important; } } /* Pagination theme like catalog */ #course-offerings .dataTables_wrapper .dataTables_paginate { display: inline-flex !important; gap: .25rem !important; align-items: center !important; } #course-offerings .dataTables_wrapper .pagination .page-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 44px !important; min-height: 44px !important; padding: .5rem .75rem !important; color: #1a4480 !important; background-color: #ffffff !important; border: 1px solid #1a4480 !important; border-radius: .25rem !important; } #course-offerings .dataTables_wrapper .pagination .page-link:hover { background-color: #1a4480 !important; color: #ffffff !important; border-color: #1a4480 !important; } #course-offerings .dataTables_wrapper .pagination .page-item.active .page-link { background-color: #0b4778 !important; border-color: #0b4778 !important; color: #ffffff !important; } #course-offerings .dataTables_wrapper .pagination li.page-item:not(:first-child):not(:last-child) .page-link { border-radius: 0 !important; } #course-offerings .dataTables_wrapper .pagination li.page-item:first-child .page-link { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } #course-offerings .dataTables_wrapper .pagination li.page-item:last-child .page-link { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } #course-catalog .nav-pills .nav-link { /* Remove Bootstrap nav-link styles and use tab approach */ border: none !important; background: none !important; color: inherit !important; text-decoration: none !important; border-radius: 0 !important; } #course-catalog .nav-pills .nav-link:not(.active) { /* Inactive tab state */ background-color: transparent !important; border: none !important; border-bottom: 2px solid transparent !important; color: #565c65 !important; padding: 0.75rem 1.5rem 0.5rem 1.5rem !important; margin-right: 0 !important; margin-bottom: -2px !important; font-weight: 500 !important; position: relative; } #course-catalog .nav-pills .nav-link:not(.active):hover { background-color: #f8f9fa !important; color: #212529 !important; border-bottom-color: #adb5bd !important; } #course-catalog .nav-pills .nav-link.active { /* Active tab state */ background-color: #ffffff !important; border: none !important; border-bottom: 2px solid #005ea2 !important; color: #005ea2 !important; padding: 0.75rem 1.5rem 0.5rem 1.5rem !important; margin-right: 0 !important; margin-bottom: -2px !important; font-weight: 600 !important; position: relative; } #course-catalog .card-header-icon { font-size: 1.25rem; color: #0071bc; } /* Course Template USWDS Table Styling - Override DataTables */ #course-catalog .usa-table, #course-catalog table.dataTable { width: 100% !important; margin-top: 1rem; background-color: white !important; border-collapse: collapse !important; } /* Ensure dropdowns within results card are not clipped */ #course-catalog .usa-card, #course-catalog .usa-card__container, #course-catalog .usa-card__body { overflow: visible !important; position: relative !important; } /* ===== MY FAVORITES PAGE STYLING ===== */ /* Match course-catalog styling for consistency */ #my-favorites { /* match educator/instructor grid-container padding */ padding-left: 1rem !important; padding-right: 1rem !important; } /* My Favorites header text styling - match course-catalog */ #my-favorites .header-text { color: #1b1b1b !important; /* black */ } /* My Favorites USWDS Table Styling - mirror Listing/Offerings */ #my-favorites .usa-table, #my-favorites table.dataTable { width: 100% !important; margin-top: 1rem; background-color: white !important; border-collapse: collapse !important; } #my-favorites .align-with-cards { padding-left: 0 !important; margin-left: 0 !important; } /* MyFavorites search input styling - match course-catalog */ #my-favorites .usa-search .usa-input { padding-left: 2.5rem !important; } /* MyFavorites tabs styling - match course-catalog */ #my-favorites .nav-pills { background: none !important; display: inline-flex; border-bottom: 2px solid #dfe1e2 !important; } #my-favorites .nav-pills .nav-link { /* Remove Bootstrap nav-link styles and use tab approach */ border: none !important; background: none !important; color: inherit !important; text-decoration: none !important; border-radius: 0 !important; } #my-favorites .nav-pills .nav-link:not(.active) { /* Inactive tab state */ background-color: transparent !important; border: none !important; border-bottom: 2px solid transparent !important; color: #565c65 !important; padding: 0.75rem 1.5rem 0.5rem 1.5rem !important; margin-right: 0 !important; margin-bottom: -2px !important; font-weight: 500 !important; position: relative; } #my-favorites .nav-pills .nav-link:not(.active):hover { background-color: #f8f9fa !important; color: #212529 !important; border-bottom-color: #adb5bd !important; } #my-favorites .nav-pills .nav-link.active { /* Active tab state */ background-color: #ffffff !important; border: none !important; border-bottom: 2px solid #005ea2 !important; color: #005ea2 !important; padding: 0.75rem 1.5rem 0.5rem 1.5rem !important; margin-right: 0 !important; margin-bottom: -2px !important; font-weight: 600 !important; position: relative; } /* MyFavorites card styling */ #my-favorites .usa-card, #my-favorites .usa-card__container, #my-favorites .usa-card__body { overflow: visible !important; position: relative !important; } /* MyFavorites search form styling */ #my-favorites .usa-card__body .usa-search { display: flex; align-items: stretch; } /* Ensure all buttons have same height and proper alignment */ #my-favorites .usa-card__body button { /* height: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;*/ } /* Mobile responsive behavior for MyFavorites */ @media (max-width: 768px) { #my-favorites .usa-card__body .display-flex { flex-direction: column; gap: 0.5rem !important; } #my-favorites .usa-search { min-width: unset; width: 100%; } #my-favorites .d-md-none label[for="mobileFavoritesSelect"] { display: block !important; margin-bottom: .25rem !important; } #my-favorites #mobileFavoritesSelect { display: block !important; width: 100% !important; } } /* ===== MY FAVORITES PAGINATION STYLING - Match Course Catalog ===== */ #my-favorites .dataTables_wrapper .pagination { display: inline-flex !important; align-items: center !important; gap: .25rem !important; } #my-favorites .dataTables_wrapper .pagination .page-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 44px !important; min-height: 44px !important; padding: .5rem .75rem !important; color: #1a4480 !important; border: 1px solid #1a4480 !important; background-color: #ffffff !important; text-decoration: none !important; border-radius: .25rem !important; } #my-favorites .dataTables_wrapper .pagination .page-link:hover { background-color: #1a4480 !important; color: #ffffff !important; border-color: #1a4480 !important; } #my-favorites .dataTables_wrapper .pagination .page-item.active .page-link { background-color: #0b4778 !important; border-color: #0b4778 !important; color: #ffffff !important; } #my-favorites .dataTables_wrapper .pagination .page-item.disabled .page-link { background-color: #f5f6f7 !important; color: #9da3a7 !important; border-color: #dfe1e2 !important; cursor: not-allowed !important; } /* MyFavorites pagination CSS variables */ #my-favorites .dataTables_wrapper .pagination { --bs-pagination-bg: #ffffff; --bs-pagination-color: #1a4480; --bs-pagination-border-color: #1a4480; --bs-pagination-hover-bg: #1a4480; --bs-pagination-hover-color: #ffffff; --bs-pagination-active-bg: #0b4778; --bs-pagination-active-color: #ffffff; --bs-pagination-disabled-bg: #f5f6f7; --bs-pagination-disabled-color: #9da3a7; } #my-favorites .dataTables_wrapper .pagination .page-link { min-width: 44px !important; min-height: 44px !important; } /* Hard override: force dark-blue theme for Bootstrap pagination on MyFavorites */ #my-favorites .dt-container div.dataTables_paginate ul.pagination > li.page-item > a.page-link, #my-favorites div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.page-item > a.page-link { color: #1a4480 !important; border: 1px solid #1a4480 !important; background-color: #ffffff !important; text-decoration: none !important; } #my-favorites .dt-container div.dataTables_paginate ul.pagination > li.page-item > a.page-link:hover, #my-favorites .dt-container div.dataTables_paginate ul.pagination > li.page-item > a.page-link:focus, #my-favorites div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.page-item > a.page-link:hover, #my-favorites div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.page-item > a.page-link:focus { color: #ffffff !important; background-color: #1a4480 !important; border-color: #1a4480 !important; } #my-favorites .dt-container div.dataTables_paginate ul.pagination > li.page-item.active > a.page-link, #my-favorites div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.page-item.active > a.page-link { color: #ffffff !important; background-color: #0b4778 !important; border-color: #0b4778 !important; } #my-favorites .dt-container div.dataTables_paginate ul.pagination > li.page-item.disabled > a.page-link, #my-favorites div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.page-item.disabled > a.page-link { color: #9da3a7 !important; background-color: #f5f6f7 !important; border-color: #dfe1e2 !important; } #my-favorites div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item .page-link { color: #1a4480 !important; border: 1px solid #1a4480 !important; background-color: #ffffff !important; text-decoration: none !important; } #my-favorites div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item .page-link:hover, #my-favorites div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item .page-link:focus { color: #ffffff !important; background-color: #1a4480 !important; border-color: #1a4480 !important; } #my-favorites div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item.active .page-link { color: #ffffff !important; background-color: #0b4778 !important; border-color: #0b4778 !important; } #my-favorites div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item.disabled .page-link { color: #9da3a7 !important; background-color: #f5f6f7 !important; border-color: #dfe1e2 !important; } /* MyFavorites DataTables v2 pagination styling */ #my-favorites .dt-container .dt-paging ul.pagination .page-link { min-width: 44px !important; min-height: 44px !important; padding: .5rem .75rem !important; color: #1a4480 !important; background-color: #ffffff !important; border: 1px solid #1a4480 !important; text-decoration: none !important; } #my-favorites .dt-container .dt-paging ul.pagination .page-link:hover, #my-favorites .dt-container .dt-paging ul.pagination .page-link:focus { color: #ffffff !important; background-color: #1a4480 !important; border-color: #1a4480 !important; } #my-favorites .dt-container .dt-paging ul.pagination .page-item.active .page-link { color: #ffffff !important; background-color: #0b4778 !important; border-color: #0b4778 !important; } #my-favorites .dt-container .dt-paging ul.pagination .page-item.disabled .page-link { color: #9da3a7 !important; background-color: #f5f6f7 !important; border-color: #dfe1e2 !important; } /* MyFavorites DataTables v2 pagination CSS variables */ #my-favorites .dt-container .dt-paging ul.pagination { --bs-pagination-bg: #ffffff; --bs-pagination-color: #1a4480; --bs-pagination-border-color: #1a4480; --bs-pagination-hover-bg: #1a4480; --bs-pagination-hover-color: #ffffff; --bs-pagination-active-bg: #0b4778; --bs-pagination-active-color: #ffffff; --bs-pagination-disabled-bg: #f5f6f7; --bs-pagination-disabled-color: #9da3a7; } /* MyFavorites pagination border radius - connected buttons */ #my-favorites .dataTables_wrapper .pagination li.page-item:not(:first-child):not(:last-child) .page-link, #my-favorites .dt-container .dt-paging ul.pagination li.page-item:not(:first-child):not(:last-child) .page-link { border-radius: 0 !important; } /* Mobile layout for CourseTemplate listing cards - Override datatables.css mobile card styling */ @media (max-width: 767.98px) { /* Override the datatables.css mobile card styling for course catalog */ #course-catalog table.dataTable tbody tr { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 0 !important; display: table-row !important; } /* Override the datatables.css mobile styling for table cells */ #course-catalog table.dataTable tbody td { display: table-cell !important; border: 1px solid #dfe1e2 !important; padding: 1rem !important; position: relative !important; justify-content: initial !important; align-items: initial !important; } /* Ensure the table maintains its table layout on mobile */ #course-catalog table.dataTable, #course-catalog table.dataTable thead, #course-catalog table.dataTable tbody, #course-catalog table.dataTable th, #course-catalog table.dataTable td, #course-catalog table.dataTable tr { display: table !important; } #course-catalog table.dataTable thead { display: none !important; } #course-catalog table.dataTable tbody { display: table-row-group !important; } #course-catalog table.dataTable tr { display: table-row !important; } #course-catalog table.dataTable td { display: table-cell !important; } #course-catalog .usa-table--bordered tbody tr td { padding: 1rem !important; position: relative !important; } /* Mobile card structure - stack vertically */ #course-catalog .course-template-header { flex-direction: column !important; align-items: flex-start !important; width: 100% !important; } /* Course title section - title with clock icon */ #course-catalog .course-title { width: 100% !important; margin-bottom: 0.75rem !important; display: flex !important; align-items: center !important; gap: 0.5rem !important; padding-right: 3rem !important; /* Space for dropdown */ } /* Badges container - horizontal row */ #course-catalog .d-flex.align-items-center { width: 100% !important; flex-wrap: nowrap !important; justify-content: flex-start !important; margin-bottom: 0.75rem !important; gap: 0.125rem !important; order: 1 !important; } /* Hide created moment text on mobile, show only clock icon */ #course-catalog .text-muted.text-sm-end { display: none !important; } /* Show clock icon at the front of badges on mobile */ #course-catalog .bi-clock.text-primary { display: inline-flex !important; order: 0 !important; margin: 0 0.5rem 0 0 !important; color: #6c757d !important; font-size: 1rem !important; } /* Position dropdown at top right */ #course-catalog .dropdown { position: absolute !important; top: 1rem !important; right: 0 !important; margin: 0 !important; z-index: 10 !important; } /* Style dropdown button for mobile */ #course-catalog .dropdown .btn-ellipsis { border: none !important; background: transparent !important; padding: 0.25rem !important; } /* Badge styling for mobile */ #course-catalog .badge { font-size: .75rem !important; padding: .2rem .6rem !important; border-radius: 999px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; gap: 0.25rem !important; } /* Description positioning */ #course-catalog p.mb-1 { margin-bottom: 0 !important; line-height: 1.4 !important; color: #6c757d !important; /*order: 3 !important;*/ margin-top: 0.5rem !important; } /* Status badges (Draft, Pending, etc.) */ #course-catalog .badge.bg-primary, #course-catalog .badge.bg-danger { margin-bottom: 0.5rem !important; display: inline-block !important; order: 1 !important; } /* Hide like/notify icons on mobile */ #course-catalog .toggle-like, #course-catalog .toggle-notify-new-offering { /*display: none !important;*/ } } /* Global modal positioning - Push all modals down by 17% of viewport height */ .modal-dialog { margin-top: 17vh !important; margin-bottom: 17vh !important; } /* Ensure modal is still centered horizontally */ .modal-dialog-centered { margin-top: 17vh !important; margin-bottom: 17vh !important; } /* Mobile layout for MyFavorites page - Move stats below course title */ @media (max-width: 767.98px) { /* Target the MyFavorites page specifically */ #my-favorites .course-template-header { flex-direction: column !important; align-items: flex-start !important; width: 100% !important; } /* Course title section - full width */ #my-favorites .course-title { width: 100% !important; /*margin-bottom: 0.5rem !important;*/ display: block !important; } /* Stats section - move below title and make full width */ #my-favorites .d-flex.align-items-center { width: 100% !important; justify-content: flex-start !important; flex-wrap: wrap !important; margin-top: 0.5rem !important; order: 2 !important; } /* Individual stat badges - ensure proper spacing */ #my-favorites .badge.bg-success { margin-right: 0.5rem !important; margin-bottom: 0.25rem !important; } /* Hide the created date on mobile to save space */ #my-favorites .text-muted.text-sm-end { display: none !important; } /* Move the clock icon to the front of the stats section */ #my-favorites .bi-clock { order: -1 !important; margin-right: 0.5rem !important; margin-bottom: 0.25rem !important; color: #1e3a5f !important; } /* Ensure dropdown stays in top right */ #my-favorites .dropdown { position: absolute !important; top: 0.5rem !important; right: 0.5rem !important; margin: 0 !important; z-index: 10 !important; } /* Add padding to course title to avoid overlap with dropdown */ #my-favorites .course-title { padding-right: 3rem !important; } } /* Mobile layout for CourseOffering listing - Remove card styling to match desktop */ @media (max-width: 768px) { /* Override datatables.css mobile card styling for course offerings */ #course-offerings table tr, #course-offerings table.dataTable tr, #course-offerings .usa-table tr { margin-bottom: 0 !important; /* Remove spacing between rows */ background: transparent !important; /* Remove white background */ border-radius: 0 !important; /* Remove rounded corners */ box-shadow: none !important; /* Remove card shadow */ padding: 0 !important; /* Remove inner padding */ border-left: 0 !important; /* Hide left border */ border-right: 0 !important; /* Hide right border */ } /* Override td styling to remove card-like appearance */ #course-offerings table td, #course-offerings table.dataTable td, #course-offerings .usa-table td { padding-left: 0 !important; /* Remove left padding */ padding-right: 0 !important; /* Remove right padding */ border-left: 0 !important; /* Hide left border */ border-right: 0 !important; /* Hide right border */ background: transparent !important; /* Remove any background */ box-shadow: none !important; /* Remove any shadow */ } /* Ensure dropdown menus appear above other elements on mobile */ #course-offerings .dropdown > .dropdown-menu { z-index: 9999 !important; } #course-offerings .dropdown > .dropdown-menu.show[style] { z-index: 9999 !important; } /* Apply same mobile card removal styling to MyFavorites page */ #my-favorites table tr, #my-favorites table.dataTable tr, #my-favorites .usa-table tr { margin-bottom: 0 !important; /* Remove spacing between rows */ background: transparent !important; /* Remove white background */ border-radius: 0 !important; /* Remove rounded corners */ box-shadow: none !important; /* Remove card shadow */ padding: 0 !important; /* Remove inner padding */ border-left: 0 !important; /* Hide left border */ border-right: 0 !important; /* Hide right border */ } /* Override MyFavorites td styling to remove card-like appearance */ #my-favorites table td, #my-favorites table.dataTable td, #my-favorites .usa-table td { padding-left: 0 !important; /* Remove left padding */ padding-right: 0 !important; /* Remove right padding */ border-left: 0 !important; /* Hide left border */ border-right: 0 !important; /* Hide right border */ background: transparent !important; /* Remove any background */ box-shadow: none !important; /* Remove any shadow */ } } #my-favorites .dataTables_wrapper .pagination li.page-item:first-child .page-link, #my-favorites .dataTables_wrapper .pagination li.page-item.disabled:first-child .page-link, #my-favorites .dt-container .dt-paging ul.pagination li.page-item:first-child .page-link, #my-favorites .dt-container .dt-paging ul.pagination li.page-item.disabled:first-child .page-link { border-top-left-radius: .25rem !important; border-bottom-left-radius: .25rem !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } #my-favorites .dataTables_wrapper .pagination li.page-item:nth-child(2) .page-link, #my-favorites .dataTables_wrapper .pagination li.page-item.disabled:nth-child(2) .page-link, #my-favorites .dt-container .dt-paging ul.pagination li.page-item:nth-child(2) .page-link, #my-favorites .dt-container .dt-paging ul.pagination li.page-item.disabled:nth-child(2) .page-link { border-radius: 0 !important; } #my-favorites .dataTables_wrapper .pagination li.page-item:last-child .page-link, #my-favorites .dt-container .dt-paging ul.pagination li.page-item:last-child .page-link { border-top-right-radius: .25rem !important; border-bottom-right-radius: .25rem !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } #my-favorites .dataTables_wrapper .pagination li.page-item:nth-last-child(2) .page-link, #my-favorites .dt-container .dt-paging ul.pagination li.page-item:nth-last-child(2) .page-link { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* MyFavorites - Copy exact course-catalog styling */ #my-favorites .usa-table--bordered, #my-favorites table.dataTable.usa-table--bordered { border: none !important; border-radius: 0 !important; box-shadow: none !important; background-color: white !important; } #my-favorites .usa-table--bordered thead th, #my-favorites table.dataTable.usa-table--bordered thead th { background-color: #f8f9fa !important; border-bottom: 2px solid #dfe1e2 !important; border-right: 1px solid #dfe1e2 !important; padding: 1rem !important; font-weight: 600 !important; } #my-favorites .usa-table--bordered tbody tr, #my-favorites table.dataTable.usa-table--bordered tbody tr { background-color: white !important; border-bottom: 1px solid #e5e7eb !important; border-left: none !important; border-right: none !important; } /* Match vertical spacing above/below separators like Listing */ #my-favorites .usa-table--bordered tbody td, #my-favorites table.dataTable.usa-table--bordered tbody td { padding-top: 1rem !important; padding-bottom: 1rem !important; } #my-favorites .usa-table--bordered tbody tr:hover, #my-favorites table.dataTable.usa-table--bordered tbody tr:hover { background-color: #f8f9fa !important; } #my-favorites .usa-table--bordered tbody td, #my-favorites table.dataTable.usa-table--bordered tbody td { padding: 1rem !important; vertical-align: top !important; background-color: white !important; border-left: none !important; border-right: none !important; border-bottom: none !important; border-top: none !important; } #my-favorites .usa-table--bordered tbody td:first-child, #my-favorites table.dataTable.usa-table--bordered tbody td:first-child { padding-left: 0 !important; } #my-favorites .usa-table--bordered tbody td:last-child, #my-favorites table.dataTable.usa-table--bordered tbody td:last-child { padding-right: 0 !important; } #my-favorites .dataTables_wrapper { background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } #my-favorites .dataTables_wrapper table { margin-top: 0 !important; } #my-favorites table.dataTable tbody th, #my-favorites table.dataTable tbody td { border-bottom: none !important; border-left: none !important; border-right: none !important; } #my-favorites table.dataTable.no-footer { border-bottom: 2px solid #dfe1e2 !important; } /* Hide table header */ #my-favorites .usa-table thead, #my-favorites table.dataTable thead { display: none !important; } /* First-row top border to match Listing */ #my-favorites .usa-table--bordered tbody tr:first-child, #my-favorites table.dataTable.usa-table--bordered tbody tr:first-child { border-top: 1px solid #dfe1e2 !important; } /* Restore standard left padding inside the results card body */ #course-catalog .usa-card__body { padding-left: 1rem !important; padding-right: 1rem !important; } #course-catalog .dropdown-menu { z-index: 1055 !important; /* above card/table */ } #course-catalog .course-item:has(.dropdown-menu.show) { position: relative; z-index: 1100 !important; } #course-catalog .course-item .dropdown-menu.show { z-index: 1101 !important; } :is(#course-catalog, #my-favorites) .item-header .course-title { order: 1; flex: 1 1 auto; min-width: 0; } :is(#course-catalog, #my-favorites) .item-header .catalog-status--header-end { order: 2; margin-left: auto; margin-right: 0.5rem; flex: 0 0 auto; align-items: center; } :is(#course-catalog, #my-favorites) .item-header .card-actions-menu { order: 3; flex: 0 0 auto; } :is(#course-catalog, #my-favorites) .catalog-status-meta--submitted { margin-bottom: 0.35rem; } /* Course Catalog dropdown placement: directly below button */ #course-catalog .dropdown > .dropdown-menu { right: 0 !important; /* align menu's right edge with button's right edge */ left: auto !important; top: 100% !important; transform: none !important; /* menu extends to the left under the button */ margin-top: .25rem !important; } /* Prevent inline styles from Popper from pushing it elsewhere */ #course-catalog .dropdown > .dropdown-menu.show[style] { right: 0 !important; left: auto !important; top: 100% !important; transform: none !important; } /* Chevron dropdown button style matching dashboards */ #course-catalog .btn.btn-ellipsis.dropdown-toggle { background: #fff !important; border: 1px solid #ddd !important; /* match Educator */ color: #1b1b1b !important; width: 32px !important; /* match Educator */ height: 32px !important; min-width: 32px !important; min-height: 32px !important; border-radius: .375rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } #course-catalog .btn.btn-ellipsis.dropdown-toggle i.bi-chevron-down { display: inline-block !important; line-height: 1 !important; margin: 0 !important; position: relative !important; top: 0 !important; font-size: 18px !important; /* match Educator */ color: var(--uswds-accent-alt) !important; /* blue-60v */ } /* Global USWDS select styling for consistent 44px height across all pages */ .usa-select { min-height: 44px !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; } /* Shift built-in USWDS select arrow inward (no width/text padding change) */ .usa-select:not([multiple]) { /* Add custom chevron and position it */ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3e%3cpath d='M7.5 9.75l4.5 4.5 4.5-4.5' stroke='%23565c65' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-size: 1.65rem !important; /* larger chevron */ background-origin: padding-box !important; background-position: right 0.25rem center !important; /* nudge further right */ padding-right: 2.0rem !important; /* ensure clear space between text and chevron */ } /* Do not show focus ring/box-shadow when the chevron button is clicked */ #course-catalog .btn.btn-ellipsis:focus, #course-catalog .btn.btn-ellipsis:active:focus { outline: none !important; box-shadow: none !important; } #course-catalog .btn.btn-ellipsis.dropdown-toggle::after { display: none !important; } /* Hide Bootstrap's default dropstart caret injected via ::before */ #course-catalog .dropstart .dropdown-toggle::before { display: none !important; } #course-catalog .usa-table--bordered, #course-catalog table.dataTable.usa-table--bordered { /* Let the wrapper provide the card border so the top edge matches exactly */ border: none !important; border-radius: 0 !important; box-shadow: none !important; background-color: white !important; } #course-catalog .usa-table--bordered thead th, #course-catalog table.dataTable.usa-table--bordered thead th { background-color: #f8f9fa !important; border-bottom: 2px solid #dfe1e2 !important; border-right: 1px solid #dfe1e2 !important; padding: 1rem !important; font-weight: 600 !important; color: #1b1b1b !important; } #course-catalog .usa-table--bordered tbody tr, #course-catalog table.dataTable.usa-table--bordered tbody tr { background-color: white !important; /*border-bottom: 1px solid #e5e7eb !important;*/ border-left: none !important; border-right: none !important; } #course-catalog .usa-table--bordered tbody tr:hover, #course-catalog table.dataTable.usa-table--bordered tbody tr:hover { background-color: #f8f9fa !important; } #course-catalog .usa-table--bordered tbody td, #course-catalog table.dataTable.usa-table--bordered tbody td { padding: .5rem !important; /* match card body */ vertical-align: top !important; background-color: white !important; border-left: none !important; border-right: none !important; border-bottom: none !important; border-top: none !important; } /* Align the first cell content with the dropdown by trimming only its left padding */ #course-catalog .usa-table--bordered tbody td:first-child, #course-catalog table.dataTable.usa-table--bordered tbody td:first-child { padding-left: 0 !important; } /* Align the last cell content with the card edge by trimming right padding */ #course-catalog .usa-table--bordered tbody td:last-child, #course-catalog table.dataTable.usa-table--bordered tbody td:last-child { padding-right: 0 !important; } /* Give the DataTables wrapper the same border/radius/shadow as the search card */ #course-catalog .dataTables_wrapper { background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* Ensure the wrapper border is visible at the very top with no gaps */ #course-catalog .dataTables_wrapper table { margin-top: 0 !important; } /* Override DataTables default styling that removes borders */ #course-catalog table.dataTable tbody th, #course-catalog table.dataTable tbody td { border-bottom: none !important; border-left: none !important; border-right: none !important; } #course-catalog table.dataTable.no-footer { border-bottom: 2px solid #dfe1e2 !important; } /* Hide table header */ #course-catalog .usa-table thead, #course-catalog table.dataTable thead { display: none !important; } /* Course title styling - inherit exact USWDS dashboard styles */ #course-catalog .header-text { color: #1b1b1b !important; /* black */ } :is(#course-catalog, #my-favorites) .item-header { margin-bottom: 0rem !important; } :is(#course-catalog, #course-offerings, #my-favorites) .course-title { /* Make this behave exactly like dashboard h3.usa-collection__heading */ font-size: 1.125rem; line-height: 1.3; margin: 0; font-weight: 600; text-decoration: none; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } :is(#course-catalog, #my-favorites) .course-title a { /* Apply exact usa-link class styles */ color: inherit; text-decoration: inherit; } /* Force application of USWDS classes */ :is(#course-catalog, #my-favorites) .course-title a.usa-link { color: var(--uswds-accent-alt) !important; text-decoration: none !important; } :is(#course-catalog, #my-favorites) .course-title a.usa-link:hover { color: var(--uswds-accent) !important; } /* Mobile: full-width title; ellipsis menu top-right */ @media (max-width: 767.98px) { :is(#course-catalog, #my-favorites) .item-header { position: relative !important; gap: .2rem !important; margin-bottom: .125rem !important; } :is(#course-catalog, #my-favorites) .item-header .card-actions-menu { position: absolute !important; top: -.95rem !important; right: -.75rem !important; } :is(#course-catalog, #my-favorites) .item-header .card-actions-menu .dropdown { margin-left: 0 !important; } :is(#course-catalog, #my-favorites) .item-header .card-actions-menu .dropdown.ms-3 { margin-left: 0 !important; } :is(#course-catalog, #my-favorites) .item-header .card-actions-menu .btn-ellipsis { padding: 0 !important; } :is(#course-catalog, #my-favorites) .item-header:has(.card-actions-menu) .course-title { padding-right: 2.5rem !important; max-width: calc(100% - 2.5rem) !important; } :is(#course-catalog, #my-favorites) .item-header:not(:has(.card-actions-menu)) .course-title { padding-right: 0 !important; max-width: 100% !important; } :is(#course-catalog, #my-favorites) .course-description { margin-top: .125rem !important; } :is(#course-catalog, #my-favorites) .course-item .item-icon { display: none; } } /* Course template listing: meta below title (match course offering listing) */ :is(#course-catalog, #my-favorites) .course-item .catalog-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--text-secondary); margin-bottom: 0.25rem; padding-left: 0 !important; } :is(#course-catalog, #my-favorites) .course-item .meta-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; } :is(#course-catalog, #my-favorites) .course-item .meta-item { display: inline-flex; align-items: center; gap: 7px; min-width: 0; } :is(#course-catalog, #my-favorites) .course-item .meta-item i { color: #005a87; font-size: 1.05rem; flex: 0 0 auto; } :is(#course-catalog, #my-favorites) .course-item .meta-divider { color: #c8c9ce; } :is(#course-catalog, #my-favorites) .course-item .catalog-footer .catalog-status { display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap; } :is(#course-catalog, #my-favorites) .course-item .catalog-footer .catalog-status--footer-start { justify-self: start; } /* Course template listing card footer (mockup catalog-footer) */ :is(#course-catalog, #my-favorites) .course-item .catalog-footer { border-top: 1px solid #f0f0f2; margin-top: 14px; padding-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } :is(#course-catalog, #my-favorites) table.dataTable tbody td { overflow: visible !important; max-width: 0; width: 100%; } :is(#course-catalog, #my-favorites) .course-item { width: 100%; min-width: 0; max-width: 100%; } :is(#course-catalog, #my-favorites) .course-item .item-content { min-width: 0; max-width: 100%; } :is(#course-catalog, #my-favorites) .course-item .course-description { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } :is(#course-catalog, #my-favorites) .course-item .catalog-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; min-width: 0; color: var(--text-secondary); } :is(#course-catalog, #my-favorites) .course-item .catalog-stats .stat-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; min-width: 0; color: inherit; } :is(#course-catalog, #my-favorites) .course-item .catalog-stats .stat-item i { color: #6f747b; flex: 0 0 auto; } :is(#course-catalog, #my-favorites) .course-item .catalog-stats .stat-item strong { color: #5d636b; font-weight: 700; } :is(#course-catalog, #my-favorites) .course-item .catalog-stats .label-short { display: none; } :is(#course-catalog, #my-favorites) .course-item .catalog-actions { display: inline-flex !important; align-items: center; gap: 12px; justify-content: flex-end; flex-shrink: 0; margin-left: auto; } #course-catalog .course-details-actions { align-items: center; gap: 12px; justify-content: flex-end; flex-shrink: 0; margin-left: auto; } #course-catalog .course-details-card-header { flex-wrap: nowrap; gap: 0.5rem; width: 100%; } #course-catalog .course-details-card-header .usa-card__heading { flex: 1 1 auto; min-width: 0; } :is(#course-catalog, #my-favorites) .course-item .round-action-btn, #course-catalog .course-details-actions .round-action-btn { width: 44px; height: 44px; border-radius: 999px; border: 1px solid #b8d0e4; background: #eaf3fb; color: #005a87; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; } :is(#course-catalog, #my-favorites) .course-item .round-action-btn.inactive, #course-catalog .course-details-actions .round-action-btn.inactive { background: #fff; border-color: #dedee3; color: #6f747b; } :is(#course-catalog, #my-favorites) .course-item .round-action-btn:hover, :is(#course-catalog, #my-favorites) .course-item .round-action-btn:focus, #course-catalog .course-details-actions .round-action-btn:hover, #course-catalog .course-details-actions .round-action-btn:focus { background: #dfeef9; border-color: #8fb8d7; color: #003f63; outline: none; } @media (max-width: 767.98px) { :is(#course-catalog, #my-favorites) .course-item .catalog-footer { gap: 12px; flex-wrap: wrap; align-items: center; } :is(#course-catalog, #my-favorites) .course-item .catalog-footer .catalog-status--footer-start { order: -1; flex: 0 0 auto; } :is(#course-catalog, #my-favorites) .course-item .catalog-detail-meta { display: grid; gap: 7px; margin-bottom: 0.25rem; } :is(#course-catalog, #my-favorites) .course-item .meta-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: 8px; } :is(#course-catalog, #my-favorites) .course-item .meta-item { gap: 6px; } :is(#course-catalog, #my-favorites) .course-item .catalog-stats { display: flex; flex-wrap: wrap; gap: 10px 14px; overflow-x: auto; scrollbar-width: none; } :is(#course-catalog, #my-favorites) .course-item .catalog-stats::-webkit-scrollbar { display: none; } :is(#course-catalog, #my-favorites) .course-item .catalog-stats .stat-item { gap: 6px; } :is(#course-catalog, #my-favorites) .course-item .catalog-stats .label-full { display: none; } :is(#course-catalog, #my-favorites) .course-item .catalog-stats .label-short { display: inline; } :is(#course-catalog, #my-favorites) .course-item .catalog-stat-desktop-only { display: none !important; } #course-catalog .course-item .catalog-actions { display: none !important; } #my-favorites .course-item .catalog-actions--educator { display: inline-flex !important; } .course-item--pending-approval .catalog-stat-offerings { display: none !important; } #course-catalog .course-details-actions { display: inline-flex !important; } :is(#course-catalog, #my-favorites) .course-item .round-action-btn, #course-catalog .course-details-actions .round-action-btn { width: 40px; height: 40px; } } @media (max-width: 430px) { :is(#course-catalog, #my-favorites) .course-item .catalog-footer { gap: 13px; } } /* Course Offering listing card layout (Educator > Current Courses) */ #course-offerings .course-item .course-card-inner { display: flex; gap: 1.5rem; align-items: flex-start; width: 100%; flex: 1; min-width: 0; } #course-offerings .course-item .item-icon { flex: 0 0 auto; width: 2rem; font-size: 2rem; padding-top: 0.25rem; text-align: center; } #course-offerings .course-item .course-body { flex: 1; width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main quick" "actions actions"; column-gap: 24px; align-items: start; } #course-offerings .course-item .course-main { grid-area: main; min-width: 0; width: 100%; position: relative; z-index: 1; } #course-offerings .course-item .course-quick, #course-offerings .course-item .course-quick.header-actions { grid-area: quick; display: inline-flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 5px; min-width: 36px; padding-top: 0; justify-self: end; align-self: start; width: auto; max-width: 100%; flex-shrink: 0; flex-wrap: nowrap; margin-left: auto; position: relative; } #course-offerings #myCoursesTable .course-item .course-quick { z-index: 50; pointer-events: auto; isolation: isolate; } #course-offerings .course-item .course-quick .dropdown { position: relative !important; top: auto !important; right: auto !important; left: auto !important; margin: 0 !important; pointer-events: auto !important; } #course-offerings .course-item .course-quick .btn-ellipsis, #course-offerings .course-item .course-quick .course-expand-btn { pointer-events: auto !important; cursor: pointer !important; position: relative !important; z-index: 51 !important; touch-action: manipulation; } #course-offerings .course-item .course-quick .btn-ellipsis i, #course-offerings .course-item .course-quick .course-expand-btn i { pointer-events: none; } /* Instructor/Admin: status + menu stay pinned to the right even when description is short */ @media (min-width: 768px) { #course-offerings .course-item:not(.is-educator-view) .course-body { grid-template-columns: minmax(0, 1fr) auto; } #course-offerings .course-item:not(.is-educator-view) .course-quick { justify-self: end; align-self: start; } } #course-offerings .course-item .course-quick .course-offering-status--header-end { flex-shrink: 0; white-space: nowrap; align-items: center; } #course-offerings .course-item .course-quick .course-offering-status--header-end .badge, #course-offerings .course-item .course-quick .course-offering-status--header-end .status-tag { margin: 0; } #course-offerings .course-item .course-actions .course-offering-status { display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap; } #course-offerings .course-item .course-actions .course-offering-status--footer-start { justify-self: start; } #course-offerings .course-item .course-actions .course-offering-status .badge, #course-offerings .course-item .course-actions .course-offering-status .status-tag { margin: 0; } #course-offerings .course-item .course-expand-btn { border: 0; background: transparent; color: #003f63; line-height: 1; padding: 0; box-shadow: none !important; } #course-offerings .course-item h2.course-title { font-size: 1.125rem; line-height: 1.3; font-weight: 600; } #course-offerings .course-item .course-description { padding-left: 0 !important; margin-left: 0 !important; width: 100%; } #course-offerings .course-item .course-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--text-secondary); margin-bottom: 0.25rem; padding-left: 0 !important; margin-left: 0 !important; width: 100%; } #course-offerings .course-item .meta-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; } @media (min-width: 768px) { #course-offerings .course-item .course-meta > .meta-row + .meta-row::before { content: '|'; color: #c8c9ce; margin-right: 4px; } } #course-offerings .course-item .meta-item { display: inline-flex; align-items: center; gap: 7px; min-width: 0; } #course-offerings .course-item .meta-item i { color: #005a87; font-size: 1.05rem; flex: 0 0 auto; } #course-offerings .course-item .meta-divider { color: #c8c9ce; } #course-offerings .course-item .course-actions { grid-area: actions; border-top: 1px solid var(--background-light); margin-top: 0; padding-top: 0.75rem; padding-left: 0 !important; margin-left: 0 !important; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; width: 100%; } /* Educator: status in footer; ellipsis in top-right quick column */ #course-offerings .course-item.is-educator-view .course-body { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main quick" "actions actions"; } #course-offerings .course-item.is-educator-view .course-actions { justify-content: flex-start; } #course-offerings .course-item.is-educator-view .course-actions .course-offering-status:empty { display: none !important; width: 0; margin: 0; padding: 0; } #course-offerings .course-item.is-educator-view .course-actions .course-offering-status:not(:has(*)) { display: none !important; } #course-offerings .course-item .action-item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; } #course-offerings .course-item .action-item i { font-size: 1.05rem; color: #6f747b; flex: 0 0 auto; } #course-offerings .course-item .action-item strong { color: #5d636b; font-weight: 600; } #course-offerings .course-item .label-short { display: none; } #course-offerings .course-item .meta-item .label-short { display: none; } @media (max-width: 767.98px) { #course-offerings .course-item .course-card-inner { gap: 0; } #course-offerings .course-item .item-icon { display: none; } /* Chevron + desktop status stay top-right (aligned with title row) */ #course-offerings .course-item .course-body, #course-offerings .course-item.is-educator-view .course-body { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main quick" "actions actions"; column-gap: 12px; align-items: start; } #course-offerings .course-item .course-quick, #course-offerings .course-item .course-quick.header-actions { grid-area: quick; align-self: start; justify-self: end; } #course-offerings .course-item .course-title { padding-right: 3rem !important; } #course-offerings .course-item .meta-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: 8px; } #course-offerings .course-item .meta-item { gap: 6px; } #course-offerings .course-item .meta-delivery, #course-offerings .course-item .meta-credit { white-space: nowrap; } #course-offerings .course-item .meta-instructor span, #course-offerings .course-item .meta-date > span { overflow-wrap: anywhere; } #course-offerings .course-item .meta-item .label-full { display: none; } #course-offerings .course-item .meta-item .label-short { display: inline; } #course-offerings .course-item .meta-row { flex-wrap: wrap; } #course-offerings .course-item .course-quick .course-offering-status--header-end { display: none !important; } #course-offerings .course-item .course-actions { margin-top: 0; padding-top: 0.75rem; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px; overflow-x: auto; scrollbar-width: none; } /* Status at start of footer row on mobile (hidden in header via d-md-none) */ #course-offerings .course-item .course-actions .course-offering-status--footer-start { order: -1; flex: 0 0 auto; } #course-offerings .course-item .course-actions::-webkit-scrollbar { display: none; } #course-offerings .course-item .action-item { gap: 5px; } #course-offerings .course-item .label-full { display: none; } #course-offerings .course-item .label-short { display: inline; } } @media (max-width: 420px) { #course-offerings .course-item .course-actions { gap: 8px; } } /* Mobile: catalog footer date stays hidden (d-none d-md-inline); educator aside may span row */ /* DataTable controls styling */ #course-catalog .dataTables_wrapper .dataTables_length, #course-catalog .dataTables_wrapper .dataTables_filter, #course-catalog .dataTables_wrapper .dataTables_info, #course-catalog .dataTables_wrapper .dataTables_paginate { margin: 1rem 0; } /* Course catalog DataTables pagination - dark blue theme */ #course-catalog .dataTables_wrapper .dataTables_paginate { display: inline-flex !important; gap: .25rem !important; align-items: center !important; } #course-catalog .dataTables_wrapper .dataTables_paginate .paginate_button, #course-catalog .dataTables_wrapper .dataTables_paginate .paginate_button a, #course-catalog table.dataTable .dataTables_paginate .paginate_button, #course-catalog table.dataTable .dataTables_paginate .paginate_button a { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: .5rem .75rem !important; margin: 0 !important; min-width: 44px !important; min-height: 44px !important; border: 1px solid #1a4480 !important; /* darker blue outline */ background-color: #ffffff !important; color: #1a4480 !important; text-decoration: none !important; border-radius: .25rem !important; font-weight: 400 !important; line-height: 1.1 !important; box-shadow: none !important; cursor: pointer !important; transition: background-color .15s ease-in-out, color .15s ease-in-out, border-color .15s ease-in-out !important; } /* Course catalog DataTables pagination (Bootstrap integration) - dark blue theme */ #course-catalog .dataTables_wrapper .pagination { display: inline-flex !important; align-items: center !important; gap: .25rem !important; } #course-catalog .dataTables_wrapper .pagination .page-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 44px !important; min-height: 44px !important; padding: .5rem .75rem !important; color: #1a4480 !important; background-color: #ffffff !important; border: 1px solid #1a4480 !important; border-radius: .25rem !important; text-decoration: none !important; line-height: 1 !important; } #course-catalog .dataTables_wrapper .pagination .page-link:hover { background-color: #1a4480 !important; color: #ffffff !important; border-color: #1a4480 !important; } #course-catalog .dataTables_wrapper .pagination .page-item.active .page-link { background-color: #0b4778 !important; border-color: #0b4778 !important; color: #ffffff !important; } #course-catalog .dataTables_wrapper .pagination .page-item.disabled .page-link { background-color: #f5f6f7 !important; color: #9da3a7 !important; border-color: #dfe1e2 !important; cursor: not-allowed !important; } #course-catalog .dataTables_wrapper .dataTables_paginate .paginate_button:hover, #course-catalog .dataTables_wrapper .dataTables_paginate .paginate_button a:hover, #course-catalog table.dataTable .dataTables_paginate .paginate_button:hover, #course-catalog table.dataTable .dataTables_paginate .paginate_button a:hover { background-color: #1a4480 !important; color: #ffffff !important; border-color: #1a4480 !important; } #course-catalog .dataTables_wrapper .dataTables_paginate .paginate_button.current, #course-catalog .dataTables_wrapper .dataTables_paginate .paginate_button.current a, #course-catalog table.dataTable .dataTables_paginate .paginate_button.current, #course-catalog table.dataTable .dataTables_paginate .paginate_button.current a { background-color: #1a4480 !important; color: #ffffff !important; border-color: #1a4480 !important; } #course-catalog .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, #course-catalog .dataTables_wrapper .dataTables_paginate .paginate_button.disabled a, #course-catalog table.dataTable .dataTables_paginate .paginate_button.disabled, #course-catalog table.dataTable .dataTables_paginate .paginate_button.disabled a { background-color: #f5f6f7 !important; color: #9da3a7 !important; border-color: #dfe1e2 !important; cursor: not-allowed !important; } #course-catalog .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, #course-catalog .dataTables_wrapper .dataTables_paginate .paginate_button.disabled a:hover, #course-catalog table.dataTable .dataTables_paginate .paginate_button.disabled:hover, #course-catalog table.dataTable .dataTables_paginate .paginate_button.disabled a:hover { background-color: #f5f6f7 !important; color: #9da3a7 !important; border-color: #dfe1e2 !important; } /* Bootstrap 5 pagination variable overrides (scoped) */ #course-catalog .dataTables_wrapper .pagination { --bs-pagination-bg: #ffffff; --bs-pagination-color: #1a4480; --bs-pagination-border-color: #1a4480; --bs-pagination-hover-bg: #1a4480; --bs-pagination-hover-color: #ffffff; --bs-pagination-hover-border-color: #1a4480; } /* System Message pagination styling - matching course catalog */ #SystemMessagePanel .dataTables_wrapper .dataTables_paginate .paginate_button, #SystemMessagePanel .dataTables_wrapper .dataTables_paginate .paginate_button a, #SystemMessagePanel table.dataTable .dataTables_paginate .paginate_button, #SystemMessagePanel table.dataTable .dataTables_paginate .paginate_button a { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: .5rem .75rem !important; margin: 0 !important; min-width: 44px !important; min-height: 44px !important; border: 1px solid #1B4480 !important; background-color: #ffffff !important; color: #1B4480 !important; text-decoration: none !important; border-radius: .25rem !important; font-weight: 400 !important; line-height: 1.1 !important; box-shadow: none !important; cursor: pointer !important; transition: background-color .15s ease-in-out, color .15s ease-in-out, border-color .15s ease-in-out !important; } #SystemMessagePanel .dataTables_wrapper .dataTables_paginate .paginate_button:hover, #SystemMessagePanel .dataTables_wrapper .dataTables_paginate .paginate_button a:hover, #SystemMessagePanel table.dataTable .dataTables_paginate .paginate_button:hover, #SystemMessagePanel table.dataTable .dataTables_paginate .paginate_button a:hover { background: #1B4480 !important; color: #ffffff !important; border-color: #1B4480 !important; } #SystemMessagePanel .dataTables_wrapper .dataTables_paginate .paginate_button.current, #SystemMessagePanel .dataTables_wrapper .dataTables_paginate .paginate_button.current a, #SystemMessagePanel table.dataTable .dataTables_paginate .paginate_button.current, #SystemMessagePanel table.dataTable .dataTables_paginate .paginate_button.current a, #SystemMessagePanel .dataTables_wrapper .pagination .page-item.active .page-link { background-color: #1B4480 !important; color: #ffffff !important; border-color: #1B4480 !important; background-image: none !important; } #SystemMessagePanel .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, #SystemMessagePanel .dataTables_wrapper .dataTables_paginate .paginate_button.disabled a, #SystemMessagePanel table.dataTable .dataTables_paginate .paginate_button.disabled, #SystemMessagePanel table.dataTable .dataTables_paginate .paginate_button.disabled a { background-color: #f5f6f7 !important; color: #9da3a7 !important; border-color: #dfe1e2 !important; cursor: not-allowed !important; } #SystemMessagePanel .dataTables_wrapper .pagination { --bs-pagination-active-bg: #1B4480 !important; --bs-pagination-active-border-color: #1B4480 !important; --bs-pagination-active-color: #ffffff !important; --bs-pagination-hover-bg: #1B4480 !important; --bs-pagination-hover-border-color: #1B4480 !important; --bs-pagination-hover-color: #ffffff !important; --bs-pagination-color: #1B4480 !important; --bs-pagination-border-color: #1B4480 !important; --bs-pagination-active-bg: #0b4778; --bs-pagination-active-color: #ffffff; --bs-pagination-active-border-color: #1a4480; --bs-pagination-disabled-bg: #f5f6f7; --bs-pagination-disabled-color: #9da3a7; --bs-pagination-disabled-border-color: #dfe1e2; --bs-pagination-border-radius: .25rem; } /* Ensure minimum hit area regardless of Bootstrap styles */ #course-catalog .dataTables_wrapper .pagination .page-link { min-width: 44px !important; min-height: 44px !important; } /* Hard override: force dark-blue theme for Bootstrap pagination on Course Catalog */ #course-catalog .dt-container div.dataTables_paginate ul.pagination > li.page-item > a.page-link, #course-catalog div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.page-item > a.page-link { color: #1a4480 !important; border: 1px solid #1a4480 !important; background-color: #ffffff !important; text-decoration: none !important; } #course-catalog .dt-container div.dataTables_paginate ul.pagination > li.page-item > a.page-link:hover, #course-catalog .dt-container div.dataTables_paginate ul.pagination > li.page-item > a.page-link:focus, #course-catalog div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.page-item > a.page-link:hover, #course-catalog div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.page-item > a.page-link:focus { color: #ffffff !important; background-color: #1a4480 !important; border-color: #1a4480 !important; } #course-catalog .dt-container div.dataTables_paginate ul.pagination > li.page-item.active > a.page-link, #course-catalog div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.page-item.active > a.page-link { color: #ffffff !important; background-color: #0b4778 !important; border-color: #0b4778 !important; } #course-catalog .dt-container div.dataTables_paginate ul.pagination > li.page-item.disabled > a.page-link, #course-catalog div.dataTables_wrapper div.dataTables_paginate ul.pagination > li.page-item.disabled > a.page-link { color: #9da3a7 !important; background-color: #f5f6f7 !important; border-color: #dfe1e2 !important; } #course-catalog div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item .page-link { color: #1a4480 !important; border: 1px solid #1a4480 !important; background-color: #ffffff !important; text-decoration: none !important; } #course-catalog div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item .page-link:hover, #course-catalog div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item .page-link:focus { color: #ffffff !important; background-color: #1a4480 !important; border-color: #1a4480 !important; } #course-catalog div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item.active .page-link { color: #ffffff !important; background-color: #0b4778 !important; border-color: #0b4778 !important; } #course-catalog div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item.disabled .page-link { color: #9da3a7 !important; background-color: #f5f6f7 !important; border-color: #dfe1e2 !important; } /* DataTables v2 structure (.dt-container / .dt-paging) - enforce dark blue theme */ #course-catalog .dt-container .dt-paging ul.pagination .page-link { min-width: 44px !important; min-height: 44px !important; padding: .5rem .75rem !important; color: #1a4480 !important; background-color: #ffffff !important; border: 1px solid #1a4480 !important; border-radius: .25rem !important; text-decoration: none !important; line-height: 1 !important; } #course-catalog .dt-container .dt-paging ul.pagination .page-link:hover, #course-catalog .dt-container .dt-paging ul.pagination .page-link:focus { color: #ffffff !important; background-color: #1a4480 !important; border-color: #1a4480 !important; } #course-catalog .dt-container .dt-paging ul.pagination .page-item.active .page-link { color: #ffffff !important; background-color: #0b4778 !important; border-color: #0b4778 !important; } #course-catalog .dt-container .dt-paging ul.pagination .page-item.disabled .page-link { color: #9da3a7 !important; background-color: #f5f6f7 !important; border-color: #dfe1e2 !important; } /* Variable overrides scoped to dt-paging */ #course-catalog .dt-container .dt-paging ul.pagination { --bs-pagination-bg: #ffffff; --bs-pagination-color: #1a4480; --bs-pagination-border-color: #1a4480; --bs-pagination-hover-bg: #1a4480; --bs-pagination-hover-color: #ffffff; --bs-pagination-hover-border-color: #1a4480; --bs-pagination-active-bg: #0b4778; --bs-pagination-active-color: #ffffff; --bs-pagination-active-border-color: #1a4480; --bs-pagination-disabled-bg: #f5f6f7; --bs-pagination-disabled-color: #9da3a7; --bs-pagination-disabled-border-color: #dfe1e2; --bs-pagination-border-radius: .25rem; } /* Remove border radius for inner pagination buttons; keep only outer corners rounded */ #course-catalog .dataTables_wrapper .pagination li.page-item:not(:first-child):not(:last-child) .page-link, #course-catalog .dt-container .dt-paging ul.pagination li.page-item:not(:first-child):not(:last-child) .page-link { border-radius: 0 !important; } #course-catalog .dataTables_wrapper .pagination li.page-item:first-child .page-link, #course-catalog .dataTables_wrapper .pagination li.page-item.disabled:first-child .page-link, #course-catalog .dt-container .dt-paging ul.pagination li.page-item:first-child .page-link, #course-catalog .dt-container .dt-paging ul.pagination li.page-item.disabled:first-child .page-link { border-top-left-radius: .25rem !important; border-bottom-left-radius: .25rem !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* Second button remains square via inner rule; ensure no right rounding bleed */ #course-catalog .dataTables_wrapper .pagination li.page-item:nth-child(2) .page-link, #course-catalog .dataTables_wrapper .pagination li.page-item.disabled:nth-child(2) .page-link, #course-catalog .dt-container .dt-paging ul.pagination li.page-item:nth-child(2) .page-link, #course-catalog .dt-container .dt-paging ul.pagination li.page-item.disabled:nth-child(2) .page-link { border-radius: 0 !important; } #course-catalog .dataTables_wrapper .pagination li.page-item:last-child .page-link, #course-catalog .dt-container .dt-paging ul.pagination li.page-item:last-child .page-link { border-top-right-radius: .25rem !important; border-bottom-right-radius: .25rem !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } /* Also remove right rounding on the second-to-last (next) button */ #course-catalog .dataTables_wrapper .pagination li.page-item:nth-last-child(2) .page-link, #course-catalog .dt-container .dt-paging ul.pagination li.page-item:nth-last-child(2) .page-link { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* Fix entries per page dropdown truncation for CourseTemplate */ #course-catalog .dt-footer .dataTables_length select, #course-catalog .dt-footer .dt-length select, #course-catalog .dt-footer select.form-select, #course-catalog .dt-footer select.form-select-sm, #course-catalog .dataTables_wrapper .dataTables_length select, #course-catalog .dataTables_wrapper select.form-select, #course-catalog .dataTables_wrapper select.form-select-sm { height: 44px !important; min-height: 44px !important; min-width: 70px !important; width: auto !important; max-width: none !important; } /* ===== Course Offerings pagination (DataTables v2 and v1 wrappers) - mirror catalog ===== */ #course-offerings .dt-container .dt-paging ul.pagination .page-link, #course-offerings div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item .page-link { min-width: 44px !important; min-height: 44px !important; padding: .5rem .75rem !important; color: #1a4480 !important; background-color: #ffffff !important; border: 1px solid #1a4480 !important; border-radius: .25rem !important; text-decoration: none !important; line-height: 1 !important; } #course-offerings .dt-container .dt-paging ul.pagination .page-link:hover, #course-offerings .dt-container .dt-paging ul.pagination .page-link:focus, #course-offerings div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item .page-link:hover, #course-offerings div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item .page-link:focus { color: #ffffff !important; background-color: #1a4480 !important; border-color: #1a4480 !important; } #course-offerings .dt-container .dt-paging ul.pagination .page-item.active .page-link, #course-offerings div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item.active .page-link { color: #ffffff !important; background-color: #0b4778 !important; border-color: #0b4778 !important; } #course-offerings .dt-container .dt-paging ul.pagination .page-item.disabled .page-link, #course-offerings div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item.disabled .page-link { color: #9da3a7 !important; background-color: #f5f6f7 !important; border-color: #dfe1e2 !important; } #course-offerings .dt-container .dt-paging ul.pagination, #course-offerings div.dataTables_wrapper div.dataTables_paginate ul.pagination { --bs-pagination-bg: #ffffff; --bs-pagination-color: #1a4480; --bs-pagination-border-color: #1a4480; --bs-pagination-hover-bg: #1a4480; --bs-pagination-hover-color: #ffffff; --bs-pagination-hover-border-color: #1a4480; --bs-pagination-active-bg: #0b4778; --bs-pagination-active-color: #ffffff; --bs-pagination-active-border-color: #1a4480; --bs-pagination-disabled-bg: #f5f6f7; --bs-pagination-disabled-color: #9da3a7; --bs-pagination-disabled-border-color: #dfe1e2; --bs-pagination-border-radius: .25rem; } #course-offerings .dataTables_wrapper .pagination li.page-item:not(:first-child):not(:last-child) .page-link, #course-offerings .dt-container .dt-paging ul.pagination li.page-item:not(:first-child):not(:last-child) .page-link { border-radius: 0 !important; } #course-offerings .dataTables_wrapper .pagination li.page-item:first-child .page-link, #course-offerings .dt-container .dt-paging ul.pagination li.page-item:first-child .page-link { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } #course-offerings .dataTables_wrapper .pagination li.page-item:last-child .page-link, #course-offerings .dt-container .dt-paging ul.pagination li.page-item:last-child .page-link { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } /* Position the bottom DataTables controls for Course Offerings like Course Templates */ #course-offerings .dt-footer { display: grid !important; grid-template-columns: auto 1fr auto !important; /* length | info | paginate */ align-items: center !important; gap: .75rem !important; margin-top: .5rem !important; width: 100% !important; } #course-offerings .dt-footer .dataTables_info, #course-offerings .dt-footer .dataTables_length, #course-offerings .dt-footer .dataTables_paginate { float: none !important; } #course-offerings .dt-footer .dataTables_paginate { justify-self: end !important; } #course-offerings .dt-footer .dataTables_length label { margin: 0 !important; display: flex !important; align-items: center !important; gap: .5rem !important; } #course-offerings .dt-footer .dataTables_length select, #course-offerings .dt-footer .dt-length select, #course-offerings .dt-footer select.form-select, #course-offerings .dt-footer select.form-select-sm { height: 44px !important; min-height: 44px !important; min-width: 70px !important; width: auto !important; max-width: none !important; } #course-offerings .dt-footer .dataTables_length, #course-offerings .dt-footer .dt-length { grid-column: 1; display: flex !important; align-items: center !important; gap: .25rem !important; padding-right: 0 !important; margin-right: 0 !important; } #course-offerings .dt-footer .dataTables_length::after, #course-offerings .dt-footer .dt-length::after { content: "|"; color: #9aa0a6 !important; opacity: .8; display: inline-block !important; line-height: 44px !important; padding: 0 .375rem !important; } #course-offerings .dt-footer .dataTables_info, #course-offerings .dt-footer .dt-info { grid-column: 2; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; min-height: 44px !important; line-height: 1.2 !important; } #course-offerings .dt-footer .dataTables_paginate, #course-offerings .dt-footer .dt-paging { grid-column: 3; display: flex !important; /* Ensure pagination is visible */ visibility: visible !important; } /* Ensure pagination is always visible for CourseOfferingList component */ #course-offerings .dt-footer .dataTables_paginate, #course-offerings .dt-footer .dt-paging { display: inline-flex !important; gap: .25rem !important; align-items: center !important; visibility: visible !important; } /* MyCourses pagination footer - same structure as Listing */ /* Ensure dt-footer with myCoursesTable_info uses grid layout */ #course-offerings .usa-card .dt-footer { display: grid !important; grid-template-columns: auto 1fr auto !important; /* length | info | paginate */ align-items: center !important; gap: .75rem !important; margin-top: .5rem !important; width: 100% !important; position: static !important; /* Ensure it's not absolutely positioned */ float: none !important; } #course-offerings .usa-card .dt-footer .dataTables_length { grid-column: 1 !important; display: flex !important; align-items: center !important; gap: 0 !important; /* Remove gap to control spacing manually */ padding-right: 0 !important; margin-right: 0 !important; position: static !important; /* Override site.css absolute positioning */ float: none !important; right: auto !important; /* Override site.css */ top: auto !important; /* Override site.css */ } #course-offerings .usa-card .dt-footer .dataTables_length select { height: 44px !important; min-height: 44px !important; min-width: 70px !important; width: auto !important; max-width: none !important; position: static !important; float: none !important; margin-right: .75rem !important; /* Equal spacing on right of select */ } #course-offerings .usa-card .dt-footer .dataTables_length::after { content: "|" !important; color: #9aa0a6 !important; opacity: .8; display: inline-block !important; line-height: 44px !important; padding: 0 !important; margin: 0 .75rem !important; /* Equal spacing on both sides of separator */ } #course-offerings .usa-card .dt-footer #myCoursesTable_info { grid-column: 2 !important; position: static !important; float: none !important; } #course-offerings .usa-card .dt-footer #myCoursesTable_paginate { grid-column: 3 !important; position: static !important; float: none !important; } /* Ensure pagination buttons show icons, not text */ #course-offerings #myCoursesTable_paginate .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border-width: 0 !important; } @media (max-width: 640px) { /* Mobile: Stack dropdown+label on first row, pagination on second row, both centered */ #course-offerings .dt-footer { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; justify-items: center !important; gap: .5rem !important; } /* First row: dropdown and label together, centered */ #course-offerings .dt-footer .dataTables_length, #course-offerings .dt-footer .dt-length, #course-offerings .dt-footer .dataTables_info, #course-offerings .dt-footer .dt-info { justify-self: center !important; grid-column: 1 !important; } /* Second row: pagination buttons, centered */ #course-offerings .dt-footer .dataTables_paginate, #course-offerings .dt-footer .dt-paging { grid-column: 1 !important; justify-self: center !important; margin-top: 0 !important; } /* For MyCourses specifically: use flexbox row with wrap */ #course-offerings .usa-card .dt-footer { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: .5rem !important; } /* First row: dropdown and label together - both inline, centered */ #course-offerings .usa-card .dt-footer .dataTables_length { display: inline-flex !important; margin-right: 0 !important; } #course-offerings .usa-card .dt-footer #myCoursesTable_info { display: inline-flex !important; margin-left: 0 !important; } /* Second row: pagination buttons - force to new line by taking full width */ #course-offerings .usa-card .dt-footer #myCoursesTable_paginate { flex-basis: 100% !important; /* Force to new line */ display: flex !important; justify-content: center !important; margin-top: 0 !important; } } /* ===== MyCourses Pagination (match CourseOfferings styling) ===== */ #myCoursesTable_paginate { display: inline-flex !important; gap: .25rem !important; align-items: center !important; } #myCoursesTable_paginate ul.pagination li.page-item .page-link { min-width: 44px !important; min-height: 44px !important; padding: .5rem .75rem !important; color: #1a4480 !important; background-color: #ffffff !important; border: 1px solid #1a4480 !important; border-radius: .25rem !important; text-decoration: none !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } #myCoursesTable_paginate ul.pagination li.page-item .page-link:hover, #myCoursesTable_paginate ul.pagination li.page-item .page-link:focus { color: #ffffff !important; background-color: #1a4480 !important; border-color: #1a4480 !important; display: flex !important; align-items: center !important; justify-content: center !important; } #myCoursesTable_paginate ul.pagination li.page-item.active .page-link { color: #ffffff !important; background-color: #0b4778 !important; border-color: #0b4778 !important; display: flex !important; align-items: center !important; justify-content: center !important; } #myCoursesTable_paginate ul.pagination li.page-item.disabled .page-link { color: #9da3a7 !important; background-color: #f5f6f7 !important; border-color: #dfe1e2 !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Ensure icons inside pagination buttons are centered */ #myCoursesTable_paginate ul.pagination li.page-item .page-link i, #myCoursesTable_paginate ul.pagination li.page-item .page-link .bi { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; } #myCoursesTable_paginate ul.pagination { --bs-pagination-bg: #ffffff; --bs-pagination-color: #1a4480; --bs-pagination-border-color: #1a4480; --bs-pagination-hover-bg: #1a4480; --bs-pagination-hover-color: #ffffff; --bs-pagination-hover-border-color: #1a4480; --bs-pagination-active-bg: #0b4778; --bs-pagination-active-color: #ffffff; --bs-pagination-active-border-color: #1a4480; --bs-pagination-disabled-bg: #f5f6f7; --bs-pagination-disabled-color: #9da3a7; --bs-pagination-disabled-border-color: #dfe1e2; --bs-pagination-border-radius: .25rem; } #myCoursesTable_paginate ul.pagination li.page-item:not(:first-child):not(:last-child) .page-link { border-radius: 0 !important; } #myCoursesTable_paginate ul.pagination li.page-item:first-child .page-link { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } #myCoursesTable_paginate ul.pagination li.page-item:last-child .page-link { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } /* ===== Course Template Filter Offcanvas (USWDS look) ===== */ #_CourseTemplateFilterOffcanvas { --bs-offcanvas-width: 420px; } #_CourseTemplateFilterOffcanvas .offcanvas-header { padding: .75rem 1rem !important; } #_CourseTemplateFilterOffcanvas .offcanvas-body { padding: 1rem !important; } #_CourseTemplateFilterOffcanvas .offcanvas-body { overflow-y: auto; max-height: calc(100vh - 4.5rem); } #_CourseTemplateFilterOffcanvas .usa-form-group { margin-bottom: 1rem !important; } #_CourseTemplateFilterOffcanvas .usa-label { font-weight: 600; color: var(--uswds-accent); } #_CourseTemplateFilterOffcanvas .usa-select[multiple] { min-height: 8rem; } #_CourseTemplateFilterOffcanvas .usa-button { min-height: 44px; } #_CourseTemplateFilterOffcanvas .actions { width:100%; text-align:right; } #_CourseTemplateFilterOffcanvas .actions .inner { display:inline-flex; gap:.5rem; } /* Improve readability inside multi-select lists */ #_CourseTemplateFilterOffcanvas .usa-select[multiple] option { line-height: 1.6 !important; padding-top: .2rem; /* some UAs ignore padding, line-height handles most */ padding-bottom: .2rem; } /* Theming: selected options use brand blue with white text */ #_CourseTemplateFilterOffcanvas .usa-select[multiple] option:checked { background-color: var(--uswds-accent-alt) !important; /* blue-60v */ color: #ffffff !important; } /* WebKit fallback to override native gradient */ #_CourseTemplateFilterOffcanvas .usa-select[multiple] option:checked { background: var(--uswds-accent-alt) linear-gradient(0deg, var(--uswds-accent-alt), var(--uswds-accent-alt)) !important; } #_CourseOfferingFilterOffcanvas { --bs-offcanvas-width: 420px; } #_CourseOfferingFilterOffcanvas .offcanvas-header { padding: .75rem 1rem !important; } #_CourseOfferingFilterOffcanvas .offcanvas-body { padding: 1rem !important; } #_CourseOfferingFilterOffcanvas .offcanvas-body { overflow-y: auto; max-height: calc(100vh - 4.5rem); } #_CourseOfferingFilterOffcanvas .usa-form-group { margin-bottom: 1rem !important; } #_CourseOfferingFilterOffcanvas .usa-label { display:block; font-weight: 600; color: var(--uswds-accent); margin-bottom: .25rem; } #_CourseOfferingFilterOffcanvas .usa-select[multiple] { min-height: 8rem; } #_CourseOfferingFilterOffcanvas .usa-button { min-height: 44px; } #_CourseOfferingFilterOffcanvas .usa-select, #_CourseOfferingFilterOffcanvas .usa-input { width: 100% !important; } /* Date picker sizing to match selects */ #_CourseOfferingFilterOffcanvas .usa-date-picker { position: relative !important; } #_CourseOfferingFilterOffcanvas .usa-date-picker .usa-input { min-height: 44px !important; padding-right: 2.75rem !important; padding-left: 0.75rem !important; } #_CourseOfferingFilterOffcanvas .usa-date-picker__button { position: absolute !important; top: 50% !important; right: .25rem !important; /* nudge closer to the edge */ transform: translateY(-50%); height: 44px !important; width: 44px !important; min-height: 44px !important; z-index: 3 !important; display: block !important; cursor: pointer !important; border: 0 !important; background-color: transparent !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3e%3crect x='3' y='5' width='18' height='16' rx='2' ry='2' stroke='%23565c65' stroke-width='1.6'/%3e%3cline x1='3' y1='9' x2='21' y2='9' stroke='%23565c65' stroke-width='1.6'/%3e%3cline x1='8' y1='3.5' x2='8' y2='6.5' stroke='%23565c65' stroke-width='1.6' stroke-linecap='round'/%3e%3cline x1='16' y1='3.5' x2='16' y2='6.5' stroke='%23565c65' stroke-width='1.6' stroke-linecap='round'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 20px !important; } /* Hide the native calendar indicator; use our custom button for consistent placement */ #_CourseOfferingFilterOffcanvas input[type="date"] { position: relative; z-index: 1; } #_CourseOfferingFilterOffcanvas input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important; } /* Improve readability inside multi-select lists */ #_CourseOfferingFilterOffcanvas .usa-select[multiple] option { line-height: 1.6 !important; padding-top: .2rem; padding-bottom: .2rem; } /* Theming: selected options use brand blue with white text */ #_CourseOfferingFilterOffcanvas .usa-select[multiple] option:checked { background-color: var(--uswds-accent-alt) !important; color: #ffffff !important; } /* WebKit fallback to override native gradient */ #_CourseOfferingFilterOffcanvas .usa-select[multiple] option:checked { background: var(--uswds-accent-alt) linear-gradient(0deg, var(--uswds-accent-alt), var(--uswds-accent-alt)) !important; } #page-title { margin-left: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; line-height: 1.2 !important; } /* Fix back arrow button shrinking in mobile mode */ .icon-back-btn { flex-shrink: 0 !important; min-width: 30px !important; min-height: 30px !important; width: 30px !important; height: 30px !important; } /* Ensure title text can wrap when long, but button stays fixed */ header .align-with-cards > div > div:first-child { flex-wrap: wrap !important; gap: 0.75rem !important; } header .align-with-cards > div > div:first-child h1 { flex: 1 !important; min-width: 0 !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } /* Reorder Educator dashboard sections for mobile - CSS Grid approach */ @media (max-width: 1023px) { /* Target the specific Educator dashboard grid container */ #educator-grid { display: flex !important; flex-direction: column !important; } /* Put sidebar before main on mobile */ #educator-sidebar { order: 1 !important; } #educator-main { order: 2 !important; } /* Ensure full width */ #educator-grid > .grid-col-12 { width: 100% !important; max-width: 100% !important; flex: none !important; } /* Inside sidebar: Profile first, then Tasks, then Notifications */ #educator-sidebar #section-profile { order: 1 !important; } #educator-sidebar #section-tasks { order: 2 !important; } #educator-sidebar #section-notifications { order: 3 !important; } /* Make sidebar a column flex to apply orders */ #educator-sidebar { display: flex !important; flex-direction: column !important; } } /* Educator sidebar: increase vertical spacing between cards (desktop and mobile) */ #educator-sidebar > section + section { margin-top: 0.75rem !important; } /* My Courses header: match Profile Summary header height */ #section-courses .usa-card__header { padding-top: .25rem !important; padding-bottom: .25rem !important; min-height: auto !important; align-items: center !important; justify-content: space-between !important; } /* Fix See All link positioning and prevent height increase */ #section-courses .usa-card__header .usa-link { display: flex !important; align-items: center !important; padding: 0 !important; margin: 0 !important; margin-left: auto !important; line-height: 1.2 !important; height: auto !important; font-size: 0.875rem !important; } /* Notifications header: match Profile Summary header height */ #section-notifications .usa-card__header { padding-top: .25rem !important; padding-bottom: .25rem !important; min-height: auto !important; align-items: center !important; /*justify-content: space-between !important;*/ } /* Fix Notifications See All link positioning */ #section-notifications .usa-card__header .usa-link { display: flex !important; align-items: center !important; padding: 0 !important; margin: 0 !important; margin-left: auto !important; line-height: 1.2 !important; height: auto !important; font-size: 0.875rem !important; } /* Newly Added Courses header: match Profile Summary header height */ #section-new .usa-card__header { padding-top: .25rem !important; padding-bottom: .25rem !important; min-height: auto !important; align-items: center !important; justify-content: space-between !important; } /* Fix Newly Added Courses See All link positioning */ #section-new .usa-card__header .usa-link { display: flex !important; align-items: center !important; padding: 0 !important; margin: 0 !important; margin-left: auto !important; line-height: 1.2 !important; height: auto !important; font-size: 0.875rem !important; } /* ===== INSTRUCTOR DASHBOARD HEADER FIXES ===== */ /* Instructor Progress header: match Profile Summary header height */ #section-progress .usa-card__header { padding-top: .25rem !important; padding-bottom: .25rem !important; min-height: auto !important; align-items: center !important; justify-content: space-between !important; } /* Fix Instructor Progress See All link positioning */ #section-progress .usa-card__header .usa-link { display: flex !important; align-items: center !important; padding: 0 !important; margin: 0 !important; margin-left: auto !important; line-height: 1.2 !important; height: auto !important; font-size: 0.875rem !important; } /* Instructor Upcoming header: match Profile Summary header height */ #section-upcoming .usa-card__header { padding-top: .25rem !important; padding-bottom: .25rem !important; min-height: auto !important; align-items: center !important; justify-content: space-between !important; } /* Fix Instructor Upcoming See All link positioning */ #section-upcoming .usa-card__header .usa-link { display: flex !important; align-items: center !important; padding: 0 !important; margin: 0 !important; margin-left: auto !important; line-height: 1.2 !important; height: auto !important; font-size: 0.875rem !important; } /* Instructor Notifications header: match Profile Summary header height */ #instructor-dashboard #section-notifications .usa-card__header { padding-top: .25rem !important; padding-bottom: .25rem !important; min-height: auto !important; align-items: center !important; /*justify-content: space-between !important;*/ } /* Fix Instructor Notifications See All link positioning */ #instructor-dashboard #section-notifications .usa-card__header .usa-link { display: flex !important; align-items: center !important; padding: 0 !important; margin: 0 !important; margin-left: auto !important; line-height: 1.2 !important; height: auto !important; font-size: 0.875rem !important; } /* Instructor Inbox header: match Profile Summary header height */ #section-inbox .usa-card__header { padding-top: .25rem !important; padding-bottom: .25rem !important; min-height: auto !important; align-items: center !important; justify-content: space-between !important; } /* Fix Instructor Inbox See All link positioning */ #section-inbox .usa-card__header .usa-link { display: flex !important; align-items: center !important; padding: 0 !important; margin: 0 !important; margin-left: auto !important; line-height: 1.2 !important; height: auto !important; font-size: 0.875rem !important; } /* ===== ADMIN DASHBOARD HEADER FIXES ===== */ /* Admin Templates header: match Profile Summary header height */ #section-templates .usa-card__header { padding-top: .25rem !important; padding-bottom: .25rem !important; min-height: auto !important; align-items: center !important; justify-content: space-between !important; } /* Fix Admin Templates See All link positioning */ #section-templates .usa-card__header .usa-link { display: flex !important; align-items: center !important; padding: 0 !important; margin: 0 !important; margin-left: auto !important; line-height: 1.2 !important; height: auto !important; font-size: 0.875rem !important; } /* Admin Offerings header: match Profile Summary header height */ #section-offerings .usa-card__header { padding-top: .25rem !important; padding-bottom: .25rem !important; min-height: auto !important; align-items: center !important; justify-content: space-between !important; } /* Fix Admin Offerings See All link positioning */ #section-offerings .usa-card__header .usa-link { display: flex !important; align-items: center !important; padding: 0 !important; margin: 0 !important; margin-left: auto !important; line-height: 1.2 !important; height: auto !important; font-size: 0.875rem !important; } /* Admin Employment header: match Profile Summary header height */ #section-employment .usa-card__header { padding-top: .25rem !important; padding-bottom: .25rem !important; min-height: auto !important; align-items: center !important; justify-content: space-between !important; } /* Fix Admin Employment See All link positioning */ #section-employment .usa-card__header .usa-link { display: flex !important; align-items: center !important; padding: 0 !important; margin: 0 !important; margin-left: auto !important; line-height: 1.2 !important; height: auto !important; font-size: 0.875rem !important; } /* Admin Notifications header: match Profile Summary header height */ #admin-dashboard #section-notifications .usa-card__header { padding-top: .25rem !important; padding-bottom: .25rem !important; min-height: auto !important; align-items: center !important; /*justify-content: space-between !important;*/ } /* Admin Inbox header: match Profile Summary header height */ #admin-dashboard #section-inbox .usa-card__header { padding-top: .25rem !important; padding-bottom: .25rem !important; min-height: auto !important; align-items: center !important; justify-content: space-between !important; } /* Fix Admin Inbox See All link positioning */ #admin-dashboard #section-inbox .usa-card__header .usa-link { display: flex !important; align-items: center !important; padding: 0 !important; margin: 0 !important; margin-left: auto !important; line-height: 1.2 !important; height: auto !important; font-size: 0.875rem !important; } .pill { display: inline-flex; align-items: center; border-radius: 999px; padding: .05rem .55rem; font-size: .72rem; font-weight: 600; border: 1px solid #d3d9e5; background: #f5f7fb; color: #374151; } .pill-session { background: #eef4ff; border-color: #d4e0ff; color: #1d3f8f; } .pill-poc { background: #e7f2ff; border-color: #c6ddff; color: var(--theme-blue); } /* Shared days badge */ .days-badge { font-size: .7rem; border-radius: 999px; padding: .15rem .6rem; background: #eef4ff; color: #1d3f8f; border: 1px solid #d4e0ff; display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap; } .days-badge i { font-size: .85rem; } .mini-meta-row { font-size: .95rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .mini-meta-row i { color: #8b9bb3; } /* ===== MINIMAL UTILITY OVERRIDES ===== */ /* Only override utilities that need specific styling adjustments */ .text-semibold { font-weight: 600; } /* Ensure card containers allow dropdown overflow */ .usa-card-group { overflow: visible; } .usa-card-group .usa-card__container, .usa-card-group .usa-card__body, #my-courses-grid .usa-card__container, #my-courses-grid .usa-card__body { position: relative !important; overflow: visible !important; } /* Force action menu to render above card content */ #my-courses-grid .card-action-menu { position: static !important; /* sit in the flex row, not overlay */ top: auto !important; right: auto !important; margin-left: .5rem !important; z-index: 1 !important; } #my-courses-grid .card-action-menu .dropdown-menu { z-index: 1050 !important; } /* Nudge My Courses action menu towards the top-right inside the card */ #my-courses-grid .card-action-menu { align-self: flex-start !important; margin-top: -0.25rem !important; /* move up slightly */ margin-right: -0.25rem !important; /* pull closer to right edge */ } /* My Courses line-by-line details */ #my-courses-grid .card-lines .card-description { margin: .15rem 0 !important; color: #475569 !important; } /* Spacing above Load more rows */ .load-more-row { margin-top: 1rem !important; padding-top: .25rem !important; /* border-top: 1px solid #e5e7eb !important; */ display: flex; justify-content: flex-end !important; } /* Profile summary name/role stacking */ .profile-name { font-size: 1.0625rem; /* slightly larger */ line-height: 1.2; } .profile-role { margin-top: .125rem; color: #1b1b1b; /* darker for AAA contrast */ } /* Instructor My Courses: tighter inner padding to match Educator */ #instructor-my-courses .usa-card__body { padding: .75rem 1rem !important; } /* Instructor My Courses: match 3-dot button style with Educator */ #instructor-my-courses .card-action-menu .dropdown-toggle { width: 36px !important; height: 36px !important; padding: 0 !important; border: 1px solid #ddd !important; background: #fff !important; color: #1b1b1b !important; /* improved contrast */ border-radius: .5rem !important; /* consistent square-ish corners */ display: flex !important; align-items: center !important; justify-content: center !important; } #instructor-my-courses .card-action-menu .dropdown-toggle::after { display: none !important; } #instructor-my-courses .usa-card { overflow: visible !important; } /* Standardize 3-dot buttons for Educator (My Courses) and Instructor (My Teaching) */ #my-courses-grid .card-action-menu .dropdown-toggle, #instructor-my-courses .card-action-menu .dropdown-toggle { width: 32px !important; height: 32px !important; padding: 0 !important; border: 1px solid #ddd !important; background: #fff !important; color: #666 !important; border-radius: .375rem !important; display: flex !important; align-items: center !important; justify-content: center !important; } #my-courses-grid .card-action-menu .dropdown-toggle::after, #instructor-my-courses .card-action-menu .dropdown-toggle::after { display:none !important; } /* Center the inner glyph for Instructor 3-dot button */ #instructor-my-courses .card-action-menu .dropdown-toggle i, #instructor-my-courses .card-action-menu .dropdown-toggle span { display: block !important; line-height: 1 !important; font-size: 16px !important; margin: 0 !important; } /* Center the chevron for Educator dropdown buttons - match Instructor dashboard exactly */ #section-courses .card-action-menu .dropdown-toggle { display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } #section-courses .card-action-menu .dropdown-toggle i { display: block !important; line-height: 1 !important; margin: 0 !important; } /* Quick Stats grid: force 4 columns on desktop */ @media (min-width: 1024px) { #quick-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } /* Quick Actions styling: theme background with white text/icons */ #quick-actions .usa-card { background: var(--uswds-accent-alt) !important; border-color: var(--uswds-accent-alt) !important; } #quick-actions .usa-card__body { color: #fff !important; } #quick-actions .usa-card__body .usa-card__heading { color: #fff !important; } #quick-actions i { color: #fff !important; } #quick-actions a { color: #fff !important; } #quick-actions a:hover { color: #fff !important; text-decoration: underline; } /* Notifications: center trash icon, transparent square button */ #admin-dashboard .trash-btn { width: 32px !important; height: 32px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: 0 !important; } #admin-dashboard .trash-btn i { line-height: 1 !important; font-size: 1rem !important; } /* Notifications severity backgrounds (apply globally via component wrapper) */ #notificationView .usa-collection__item[data-severity="action"], #notificationView .usa-collection__item[data-severity="warning"] { background-color: #fff7e6 !important; /* soft warning */ } #notificationView .usa-collection__item[data-severity="error"] { background-color: #fdecea !important; /* soft error */ } #notificationView .usa-collection__item[data-severity="default"] { background-color: #ffffff !important; } /* Ensure text contrast on action/warning backgrounds */ #notificationView .usa-collection__item[data-severity="action"] .usa-collection__body p, #notificationView .usa-collection__item[data-severity="warning"] .usa-collection__body p { color: #1b1b1b !important; /* dark text for WCAG AA contrast on yellow background */ } #notificationView .usa-collection__item[data-severity="action"] .notif-meta, #notificationView .usa-collection__item[data-severity="warning"] .notif-meta { color: #374151 !important; /* darker gray for timestamp on yellow background */ } /* Trash icon placement and style */ #notificationView .usa-collection__item { /*padding-bottom: 2.25rem !important;*/ } #notificationView .usa-collection__item .trash-btn { /*position: absolute !important;*/ right: .75rem !important; bottom: .5rem !important; width: 30px !important; height: 30px !important; color: #dc3545 !important; /* red */ cursor: pointer !important; } #notificationView .usa-collection__item .trash-btn i { font-size: 20px !important; line-height: 1 !important; } /* Notifications: tighten text line spacing */ #notificationView .usa-collection__item .usa-collection__body { padding: 0 !important; } #notificationView .usa-collection__item .usa-collection__body p { margin: 0 !important; line-height: 1.6 !important; } #notificationView .usa-collection__item .usa-collection__body p + p { margin-top: .125rem !important; color: #6b7280 !important; } /* Inline leading icon spacing */ #notificationView .usa-collection__item .notif-lead { margin-right: .375rem; display: inline-block; } /* Admin dashboard inbox: match instructor dashboard layout exactly */ #admin-dashboard .usa-collection .inbox-item { position: relative !important; padding-bottom: 0 !important; } #admin-dashboard .usa-collection .inbox-item .inbox-age { position: absolute !important; right: 1rem !important; top: 0.75rem !important; color: #6b7280 !important; font-size: 0.875rem; } #admin-dashboard .usa-collection .inbox-item .usa-collection__heading { padding-left: 0 !important; margin-left: 0 !important; } #admin-dashboard .usa-collection .inbox-item .usa-link { padding-left: 0 !important; margin-left: 0 !important; } /* Admin dashboard inbox: tighten spacing between From and content */ #admin-dashboard .usa-collection .inbox-item .usa-collection__heading { margin-bottom: 0 !important; } /* Instructor dashboard inbox: match admin dashboard layout exactly */ #instructor-dashboard .usa-collection .inbox-item { position: relative !important; /*padding-bottom: 0.75rem !important;*/ } #instructor-dashboard .usa-collection .inbox-item .inbox-age { position: absolute !important; right: 1rem !important; top: 0.75rem !important; color: #6b7280 !important; font-size: 0.875rem; } #instructor-dashboard .usa-collection .inbox-item .usa-collection__heading { padding-left: 0 !important; margin-left: 0 !important; align-items:center !important; } #instructor-dashboard .usa-collection .inbox-item .usa-link { padding-left: 0 !important; margin-left: 0 !important; } /* Instructor dashboard inbox: tighten spacing between From and content */ #instructor-dashboard .usa-collection .inbox-item .usa-collection__heading { margin-bottom: 0 !important; } /* Instructor dashboard inbox: spacing tweaks */ #instructor-dashboard .usa-collection .usa-collection__item { /*padding: .5rem 1rem !important;*/ } #instructor-dashboard .usa-collection .usa-collection__heading { font-size: 1rem !important; } #instructor-dashboard .usa-collection .usa-collection__body p { margin: 0 !important; line-height: 1.6 !important; } /* Instructor dashboard: hide inner headers from embedded dashboard components */ #instructor-dashboard .aa-card-header { display: none !important; } #instructor-dashboard .aa-card-body { padding: 0 !important; border: 0 !important; background: transparent !important; } #instructor-dashboard .list-group { margin: 0 !important; } .course-dashboard-title { white-space: normal; word-wrap: break-word; overflow-wrap: break-word; max-width: 100%; } /* Hide inner headers from embedded dashboard components so only the USWDS card header shows */ #admin-dashboard .aa-card-header { display: none !important; } #admin-dashboard .aa-card-body { padding: 0 !important; border: 0 !important; background: transparent !important; } #admin-dashboard .list-group { margin: 0 !important; } /* Admin Dashboard Quick Actions - Mobile Stacking */ @media (max-width: 640px) { #admin-dashboard #quick-actions { flex-direction: column !important; gap: 0.75rem !important; } /* Add spacing between Quick Actions section and content below it */ #admin-dashboard .usa-section:first-of-type { margin-bottom: 0.75rem !important; } /* Tighten gap between notifications card and content below it */ #admin-dashboard #section-notifications { margin-bottom: 0.25rem !important; } } /* Improve contrast for muted notices (e.g., no sessions message) */ #instructor-dashboard .text-muted { color: #1b1b1b !important; } #instructor-dashboard .usa-card .text-muted { color: #1b1b1b !important; } /* Fix contrast for admin dashboard muted text */ #admin-dashboard .text-muted { color: #1b1b1b !important; } #admin-dashboard .usa-card .text-muted { color: #1b1b1b !important; } .admin-dasboard-empty-message { margin-left: 2.4rem !important; } /* Tighten vertical spacing in profile dropdown */ .profile-dropdown { padding: 0.75rem !important; } .profile-top { margin-bottom: 0.5rem !important; } .profile-view-link { margin-bottom: 0.5rem !important; } .profile-hr { margin: 0.5rem 0 !important; } /* Reduce excessive vertical spacing in admin dashboard pending templates cards */ #admin-dashboard #pending-templates-grid .usa-card__body { min-height: 130px !important; padding: 1.5rem !important; } #admin-dashboard #pending-templates-grid .usa-collection__heading { margin-bottom: 1.5rem !important; } #admin-dashboard #pending-templates-grid .text-right { bottom: 0.75rem !important; } /* Apply same spacing improvements to Pending Offerings Review */ #admin-dashboard #pending-offerings-grid .usa-card__body { min-height: 130px !important; padding: 1.5rem !important; } #admin-dashboard #pending-offerings-grid .usa-collection__heading { margin-bottom: 1.5rem !important; } #admin-dashboard #pending-offerings-grid .text-right { bottom: 0.75rem !important; } /* Pending employment cards: long worksite names wrap as one block with the icon; reserve space for days badge */ #pending-employment-panel .emp-item .card-lines--pending-employment { position: relative; min-width: 0; padding-right: 5.25rem; padding-bottom: 0.25rem; } #pending-employment-panel .emp-item .card-lines--pending-employment .rc-right { position: absolute; right: 0; bottom: 0; } #pending-employment-panel .emp-item .mini-meta-row-worksite { align-items: flex-start; flex-wrap: nowrap; align-items:center; } #pending-employment-panel .emp-item .mini-meta-row-worksite > i.bi { flex-shrink: 0; margin-top: 0.15rem; } #pending-employment-panel .emp-item .mini-meta-row-worksite .pending-emp-worksite-text { min-width: 0; flex: 1 1 auto; line-height: 1.35; overflow-wrap: anywhere; white-space: nowrap !important; } /* Ensure inbox message preview meets AAA line-height */ .usa-collection__item.inbox-item .usa-collection__body p { line-height: 1.6 !important; } /* Hard override for instructor dashboard lists */ #instructor-dashboard .usa-collection__item p { line-height: 1.7 !important; } /* ===== Icon Selection States ===== */ /* Reusable class for selected thumbs up and bell icons - matches the color of right-side badges */ span.badge.bg-icon-selected { background: #0b4778 !important; /* Same as bg-success override - use 'background' not 'background-color' */ color: #fff !important; border: 1px solid #083755 !important; /* Same border as bg-success override */ } /* ===== Accessibility: Enhanced target sizes (scoped) ===== */ /* Keep profile button accessible without altering main nav sizing */ .profile-btn { min-height: 44px !important; } /* Load-more buttons */ .load-more-row .usa-button { min-height: 44px !important; } /* Collection list links (Inbox/Notifications) */ #notificationView .usa-collection__item a { display: inline-flex !important; align-items: center !important; min-height: 30px !important; padding: .25rem .5rem !important; } #admin-dashboard .usa-collection__item a { display: inline-flex !important; align-items: center !important; min-height: 44px !important; padding: .25rem .5rem !important; } /* Header top nav links (ELMS, Reports, etc.) from county header include */ .pagecontent header a, .pagecontent nav .nav-menu a { min-height: 44px !important; display: inline-flex !important; align-items: center !important; padding: .4rem .75rem !important; /* match _MenuBar default */ } .pagecontent .profile-btn { min-height: 44px !important; display: inline-flex !important; align-items: center !important; padding: .4rem 0rem !important; /* match _MenuBar default */ } @media (max-width: 640px) { /* MyCourses (list-group) mobile layout: top-right chevron, status above description */ #course-offerings .list-group-item { position: relative !important; } #course-offerings .list-group-item > .d-flex.w-100.justify-content-between { display: block !important; } #course-offerings .list-group-item .d-flex.align-items-center.gap-2 { display: block !important; margin-top: .25rem !important; } #course-offerings .list-group-item .d-flex.align-items-center.gap-2 .badge { display: inline-block !important; margin-bottom: .25rem !important; } #course-offerings .list-group-item .dropdown { position: absolute !important; top: .75rem !important; right: .75rem !important; margin: 0 !important; z-index: 10 !important; } /* Reduce header text size on mobile for better mobile experience */ h1 { font-size: 1.35rem !important; } /* Listing pages responsive spacing - consistent across all four pages */ #course-offerings .align-with-cards, #course-catalog .align-with-cards, #my-favorites .align-with-cards { margin-bottom: 0.5rem !important; } #course-offerings .usa-section, #course-catalog .usa-section, #my-favorites .usa-section { padding-top: 0.5rem !important; margin-top: 0 !important; } /* Ensure MyCourses page has proper gap on mobile - multiple approaches */ #course-offerings header.align-with-cards { margin-bottom: 0.25rem !important; } /* Force gap after header on MyCourses page mobile */ #course-offerings .col-lg-12:first-of-type { margin-bottom: 0.25rem !important; } /* Reduce spacing for CourseOffering/Listing page status-bar on mobile */ #course-offerings .status-bar { margin-bottom: 0 !important; margin-top: 0 !important; padding: 0 !important; } /* Override Bootstrap gutters and spacing for status-bar */ #course-offerings .status-bar.row { margin: 0 !important; } /* Break credit information to new line on mobile for MyCourses ONLY */ /* Target only the CourseOfferingSummaryItem component used in MyCourses */ #course-offerings .list-group-item .course-meta { display: flex !important; flex-direction: column !important; gap: 0.1rem !important; } /* Each course-meta-line should be on its own line on mobile */ #course-offerings .list-group-item .course-meta-line { display: block !important; margin-bottom: 0.05rem !important; } /* Indent the second line to align with the first line text (ignoring the icon) */ /* Only apply to non-webinar courses that have a second line */ #course-offerings .list-group-item .course-meta-line:nth-child(2) { padding-left: 1.5rem !important; /* Match the icon width + margin */ } /* Ensure webinar courses (single line) don't get indented */ #course-offerings .list-group-item .course-meta:has(.course-meta-line:only-child) .course-meta-line { padding-left: 0 !important; } } /* Desktop styles - keep original inline layout */ @media (min-width: 641px) { /* Ensure course-meta-line divs display inline on desktop to maintain original layout */ /* Target only the CourseOfferingSummaryItem component used in MyCourses */ #course-offerings .list-group-item .course-meta-line { display: inline !important; margin-bottom: 0 !important; } /* Add bullet separator between the two lines on desktop */ #course-offerings .list-group-item .course-meta-line:first-child::after { content: " • " !important; } } @media (max-width: 640px) { /* Override Bootstrap gutters and spacing for status-bar */ #course-offerings .status-bar.row { --bs-gutter-x: 0 !important; --bs-gutter-y: 0 !important; } /* Remove any default row spacing */ #course-offerings .status-bar .row { margin: 0 !important; } /* Give MyCourses page more spacing between header and card on mobile */ #course-offerings .usa-section:first-of-type { margin-top: 0 !important; } /* ===== ADMIN DASHBOARD MOBILE REORDERING ===== */ /* Use CSS Grid to reorder sections across columns on mobile */ #admin-dashboard .grid-row { display: grid !important; grid-template-columns: 1fr !important; grid-template-areas: "quick-actions" "notifications" "templates" "offerings" "employment" "inbox" "quick-stats" !important; gap: 0 !important; } /* Make grid columns transparent so sections can be positioned by grid-area */ #admin-dashboard .grid-col-12 { display: contents !important; } /* Position sections using grid-area */ #admin-dashboard .grid-col-12:first-child .usa-section:nth-child(1) { grid-area: quick-actions !important; } #admin-dashboard #section-notifications { grid-area: notifications !important; } #admin-dashboard #section-templates { grid-area: templates !important; } #admin-dashboard #section-offerings { grid-area: offerings !important; } #admin-dashboard #section-employment { grid-area: employment !important; } #admin-dashboard #section-inbox { grid-area: inbox !important; } #admin-dashboard .grid-col-12:first-child .usa-section:nth-child(5) { grid-area: quick-stats !important; } /* ===== INSTRUCTOR DASHBOARD MOBILE REORDERING ===== */ /* Use CSS Grid to reorder sections across columns on mobile */ #instructor-dashboard .grid-row { display: grid !important; grid-template-columns: 1fr !important; grid-template-areas: "quick-actions" "notifications" "progress" "upcoming" "inbox" !important; gap: 0.75rem 0 !important; } /* Make grid columns transparent so sections can be positioned by grid-area */ #instructor-dashboard .grid-col-12 { display: contents !important; } /* Position sections using grid-area */ #instructor-dashboard .usa-section:has(.usa-card__header:has(.bi-lightning-charge)) { grid-area: quick-actions !important; } #instructor-dashboard #section-notifications { grid-area: notifications !important; } #instructor-dashboard #section-progress { grid-area: progress !important; } #instructor-dashboard #section-upcoming { grid-area: upcoming !important; } #instructor-dashboard #section-inbox { grid-area: inbox !important; } } /* ===== REGISTRATION NEEDED PAGE STYLING ===== */ /* Enhanced styling for the Educator RegistrationNeeded page - matches dashboard styling */ /* Button styling within the registration card */ #registration-content .usa-button { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; } /* Mobile responsiveness for registration button */ @media (max-width: 768px) { #registration-content .usa-button { width: 100% !important; justify-content: flex-start !important; } } /* ===== ACCOUNT INACTIVE PAGE STYLING ===== */ /* Account Inactive Page Styles - USWDS Styling Override */ #account-inactive { /* Match Educator dashboard layout - no max-width constraint */ margin: 0 auto; padding: 0 1rem; } /* Page header styling */ #account-inactive header { margin-bottom: 0; } #account-inactive h1 { font-size: 1.625rem; margin: .5rem 0 0; color: var(--uswds-accent); } /* Card styling - using USWDS classes */ #account-inactive .usa-card { margin-bottom: 1.5rem; } /* Card header styling - using USWDS classes */ #account-inactive .usa-card__header { padding: .75rem 1rem; border-bottom: 1px solid #dfe1e2; font-weight: 600; background-color: #f5f6f7; border-top-left-radius: .5rem; border-top-right-radius: .5rem; display: flex; align-items: center; min-height: 3.25rem; } /* Card heading styling */ #account-inactive .usa-card__heading { font-size: 1.125rem; font-weight: 600; color: var(--uswds-accent); margin: 0; } /* Card header icon styling */ #account-inactive .card-header-icon { font-size: 1.25rem; margin-right: 0.5rem; color: var(--uswds-accent-alt); flex-shrink: 0; } /* Card body styling - using USWDS classes */ #account-inactive .usa-card__body { padding: 1.5rem; } /* Button styling */ #account-inactive .view-profile-btn { font-size: 1rem; font-weight: 600; padding: 0.75rem 1.5rem; border: 1px solid var(--uswds-accent-alt); background-color: var(--uswds-accent-alt); color: #ffffff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none !important; margin-left: 0.5rem; } #account-inactive .view-profile-btn:hover { background-color: var(--uswds-accent); border-color: var(--uswds-accent); color: #ffffff; text-decoration: none !important; } #account-inactive .view-profile-btn i { font-size: 1rem; margin-right: 0.25rem; } /* Content styling */ #account-inactive .log-info { background: #f0f8ff; border-left: 4px solid var(--uswds-accent-alt); border-radius: 4px; padding: 1rem; font-size: 0.9rem; color: #1b1f3b; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03); margin-top: 1rem; } /* ===== EDUCATOR PROFILE PAGE STYLING ===== */ /* Educator Profile Page Styles - USWDS Styling Override */ #educator-profile { /* Match Educator dashboard layout - no max-width constraint */ margin: 0 auto; padding: 0 1rem; } /* Page header styling */ #educator-profile header { margin-bottom: 0; } #educator-profile h1 { font-size: 1.625rem; margin: .5rem 0 0; color: var(--uswds-accent); } /* Tighten gap between header and card even more */ #educator-profile header { margin-bottom: -0.5rem; } /* Tighten gap between header and card */ #educator-profile .usa-section { padding-top: 0; } /* Back button styling */ #educator-profile .icon-back-btn { border-radius: 50%; width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid #dfe1e2; background-color: #ffffff; color: #1b1f3b; transition: all 0.2s ease; } #educator-profile .icon-back-btn:hover { background-color: #f0f8ff; border-color: #005ea2; color: #005ea2; } /* Card styling - using USWDS classes */ #educator-profile .usa-card { margin-bottom: 1.5rem; } /* Card header styling - using USWDS classes */ #educator-profile .usa-card__header { padding-top: .25rem !important; padding-bottom: .25rem !important; padding-left: 1rem; padding-right: 1rem; border-bottom: 1px solid #dfe1e2; font-weight: 600; background-color: #f5f6f7; border-top-left-radius: .5rem; border-top-right-radius: .5rem; display: flex; align-items: center; min-height: auto !important; justify-content: space-between !important; } /* Card heading styling */ #educator-profile .usa-card__heading { font-size: 1.125rem; font-weight: 600; color: var(--uswds-accent); margin: 0; } /* Card header icon styling */ #educator-profile .card-header-icon { font-size: 1.25rem; margin-right: 0.5rem; color: var(--uswds-accent-alt); flex-shrink: 0; } /* Card body styling - using USWDS classes */ #educator-profile .usa-card__body { padding: 1.5rem; } /* Button styling */ #educator-profile .usa-button { display: inline-flex; align-items: center; gap: 0.5rem; margin-right: 0.5rem; padding: .6rem 1rem; min-height: 44px; font-weight: 500; border-radius: 4px; transition: all 0.2s ease; } #educator-profile .usa-button i { font-size: 1rem; margin-right: 0.25rem; } /* Success button styling - match standard usa-button */ #educator-profile .usa-button--success { background-color: #0b4778; border-color: #0b4778; color: #ffffff; font-weight: 500; padding: .6rem 1rem; border-radius: 4px; transition: all 0.2s ease; min-height: 44px; } #educator-profile .usa-button--success:hover { background-color: #1b1f3b; border-color: #1b1f3b; color: #ffffff; } #educator-profile .usa-button--success:focus { box-shadow: 0 0 0 2px rgba(11, 71, 120, 0.2); outline: none; } /* Help button styling */ #educator-profile .help-icon { position: fixed; bottom: 2rem; right: 2rem; z-index: 1000; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* Content styling */ #educator-profile .log-info { background: #f0f8ff; border-left: 4px solid var(--uswds-accent-alt); border-radius: 4px; padding: 1rem; font-size: 0.9rem; color: #1b1f3b; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03); margin-top: 1rem; } /* Profile header text and badge styling */ #educator-profile .header-text { color: var(--uswds-accent); font-weight: 600; font-size: 1.25rem; } #educator-profile .badge.bg-primary { background-color: #0b4778 !important; border: 1px solid #083755 !important; color: #fff !important; font-weight: 500; font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 999px; } /* Email checkmark icon styling */ #educator-profile .bi-check-circle-fill.text-success { color: #0b4778 !important; background-color: #f0f8ff; border-radius: 50%; padding: 0.125rem; } /* Subscribed badge styling */ #educator-profile .badge-subscribed { background-color: #0b4778 !important; border: 1px solid #083755 !important; color: #fff !important; font-weight: 500; font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 999px; } #educator-profile .badge-subscribed .bi-check-circle { color: #fff !important; } /* ===== ACTIVITY LOG MODAL STYLING ===== */ /* Activity Log Modal - USWDS styling */ #activityLogModal .modal-content { border: 1px solid #dfe1e2; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } #activityLogModal .modal-header { border-bottom: 1px solid #dfe1e2; border-radius: 8px 8px 0 0; background-color: #f5f6f7; padding: 1rem 1.5rem; } #activityLogModal .modal-title { color: var(--uswds-accent); font-weight: 600; font-size: 1.25rem; margin: 0; } #activityLogModal .modal-title .bi-clock-history { color: var(--uswds-accent-alt); font-size: 1.25rem; } #activityLogModal .btn-close { background-color: transparent; border: none; color: #1b1f3b; opacity: 0.7; } #activityLogModal .btn-close:hover { opacity: 1; } #activityLogModal .modal-body { padding: 1.5rem; } #activityLogModal .modal-body p { color: #1b1f3b; margin-bottom: 1rem; } #activityLogModal .modal-body strong { color: var(--uswds-accent); font-weight: 600; } #activityLogModal .modal-footer { border-top: 1px solid #dfe1e2; border-radius: 0 0 8px 8px; background-color: #f5f6f7; padding: 1rem 1.5rem; } #activityLogModal .usa-button { background-color: var(--uswds-accent-alt); border-color: var(--uswds-accent-alt); color: #ffffff; font-weight: 500; padding: 0.75rem 1.5rem; border-radius: 4px; transition: all 0.2s ease; } #activityLogModal .usa-button:hover { background-color: var(--uswds-accent); border-color: var(--uswds-accent); color: #ffffff; } #activityLogModal .usa-button i { margin-right: 0.5rem; } /* Activity Log Table Styling */ #activityLogModal .table { border: 1px solid #dfe1e2; border-radius: 4px; overflow: hidden; } #activityLogModal .table thead th { background-color: #f5f6f7; border-bottom: 1px solid #dfe1e2; color: var(--uswds-accent); font-weight: 600; padding: 0.75rem; font-size: 0.875rem; } #activityLogModal .table tbody td { border-bottom: 1px solid #f0f0f0; padding: 0.75rem; color: #1b1f3b; font-size: 0.875rem; } #activityLogModal .table tbody tr:hover { background-color: #f8f9fa; } #activityLogModal .table tbody tr:last-child td { border-bottom: none; } /* ===== APPROVE EDUCATOR PARTIAL STYLING ===== */ /* ApproveEducatorPartial card styling - using USWDS classes */ #educator-profile .usa-card { margin-bottom: 1.5rem; width: 100%; } /* Card body styling - using USWDS classes */ #educator-profile .usa-card__body { padding: 1.5rem; } /* Fix card alignment to match header width */ #educator-profile #educator-profile-content .usa-card { width: 100%; max-width: none; } #educator-profile #educator-profile-content > .row { margin-left: 0; margin-right: 0; } #educator-profile #educator-profile-content > .row > .col-md-12 { padding-left: 0; padding-right: 0; } /* Simplified alignment fix for educator profile */ #educator-profile #educator-profile-content { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } /* Ensure cards take full width and align with header */ #educator-profile .usa-card, #educator-profile .card { width: 100%; margin-left: 0; margin-right: 0; } /* Fix card header alignment */ #educator-profile .usa-card__header { display: flex !important; align-items: center !important; justify-content: flex-start !important; padding-left: 1rem !important; padding-right: 1rem !important; } #educator-profile .usa-card__header .usa-card__heading { margin: 0 !important; text-align: left !important; } /* Small button styling - match standard button height */ #educator-profile .usa-button--small { padding: .6rem 1rem !important; font-size: 0.875rem; min-height: 44px !important; font-weight: 500; border-radius: 4px; transition: all 0.2s ease; } /* Override header button styling for View Activity Log button */ #educator-profile header .usa-button--small { padding: .6rem 1rem !important; min-height: 44px !important; font-size: 0.875rem !important; flex: none !important; min-width: auto !important; white-space: nowrap !important; } /* Outlined button styling - match standard button height */ #educator-profile .usa-button--outline { padding: .6rem 1rem !important; min-height: 44px !important; font-weight: 500; border-radius: 4px; transition: all 0.2s ease; background: transparent; color: var(--uswds-accent-alt) !important; border-color: var(--uswds-accent-alt); } #educator-profile .usa-button--outline:hover, #educator-profile .usa-button--outline:focus { background: var(--uswds-accent-alt); color: #fff !important; border-color: var(--uswds-accent-alt); } /* Back button styling */ #educator-profile .icon-back-btn { border-radius: 50%; width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid #dfe1e2; background-color: #ffffff; color: #1b1f3b; transition: all 0.2s ease; } #educator-profile .icon-back-btn:hover { background-color: #f0f8ff; border-color: #005ea2; color: #005ea2; } /* ===== CONTACT ADMINISTRATOR PAGE STYLING ===== */ /* Enhanced styling for the Contact Administrator page - matches dashboard styling */ /* Button styling within the contact admin card */ #contact-admin-content .usa-card .usa-button { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; margin-right: 1rem !important; } /* Form styling enhancements */ #contact-admin-content .usa-form-group { margin-bottom: 1.5rem !important; } #contact-admin-content .usa-label { font-weight: 700 !important; font-size: 0.875rem !important; line-height: 1.3 !important; margin-bottom: 0.5rem !important; color: #1b1b1b !important; } #contact-admin-content .usa-label--required { margin-left: 0.25rem !important; } #contact-admin-content .usa-input, #contact-admin-content .usa-textarea { width: 100% !important; border: 1px solid #c9c9c9 !important; border-radius: 0.25rem !important; padding: 0.75rem !important; font-size: 1rem !important; line-height: 1.5 !important; } #contact-admin-content .usa-input:focus, #contact-admin-content .usa-textarea:focus { outline: 0.25rem solid #005ea2 !important; outline-offset: 0 !important; border-color: #005ea2 !important; } #contact-admin-content .usa-hint { font-size: 0.875rem !important; color: #565c65 !important; margin-top: 0.25rem !important; } #contact-admin-content .count-message { display: block !important; text-align: right !important; margin-top: 0.5rem !important; font-size: 0.875rem !important; color: #565c65 !important; } /* Validation feedback styling */ #contact-admin-content .field-validation-error { color: #d54309 !important; font-size: 0.875rem !important; margin-top: 0.25rem !important; display: block !important; } #contact-admin-content .input-validation-error { border-color: #d54309 !important; box-shadow: 0 0 0 0.25rem rgba(213, 67, 9, 0.25) !important; } /*Announcement list*/ /* cards */ .indicator { font-size: 1.25rem; line-height: 1; color: var(--uswds-accent); margin-top: .25rem } .announcement[data-type="system"] .indicator { color: var(--uswds-accent) } /* ▼ now green */ .timestamp { white-space: nowrap } .announcement.unread .card-title { font-weight: 600 } .announcement.read .card-title { font-weight: 500; } .mark-read { padding: 0 .25rem; border: none; background: transparent } .mark-read:focus { outline: none } .course-item.read .mark-read i { color: var(--uswds-accent-alt) } .course-item.unread .mark-read i { color: var(--uswds-accent-alt) } /* Mobile responsiveness for contact admin buttons */ @media (max-width: 768px) { #contact-admin-content .usa-card .usa-button { width: 100% !important; justify-content: center !important; margin-right: 0 !important; margin-bottom: 0.75rem !important; } #contact-admin-content .usa-card .usa-button:last-child { margin-bottom: 0 !important; } } /* ============================================ EMAIL PAGE SPECIFIC USWDS STYLES ============================================ */ /* Email page USWDS navigation styling */ #email-messages .usa-nav .usa-nav__primary { list-style: none; padding: 0; margin: 0; } #email-messages .usa-nav .usa-nav__primary-item { list-style: none; margin: 0; } #email-messages .usa-nav .usa-nav__link { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; text-decoration: none; color: #1b1f3b; border-radius: 0.25rem; margin-bottom: 0.25rem; width: 100%; } #email-messages .usa-nav .usa-nav__link:hover { background-color: #f0f4f7; color: #1b1f3b; } #email-messages .usa-nav .usa-nav__link.usa-current { background-color: #e6f3ff; color: #1b1f3b; font-weight: 600; } #email-messages .usa-nav .usa-tag { font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 1rem; background-color: #1b1f3b; color: white; font-weight: 600; margin-left: auto; flex-shrink: 0; } /* Email page USWDS card styling */ #email-messages .usa-card.unread { border-left: 4px solid var(--uswds-accent-alt); } #email-messages .usa-card { margin-bottom: 1.5rem; } #email-messages .usa-card .margin-bottom-1 { margin-bottom: 0 !important; /* Removed gap between From line and subject line */ } /* Target the specific div structure to eliminate gap */ #email-messages .usa-card .display-flex.flex-justify-between { margin-bottom: 0 !important; } #email-messages .usa-card .display-flex:not(.flex-justify-between) { margin-top: -0.75rem !important; /* Negative margin to pull subject line up */ } /* Precisely target rows inside a message card to close the gap */ #email-messages .usa-card__body > .display-flex.flex-justify-between.flex-align-center { margin-bottom: 0 !important; } #email-messages .usa-card__body > .display-flex.flex-justify-between.flex-align-center + .display-flex { margin-top: 0 !important; } #email-messages .usa-card__body > .display-flex.flex-justify-between.flex-align-center + .display-flex h3.font-size-lg { margin-top: -1rem !important; line-height: 1.05 !important; } #email-messages .usa-card .display-flex:first-of-type { margin-bottom: 0; } #email-messages .usa-card .font-weight-semibold { font-weight: 600; } #email-messages .usa-card .text-base { font-size: 0.875rem; color: #6c757d; } #email-messages .usa-card .font-size-lg { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.25rem; margin-top: 0; } #email-messages .usa-card .text-gray { color: #6c757d; } /* Email page USWDS tag styling */ #email-messages .usa-tag.bg-success { background-color: #00a91c; color: white; } #email-messages .usa-tag.bg-danger { background-color: #d54309; color: white; } /* Folders card badges - match blue badge theme and size */ aside .usa-nav .usa-tag { background-color: var(--uswds-accent-alt, #0b4778) !important; color: white !important; border: 1px solid #083755 !important; font-size: .75rem !important; padding: .2rem .6rem !important; border-radius: 999px !important; } /* Email page USWDS button styling */ #email-messages .usa-button--unstyled.text-red { color: #d54309; text-decoration: none; background: none; border: none; padding: 0; font: inherit; cursor: pointer; } #email-messages .usa-button--unstyled.text-red:hover { color: #b50909; text-decoration: underline; } #email-messages .usa-button--unstyled.text-primary { color: #1b1f3b; text-decoration: none; background: none; border: none; padding: 0; font: inherit; cursor: pointer; } #email-messages .usa-button--unstyled.text-primary:hover { color: #0f1419; text-decoration: underline; } /* Email page USWDS form elements */ #email-messages .usa-select[multiple] { min-height: 2.5rem; } /* Email page USWDS pagination */ #email-messages .usa-pagination { margin-top: 1rem; } /* Email page pagination styling - match CourseTemplate/Listing */ #email-messages #pagination .pagination .page-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 44px !important; min-height: 44px !important; padding: .5rem .75rem !important; color: #1a4480 !important; background-color: #ffffff !important; border: 1px solid #1a4480 !important; text-decoration: none !important; line-height: 1 !important; } #email-messages #pagination .pagination .page-link:hover, #email-messages #pagination .pagination .page-link:focus { color: #ffffff !important; background-color: #1a4480 !important; border-color: #1a4480 !important; } #email-messages #pagination .pagination .page-item.active .page-link { color: #ffffff !important; background-color: #0b4778 !important; border-color: #0b4778 !important; } #email-messages #pagination .pagination .page-item.disabled .page-link { color: #9da3a7 !important; background-color: #f5f6f7 !important; border-color: #dfe1e2 !important; cursor: not-allowed !important; } /* Remove border radius for inner pagination buttons; keep only outer corners rounded */ #email-messages #pagination .pagination li.page-item:not(:first-child):not(:last-child) .page-link { border-radius: 0 !important; } #email-messages #pagination .pagination li.page-item:first-child .page-link, #email-messages #pagination .pagination li.page-item.disabled:first-child .page-link { border-top-left-radius: .25rem !important; border-bottom-left-radius: .25rem !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } #email-messages #pagination .pagination li.page-item:nth-child(2) .page-link, #email-messages #pagination .pagination li.page-item.disabled:nth-child(2) .page-link { border-radius: 0 !important; } #email-messages #pagination .pagination li.page-item:last-child .page-link { border-top-right-radius: .25rem !important; border-bottom-right-radius: .25rem !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } #email-messages #pagination .pagination li.page-item:nth-last-child(2) .page-link { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* Email page headers: match Educator My Courses header exactly */ #email-messages .usa-card__header { padding-top: .25rem !important; padding-bottom: .25rem !important; min-height: auto !important; display: flex !important; align-items: center !important; } /* Email header heading typography to match dashboard */ #email-messages .usa-card__header .usa-card__heading, aside .usa-card__header .usa-card__heading, #section-test .usa-card__header .usa-card__heading { margin: 0 !important; line-height: 1.2 !important; font-size: 1.125rem !important; font-weight: 600 !important; } /* Email subject links - match CourseOffering/Listing style */ #email-messages a[data-email-id] { color: var(--uswds-accent-alt) !important; text-decoration: none !important; } #email-messages a[data-email-id]:hover { color: var(--uswds-accent) !important; } /* Inbox header: title, badges, and actions on one row (desktop and mobile) */ #email-messages #emailBody .email-inbox-card-header .email-panel-header, #emailBody .email-inbox-card-header .email-panel-header { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; } #email-messages #emailBody .email-inbox-card-header .email-panel-actions, #emailBody .email-inbox-card-header .email-panel-actions { flex-wrap: nowrap !important; } /* Force taller headers for email cards - override base USWDS */ aside .usa-card__header, #emailBody .usa-card__header, aside.col-md-3 .usa-card__header, aside.col-md-3.col-lg-2 .usa-card__header { padding: .75rem 1rem !important; min-height: 3.25rem !important; } /* Extra specific rule for Folders card header */ aside.col-md-3.col-lg-2.d-none.d-md-block .usa-card .usa-card__container .usa-card__header { padding: .75rem 1rem !important; min-height: 3.25rem !important; } /* Nuclear option - force Folders header height */ aside .usa-card__header[style*="display: flex"] { padding: .75rem 1rem !important; min-height: 3.25rem !important; } /* Override any conflicting display-flex rules for email page headers */ #email-messages .usa-card__header.display-flex { margin-top: 0 !important; margin-bottom: 0 !important; align-items: center !important; } /* Test section header: match Educator My Courses header exactly */ #section-test .usa-card__header { padding-top: .25rem !important; padding-bottom: .25rem !important; min-height: auto !important; align-items: center !important; justify-content: space-between !important; display: flex !important; } /* Override any conflicting display-flex rules for test section */ #section-test .usa-card__header.display-flex { margin-top: 0 !important; margin-bottom: 0 !important; align-items: center !important; } :root { --theme-blue: #0B4778; --text-primary: #212529; --text-secondary: #6c757d; --border-color: #dee2e6; --background-light: #f8f9fa; --action-blue-bg: #e8f1ff; --status-green-bg: #d1e7dd; --status-green-text: #0f5132; --status-yellow-bg: #fff3cd; --status-yellow-text: #664d03; --status-blue-bg: #cfe2ff; --status-blue-text: #0a3675; } .catalog-container { max-width: 1100px; margin: auto; } .filter-bar { background-color: #fff; border: 1px solid var(--border-color); border-radius: 8px; padding: 1rem; margin-bottom: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .filter-bar input[type="search"] { flex-grow: 1; padding: 0.5rem 0.75rem; font-size: 1rem; border: 1px solid var(--border-color); border-radius: 6px; } .filter-bar .btn { padding: 0.5rem 1rem; font-size: 1rem; font-weight: 500; border: none; border-radius: 6px; cursor: pointer; } .resource-filters-row, .credits-filters-row { margin-bottom: 1rem; } .cursor-not-allowed { cursor: not-allowed !important; } .btn-primary { background-color: var(--theme-blue); color: #fff; } /* Ensure outline secondary buttons meet WCAG contrast (e.g., /Educator page profile summary link) */ .btn-outline-secondary { color: var(--theme-blue); border-color: var(--theme-blue); } .btn-outline-secondary:hover, .btn-outline-secondary:focus { color: #fff; background-color: var(--theme-blue); border-color: var(--theme-blue); } .course-list { display: grid; gap: 1.5rem; } .course-item { background-color: #fff; border: 1px solid var(--border-color); border-radius: 8px; padding: 0.5rem; display: flex; gap: 1.5rem; align-items: flex-start; transition: box-shadow 0.2s ease-in-out; } .course-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .item-icon { flex-shrink: 0; font-size: 2rem; color: var(--theme-blue); padding-top: 0.25rem; } .item-content { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; } .item-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.25rem; } .course-title:hover { text-decoration: underline; } .card-actions { display: flex; gap: 0.5rem; flex-shrink: 0; } .card-actions button { background: none; border: 1px solid var(--border-color); color: var(--text-secondary); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s, color 0.2s; } .card-actions button:hover { background-color: var(--action-blue-bg); color: var(--theme-blue); } .card-actions button.active { background-color: var(--action-blue-bg); color: var(--theme-blue); border-color: #a9c7e1; } .course-description { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; margin-top: 0; margin-bottom: 0.15rem !important; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .item-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--background-light); } .course-stats { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; } .stat-item { display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary); font-weight: 500; font-size: 0.9rem; } .stat-item i { color: var(--text-secondary); } .course-date { font-size: 0.85rem; color: var(--text-secondary); flex-shrink: 0; } /* --- MOBILE STYLES --- */ @media (max-width: 800px) { .item-icon { display: none; } .item-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .item-footer { /* MODIFIED: Keep footer as a single row */ flex-direction: row; flex-wrap: wrap; gap: 0.75rem; } } /*Current courses styles*/ .course-meta { font-size: 0.9rem; color: var(--text-secondary); margin: 0.25rem 0 0.25rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.5rem; } .course-meta > span:not(:last-child)::after { content: "|"; margin-left: 0.5rem; color: var(--border-color); } .item-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--background-light); min-height: 34px; flex-wrap: wrap; gap: 0.75rem; } .enrollment-info { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; } .enrollment-info .status-tag { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; font-size: 0.85rem; padding: 0.2rem 0.6rem; border-radius: 6px; } .header-actions .status-tag { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; font-size: 0.85rem; padding: 0.25rem 0.75rem; border-radius: 50rem; } /* Status Tag Styles */ .status-tag.open-for-enrollment, .status-tag.enrolled-indicator { color: var(--status-green-text); background-color: var(--status-green-bg); } .status-tag.waitlist { color: var(--status-yellow-text); background-color: var(--status-yellow-bg); } .status-tag.active, .status-tag.in-progress { color: var(--status-blue-text); background-color: var(--status-blue-bg); } .enrollment-info .seats-available { font-size: 0.9rem; color: var(--text-secondary); } .enrollment-info .enroll-by-date { color: var(--text-secondary); font-size: 0.9rem; } .enrollment-info .enroll-by-date i { margin-right: 0.35rem; } /* --- MOBILE STYLES --- */ @media (max-width: 800px) { .item-icon { display: none; /* MODIFIED: Hide the icon on mobile */ } .item-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .header-actions { width: 100%; } .header-actions .status-tag { border-radius: 6px; display: inline-flex; } .item-footer { flex-direction: column; align-items: flex-start; gap: 0.75rem; } } /*Styles form course participation page */ .participation-table-container { position: relative; width: 100%; } .table-scroll-wrapper { overflow-x: auto; overflow-y: visible; position: relative; scrollbar-width: thin; scrollbar-color: #cbd5e0 #f7fafc; } .table-scroll-wrapper::-webkit-scrollbar { height: 8px; } .table-scroll-wrapper::-webkit-scrollbar-track { background: #f7fafc; border-radius: 4px; } .table-scroll-wrapper::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 4px; } .table-scroll-wrapper::-webkit-scrollbar-thumb:hover { background: #a0aec0; } /* USWDS Table Styling - matching User page */ .participation-table { min-width: 100% !important; border-collapse: collapse !important; table-layout: fixed !important; width: auto !important; } .participation-table td { padding: 0.75rem !important; border: 1px solid #dfe1e2 !important; text-align: left !important; } .participation-table th { background-color: #f0f6ff !important; font-weight: 600 !important; border: 1px solid #dfe1e2 !important; padding: 0.75rem !important; text-align: left !important; } .participation-table tbody tr:hover { background-color: #f0f6ff !important; } .participation-table tbody tr:nth-child(even) { background-color: #f8f9fa !important; } /* Status badges styling - outline with USWDS accent color */ .participation-table .badge { font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.5rem; border-radius: 999px; background-color: transparent !important; color: #1B4480 !important; /* USWDS accent (cool) used elsewhere */ border: 1.5px solid #1B4480 !important; } /* Force all legacy bg-* status classes to the same outline look */ .participation-table .badge.bg-success, .participation-table .badge.bg-warning, .participation-table .badge.bg-danger, .participation-table .badge.text-bg-success, .participation-table .badge.text-bg-warning, .participation-table .badge.text-bg-danger, .participation-table .badge[class*="bg-"], .participation-table .badge[class*="text-bg-"] { background-color: transparent !important; background-image: none !important; color: #1B4480 !important; border: 1.5px solid #1B4480 !important; } /* Activity header dropdown styling */ .participation-table th .btn { border: none !important; background: none !important; padding: 0.25rem 0 !important; margin-left: 0.5rem !important; } .participation-table th .btn:hover, .participation-table th .btn:active, .participation-table th .btn:focus { background: none !important; border: none !important; box-shadow: none !important; color: inherit !important; } .participation-table th .btn:hover i, .participation-table th .btn:active i, .participation-table th .btn:focus i { color: inherit !important; } /* Edit button styling */ .participation-table td .btn-outline-secondary { border: none !important; color: #6c757d !important; padding: 0.25rem 0.5rem !important; font-size: 0.875rem !important; background: transparent !important; } .participation-table td .btn-outline-secondary:hover, .participation-table td .btn-outline-secondary:focus, .participation-table td .btn-outline-secondary:active { background-color: transparent !important; color: #6c757d !important; border: none !important; box-shadow: none !important; outline: none !important; } /* Sticky educator column */ .sticky-educator { position: sticky; left: 0; z-index: 10; min-width: 180px; max-width: 180px; font-weight: 500; background-color: #f0f6ff !important; border-right: 2px solid #005ea2 !important; } .participation-table tbody .sticky-educator { background-color: #ffffff !important; } .participation-table tbody tr:nth-child(even) .sticky-educator { background-color: #f8f9fa !important; } .participation-table tbody tr:hover .sticky-educator { background-color: #f0f6ff !important; } /* Activity column styling */ .participation-table th.th-activity { min-width: 240px !important; max-width: 240px !important; width: 240px !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; table-layout: fixed !important; } .participation-table td.th-activity { min-width: 240px !important; max-width: 240px !important; width: 240px !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; table-layout: fixed !important; } /* Activity header text styling */ .participation-table th.th-activity .d-flex { width: 100% !important; max-width: 100% !important; } .participation-table td.th-activity .d-flex { width: 240px !important; justify-content:center; max-width: 240px !important; } .participation-table th.th-activity span { display: inline-block !important; max-width: 200px !important; width: 200px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; flex-shrink: 1 !important; } .th-educator,.th-activity { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; /* width: 5% !important;*/ } /* Scroll indicators */ .scroll-indicator { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 94, 162, 0.8); color: white; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .scroll-indicator.show { opacity: 1; pointer-events: auto; } .scroll-indicator-left { left: 200px; /* Position after the sticky educator column */ } .scroll-indicator-right { right: 10px; } .scroll-indicator:hover { background: rgba(0, 94, 162, 1); } .participation-page { z-index: 9999 !important; position: fixed !important; } /* Mobile responsive styling */ @media (max-width: 640px) { .participation-filters-row { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: .5rem !important; } .participation-filters-row .grid-col-12 { width: 100%; } .new-btn-col { justify-content: center !important; } .new-btn-col .usa-button { width: 100%; } /* Mobile table styling - convert to cards */ .participation-table { font-size: 0.875rem; border: none !important; } /* Override desktop fixed widths so mobile rows span full card width */ .participation-table th.th-activity, .participation-table td.th-activity { min-width: 0 !important; max-width: none !important; width: 100% !important; } .participation-table thead { display: none; } .participation-table tbody tr { display: block; margin-bottom: 1rem; border: 1px solid #dfe1e2; border-radius: 0.5rem; background: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); padding: 1rem; } .participation-table tbody td { display: block; border: none !important; padding: 0.5rem 0 0.5rem 0 !important; /* keep right edge at card padding */ margin: 0; position: relative; word-wrap: break-word; color: #374151; min-height: auto; } .participation-table tbody td:first-child { font-weight: 600; font-size: 1.1rem; color: #1f2937; border: none !important; padding: 0 0 0.5rem 0 !important; margin: 0; display: flex; justify-content: space-between; align-items: center; } .participation-table tbody td:not(:first-child) { display: flex; align-items: center; padding: 0.25rem 0 !important; border: none !important; margin: 0; } .participation-table tbody td:not(:first-child)::before { content: attr(data-label); font-weight: 500; color: #6b7280; margin-right: 1rem; text-align: left; flex: 1 1 auto; /* take remaining width */ min-width: 0; /* allow shrink for wrap */ white-space: normal; /* enable wrapping */ word-break: break-word; /* break long words */ overflow-wrap: anywhere; /* wrap anywhere if needed */ } /* Activity content layout - align status + pencil to far right */ .participation-table tbody td:not(:first-child) .d-flex { display: flex !important; justify-content: flex-end !important; /* keep to the right */ align-items: center !important; width: auto !important; /* only take needed width */ gap: .5rem !important; margin-left: auto !important; /* push to far right */ } /* Ensure badge keeps auto width (do NOT stretch) */ .participation-table tbody td:not(:first-child) .d-flex > span:first-child { flex: 0 0 auto !important; margin-right: 0 !important; min-width: 0 !important; } /* No auto margins; group is already right-aligned via justify-content */ /* Ensure the cell itself doesn't interfere with right alignment */ .participation-table tbody td.th-activity { text-align: right !important; padding-right: 0 !important; /* card already has 1rem padding */ width: 100% !important; /* ensure full row width */ } /* Small space between badge and icon */ .participation-table tbody td .btn.btn-outline-secondary { margin-left: .5rem !important; } /* Normalize badge sizing in mobile */ .participation-table .badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; height: 22px !important; min-height: 22px !important; padding: 0 0.4rem !important; font-size: 0.7rem !important; border-width: 1px !important; /* keep consistent border */ } /* Hide scroll indicators on mobile */ .scroll-indicator { display: none !important; } /* Hide table scroll wrapper on mobile */ .table-scroll-wrapper { overflow: visible !important; } /* Hide Add Activity button in mobile mode */ .participation-card .usa-card__header .usa-button { display: none !important; } } /* Help button styling - match Resources and Announcements pages */ .help-icon-fixed { position: fixed; right: 1rem; bottom: 1rem; z-index: 500; display: flex; gap: .5rem; } .help-icon-fixed .help-icon { box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important; border: none !important; min-height: 44px !important; } /* Help content styles*/ .help-content h6 { margin-top: 0; margin-bottom: .75rem; color: var(--uswds-accent, #1b1f3b); font-size: 1.25em; border-bottom: 1px solid #dfe1e2; padding-bottom: .25rem; font-weight: 600; } .help-content strong { color: var(--uswds-accent-alt, #0b4778); font-weight: 600; } .help-content p { margin-bottom: 1rem; line-height: 1.6; color: #1b1b1b; } .help-content ul { list-style: disc outside; margin-bottom: 1rem; padding-left: 1.5em; } .help-content li { margin-bottom: .75rem; line-height: 1.6; color: #1b1b1b; padding-left: 0.5em; } /* Nested lists (second-level bullets) - white circles with outline */ .help-content ul ul { list-style: none; margin-top: 0.5rem; margin-bottom: 0.5rem; padding-left: 1.5em; } .help-content ul ul li { margin-bottom: 0.5rem; position: relative; padding-left: 1.2em; } .help-content ul ul li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.5em; height: 0.5em; border: 1.5px solid #1b1b1b; border-radius: 50%; background-color: white; } .nested-list { margin-left: 1.5rem; list-style-type: circle; } .nested-list li { margin-bottom: .5rem; } /* In progress badge styling to match dashboard */ .help-content .badge.bg-success { background: #0b3d20 !important; color: #fff !important; border-radius: 999px; padding: .2rem .6rem; } /* Info icon styling to match USWDS theme */ .modal-header .bi-info-circle { color: var(--uswds-accent-alt, #0b4778) !important; } /* Modal title styling to match USWDS theme */ .modal-header .modal-title { color: var(--uswds-accent, #1b1f3b) !important; font-weight: 600 !important; }