element's own .mx-4 (1.5rem) margin, .home-section's 15px padding, and this container-fluid's 0.75rem gutter. Cancelling only the last one (as a prior attempt did) still left the other two in place and made the card narrower than expected, or overshot into a horizontal scrollbar when the card's own negative margin was guessed instead. Zero out the ancestor spacing directly instead of guessing an offset on the card. */ .home-section:has(> .learner-course-page-shell), .sidebar.active ~ .home-section:has(> .learner-course-page-shell) { left: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 100vw !important; } /* A later, unscoped global rule (".container, .container-fluid { padding: 1.5rem !important }", written for the subscription/pricing page) has equal specificity and comes after this in the file, so it was winning on source order and re-adding the gutter here. Use the two-class form to out-specify it instead of relying on order. */ .container-fluid.learner-course-page-shell { padding-left: 0 !important; padding-right: 0 !important; } } @media (min-width: 768px) { /* Expand the checkout hero toward the sidebar while preserving its existing right edge. */ body.learner-cart-layout .cart-header-shell { position: relative; left: -1rem; width: calc(100% + 1rem); max-width: none; } /* Keep the My Courses card's left edge fixed while consuming the unused right-side page gutter. */ .learner-course-page-shell { width: 100%; max-width: 100%; } /* Keep the learner curriculum page's left edge fixed while using the excess right gutter, giving both sides the same visual spacing. */ body.curriculum-content-layout:not(.course-curriculum-standalone-page) #curriculum-content-app { width: calc(100% + 1.25rem); max-width: none; } body.curriculum-content-layout #curriculum-content-app .teacher-curriculum-hero { margin-top: 0.5rem; } /* Grow the curriculum viewer toward the sidebar without moving its existing right edge. The rendered shell carries Bootstrap's mx-3. */ body.curriculum-content-layout #curriculum-view-app > .container-fluid, body.course-curriculum-standalone-page #curriculum-view-app > .container-fluid { margin-left: 0 !important; width: calc(100% + 1rem); max-width: none; } /* Admin curriculum viewer: halve the remaining left gutter and return the recovered space to the card width, preserving its current right edge. */ body.course-curriculum-standalone-page #curriculum-view-app > .container-fluid { margin-left: -0.75rem !important; width: calc(100% + 1.75rem); } /* The remaining left gap belongs to the parent page shell, not the card. Reduce only that padding; the content box grows left and its right edge remains governed by the unchanged right padding. */ body.course-curriculum-standalone-page .home-section:not(.admin-home-layout) { padding-left: 0.145rem !important; } /* Keep the teacher curriculum's left edge fixed and consume the excess right gutter so both sides have matching visual spacing. */ .teacher-subject-curriculum-page.card-margin-top.monitoring-margin-top { width: calc(100% + 1rem); max-width: none; } } #add_code_challenge_popup .code-challenge-dialog { max-width: min(1000px, calc(100vw - 48px)); } #add_code_challenge_popup .modal-content { border: 0; border-radius: 10px; overflow: hidden; } #add_code_challenge_popup .modal-body { max-height: calc(100vh - 120px); overflow-y: auto; } #add_code_challenge_popup .code-challenge-shell { min-height: 0; } #add_code_challenge_popup .code-challenge-panel { border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); min-width: 0; } #add_code_challenge_popup .code-challenge-panel .card-header { gap: 0.75rem; position: relative; z-index: 2; } #add_code_challenge_popup .code-challenge-content-list { max-height: 355px; overflow-y: auto; } #add_code_challenge_popup .code-challenge-content-list .list-group-item { gap: 0.75rem; white-space: normal; } #add_code_challenge_popup .code-challenge-content-list .list-group-item span:first-child { min-width: 0; overflow-wrap: anywhere; } #add_code_challenge_popup .code-challenge-table-actions { min-width: 220px; } #add_code_challenge_popup [data-code-challenge-requirements-list] { display: flex; flex-direction: column; gap: 0.75rem; } #add_code_challenge_popup .code-challenge-requirement-row { display: flex; align-items: flex-start; gap: 0.75rem; } #add_code_challenge_popup .code-challenge-requirement-input { min-height: 52px; max-height: 180px; resize: vertical; overflow-y: hidden; line-height: 1.45; padding: 0.75rem 0.875rem; white-space: pre-wrap; } /* Same red, white-x remove button as the Rubric Weighting rows (btn-danger btn-sm); it was btn-outline-danger, which the theme draws purple with a red x. Sized like those rows' button instead of a 44px block. */ #add_code_challenge_popup .code-challenge-requirement-remove { flex: 0 0 auto; min-width: 38px; height: 31px; margin-top: 0.5rem; display: inline-flex; align-items: center; justify-content: center; color: #fff; } #add_code_challenge_popup [data-code-challenge-preview-requirements] li { overflow-wrap: anywhere; white-space: pre-wrap; } #add_code_challenge_popup .quill-editor-container .ql-container { min-height: 150px; } #add_code_challenge_popup .starter-code-editor-container { display: flex; min-height: 180px; border: 1px solid #ced4da; border-radius: 8px; overflow: hidden; background: #fff; } #add_code_challenge_popup .line-numbers-input { width: 48px; padding: 0.75rem 0.5rem; background: #f8f9fa; color: #6c757d; text-align: right; user-select: none; overflow: hidden; } #add_code_challenge_popup .starter-code-editor-container textarea { flex: 1; border: 0; resize: vertical; min-height: 180px; padding: 0.75rem; font-family: Consolas, Monaco, "Courier New", monospace; } @media (max-width: 767.98px) { #add_code_challenge_popup .code-challenge-dialog { max-width: calc(100vw - 16px); width: calc(100vw - 16px); margin: 0.5rem auto; } #add_code_challenge_popup .modal-body { max-height: calc(100vh - 120px); } } body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dataTables_filter, body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dt-search { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.35rem; margin-left: 0 !important; text-align: right; white-space: nowrap; } body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dataTables_length label, body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dataTables_filter label, body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dt-length label, body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dt-search label { display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 0; white-space: nowrap; } body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dataTables_length select, body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dt-length select { display: inline-block; width: 68px !important; min-width: 68px !important; max-width: 68px !important; margin: 0; vertical-align: middle; border-radius: 0.6rem; } body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dataTables_filter input[type="search"], body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dt-search input[type="search"] { display: inline-block; width: auto !important; max-width: 100%; margin: 0; vertical-align: middle; } body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dataTables_filter input[type="search"], body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dt-search input[type="search"] { min-width: 12rem; max-width: 18rem; } body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dataTables_filter .reset-btn, body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dt-search .reset-btn { margin-left: 0.5rem !important; white-space: nowrap; flex: 0 0 auto; vertical-align: middle; } @media (max-width: 768px) { /* Keep the main Assessments table readable on phones and small tablets. */ body.assessment-management-standalone-page #management_assessment_app #manual_assessments .card-body { padding: 0.85rem 0.75rem !important; } body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper { overflow-x: auto !important; overflow-y: hidden !important; position: relative; max-width: 100%; margin-bottom: 0.25rem; padding-bottom: 0.25rem; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable both-edges; } body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dataTables_scroll, body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dataTables_scrollBody { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; max-width: 100%; } body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper table.data-table, body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper table.dataTable { min-width: 860px !important; table-layout: auto !important; } body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper table.data-table th, body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper table.data-table td, body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper table.dataTable th, body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper table.dataTable td { font-size: 0.68rem !important; line-height: 1.25 !important; padding: 0.4rem 0.45rem !important; vertical-align: top; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; } body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .row:first-child { align-items: flex-start; gap: 0.35rem; } body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .row:first-child > div { flex: 0 0 100%; max-width: 100%; } body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .row:first-child > div:empty { display: none; } body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dataTables_length, body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dataTables_filter { float: none !important; width: 100%; margin: 0 0 0.5rem !important; } body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dataTables_length select, body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dt-length select { width: 68px !important; min-width: 68px !important; max-width: 100%; } body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dataTables_length label, body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dataTables_filter label { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; width: 100%; margin-bottom: 0; } body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dataTables_filter input[type="search"] { flex: 1 1 12rem; min-width: 0; max-width: 100%; width: auto; font-size: 0.72rem; margin-left: 0 !important; } body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dataTables_filter .reset-btn { margin-left: 0 !important; white-space: nowrap; flex: 0 0 auto; align-self: center; } body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .row.mt-2.dt-bottom > div { flex: 0 0 100%; max-width: 100%; text-align: left !important; } body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dataTables_info, body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dataTables_paginate { float: none !important; width: 100%; margin-top: 0.35rem; } body.assessment-management-standalone-page #management_assessment_app #manual_assessments_table_wrapper .dataTables_paginate { text-align: left !important; } } @media (max-width: 767.98px) { body.programme-management-standalone-page.admin-home-tablet-stable .home-section.admin-home-layout, body.qualification-management-standalone-page.admin-home-tablet-stable .home-section.admin-home-layout, body.course-management-standalone-page.admin-home-tablet-stable .home-section.admin-home-layout, body.assessment-management-standalone-page.admin-home-tablet-stable .home-section.admin-home-layout { transition: none !important; overflow-x: auto !important; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } body.programme-management-standalone-page.admin-home-tablet-stable .home-section.admin-home-layout { overflow-x: hidden !important; overflow-y: auto !important; height: calc(100vh - 153px) !important; max-height: calc(100vh - 153px) !important; overscroll-behavior-y: contain; } body.programme-management-standalone-page.admin-home-tablet-stable .home-section.admin-home-layout #app.programme-management-app-shell, body.qualification-management-standalone-page.admin-home-tablet-stable .home-section.admin-home-layout #qualification-management-app.qualification-management-app-shell, body.course-management-standalone-page.admin-home-tablet-stable .home-section.admin-home-layout #app.course-management-app-shell, body.assessment-management-standalone-page.admin-home-tablet-stable .home-section.admin-home-layout #app.assessment-management-app-shell, body.practicals-management-standalone-page.admin-home-tablet-stable .home-section.admin-home-layout #app.practicals-management-app-shell { margin-left: 1.35rem !important; max-width: calc(100% - 1.35rem); } body.programme-management-standalone-page.admin-home-tablet-stable .sidebar.sidebar-md .orcaa-sidebar-container, body.qualification-management-standalone-page.admin-home-tablet-stable .sidebar.sidebar-md .orcaa-sidebar-container, body.course-management-standalone-page.admin-home-tablet-stable .sidebar.sidebar-md .orcaa-sidebar-container, body.course-curriculum-standalone-page.admin-home-tablet-stable .sidebar.sidebar-md .orcaa-sidebar-container, body.dynamic-report-standalone-page.admin-home-tablet-stable .sidebar.sidebar-md .orcaa-sidebar-container, body.practicals-management-standalone-page.admin-home-tablet-stable .sidebar.sidebar-md .orcaa-sidebar-container, body.assessment-management-standalone-page.admin-home-tablet-stable .sidebar.sidebar-md .orcaa-sidebar-container, body.system-management-standalone-page.admin-home-tablet-stable .sidebar.sidebar-md .orcaa-sidebar-container { margin-top: 3rem !important; } body.programme-management-standalone-page.admin-home-tablet-stable .sidebar.sidebar-md .orcaa-sidebar, body.qualification-management-standalone-page.admin-home-tablet-stable .sidebar.sidebar-md .orcaa-sidebar, body.course-management-standalone-page.admin-home-tablet-stable .sidebar.sidebar-md .orcaa-sidebar, body.course-curriculum-standalone-page.admin-home-tablet-stable .sidebar.sidebar-md .orcaa-sidebar, body.dynamic-report-standalone-page.admin-home-tablet-stable .sidebar.sidebar-md .orcaa-sidebar, body.practicals-management-standalone-page.admin-home-tablet-stable .sidebar.sidebar-md .orcaa-sidebar, body.assessment-management-standalone-page.admin-home-tablet-stable .sidebar.sidebar-md .orcaa-sidebar, body.system-management-standalone-page.admin-home-tablet-stable .sidebar.sidebar-md .orcaa-sidebar { margin-top: 3.2rem !important; } } *{ font-family: "Poppins" , sans-serif; } /* The curriculum page has separate desktop/tablet and mobile lists. On a short landscape viewport Bootstrap's md utilities otherwise select the desktop list and leave the course area mostly empty. */ html body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; } html body.learner-mobile-bootstrap-ui .home-section, html body.learner-mobile-bootstrap-ui .sidebar.active ~ .home-section { left: 0 !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; } html body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page .mian-course-section, html body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page .mian-course-section > .card, html body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page .mobile-course-curriculum, html body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page .mobile-module-card-shell, html body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page .mobile-module-card { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } html body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page .teacher-curriculum-hero.d-none.d-md-block, html body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page .curriculum-list.d-none.d-md-block { display: none !important; } html body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page .mobile-course-curriculum.d-block.d-md-none { display: block !important; width: 100% !important; } /* ========================================================================== Platform-wide button standardization: every Bootstrap .btn (Save, Cancel, Manage, table row actions, etc.) and every .nav-pills toggle share the same readable typography and compact shape, regardless of which page or component renders them. Colors/variants are left alone on purpose. Placed right after the global Poppins rule, early in this file's cascade, so it sets the shared baseline everywhere .btn is used unqualified; the older bespoke button classes elsewhere in this file (.btn-orca, .admin-dashboard-primary-btn, etc.) still set their own font-size/padding later in the file and will keep winning for elements that carry those classes until they're individually migrated off -- that's expected, not a bug in this rule. */ .btn, .nav-pills .nav-link { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; font-family: "Poppins", sans-serif !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.2 !important; min-height: 26px; padding: 5px 16px !important; border-radius: 8px !important; text-align: center; white-space: normal; /* break-word, not anywhere: "anywhere" also shrinks the button's min-content width to a single character, so a squeezed flex/grid button stacked its label one letter per line. break-word still breaks an over-long word but keeps whole words as the minimum width. */ overflow-wrap: break-word; } @media (max-width: 767.98px) { .btn, .nav-pills .nav-link { min-height: 27px; padding: 5px 14px !important; } .btn-group, .btn-group-vertical { max-width: 100%; } .btn-group > .btn, .btn-group-vertical > .btn { min-width: 0; flex: 1 1 auto; } } /* Shared mobile auth / landing / login layout (used by mobile landing page and mobile login) */ @media (max-width: 767.98px) { .mobile-auth-landing { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; color: #fff; } .mobile-auth-landing main { flex: 1 1 auto; } .mobile-auth-hero-card { background: #fff; border-radius: 18px; padding: 0.9rem 0.9rem 1.1rem; box-shadow: 0 14px 30px rgba(15, 23, 42, 0.25); } .mobile-auth-login-box { background-color: rgba(0, 0, 0, 0); border-radius: 12px; padding: 1rem 1.1rem; } .mobile-auth-landing .landing-login-btn { border-radius: 999px; padding: 0.7rem 2.75rem; font-weight: 600; color: #212529; background-color: #dee2e6; border-color: var(--primary-color); } } .loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: rgba(255, 255, 255, 0.95); } .unload { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; display: none; background: rgba(255, 255, 255, 0.95); } .loader, .unload { transition: background 0.2s ease; backdrop-filter: blur(2px); } .loader.page-transition-active, .unload.page-transition-active { background: radial-gradient(circle at top, color-mix(in srgb, var(--primary-color, #8f469b) 12%, transparent), transparent 32%), rgba(255, 255, 255, 0.96); } .loader::before, .unload::before { content: ''; position: absolute; top: 50%; left: 50%; width: 3rem; height: 3rem; margin-top: -1.5rem; margin-left: -1.5rem; border: 0.35rem solid color-mix(in srgb, var(--primary-color, #8f469b) 18%, transparent); border-top-color: var(--primary-color, #8f469b); border-radius: 50%; box-shadow: 0 0 0 0.45rem color-mix(in srgb, var(--primary-color, #8f469b) 8%, transparent); animation: orcaa-loader-spin 0.8s linear infinite; } @keyframes orcaa-loader-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .loader-text { font-size: 20px; font-weight: bold; color: var(--primary-color, #8f469b); margin-top: 40%; display: none; text-align: center; } /* Page-level opt-out: disable all global page loaders. */ body.disable-page-loader #loader, body.disable-page-loader .loader, body.disable-page-loader .unload, body.disable-page-loader #submiting_loader, body.disable-page-loader .submiting_loader { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* Hide Vue templates until the app finishes mounting. */ [v-cloak] { display: none !important; } /* Timeline */ .timeline { border-left: 1px solid hsl(0, 0%, 90%); position: relative; list-style: none; left: 20px; } /* curently running */ .timeline .timeline-item { position: relative; } .timeline .timeline-item:after { position: absolute; display: block; top: 0; } .timeline .timeline-item:after { background-color: rgba(42,43,99,1); left: -38px; border-radius: 50%; height: 11px; width: 11px; content: ""; } /* due timeline objectives */ .timeline .due-timeline-item { position: relative; border: rgba(42,43,99,100%); } .timeline .due-timeline-item::after { position: absolute; display: block; top: 0; } .timeline .due-timeline-item::after { background-color: color(168, 0, 0); left: -38px; border-radius: 50%; height: 11px; width: 11px; content: ""; } /* archived objective */ .timeline .archived-timeline-item { position: relative; border: rgba(42,43,99,1); } .timeline .archived-timeline-item:after { position: absolute; display: block; top: 0; } .timeline .archived-timeline-item:after { background-color: rgb(8 166 32); left: -38px; border-radius: 50%; height: 11px; width: 11px; content: ""; } /* future objectives */ .timeline .future-timeline-item { position: relative; } .timeline .future-timeline-item:after { position: absolute; display: block; top: 0; } .timeline .future-timeline-item:after { background-color: rgb(128, 127, 127); left: -38px; border-radius: 50%; height: 11px; width: 11px; content: ""; } /* Animation for the spinner */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } body { background-color: var(--bg-color); margin: 0; } /* Attendance calendar styling */ .attendance-calendar-table { table-layout: fixed; width: 100%; } .attendance-calendar-table th, .attendance-calendar-table td { border: none; } .attendance-calendar-table td { min-height: 80px; height: 80px; vertical-align: middle; padding: 2px; } .attendance-day-card { background-color: #f9fafb; border-radius: 0.5rem; border: 1px solid #e5e7eb; box-shadow: none; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #374151; } .attendance-day-card-disabled { opacity: 0.55; cursor: default; background-color: #f3f4f6; color: #9ca3af; } .attendance-day-date { font-size: 13px; } .attendance-day-card-selected { border-color: transparent; box-shadow: 0 10px 30px rgba(88, 86, 214, 0.35); transform: translateY(-2px); } .attendance-summary-card { min-height: 104px; border-radius: 0.75rem; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04); padding: 1.25rem 1rem; color: #111827; background-color: #f9fafb; } /* Present/Late/Partial/Absent/Attendance Rate row only (the admin analytics variant below overrides min-height/padding on its own, more specific selector, so it's unaffected). Vertically center the single content row within the taller card without touching that other variant's layout. */ .attendance-summary-card:not(.attendance-admin-summary-grid .attendance-summary-card) { display: flex; align-items: center; } .attendance-summary-card:not(.attendance-admin-summary-grid .attendance-summary-card) > div { width: 100%; } .attendance-summary-card-present { background-color: rgba(34, 197, 94, 0.8); } .attendance-summary-card-late { background-color: rgba(234, 179, 8, 0.8); } .attendance-summary-card-partial { background-color: rgba(14, 165, 233, 0.8); } .attendance-summary-card-absent { background-color: rgba(239, 68, 68, 0.8); } .attendance-summary-card-rate { background-color: rgba(139, 92, 246, 0.8); } .attendance-admin-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(96px, 1fr)); gap: 0.5rem; align-items: stretch; overflow-x: auto; padding-bottom: 0.125rem; } .attendance-admin-summary-item { min-width: 0; } .attendance-admin-summary-grid .attendance-summary-card { border-radius: 0.5rem; min-height: 4rem; height: 100%; padding: 0.55rem 0.65rem; } .attendance-admin-summary-content { display: flex; flex-direction: column; justify-content: space-between; gap: 0.3rem; min-height: 2.8rem; } .attendance-admin-summary-label { display: flex; align-items: center; color: #111827; font-size: 0.7rem; font-weight: 600; line-height: 1.15; } .attendance-admin-summary-grid .summary-value { font-size: 0.95rem; line-height: 1; } @media (max-width: 575.98px) { .attendance-admin-summary-grid { grid-template-columns: repeat(5, minmax(86px, 1fr)); } .attendance-admin-summary-grid .attendance-summary-card { padding: 0.5rem; } } .attendance-calendar-shell, .attendance-day-detail-card { border-radius: 1rem; box-shadow: 0 16px 45px rgba(15, 23, 42, 0.06); background-color: #ffffff; } .attendance-calendar-shell .card-header { background-color: #ffffff !important; border-bottom: none; padding-top: 1.25rem; padding-bottom: 0.75rem; } .attendance-calendar-table thead tr th { background-color: var(--primary-color); color: #fff; font-weight: 500; border-bottom: none; } .summary-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; } .summary-dot-present { background-color: #22c55e; } .summary-dot-late { background-color: #eab308; } .summary-dot-partial { background-color: #0ea5e9; } .summary-dot-absent { background-color: #ef4444; } .summary-dot-rate { background-color: #8b5cf6; } /* Status-based backgrounds for calendar cards */ .attendance-day-card-status-present { background: #22c55e; color: #fff; } .attendance-day-card-status-late { background: #eab308; color: #111827; } .attendance-day-card-status-partial { background: #0ea5e9; color: #0f172a; } .attendance-day-card-status-absent { background: #ef4444; color: #ffffff; } .attendance-status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; margin-top: 4px; } .attendance-status-dot-present { background-color: #22c55e; } .attendance-status-dot-late { background-color: #eab308; } .attendance-status-dot-partial { background-color: #0ea5e9; } .attendance-status-dot-absent { background-color: #ef4444; } /* Attendance header styling */ .attendance-header-card { border-radius: 1rem; padding: 1.25rem 1.5rem; background-image: linear-gradient( 135deg, color-mix(in srgb, var(--primary-color) 84%, #ffffff 16%), color-mix(in srgb, var(--secondary-color, var(--primary-color)) 92%, #000000 8%) ); color: #ffffff; box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16); } .attendance-header-title { font-size: 1.25rem; font-weight: 700; } .attendance-header-subtitle { font-size: 0.85rem; opacity: 0.9; } /* Programme attendance page typography overrides (non-embedded mode) */ #program-attendance-page .attendance-header-title { font-size: 1rem; } #program-attendance-page .attendance-header-subtitle { font-size: 0.8rem; } .attendance-header-time { font-size: 1.35rem; font-weight: 700; } .attendance-header-date { font-size: 0.75rem; opacity: 0.9; } .attendance-view-toggle { border-radius: 999px; font-weight: 500; } .attendance-header-card .attendance-view-toggle.btn-primary, .attendance-header-card .attendance-view-toggle.btn-primary:disabled, .attendance-header-card .attendance-view-toggle.active, .attendance-header-card .attendance-view-toggle.active:disabled { background-image: linear-gradient( 135deg, color-mix(in srgb, var(--primary-color) 78%, #ffffff 22%), color-mix(in srgb, var(--primary-color) 92%, #000000 8%) ); border-color: transparent; color: #ffffff; opacity: 1; } .attendance-header-card .attendance-view-toggle.btn-light, .attendance-header-card .attendance-view-toggle.btn-light:disabled { background-color: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.22); color: #ffffff; opacity: 1; } .attendance-selected-date-banner { background-color: #eff6ff; border-radius: 0.75rem; padding: 0.75rem 1rem; color: #1d4ed8; } .attendance-clock-row-btn { border-radius: 0.5rem; padding-top: 0.65rem; padding-bottom: 0.65rem; } /* --------- Text Sizes and Custom Sizes--------- */ .text-xs { font-size: 12px; } .text-xxs { font-size: 10px; } .text-sm { font-size: 14px; } .fs-6 { font-size: 1rem!important; } .text-s { font-size: small; } .w-65 { width: 65%; } .ms-200 { margin-left: 200px; } .letter-spacing-1 { letter-spacing: 0.4px; } .text-md { font-size: 13px!important; } .btn-sm { background: var(--primary-color); border-radius: 8px; border: transparent; } .attendance-clock-btn { font-size: 0.95rem; padding: 0.5rem 1.25rem; border-radius: 999px; font-weight: 600; } .rounded-icon { border-radius: 10px; } .mh-300{ height:300px; } .w-40 { width: 40px !important; } .w-auto-max-content { width: max-content; } .roouded-8 { border-radius: 8px; } .w-97 { width: 97%; } .z-3 { z-index: 3!important; } .h-24 { height: 24px; } .h-90 { height: 90%; } .top-58 { top: 58px; } .top-34 { top: 50px; } .top-10 { top: -10px; } .z-99 { z-index: 99; } .z-100 { z-index: 100!important; } /* --------- Sidebar ---------*/ .sidebar.close .text-light{ display: none; } .sidebar.close .logo-details{ display: none; } .sidebar{ position: fixed; top: 0; left: 0; margin-left: 10px; margin-top: 27px; height: 100%; width: 20px; z-index: 90; transition: all 0.5s ease; } .sidebar.close{ width: 70px; } .sidebar.close .logo-details{ display: none; } .sidebar .logo-details{ height: 60px; width: 100%; display: flex; align-items: center; } .sidebar .logo-details i{ font-size: 30px; color: #fff; height: 50px; min-width: 78px; text-align: left; line-height: 50px; margin-left: 20px; } .sidebar .logo-details .logo-name{ font-size: 10px; color: #fff; font-weight: 600; transition: 0.3s ease; transition-delay: 0.1s; text-align: left; } .sidebar.close .logo-details .logo-name{ transition-delay: 0s; opacity: 0; pointer-events: none; } .sidebar .nav-links{ height: 100%; padding: 10px 0 100px 0; overflow: auto; } .sidebar .nav-links::-webkit-scrollbar{ width: 8px; } .sidebar .nav-links::-webkit-scrollbar-thumb { background: var(--scroller-color); border-radius: 4px; } .sidebar .nav-links::-webkit-scrollbar-thumb:hover { background: var(--scroller-color-hovered); } .sidebar .nav-links li{ position: relative; list-style: none; transition: all 0.4s ease; } .sidebar .nav-links > li.active:before, .sidebar .nav-links > li:before{ position:absolute; left:0; top:0; content:''; width:4px; height:100%; opacity: 0; transition: all 0.25s ease-in-out; border-top-right-radius:5px; border-top-right-radius:5px; } .sidebar .nav-links li.active:before, .sidebar .nav-links li:hover::before{ opacity: 1; } .sidebar .nav-links li .iocn-link{ display: flex; align-items: center; justify-content: space-between; } .sidebar.close .nav-links li .iocn-link{ display: block } .sidebar .nav-links li.showMenu i.arrow{ transform: rotate(-180deg); } .sidebar.close .nav-links i.arrow{ display: none; } .sidebar .nav-links li a{ display: flex; align-items: center; text-decoration: none; } .sidebar .nav-links li .sub-menu{ padding: 6px 6px 14px 80px; margin-top: -10px; color: #fff; display: none; } #main { transition: margin-left .5s; padding: 16px; margin-left: 225px; } .sidebar .nav-links li.showMenu .sub-menu{ display: block; } .sidebar .nav-links li .sub-menu a{ color: var(--sidebar-text-color); font-size: 10px; padding: 5px 0; white-space: nowrap; opacity: 0.6; transition: all 0.3s ease; } .sidebar .nav-links li .sub-menu a:hover{ opacity: 1; } .sidebar.close .nav-links li .sub-menu{ position: absolute; left: 100%; top: -10px; margin-top: 0; padding: 10px 20px; border-radius: 0 6px 6px 0; opacity: 0; display: block; pointer-events: none; transition: 0s; } .sidebar.close .nav-links li:hover .sub-menu{ top: 0; opacity: 1; pointer-events: auto; transition: all 0.4s ease; } .sidebar .nav-links li .sub-menu .link-name{ display: none; } .sidebar.close .nav-links li .sub-menu .link-name{ font-size: 11px; opacity: 1; display: block; } .sidebar .nav-links li .sub-menu.blank{ opacity: 1; pointer-events: auto; padding: 3px 20px 6px 16px; opacity: 0; pointer-events: none; } .sidebar .nav-links li:hover .sub-menu.blank{ top: 50%; transform: translateY(-50%); } .sidebar .profile-details{ position: fixed; bottom: 0; width: 260px; display: flex; align-items: center; justify-content: space-between; background: #1d1b31; padding: 12px 0; transition: all 0.5s ease; } .sidebar.close .profile-details{ background: none; } .sidebar.close .profile-details{ width: 78px; } .sidebar .profile-details .profile-content{ display: flex; align-items: center; } .sidebar .profile-details img{ height: 52px; width: 52px; object-fit: cover; border-radius: 16px; margin: 0 14px 0 12px; background: #1d1b31; transition: all 0.5s ease; } .sidebar.close .profile-details img{ padding: 10px; } .sidebar .profile-details .profile_name, .sidebar .profile-details .job{ color: #000; font-size: 16px; font-weight: 400; white-space: nowrap; } .sidebar .profile-details .job{ color: #000; font-size: 14px; font-weight: 300; opacity:.5; white-space: nowrap; } .sidebar .profile-details i.bx{ min-width: 50px; } .sidebar .profile-details i.fa{ min-width: 50px; } .sidebar.close .profile-details i, .sidebar.close .profile-details .profile_name, .sidebar.close .profile-details .job{ display: none; } .sidebar .profile-details .job{ font-size: 12px; } .sidebar.close ~ .navbar { left: 70px; width: calc(100% - 78px); } .sidebar .nav-links li a .link-name{ font-size: 10px; font-weight: 400; color: var(--sidebar-text-color); transition: all 0.4s ease; } .sidebar .nav-links li i{ height: 45px; min-width: 78px; text-align: center; line-height: 50px; color: var(--sidebar-text-color); font-weight: 500; font-size: 10px; cursor: pointer; transition: all 0.3s ease; } .sidebar .nav-links li.active a .link-name, .sidebar .nav-links li:hover a .link-name{ color: var(--scroller-color); } .sidebar .nav-links li.active i, .sidebar .nav-links li:hover i{ color: var(--scroller-color); } /* -- Sidebar on Mobile*/ @media (min-width: 768px) { .sidebar-icon-menu { display: none!important; } .img-navbar { display: none; } } @media screen and (min-width:768px) and (max-width:1166px) { .d-icon{ display: none; } } .z-0 { z-index: 0; } /* Role badge */ .role_name_sm { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 500; background-color:#fff; color: #000; } @media (max-width: 767.98px) { .role_name_sm { display: none; } .role-icon-sm { display: none!important; } .img-navbar { display: flex; } .navbar { position: fixed; top: 0px!important; border-radius: 0px; z-index: 100; } @media (max-width: 767.98px) { .navbar { min-height: 38px !important; /* or your preferred height */ height: 38px !important; padding-top: 2px !important; padding-bottom: 2px !important; } } .sidebar { z-index: 106; top: -25px; left: -20px; border-radius: 0px; } .home-section { margin-top: -134px } .sidebar.close ~ .home-section { left: auto!important; width: initial!important; } .home-section ~ .sidebar.close { display: none; } .sidebar-icon-menu { display: initial; } .top-58{ top: 0px!important; } .sidebar.close ~ .navbar { left: inherit!important; } } .sidebar.close { width: 211px; } .sidebar.close .text-light { display: flex; } .sidebar.close .nav-links { overflow-y: scroll; } /* --------- End Sidebar ---------*/ /* --------- Block Content --------- */ .home-section{ position: relative; left: 75px; width: calc(100% - 99px); transition: all 0.5s ease; top: 153px; padding: 15px; box-sizing: border-box; } .home-section .home-content{ height: 60px; display: flex; align-items: center; } .home-section .home-content .bx-menu, .home-section .home-content .text{ color: #11101d; font-size: 35px; } .home-section .home-content .bx-menu{ margin: 0 15px; cursor: pointer; } .home-section .home-content .text{ font-size: 26px; font-weight: 600; } .navbar { background:var(--navbar-bg-color); } .application_form{ margin-top: 10px; margin-left: 10px; margin-right: 10px; margin-bottom: 10px; padding: 10px; background: #ebebec; border-radius: 3px; } /* --------- Sidebar RESPONSIVENESS ---------*/ @media (max-width: 767.98px) { .sidebar{ width: 0; } .sidebar.active{ width: 60px; } .home-section{ width: 100%; left: 0; max-width: 100vw; } .sidebar.active ~ .home-section{ left: 60px; width: calc(100% - 60px); max-width: calc(100vw - 60px); } .home-section nav{ width: 100%; left: 0; margin-top: 17px; background: #fff; } .sidebar.active ~ .home-section nav{ left: 60px; width: calc(100% - 60px); } .logo-details{ display: none !important; } .sidebar-md-close { display: none!important; } } /* --------- End Sidebar RESPONSIVENESS ---------*/ #intern_alert{ display: none; } .dot { height: 50px; width: 52px; background:black; border-radius: 50%; display: inline-block; } .form-select { font-size: 10px; } /* --------- Table---------*/ .dataTables_length { font-size: 10px; } .dataTables_filter { font-size: 10px; margin-left: 260px; } .data_tables_info { font-size: 10px; } .page-item.active .page-link { color: #fff; background-color: var(--primary-color); border-color: var(--primary-color); } .paginate_button { font-size: 10px; } table.dataTable.nowrap th, table.dataTable.nowrap td { white-space: nowrap; } .tbody, td, tfoot, th, thead, tr { border-color: inherit; border-style: none; border-width: 0; } thead { background: var(--table-header-color)!important; color: whitesmoke!important; letter-spacing: 0.3px!important; font-weight: 500!important; } #completed-programs-table thead.completed-programs-thead th { background: var(--table-header-color) !important; color: #fff !important; opacity: 1 !important; } /* Programme Management -> "Requested Access" tab (_programme_access_requests_templates.html). Bootstrap covers layout, spacing, buttons and the striped rows; these cover what it cannot. */ /* Brand-coloured header (no Bootstrap utility is bound to --primary-color). */ .programme-access-table thead th { background: var(--primary-color) !important; color: #fff !important; opacity: 1 !important; vertical-align: middle; } .programme-access-table thead th .programme-access-sort { color: inherit; text-decoration: none; } /* Search-or-programme dropdown: long programme lists scroll inside the menu. Bootstrap has overflow utilities but no max-height one. */ .programme-access-find-menu { max-height: 18rem; overflow-y: auto; } /* Request note preview: one line in the table, full text in the tooltip. */ .programme-access-note { display: inline-block; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } /* ---------End Table---------*/ .breadcrumb-item{ color: white !important; } /* --------- Custom Colors & Buttons---------*/ .bg-blue { background: linear-gradient(to right, #96d4f5, #92daf0) !important; } .bg-blue-light { background: #c1e5f8 !important; } .bg-secondary { background-color: var(--secondary-color) !important; } /* Brandâ€‘aware buttons (use theme primary/secondary colors) */ .btn-outline-primary { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color); } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--secondary-color); color: #fff; border-color: var(--secondary-color); } /* Brandâ€‘aware buttons (use theme primary/secondary colors) */ .btn-outline-primary { background-color: var(--btn-outline-primary-bg, var(--primary-color)); color: var(--btn-outline-primary-text, #fff); border-color: var(--btn-outline-primary-border, var(--primary-color)); } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--btn-outline-primary-hover-bg, var(--secondary-color)); color: var(--btn-outline-primary-hover-text, #fff); border-color: var(--btn-outline-primary-hover-border, var(--secondary-color)); } /* Buttons placed on a colored header bar/card (e.g. .programme-table-header) inherit the same brand color as their background and become invisible. Force a neutral dark treatment there instead of the brand color, so the button stays visible regardless of what the tenant's primary color is. */ .header-card .btn-outline-primary, .header-card-secondary .btn-outline-primary, .card-header.bg-outline-primary .btn-outline-primary, .programme-table-header .btn-outline-primary, .bg-blue-wave .btn-outline-primary { background-color: var(--btn-outline-primary-bg); background-image: none; border-color: transparent; color: #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18); } .header-card .btn-outline-primary:hover, .header-card .btn-outline-primary:focus-visible, .header-card-secondary .btn-outline-primary:hover, .header-card-secondary .btn-outline-primary:focus-visible, .card-header.bg-outline-primary .btn-outline-primary:hover, .card-header.bg-outline-primary .btn-outline-primary:focus-visible, .programme-table-header .btn-outline-primary:hover, .programme-table-header .btn-outline-primary:focus-visible, .bg-blue-wave .btn-outline-primary:hover, .bg-blue-wave .btn-outline-primary:focus-visible { background-color: #1d2124; background-image: none; border-color: transparent; color: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); } .btn-outline-secondary { background-color: var(--secondary-color); color: #fff; border-color: var(--secondary-color); } .btn-outline-success { background-color: #2fae4f; color: #fff; border-color: #2fae4f; } .btn-outline-success:hover { background-color: #2fae4f; color: #fff; border-color: #2fae4f; } .btn-outline-success:after { background-color: #2fae4f; color: #fff; border-color: #2fae4f; } .btn-outline-info { background-color: var(--btn-color) !important; color: #152329 !important; border-color: #c1e5f8 !important; } .btn-outline-info:hover { background-color: #c1e5f8 !important; color: #152329 !important; border-color: #c1e5f8 !important; } .btn-outline-info:after { background-color: #c1e5f8 !important; color: #152329 !important; border-color: #c1e5f8 !important; } .text-blue { color: #2f65ae; } .fw-bold { font-weight: 700!important; } .bg-Orcaa { background: linear-gradient(to right,var(--secondary-color)); } .bg-Orcaa-footer { background:#a830b3; } .btn-orcaa-save{ background: #300067; } .bg-Orcaa-footerr{ background: #300067; } .bg-tree{ background:#5353b7; } .btn-Orcaa-cancel{ background:#9530b3; } .text-light{ font-size: 10px; color: var(--primary-color) !important; margin: auto; font-weight: 600; } .sidebar-text-muted{ font-size: 10px; color: var(--disabled-link-color) !important; margin: auto; margin-left: 20px; font-weight: 600; } .text-darkblue { color: #152329; } .text-blue { color: #2f65ae; } .btn-dark-blue { background: linear-gradient(0deg, rgba(73,76,158,0.677) 27%, rgba(119, 121, 197, 0.677) 100%); border-radius: 10px; border: transparent; } .text-purple, .text-primary { color: var(--primary-color); } .bg-text-purple, .bg-primary { background-color: var(--primary-color); } .btn-purple-transparent { color: var(--primary-color); border: 1px solid var(--bg-primary-btn); background-color: transparent; border-radius: 10px; } .btn-purple-transparent:hover { color: var(--primary-color); border: 1px solid var(--bg-primary); background-color: transparent; border-radius: 10px; } .text-opacity { opacity: 0.8; } .bg-icon { background-color: var(--teriary-color); border-radius: 12px; font-size: 30px } .bg-icon-inner { background-color: var(--primary-light-primary); border-radius: 12px; font-size: 30px; } .bg-purple { background-color: var(--primary-light-primary); } .border-blue { border-color: #c1e5f8; border-width: 2px; } .btn-orca { padding: 0.25rem 1.5rem; font-size: .875rem; border-radius: 2.2rem; margin-left:-7px; background:#5353b7; } .btn-orca-subskill { padding: 0.25rem 1.5rem; font-size: .875rem; border-radius: 2.2rem; margin-left:1px; background:#5353b7; } .a { color:#000; text-decoration:none; } .btn-purple { background: var(--btn-color); border-radius: 10px; border: transparent; } .bg-purple-wave { background:var(--dark-purple-2); border-radius:20px; background-repeat: no-repeat; background-size: cover; } .bg-blue-wave { background:var(--dark-purple-2); border-radius:11px; background-repeat: no-repeat; background-size: cover; } .text-dark-puple { color: var(--secondary-light-color); } .text-dark-blue { color: var(--teriary-light-color); } .bg-dark-blue { background-color:var(--teriary-light-color); } .btn-danger { background: linear-gradient(0deg, #dc3545 27%, #dc3545bf 100%)!important; } .btn-success{ background: linear-gradient(0deg, #23c956cc 27%, #2bbf5a 100%)!important; } .bg-rating-1 { background:linear-gradient(0deg, rgb(255 1 1) 0%, rgb(206 35 35 / 79%) 100%); } .bg-rating-2{ background: linear-gradient(0deg, rgb(255 70 1) 0%, rgb(206 89 35 / 79%) 100%); } .bg-rating-3 { background: linear-gradient(0deg, rgb(255 166 1) 0%, rgb(206 161 35 / 79%) 100%); } .bg-rating-4 { background: linear-gradient(0deg, rgb(247, 255, 1) 0%, rgb(255, 167, 0) 100%); } .bg-rating-5 { background: linear-gradient(0deg, rgb(1, 255, 53) 0%, rgba(40, 206, 35, 0.79) 100%) } .btn-gray { background: var(--bg-colour-grey); border-radius: 10px; border: transparent; pointer-events: none; cursor: not-allowed !important; } .btn-sequential-gray { background: var(--bg-sequential-colour-grey); border-radius: 10px; border: transparent; pointer-events: none; cursor: not-allowed !important; } .bg-icon-inner-gray { background: var(--bg-colour-grey) !important; border-radius: 12px; font-size: 30px; pointer-events: none; } .bg-navbar-content-md { /* Top navbar background driven by client theme */ background: var(--navbar-bg-color, var(--primary-color)); } .bg-light-purple { background-color: #8f469b!important; } .bg-purple-gradient { background-image: linear-gradient(to bottom, var(--homepage-card-color-1), var(--homepage-card-color-2)); } .bg-blue-gradient { background-image: linear-gradient(to top, var(--homepage-card-color-3), var(--homepage-card-color-2)); } .bg-blue-1 { background-color:var(--homepage-card-color-4); } /* --------- End Custom Colors & Buttons ---------*/ /* --------- Program-Management ---------*/ .folder-structure { margin-left: 32px; } .folder-structure ul { margin:0px; } .folder-structure li { padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem; position: relative; } .folder-structure li::before { border-left: 2px solid var(--primary-color); content: ''; /* Position */ left: 0; position: absolute; top: 0; transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0); /* Size */ height: 100%; } .folder-structure li::after { border-bottom: 2px solid var(--primary-color); content: ''; /* Position */ left: 0; position: absolute; top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2); transform: translate(-100%, 0); /* Size */ width: var(--folder-structure-item-margin-left); } /* Remove the border from the last item */ .folder-structure li:last-child::before { height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2); } .ul-tree{ list-style-type: none; margin: 0; padding: 0; } .caret { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .caret::before { content: "\1F4C1"; color: black; font-size: 24px; } .caret-down::before { -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } .nested { display: none; list-style-type: none; } .active { display: block; } .select-box { position: relative; } .select-box select { width: 100%; } .over-select { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .select-options-container { display: none; border: 0.5px #7c7c7c solid; background-color: #ffffff5d; max-height: 150px; overflow-y: scroll; } .select-options-container label { display: block; font-weight: normal; display: block; white-space: nowrap; min-height: 1.2em; background-color: #ffffff00; padding: 0 2.25rem 0 0.75rem; } .select-options-container label:hover { background-color: #1e90ff; } .card-h { padding: 0.5rem 1rem; margin-bottom: 0; background-color: rgba(12,0,0,.03); border-bottom: 1px solid rgba(125, 64, 146, 0.831); } .card-header:first-child { border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; } /* --------- End Program-Management ---------*/ .circle { width: 50px; height: 50px; background-color:#300067; border-radius: 50%; position: absolute; right: 0; left:365px; top: 50%; transform: translateY(-50%); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .test{ background-image: url('../images/geomatric5.png'); background-repeat: no-repeat; background-size:25%; background-position:620px 269px; } .disabled-link { color:var(--disabled-link-color) !important; pointer-events: none !important; text-decoration: none !important; cursor: not-allowed !important; } .no-cursor { cursor: not-allowed; } .no-hover{ pointer-events: none; opacity: 0.6; cursor: default; } .card-overview { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color:rgb(235, 235, 235); background-image: url('../images/geomatric5.png'); background-repeat: no-repeat; background-size:25%; background-position:610px 82px; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: 0.25rem; } .card-image { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: rgb(74, 22, 104); background-position: 620px 269px; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: 1.25rem; margin-left:60px; margin-top:60px; } .card-body { flex: 1 1 auto; padding: 1rem 1rem; } .card-header { border-top-left-radius: 15px!important; border-top-right-radius: 15px!important; } .scrollable { height: 400px; overflow-y: scroll; background-color:#fff; } .assessment-scrollable { height: 81vh; overflow-y: scroll; background-color:#fff; } .manage_quiz_questions .scrollable { height: 550px; overflow-y: scroll; background-color:#fff; } .alert-secondary { color: #41464b; background-color: #dce0e4; border-color: #d7dade; } .alert-purple { background: linear-gradient(0deg, rgba(165,161,182,1) 0%, rgba(165,161,182,0.7933637640449438) 100%); } .alert-danger { background: linear-gradient(0deg, #dc3545 27%, #dc3545bf 100%)!important; border-radius: 15px!important; } .frame_size iframe { border: 0; width: 500px; } .card_scrollable{ height:5rem; width: 25rem; position: relative; } .choices__list--dropdown .choices__item--selectable { padding-right: 6px !important; } div.dataTables_wrapper div.dataTables_length select { width: 50px !important; } .card_question_paper { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color:rgba(235, 235, 235, 0.755); } ul.checkbox-list { list-style-type: none; padding: 0; } ul.checkbox-list li { display: flex; align-items: center; margin-bottom: 5px; /* Adjust as needed */ } ul.checkbox-list input[type="checkbox"] { margin-right: 10px; /* Adjust as needed */ } /* course content */ .course-sidebar { height: 100%; overflow-y: auto; /* Add this */ background: #f8f9fa; } .list-item { cursor: pointer; } .view-img-size { max-width: 62%; height: 100px; } .dropdown-icon { display: inline-block; transition: transform 0.3s; transform: rotate(90deg); } .rotate-90 { transform: rotate(90deg); } .rotate-0 { transform: rotate(0deg); } li.active p.text-muted { color: white !important; } .course_detail_paragraph { max-width: 150px; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 360px) { .media_card{ width:72% !important; } } .header-card { position: relative; display: flex; flex-direction: column; min-width: 0; /* Use theme-driven gradient so all clients get a branded header */ background: var( --bg-card-purple, linear-gradient(var(--primary-color)) ); background-clip: border-box; border-radius:20px; background-repeat: no-repeat; background-size: cover; } /* The " Management" section header (Programme Management, Recruitment Management, Select Your Programme) -- flat --primary-color instead of the --bg-card-purple multi-stop gradient. */ .programme-management-embed-header-shell .header-card { background: var(--primary-color) !important; background-image: none !important; } .header-card-secondary { position: relative; display: flex; flex-direction: column; min-width: 0; background-clip: border-box; border-radius:20px; /* Theme-driven secondary header gradient */ background-image: var( --bg-card-secondary, linear-gradient(var(--primary-color)) ); padding: 15px; } .header-side-card { position: relative; display: flex; flex-direction: column; min-width: 0; background-color: #73859f21; border-radius:20px; background-repeat: no-repeat; background-size: cover; } .files-warehouse-panel .warehouse-header-bar, .success-stories-panel .success-story-header-bar { background: var(--primary-color) !important; color: #ffffff !important; border-bottom: 1px solid rgba(255, 255, 255, 0.18); border-radius: 18px 18px 0 0; } .files-warehouse-panel { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; --folder-structure-item-margin-left: 0.5rem; --folder-structure-item-height: 1.5rem; } .files-warehouse-panel .warehouse-header-bar i, .success-stories-panel .success-story-header-bar i { color: inherit !important; } .files-warehouse-panel .header-side-card, .files-warehouse-panel .card-body, .files-warehouse-panel .folder-structure { background-color: #ffffff !important; } .files-warehouse-panel .system-management-table-shell { overflow-x: auto !important; overflow-y: visible !important; } .files-warehouse-panel .card-body { width: 100%; max-width: 100%; padding: 1rem 0.5rem 1.25rem 0 !important; box-sizing: border-box; } .files-warehouse-panel .header-side-card { padding: 0 !important; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; box-sizing: border-box; } .files-warehouse-panel .folder-structure { width: 100%; margin-left: 0; padding-left: 0; } .files-warehouse-panel .folder-structure li { padding-top: var(--folder-structure-item-padding-top) !important; } .files-warehouse-panel .folder-structure li::before { top: var(--folder-structure-item-padding-top); height: calc(100% - var(--folder-structure-item-padding-top)); } .files-warehouse-panel .folder-structure li:last-child::before { height: calc(var(--folder-structure-item-height) / 2); } .files-warehouse-panel .folder-structure .caret { display: inline-flex; align-items: center; flex-wrap: wrap; min-height: var(--folder-structure-item-height); line-height: 1.15; vertical-align: middle; } .files-warehouse-panel .caret::before { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; flex: 0 0 1.5rem; vertical-align: middle; line-height: 1; margin-right: 0.15rem; } .files-warehouse-panel .folder-name { margin-top: 0 !important; } .files-warehouse-panel .course-li .folder-name small { flex: 0 0 100%; box-sizing: border-box; margin-top: 0.15rem; padding-left: 1.65rem; line-height: 1.15; } .files-warehouse-panel .warehouse-header-bar { display: block; width: 100%; margin: 0 !important; box-sizing: border-box; } .files-warehouse-panel thead, .success-stories-panel thead, #task_management thead, #task_table_wrapper thead { background: var(--primary-color) !important; color: #ffffff !important; } .files-warehouse-panel thead th, .success-stories-panel thead th, #task_management thead th, #task_table_wrapper thead th { background: var(--primary-color) !important; color: #ffffff !important; } .success-stories-panel #success-story-add-post-btn { background: #000000 !important; border-color: #000000 !important; color: #ffffff !important; } .success-stories-panel #success-story-add-post-btn:hover, .success-stories-panel #success-story-add-post-btn:focus { background: #1f1f1f !important; border-color: #1f1f1f !important; color: #ffffff !important; } /* ---------End Cards and header Cards---------*/ /* ---------Scroller---------*/ .scroller { scroll-behavior: smooth; max-height: 400px; overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.5); } .side-card-height { height: 80hv; } @media (max-width: 1700px) { .bg-icon { font-size: 20px!important; } .side-scroller { scroll-behavior: smooth; max-height: 620px; overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.5); } .side_card_h_md .side-scroller { scroll-behavior: smooth; max-height: 497px; overflow-y: scroll; } } @media (min-width: 1700px) { .scroller { max-height:fit-content; } .side-scroller { max-height:none; } } /* ---------END Scroller---------*/ @media (max-width: 1232px) { .header-img-1 { display: none; } .header-img-2 { display: none; } .content-card { width: auto!important; height: auto!important; } } @media screen and (min-width:766px) and (max-width:1472px) { .side-icon { display: none; } } .content-card { min-width: 80px; height: 86px; } /* ---------ALERTS AND MODALS---------*/ /* Keep every SweetAlert action consistent with the platform buttons. */ .swal2-container button.swal2-styled.swal2-confirm, .swal2-container button.swal2-styled.swal2-cancel, .swal2-container button.swal2-styled.swal2-deny { border: 1px solid transparent !important; border-radius: 0.375rem !important; background: var(--btn-outline-primary-bg, var(--secondary-color, #0d6efd)) !important; color: var(--btn-outline-primary-text, #fff) !important; font-size: 0.85rem; font-weight: 600; line-height: 1.2; min-width: 6.5rem; min-height: 2rem; padding: 0.45rem 0.9rem; display: inline-flex; align-items: center; justify-content: center; box-shadow: none !important; } .learner-assessment-swal .learner-assessment-swal__actions { display: flex; justify-content: center; gap: 0.75rem; margin-top: 1.25rem; } .learner-assessment-swal .learner-assessment-swal__confirm, .learner-assessment-swal .learner-assessment-swal__cancel { min-width: 5.5rem; min-height: 2rem; padding: 0.45rem 0.9rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; line-height: 1.2; white-space: nowrap; } .learner-assessment-swal .learner-assessment-swal__confirm { border: 1px solid transparent; background: var(--primary-color); color: #fff; } .learner-assessment-swal .learner-assessment-swal__cancel { border: 1px solid transparent; background: #fff; color: #343a40; } .learner-assessment-swal .learner-assessment-swal__confirm:hover, .learner-assessment-swal .learner-assessment-swal__confirm:focus { filter: brightness(0.92); color: #fff; } .learner-assessment-swal .learner-assessment-swal__cancel:hover, .learner-assessment-swal .learner-assessment-swal__cancel:focus { background: #f1f3f5; color: #212529; } .modal-backdrop { z-index: 1050; } .modal { z-index: 1055; } .modal-content { border-radius: 10px!important; } .modal-header { border-bottom: none; color: var(--modal-header-text)!important; padding: 10px!important; background: var(--primary-color); border-top-left-radius: 9px; border-top-right-radius: 9px; border: 0.1px solid #fff; } .modal-body label { color:var(--modal-label-color); margin-top: 3px; margin-bottom: 3px; } /* ---------ALERTS AND MODALS---------*/ /* ---------NAV TABS---------*/ .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: var(--modal-label-color); border-radius: 10px; background-color: var(--tab-color); color: whitesmoke; } .nav-tabs .nav-link:hover { border: 0px solid transparent; } .nav-tabs { border-bottom:transparent; } .nav-link { color: #6c757d; } ul.nav-tabs { background-color: transparent!important; } /* ---------END NAV TABS---------*/ .highcharts-title { font-size: 12px!important; color: var(--sidebar-text-color)!important;d font-weight: bold!important; fill: var(--sidebar-text-color)!important; } .choices__list--multiple .choices__item { display: inline-block; vertical-align: middle; border-radius: 10px!important; padding: 4px 10px; font-size: 11px!important; font-weight: 100!important; margin-right: 3.75px; margin-bottom: 3.75px; background-color: var(--dark-blue-color, var(--primary-color))!important; border: 1px solid var(--dark-blue-color, var(--primary-color))!important; color: #fff; word-break: break-all; } @media (max-width: 1232px) { .header-card-secondary .col-6,.header-card-secondary .col-9 { width: 100%!important; } } /* --------- PAGE SCROLLER ---------*/ ::-webkit-scrollbar { width: 7px; height: 6px; } body::-webkit-scrollbar-track { background-color: var(--white); } body::-webkit-scrollbar-thumb { background-color: var(--scroller-color); border: 1px solid var(--white); border-radius: 10px; } .sidebar-text-color{ color: var(--sidebar-text-color) !important; } .disabled-div{ pointer-events: none; opacity: 0.7; cursor: default } .submit-button-font-size { font-size: 18px; } @media (max-width: 600px) { .video-container { max-width: 100%; } } .table-responsive-rubric table { border-collapse: collapse; width: 100%; } .table-responsive-rubric table tr, .table-responsive-rubric table th, .table-responsive-rubric table td { padding: 8px; } .table-responsive-rubric table th, .table-responsive-rubric table td { border: 1px solid #ddd; } .table-responsive-rubric { margin-bottom: 20px; } /* Rubric PDF viewer sizing for code challenge page */ .rubric-pdf-viewer { width: 100%; min-height: 720px; height: 70vh; border-radius: 8px; overflow: hidden; background: #f8f9fa; border: 2px solid #e5e7eb; } .rubric-pdf-frame { width: 100%; height: 100%; min-height: 720px; border: none; border-radius: 8px; } @media (max-width <= 768px) { .rubric-pdf-viewer { min-height: 420px; height: 55vh; } .rubric-pdf-frame { height: 100%; min-height: 420px; } } .review_scroller{ max-height:400px; overflow-y:auto; scrollbar-color:rgb(130, 122, 122) white !important; } .question_scroller{ max-height:300px; overflow-y:auto; scrollbar-color:rgb(130, 122, 122) white !important; } .timeline { display: flex; flex-direction: column; gap: 20px; } .tl-item { display: flex; align-items: center; } .tl-dot { width: 25px; height: 25px; border-radius: 50%; margin-right: 13px; margin-left: -13px; display: flex; justify-content: center; color: white; } .tl-content { font-family: Arial, sans-serif; } .tl-content b { font-weight: bold; color: black; } .swal2-container button.swal2-styled.swal2-confirm, .swal2-container button.swal2-styled.swal2-cancel, .swal2-container button.swal2-styled.swal2-deny { border: 1px solid transparent !important; border-radius: 0.375rem !important; background: var(--btn-outline-primary-bg, var(--secondary-color, #0d6efd)) !important; color: var(--btn-outline-primary-text, #fff) !important; font-size: 0.85rem; font-weight: 600; line-height: 1.2; min-width: 6.5rem; min-height: 2rem; padding: 0.45rem 0.9rem; display: inline-flex; align-items: center; justify-content: center; box-shadow: none !important; } .progress { height: 3px; } .progress-bar { background-color: var(--bg-progress-bar); width: 25%; } .scrolling-container { overflow-x: auto; white-space: nowrap; padding: inherit; } .scrolling-container::-webkit-scrollbar { width: 6px; } .scrolling-container::-webkit-scrollbar-thumb { background-color: var(--bg-progress-bar); border-radius: 6px; } .scrolling-container::-webkit-scrollbar-thumb:hover { background-color: var(--bg-progress-bar); } @media (min-width: 100px) { .modal-100 { width: 100% !important; max-width: 100% !important; } } table.dataframe thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Add ellipsis for overflow */ } .form-scroller { height:80vh; overflow-y:scroll; overflow-x: hidden; } .form-scroller::-webkit-scrollbar { width: 7px; height: 6px; } .form-scroller::-webkit-scrollbar-track { background-color: var(--white); } .form-scroller::-webkit-scrollbar-thumb { background-color: var(--scroller-color); border: 1px solid var(--white); border-radius: 10px; } /* ---------End PAGE SCROLLER ---------*/ .nowrap-button { white-space: nowrap; /* Prevent text wrapping */ overflow: hidden; /* Optional: Hide overflow text */ text-overflow: ellipsis; /* Optional: Add ellipsis for overflow text */ } .no-events { pointer-events: none; } .header-gray-card { pointer-events: none; cursor: not-allowed !important; position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--bg-colour-grey); background-clip: border-box; border-radius:20px; background-repeat: no-repeat; background-size: cover; } /* Shared platform popup redesign */ .assessment-guided-success-popup, .platform-guided-popup-shell { border: 1px solid rgba(232, 227, 242, 0.96); border-radius: 14px; box-shadow: 0 28px 72px rgba(45, 27, 86, 0.26); font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif; overflow: hidden; padding: 0 !important; } .assessment-guided-success-popup .swal2-title, .platform-guided-popup-shell .swal2-title, .assessment-guided-success-popup .swal2-icon, .platform-guided-popup-shell .swal2-icon { display: none !important; } .assessment-guided-success-popup .swal2-html-container, .platform-guided-popup-shell .swal2-html-container { margin: 0 !important; padding: 0.55rem 0.6rem 0.45rem !important; text-align: left; } .assessment-guided-success-popup .swal2-footer, .platform-guided-popup-shell .swal2-footer { align-items: center; border-top: 1px solid var(--line, #e8e3f2); display: flex; gap: 0.35rem; justify-content: flex-end; margin: 0 !important; padding: 0.5rem 0.6rem 0.55rem !important; } .platform-guided-popup { color: var(--ink, #1f1730); display: flex; flex-direction: column; gap: 0.55rem; } .platform-guided-popup__header { align-items: flex-start; display: flex; gap: 0.5rem; } .platform-guided-popup__header-copy { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .platform-guided-popup__badge { align-items: center; background: #edf8f1; border: 1px solid rgba(174, 224, 191, 0.8); border-radius: 50%; color: var(--success, #3fb27f); display: flex; flex: 0 0 auto; height: 2.1rem; justify-content: center; width: 2.1rem; } .platform-guided-popup__badge-icon { display: inline-flex; height: 0.95rem; width: 0.95rem; } .platform-guided-popup__badge-icon svg { height: 100%; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.6; width: 100%; } .platform-guided-popup__title { color: var(--ink, #1f1730); font-size: 1.05rem; font-weight: 700; line-height: 1.2; margin: 0; } .platform-guided-popup__message { color: var(--ink-soft, #645d78); font-size: 0.74rem; line-height: 1.45; margin: 0; } .platform-guided-popup__steps { background: #faf8fd; border: 1px solid rgba(227, 218, 241, 0.98); border-radius: 14px; padding: 0.5rem 0.6rem 0.55rem; } .platform-guided-popup__steps-label { color: var(--purple-700, #4b2e83); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; margin: 0 0 0.45rem; text-transform: uppercase; } .platform-guided-popup__steps-list { color: #4f4860; font-size: 0.74rem; line-height: 1.45; margin: 0; padding-left: 1.15rem; } .platform-guided-popup__steps-item { font-size: 0.74rem; margin-bottom: 0.18rem; } .platform-guided-popup__checkbox { align-items: center; color: #4f4860; display: flex; gap: 0.35rem; font-size: 0.78rem; line-height: 1.4; margin-top: 0.05rem; } .platform-guided-popup__checkbox input { accent-color: var(--purple-500, #6d3fb0); cursor: pointer; height: 14px; width: 14px; } .platform-guided-popup__footer { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; width: 100%; } .platform-guided-popup__action-btn { border-radius: 8px; font-size: 0.8rem; font-weight: 700; min-width: 4.8rem; padding: 0.3rem 0.6rem; transition: background-color 0.12s ease, filter 0.12s ease, transform 0.05s ease; } .platform-guided-popup__action-btn.btn-outline-primary { border-width: 1px; } .platform-guided-popup__action-btn:active { transform: scale(0.985); } .platform-guided-popup__action-btn--secondary { background: #f4eefc; color: var(--purple-700, #4b2e83); } .platform-guided-popup__action-btn--secondary:hover, .platform-guided-popup__action-btn--secondary:focus-visible { background: #e9e0f7; color: var(--purple-700, #4b2e83); } .platform-guided-popup__action-btn--primary { background: var(--purple-500, #6d3fb0); color: #ffffff; } .platform-guided-popup__action-btn--primary:hover, .platform-guided-popup__action-btn--primary:focus-visible { background: var(--purple-700, #4b2e83); color: #ffffff; } @media (max-width: 575.98px) { .assessment-guided-success-popup .swal2-html-container, .platform-guided-popup-shell .swal2-html-container { padding: 0.45rem 0.5rem 0.4rem !important; } .assessment-guided-success-popup .swal2-footer, .platform-guided-popup-shell .swal2-footer { padding: 0.45rem 0.5rem 0.5rem !important; } .platform-guided-popup__header { gap: 0.4rem; } .platform-guided-popup__badge { height: 1.9rem; width: 1.9rem; } .platform-guided-popup__title { font-size: 0.95rem; } .platform-guided-popup__action-btn { min-width: 4.3rem; padding: 0.28rem 0.55rem; } } /* Shared platform danger popup redesign */ .platform-danger-popup-shell { border: 1px solid rgba(241, 209, 209, 0.96); border-radius: 18px; box-shadow: 0 28px 72px rgba(86, 27, 27, 0.22); font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif; overflow: hidden; padding: 0 !important; } .platform-danger-popup-shell .swal2-title, .platform-danger-popup-shell .swal2-icon { display: none !important; } .platform-danger-popup-shell .swal2-html-container { margin: 0 !important; padding: 0.8rem 0.8rem 0.65rem !important; text-align: left; } .platform-danger-popup-shell .swal2-footer { align-items: center; border-top: 1px solid rgba(241, 209, 209, 0.9); display: flex; gap: 0.45rem; justify-content: flex-end; margin: 0 !important; padding: 0.6rem 0.8rem 0.75rem !important; } .platform-danger-popup { color: var(--ink, #1f1730); display: flex; flex-direction: column; gap: 0.65rem; } .platform-danger-popup__header { align-items: flex-start; display: flex; gap: 0.65rem; } .platform-danger-popup__header-copy { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.15rem; min-width: 0; } .platform-danger-popup__badge { align-items: center; background: #fff1f1; border: 1px solid rgba(243, 198, 198, 0.96); border-radius: 50%; color: #e04d4d; display: flex; flex: 0 0 auto; height: 2.7rem; justify-content: center; width: 2.7rem; } .platform-danger-popup__badge-icon { display: inline-flex; height: 1.2rem; width: 1.2rem; } .platform-danger-popup__badge-icon svg { height: 100%; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; width: 100%; } .platform-danger-popup__title { color: var(--ink, #1f1730); font-size: 1.2rem; font-weight: 700; line-height: 1.2; margin: 0; } .platform-danger-popup__message { color: var(--ink-soft, #645d78); font-size: 0.82rem; line-height: 1.45; margin: 0; } .platform-danger-popup__message--secondary { margin-top: -0.05rem; } .platform-danger-popup__warning { align-items: flex-start; background: #fff4f4; border: 1px solid rgba(240, 196, 196, 0.95); border-radius: 14px; display: flex; gap: 0.55rem; padding: 0.6rem 0.7rem; } .platform-danger-popup__warning-icon { align-items: center; background: #fff; border: 1px solid rgba(240, 196, 196, 0.95); border-radius: 50%; color: #e04d4d; display: inline-flex; flex: 0 0 auto; height: 1.35rem; justify-content: center; margin-top: 0.05rem; width: 1.35rem; } .platform-danger-popup__warning-icon svg { height: 0.95rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; width: 0.95rem; } .platform-danger-popup__warning-text { color: #d14e4e; font-size: 0.8rem; line-height: 1.45; margin: 0; } .platform-danger-popup__footer { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: flex-end; width: 100%; } .platform-danger-popup__action-btn { border-radius: 10px; font-size: 0.84rem; font-weight: 700; min-width: 5.6rem; padding: 0.38rem 0.72rem; transition: background-color 0.12s ease, filter 0.12s ease, transform 0.05s ease; } .platform-danger-popup__action-btn:active { transform: scale(0.985); } .platform-danger-popup__action-btn--cancel { background: #f4eefc; color: var(--purple-700, #4b2e83); } .platform-danger-popup__action-btn--cancel:hover, .platform-danger-popup__action-btn--cancel:focus-visible { background: #e9e0f7; color: var(--purple-700, #4b2e83); } .platform-danger-popup__action-btn--danger { background: #dc4a4a; color: #ffffff; } .platform-danger-popup__action-btn--danger:hover, .platform-danger-popup__action-btn--danger:focus-visible { background: #c84040; color: #ffffff; } @media (max-width: 575.98px) { .platform-danger-popup-shell .swal2-html-container { padding: 0.75rem 0.75rem 0.6rem !important; } .platform-danger-popup-shell .swal2-footer { padding: 0.55rem 0.75rem 0.65rem !important; } .platform-danger-popup__badge { height: 2.45rem; width: 2.45rem; } .platform-danger-popup__title { font-size: 1.1rem; } .platform-danger-popup__action-btn { min-width: 5rem; padding: 0.34rem 0.65rem; } } /* --------- Calender ---------*/ .fc { background-color: var(--calendar-bg-color) !important; border-radius: 8px !important; font-size: 0.25rem !important; padding: 0 0.10rem 0.10rem 0.10rem !important; } .fc .fc-toolbar.fc-header-toolbar { font-size: 2.50em !important; padding: 0.50em !important; margin-bottom: 0 !important; } .fc .fc-toolbar-title { color:var(--calendar-title-color); font-size: 2.25em !important; margin: 0 !important; text-align: center !important; width: 100% !important; } .fc .fc-button-primary { background-color:var(--calendar-buttons-color) !important; border: 1px solid var(--calendar-buttons-border-color) !important; font-size: 1em; } .fc-scrollgrid-sync-inner, .fc-scrollgrid, .fc-scroller-harness { border-radius: 8px !important; background-color: transparent !important; } .fc .fc-scrollgrid-section > td { border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; } .fc-col-header-cell-cushion { font-size: 2.25em !important; text-align: center !important; color: var(--calendar-header-days-color) !important; background-color: transparent !important; padding: 0.3em !important; border: bottom !important; text-decoration: none !important; } .fc-daygrid-day-number { color: var(--calendar-dates-color); text-align: center !important; font-size: 1.5em !important; display: flex !important; justify-content: center !important; align-items: center !important; margin-top: 5px !important; margin-right: 5px !important; position: relative !important; z-index: 4 !important; text-decoration: none !important; border-radius: 360px !important; width: 20px !important; height: 20px !important; } .fc .fc-daygrid-day.fc-day-today { background-color: transparent !important; } .fc-daygrid-day.fc-day-today .fc-daygrid-day-number { color: var(--calendar-current-date-color) !important; background-color: var(--calendar-current-date-background-color) !important; border: 1px solid var(--calendar-dates-circle-color) !important; } .fc .fc-scrollgrid-section-sticky > * { background: none !important; position: sticky !important; z-index: 3 !important; } .fc .fc-daygrid-day { border: 1px solid var(--calendar-grid-color) !important; text-align: center !important; font-size: 1.5em !important; } .fc-event-title { display: none; } .fc-event-time { display: none; } .fc-button { font-size: 0.8em !important; padding: 0.3em 0.5em !important; border-radius: 4px !important; } .fc-view { max-width: 100% !important; margin: 0 auto !important; } .fc-col-header-cell { background-color: transparent !important; border: none !important; text-align: center !important; padding: 0.3em !important; } .fc-col-header, .fc-scrollgrid-section > th { background-color: transparent !important; border-top-right-radius: 8px !important; } .fc thead { background: none !important; color: whitesmoke !important; letter-spacing: 0.3px !important; font-weight: 500 !important; border: 1px solid var(--calendar-header-border-color); } .subskill-padding-left { padding-left: 14rem; } .mainskill-padding-left { padding-left: 12rem; } .calendar-tab-content .fc-daygrid-day-number { color: var(--calendar-dates-color); text-align: center !important; font-size: 3.5em !important; display: flex !important; justify-content: center !important; align-items: center !important; margin-top: 5px !important; margin-right: 5px !important; position: relative !important; z-index: 4 !important; text-decoration: none !important; border-radius: 360px !important; width: 20px !important; height: 20px !important; } .calendar-tab-content .fc .fc-daygrid-day-number { padding: 20px; position: relative; z-index: 4; } .calendar-tab-content .fc-event-title { padding-top: 4px; font-size: 11px; } .calendar-tab-content .fc .fc-toolbar.fc-header-toolbar { font-size: 3.5em !important; padding: 0.50em !important; margin-bottom: 0 !important; } .calendar-tab-content .fc-col-header-cell { background-color: transparent !important; border: none !important; text-align: center !important; padding: 0.3em !important; font-size:8px; } /* Flashing effect */ .flashing-event { animation: flash 1s infinite; } @keyframes flash { 0%, 100% { background-color: red; /* or any other color you want */ } 50% { background-color: white; /* alternate color */ } } .legend-color { display: inline-block; width: 12px; height: 12px; margin-right: 8px; } .blue-event { background-color: #0077B6; } .green-event { background-color: #29BF12; } .red-event { background-color: #C00021; } .yellow-event { background-color: #FFD100; } .legend-list { list-style-type: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; /* This will allow items to wrap to the next line if needed */ } .legend-list li { display: flex; align-items: center; margin-right: 20px; /* Spacing between legend items */ } #calendar-legend { display: flex; justify-content: center; margin-bottom: 20px; } #calendar-legend .legend-list { display: flex; gap: 20px; list-style-type: none; padding: 0; margin: 0; } #calendar-legend .legend-list li { cursor: pointer; } #calendar-legend .legend-color { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: middle; } #calendar-legend .disabled { opacity: 0.5; } /* --------- End Calender ---------*/ .view-event-assessment { content: 'View'; } .hidden-btn { display: none; } /* --------- Card Scrollers ---------*/ /* Ensure that the card containers have the same height and align properly */ .card .chart-height-card { height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .card .chart-height-card-body { flex-grow: 1; } [role="list"] { display: none; } .card .chart-height-card-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .card .chart-height-card-container { width: 100%; height: 300px; /* Adjust the height as needed */ } /* Adjust the padding of columns */ .card .chart-height-padding .col-sm-3, .card .chart-height-padding .col-sm-6 { padding: 10px; } .scrollable-similarity-chart-card { max-height: 700px; overflow-y: auto; overflow-x: hidden; /* Hide horizontal scrollbar if not needed */ height: auto; /* Allow height to adjust based on content */ } .highcharts-similarity-figure { margin: 0; /* Remove default figure margins if necessary */ } .similarity-heatmap-chart-container { width: 100%; max-height: 400px; /* Set maximum height */ height: auto; /* Adjust height automatically if smaller */ min-height: 200px; /* Optional: Set a minimum height if needed */ } select.qrcode:invalid { color: white; } .option-qrcode { color: black; } select:not(:invalid) { color: black; } .no-answer-line { border-top: 2px solid red; margin-top: 10px; } /* Ensure the scrollbar is always visible */ .program-filter-scrollbar { overflow-y: scroll; /* Force scrollbar to always show */ } /* WebKit browsers */ .program-filter-scrollbar::-webkit-scrollbar { width: 6px; /* Adjust the width of the scrollbar */ } .program-filter-scrollbar::-webkit-scrollbar-thumb { background-color: #888; /* Color of the scrollbar thumb */ border-radius: 8px; /* Rounded scrollbar thumb */ } .program-filter-scrollbar::-webkit-scrollbar-track { background-color: #f1f1f1; /* Background of the scrollbar track */ } /* Firefox */ .program-filter-scrollbar { scrollbar-width: auto; /* Ensures the scrollbar is always visible */ scrollbar-color: #888 #f1f1f1; /* Custom color for thumb and track */ } /* p in email_body_container */ .email_body_container p { margin: 0; } /* NEW DASHBOARD CARDS */ .dashboard-card { padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .metric-value { font-size: 22px; font-weight: bold; color: #fff; } .metric-label { color: #fff; font-size: 11px; } .trend-up { color: #fff; font-size: 12px; } .trend-icon { font-size: 18px; } .gender-stat { display: flex; align-items: center; gap: 10px; margin: 10px 0; } .person-icon { font-size: 24px; } .info-icon { background: var(--primary-light-primary); color: var(--primary-color); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; } .view-applicant-profile-page .applicant-program-content { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .view-applicant-profile-page .applicant-program-card { width: 100%; margin-bottom: 0.25rem; padding: 0.85rem 0.9rem 0.95rem; border-radius: 20px; border: 1px solid rgba(15, 23, 42, 0.08); background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 251, 253, 0.98) 100%); box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06); display: flex; flex-direction: column; gap: 0.55rem; } .view-applicant-profile-page .applicant-program-card + .applicant-program-card { margin-top: 1rem !important; } .view-applicant-profile-page .applicant-program-header-row { margin-bottom: 0.15rem; } .view-applicant-profile-page .scroll-container { display: flex; overflow-x: auto; overflow-y: hidden; gap: 14px; align-items: stretch; width: 100%; padding: 0.35rem 0.1rem 0.85rem; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(47, 0, 96, 0.4) rgba(236, 236, 252, 0.85); } .view-applicant-profile-page .scroll-item { flex: 0 0 clamp(13.3rem, 16vw, 14.7rem); max-width: 14.7rem; min-height: 10.3rem; align-self: stretch; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; border-radius: 16px; border: 1px solid rgba(47, 0, 96, 0.15); padding: 0.57rem 0.63rem 0.63rem; background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 245, 254, 0.96)); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08); transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background-color 0.24s ease; position: relative; } .view-applicant-profile-page .scroll-item.current { transform: translateY(-4px); border-color: rgba(56, 189, 248, 0.55); box-shadow: 0 18px 28px rgba(37, 99, 235, 0.18); } .view-applicant-profile-page .scroll-item:hover { transform: translateY(-3px); box-shadow: 0 16px 28px rgba(15, 23, 42, 0.12); } .view-applicant-profile-page .applicant-step-card--completed { border-color: rgba(34, 197, 94, 0.45); background: linear-gradient(145deg, rgba(34, 197, 94, 0.11), rgba(220, 252, 231, 0.48)); } .view-applicant-profile-page .applicant-step-card--in-progress { border-color: rgba(59, 130, 246, 0.45); background: linear-gradient(145deg, rgba(59, 130, 246, 0.12), rgba(239, 246, 255, 0.92)); } .view-applicant-profile-page .applicant-step-card--not-started { border-color: rgba(194, 204, 218, 0.92); background: linear-gradient(180deg, rgba(240, 243, 246, 0.99) 0%, rgba(225, 231, 238, 0.98) 100%); box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06); } .view-applicant-profile-page .applicant-step-card--warning { border-color: rgba(245, 158, 11, 0.45); background: linear-gradient(145deg, rgba(245, 158, 11, 0.12), rgba(255, 251, 235, 0.92)); } .view-applicant-profile-page .applicant-step-card--failed { border-color: rgba(239, 68, 68, 0.45); background: linear-gradient(145deg, rgba(239, 68, 68, 0.12), rgba(254, 242, 242, 0.94)); } .view-applicant-profile-page .applicant-step-card-header { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.16rem; width: 100%; margin-bottom: 0.23rem; } .view-applicant-profile-page .applicant-step-status-row { display: flex; align-items: center; justify-content: flex-start; flex: 0 0 auto; min-width: 0; margin-bottom: 0; width: 100%; align-self: flex-start; } .view-applicant-profile-page .applicant-step-status-row--timeline { justify-content: center; align-items: center; } .view-applicant-profile-page .applicant-step-status-chip { display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.24rem; border-radius: 999px; padding: 0.22rem 0.5rem; min-height: 1.28rem; font-size: 0.5rem; line-height: 1; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid transparent; max-width: 100%; white-space: nowrap; } .view-applicant-profile-page .applicant-step-status-chip--timeline { justify-content: center; padding: 0.18rem 0.46rem; min-height: 1.06rem; font-size: 0.46rem; letter-spacing: 0.035em; } .view-applicant-profile-page .applicant-step-status-chip.is-completed { color: #166534; background: rgba(220, 252, 231, 0.85); border-color: rgba(34, 197, 94, 0.45); } .view-applicant-profile-page .applicant-step-status-chip.is-active { color: #1d4ed8; background: rgba(219, 234, 254, 0.88); border-color: rgba(96, 165, 250, 0.5); } .view-applicant-profile-page .applicant-step-status-chip.is-locked { color: #4b5563; background: rgba(241, 243, 245, 0.98); border-color: rgba(203, 213, 225, 0.92); } .view-applicant-profile-page .applicant-step-status-chip.is-warning { color: #92400e; background: rgba(254, 243, 199, 0.9); border-color: rgba(245, 158, 11, 0.55); } .view-applicant-profile-page .applicant-step-status-chip.is-failed { color: #991b1b; background: rgba(254, 226, 226, 0.92); border-color: rgba(239, 68, 68, 0.5); } .view-applicant-profile-page .applicant-step-status-chip-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 0.98em; line-height: 1; } .view-applicant-profile-page .applicant-step-status-chip-icon--outside { font-size: 0.72rem; line-height: 1; } .view-applicant-profile-page .applicant-step-status-stack { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.14rem; flex: 0 0 auto; text-align: center; line-height: 1; } .view-applicant-profile-page .applicant-step-status-stack--featured { gap: 0.18rem; } .view-applicant-profile-page .applicant-step-status-stack--featured .applicant-step-status-chip--timeline { padding: 0.24rem 0.58rem; min-height: 1.22rem; font-size: 0.56rem; letter-spacing: 0.045em; } .view-applicant-profile-page .applicant-step-status-stack--featured .applicant-step-status-chip-icon--outside { font-size: 0.88rem; } .view-applicant-profile-page .applicant-step-status-stack--featured .applicant-step-status-chip-label { font-size: 0.56rem; } .view-applicant-profile-page .applicant-step-status-stack.is-completed { color: #166534; } .view-applicant-profile-page .applicant-step-status-stack.is-active { color: #1d4ed8; } .view-applicant-profile-page .applicant-step-status-stack.is-locked { color: #4b5563; } .view-applicant-profile-page .applicant-step-status-stack.is-warning { color: #92400e; } .view-applicant-profile-page .applicant-step-status-stack.is-failed { color: #991b1b; } .view-applicant-profile-page .applicant-step-status-chip-label { line-height: 1; } @media (max-width: 767.98px) { .view-applicant-profile-page .applicant-program-header-row { flex-direction: column; align-items: flex-start !important; gap: 0.6rem !important; } .view-applicant-profile-page .applicant-program-header-row .applicant-program-content { width: 100%; } .view-applicant-profile-page .applicant-program-header-row .withdraw-application-btn { width: auto; max-width: min(100%, 9.5rem); min-width: 0; align-self: flex-start; white-space: normal; line-height: 1.15; text-align: center; padding: 0.45rem 0.7rem; margin-left: 0 !important; margin-right: 0 !important; } .view-applicant-profile-page .applicant-program-card + .applicant-program-card { margin-top: 1rem !important; } .view-applicant-profile-page .applicant-program-card { padding: 0.7rem 0.6rem 0.8rem; border-radius: 18px; gap: 0.45rem; margin-top: 0.35rem !important; } .view-applicant-profile-page .scroll-item { flex-basis: 67vw; max-width: 67vw; min-height: 149px; } .view-applicant-profile-page .applicant-step-card-header { gap: 0.12rem; margin-bottom: 0.16rem; } .view-applicant-profile-page .applicant-step-status-chip { gap: 0.2rem; padding: 0.19rem 0.42rem; min-height: 1.34rem; font-size: 0.5rem; } .view-applicant-profile-page .applicant-step-status-chip--timeline { padding: 0.15rem 0.38rem; min-height: 1.02rem; font-size: 0.44rem; } .view-applicant-profile-page .applicant-step-status-chip-icon { font-size: 0.77em; } .view-applicant-profile-page .applicant-step-status-chip-icon--outside { font-size: 0.64rem; } .view-applicant-profile-page .applicant-step-status-stack { gap: 0.11rem; } .view-applicant-profile-page .applicant-step-status-stack--featured { gap: 0.14rem; } .view-applicant-profile-page .applicant-step-status-stack--featured .applicant-step-status-chip--timeline { padding: 0.2rem 0.46rem; min-height: 1.12rem; font-size: 0.51rem; } .view-applicant-profile-page .applicant-step-status-stack--featured .applicant-step-status-chip-icon--outside { font-size: 0.72rem; } .view-applicant-profile-page .applicant-step-status-stack--featured .applicant-step-status-chip-label { font-size: 0.51rem; } .view-applicant-profile-page .applicant-step-title { font-size: 0.74rem; margin-bottom: 0.35rem; } .view-applicant-profile-page .applicant-step-meta, .view-applicant-profile-page .applicant-step-date { font-size: 0.6rem; line-height: 1.22; } .view-applicant-profile-page .applicant-step-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.28rem; padding-top: 0.31rem; } .view-applicant-profile-page .applicant-step-actions .btn, .view-applicant-profile-page .applicant-step-actions a.btn { width: 100%; max-width: 100%; min-width: 0; white-space: normal; line-height: 1.15; text-align: center; } } .view-applicant-profile-page .applicant-program-status-text { font-size: 0.9rem; font-weight: 700; line-height: 1.2; } .view-applicant-profile-page .applicant-program-status-text.is-completed { color: #166534; } .view-applicant-profile-page .applicant-program-status-text.is-warning { color: #92400e; } .view-applicant-profile-page .applicant-program-status-text.is-failed { color: #991b1b; } .view-applicant-profile-page .applicant-program-status-text.is-active { color: #1d4ed8; } .view-applicant-profile-page .applicant-program-status-text.is-locked { color: #475569; } .view-applicant-profile-page .applicant-step-title { color: #0f172a; font-size: 0.76rem; font-weight: 700; line-height: 1.22; margin-bottom: 0.44rem; overflow-wrap: anywhere; text-align: left; } .view-applicant-profile-page .applicant-step-meta, .view-applicant-profile-page .applicant-step-date { color: #475569; font-size: 0.61rem; line-height: 1.3; text-align: left; overflow-wrap: anywhere; } .view-applicant-profile-page .applicant-step-date span { font-weight: 700; } .view-applicant-profile-page .applicant-step-actions { margin-top: auto; padding-top: 0.3rem; width: 100%; text-align: left; } .view-applicant-profile-page .applicant-profile-step-action, .view-applicant-profile-page .applicant-profile-step-action:hover, .view-applicant-profile-page .applicant-profile-step-action:focus { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #fff !important; } .view-applicant-profile-page .interview-slot-calendar { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 12px; min-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 12px; scrollbar-gutter: stable; } .view-applicant-profile-page .interview-slot-day { flex: 0 0 250px; max-width: 250px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; overflow: hidden; } .view-applicant-profile-page .interview-slot-date { padding: 10px 12px; border-bottom: 1px solid #e5e7eb; background: #f8fafc; font-weight: 700; color: #1f2937; margin-bottom: 0; text-align: center; } .view-applicant-profile-page .interview-slot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: clamp(320px, calc(100vh - 315px), 500px); overflow-y: auto; padding: 12px; } .view-applicant-profile-page .interview-slot-option { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1px solid #cbd5e1; border-radius: 8px; min-height: 62px; padding: 9px 7px; cursor: pointer; color: #1f2937; background: #f8fafc; } .view-applicant-profile-page .interview-slot-radio:checked + .interview-slot-option { border-color: #2f0060; background: #2f0060; color: #fff; } .view-applicant-profile-page .interview-slot-option.is-booked { cursor: not-allowed; opacity: 0.78; background: #f1f5f9; color: #64748b; border-style: dashed; } .view-applicant-profile-page .interview-slot-option.is-booked .interview-slot-state { color: #b91c1c; font-weight: 700; } .view-applicant-profile-page .interview-slot-time { font-weight: 700; font-size: 0.86rem; line-height: 1.1; } .view-applicant-profile-page .interview-slot-state { font-size: 0.68rem; line-height: 1.1; } @media (max-width: 767.98px) { .view-applicant-profile-page .interview-slot-day { flex-basis: 220px; max-width: 220px; } .view-applicant-profile-page .interview-slot-grid { grid-template-columns: 1fr; max-height: 420px; } } .view-applicant-profile-page .scroll-container::-webkit-scrollbar-thumb { background-color: rgba(47, 0, 96, 0.42); border-radius: 999px; } .tl-dot { width: 25px; height: 25px; border-radius: 50%; background-color: #007bff; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; color: white; position: relative; z-index: 1; } .vertical-divider { width: 2px; background-color: white; /* Adjust the color to match your theme */ height: 80%; /* Adjust the height as needed */ margin: 0 10px; align-self: center; /* Center the divider vertically */ } /* certificate preview model styling */ .certificate-custom-height-modal .modal-content { height: 90vh; /* Adjust as needed */ } .certificate-custom-height-modal .modal-body { height: calc(100% - 56px); /* Adjust as needed, considering header height */ } .certificate-custom-height-modal #certificate_iframe { height: 100%; /* Make iframe take up the full height of the modal body */ } /* --------- End Scrollers ---------*/ /* --------- Dashboard cards ---------*/ .dashboard-section .row { display: flex; justify-content: center; margin: -10px; } .dashboard-section .col { flex: 1; padding: 10px; } .dashboard-card { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); display: flex; align-items: center; padding: 0rem; cursor: pointer; } .dashboard-card:hover { background-color: var(--dark-purple); color: whitesmoke; } .dashboard-card .card-text:hover { color: whitesmoke!important; } .dashboard-list-selected { background-color: var(--dark-purple); color: whitesmoke; } .dashboard-list-selected a { color: whitesmoke!important; } .dashboard-list-selected .card-text { background-color: var(--dark-purple); color: whitesmoke!important; } .sidebar-list-active { background-color: var(--dark-purple); color: whitesmoke; } .sidebar-list-active a { color: whitesmoke!important; } .sidebar-list-active .card-text { background-color: var(--dark-purple); color: whitesmoke!important; } .dashboard-card .card-body { display: flex; align-items: center; width: 100%; } .dashboard-card .icon { background-color: var(--dark-purple); color: #fff; border-radius: 50%; width: 28px; height: 28px; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 10px; border: 2px solid #fff; } .dashboard-card .content { margin-left: 1rem; } .dashboard-card .card-title { font-size: 10px; margin-bottom: 0.3rem; } .dashboard-card .card-text { font-size: 9px; color: #6c757d; } .dashboard-card a{ color: #333; } .dashboard-card a:hover{ color: #fff; } .dashboard-section-stat .row { display: flex; margin: -10px; } .dashboard-section-stat .col { flex: 1; padding: 10px; } .dashboard-card-stat { border-radius: 15px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); display: flex; align-items: center; padding: 0rem; cursor: pointer; color:whitesmoke; background-color: var(--navbar-bg-color); } .dashboard-card-stat .card-text { font-size: 15px; } .dashboard-card-stat .card-body { width: 150px; height: 150px; } .dashboard-card-stat .icon { background-color: var(--dark-purple); color: #fff; border-radius: 50%; width: 25px; height: 25px; display: flex; justify-content: center; align-items: center; font-weight: bold; border: 2px solid #fff; } .dashboard-card-stat .icon-md { background-color: var(--dark-purple); color: #fff; border-radius: 50%; width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; font-weight: bold; border: 2px solid #fff; } .dashboard-card-stat .content { margin-left: 1rem; } /* --------- End Dashboard cards ---------*/ /* --------- Top Main Navbar ---------*/ :root { --primary: #1F1F21; --text: white; --text-gray: #9D9D9E; --hover: #353537; --border: #3C3C3E; --error: #E3452F; --bg: #373739; } .profile-menu .cart-container { position: relative; display: inline-block; } .profile-menu .badge { position: absolute; top: -3px; right: -10px; background-color: red; color: white; font-size: 8px; padding: 2px 6px; font-weight: bold; min-width: 18px; text-align: center; } .profile-menu { position: relative; padding: 2px 3px; display: flex; align-items: center; /* Use the per-client profile menu background color, falling back to primary */ background: var(--profile-menu-bg-color, var(--primary-color)); color: var(--profile-menu-text-color, #fff); justify-content: end; z-index: 99; } /* Ensure all icons inside the profile-menu follow the per-client profile-menu text color (e.g. black for DWYPD / recruitment). */ .profile-menu i, .profile-menu svg { color: var(--profile-menu-text-color, #fff) !important; fill: var(--profile-menu-text-color, #fff) !important; } .profile-menu .navigation__group { display: flex!important; gap: 5px!important; align-items: center!important; } .profile-menu .navigation__group > .icon { cursor: pointer!important; transition: all 0.2s ease-in-out!important; } .profile-menu .navigation__group > .icon:hover { transform: scale(1.1)!important; } /* Ensure any Bootstrap text-white utility inside profile-menu follows the per-client profile-menu text color (e.g. black for DWYPD / recruitment themes). */ .profile-menu .text-white { color: var(--profile-menu-text-color, #fff) !important; } .profile-menu .profile { display: block; width: 30px; cursor: pointer; object-fit: cover; border-radius: 50%; filter: drop-shadow(-20px 0 10px rgba(0, 0, 0, 0.1)); } .profile-menu .profile:hover { transform: scale(1.05); transition: all 0.2s ease-in-out; } .profile-menu .dropdown__wrapper { width: 9rem; top: 37px; right: 1rem; padding: 1rem; position: absolute; border-radius: 12px; background: #fff; border: 1px solid #c4c4c4; display: flex; flex-direction: column; color: var(--text); gap: 0.25rem; animation: fadeOutAnimation ease-in-out 0.3s forwards; font: 12px; } .profile-menu .dropdown__wrapper h2 { font-size: 1.15rem; } .profile-menu .dropdown__wrapper--fade-in { animation: fadeInAnimation ease-in-out 0.3s forwards; } .profile-menu .none { display: none; } .profile-menu .hide { opacity: 0; visibility: hidden; animation: fadeOutAnimation ease-in-out 0.3s forwards; } @keyframes fadeInAnimation { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } } @keyframes fadeOutAnimation { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } .profile-menu .dropdown__group { padding: 0.75rem; } .profile-menu .divider { width: 100%; padding: 0; margin: 1rem 0; border: 1px solid var(--text-gray); } .profile-menu .profile-menu nav > ul { list-style-type: none; padding: 0; margin: 0; gap: 0.25rem; } .profile-menu nav > ul > li { cursor: pointer; display: flex; flex-direction: row; border-radius: 0.5rem; align-items: center; color: #000; gap: 1rem; width: 100%; font-weight: normal; transition: all 0.2s ease-in-out; font-size: 12px; } .profile-menu nav > ul > li > svg { stroke: var(--text-gray); height: 1.75rem; width: 1.75rem; } .profile-menu nav > ul > li:hover > svg { stroke: var(--text); } .switch__account ul { list-style-type: none; padding: 0; margin: 0; display: flex; gap: 1.25rem; flex-direction: column; } .profile-menu .switch__account li { display: flex; align-items: center; font-weight: bold; gap: 0.75rem; padding: 0.75rem; cursor: pointer; border-radius: 0.5rem; } .profile-menu .switch__account .active { color: var(--text); background: var(--hover); } .profile-menu .switch__account img { border-radius: 50%; height: 2.75rem; width: 2.75rem; object-fit: cover; } .profile-menu .sign-out-all { background: var(--btn-color); width: 100%; min-height: 3rem; margin-top: 1rem; border-radius: 0.5rem; color: whitesmoke; transition: all 0.2s ease-in-out; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font: 12px!important; } .profile-menu .sign-out-all:hover { color: var(--text); border: 1px solid var(--text); font: 12px!important; } .profile-menu .email { font-size: 0.95rem; } .profile-menu .marker { background: yellowgreen; min-width: 1rem; min-height: 1rem; margin-left: auto; border-radius: 50%; display: none; } .profile-menu .switch__account .active .marker { display: block; } .dropdown__wrapper ul { margin-left: -28px; } .profile-menu .logo a { font-size: 24px; font-weight: bold; text-decoration: none; color: #333; } .profile-menu .nav-links li { position: relative; margin-left: 20px; } .profile-menu .nav-links li a { text-decoration: none; color: #666; padding: 10px; display: inline-block; } /* Dropdown Menu */ .top-dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 20px; width: 900px; z-index: 1000; border-radius: 8px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; } .top-dropdown-menu li { list-style: none; margin-bottom: 10px; } .top-dropdown-menu li a { text-decoration: none!important; color:#212529!important; } .dropdown-section { display: flex; flex-direction: column; gap: 10px; } .dropdown-section h4 { font-size: 16px; font-weight: bold; color: #333; margin-bottom: 10px; } /* Icon Section */ .icon-item { display: flex; align-items: center; gap: 10px; background-color: #f9f9f9; border-radius: 5px; padding: 10px; } .top-dropdown-menu .icon-item .bx { background-color: var(--dark-purple); border: 1px solid #fff; } .icon-item img { width: 40px; height: 40px; object-fit: cover; } .icon-item a { text-decoration: none; color: #333; font-weight: bold; } /* Hover Effects */ .nav-links li:hover > .top-dropdown-menu { display: grid; } .top-dropdown-menu li a:hover { color: #0073e6; } .icon-item:hover { background-color: #f0f0f0; } @media (min-width: 800px) { .navbar-content-sm ,.navbar-list-sm { display: none; } } /* NAVBAR AND SIDEBAR */ @media (max-width: 799px) { .navbar-content-sm ,.navbar-list-sm { display: block!important; } .dashboard-card-stat .icon { display: none; } .dashboard-card .icon { width: 23px; height: 23px; font-size: 10px; } } /* --------- Global Search On Navbar ---------*/ .search-container { position: relative; width: min(1000px, calc(100vw - 2rem)); max-width: min(1000px, calc(100vw - 2rem)); margin: 0 auto; } .top-learning-navbar { position: fixed; } .top-global-search { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1000px, calc(100vw - 280px)); display: flex !important; justify-content: center !important; align-items: center !important; margin: 0 !important; z-index: 2; } .top-global-search .search-container { width: 100%; max-width: 1000px; } .search-input { border-radius: 999px; padding-left: 46px; padding-right: 1rem; height: 40px; font-size: 0.95rem; } .search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); z-index: 2; color: #64748b; font-size: 0.95rem; pointer-events: none; } .border-primary { border: 1px solid var(--primary-color) !important; } .border-card { border: 2px solid var(--btn-color) !important; } .big-emoji { font-size: 3rem; } #search-input { width: 100%; padding: 4px 17px; font-size: 10px; border: 1px solid #ddd; border-radius: 25px; outline: none; transition: box-shadow 0.3s ease-in-out; } #search-input:focus { box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); } .search-container .dropdown { position: absolute; width:111vh; max-height: 454px; overflow-y: auto; background-color: white; border: 1px solid #ddd; border-radius: 8px; margin-top: 5px; padding: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); display: none; z-index: 1030; left:-100px; } .global-search-sm { display: none; } @media (max-width: 980px) { .search-container { width: inherit!important; } .search-container .dropdown { width: 75vh; } } @media (max-width: 885px) { .search-container .dropdown { width: 72vh; } } @media (max-width: 840px) { .search-container { width: inherit!important; } } @media (max-width: 799px) { .search-container .dropdown { width: 60vh; } .global-search-md { display: none; } .top-global-search { position: static; transform: none; width: 100%; } } @media (max-width: 798px) { .search-container .dropdown { left: inherit; width: auto!important; } .global-search-md { display: none; } .global-search-sm { display: block; } } .search-container .profile-card { position: relative; border-radius: 15px; border: 1px solid #e0e0e0; padding: 20px; margin-bottom: 15px; background: #fafafa; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .search-container .role-badge { font-size: 8px; padding: 2px 8px; border-radius: 12px; background: #f0f0f0; color: #333; margin-left: 8px; } .search-container .contact-info { color: #666; margin: 8px 0; font-size: 13px; } .search-container .contact-info i { width: 20px; color: var(--primary-color); } .search-container .profile-actions { position: absolute; top: 15px; right: 15px; } .search-container .btn-action { color: #300067; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: none; } .top-global-search .search-container .dropdown { left: 50%; transform: translateX(-50%); width: min(1040px, calc(100vw - 32px)); max-height: min(72vh, 620px); padding: 12px; border-color: #d8dee8; box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18); } .search-container .search_results { margin: 0; row-gap: 10px; } .search-container .global-search-result-card { border-radius: 8px; padding: 16px; margin: 0; background: #ffffff; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08); } .global-search-card-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px 16px; } .global-search-person { min-width: 0; flex: 1; } .global-search-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .global-search-name-row .full_name { font-size: 0.95rem; font-weight: 700; line-height: 1.2; } .global-search-status-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .global-search-status-row .badge { white-space: nowrap; } .global-search-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 6px 14px; color: #475569; font-size: 0.78rem; } .global-search-contact-grid span { min-width: 0; overflow-wrap: anywhere; } .global-search-contact-grid i, .global-search-section-title i { color: #475569; margin-right: 4px; } .search-container .global-search-actions { position: static; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; flex-shrink: 0; gap: 6px; max-width: 100%; margin-left: auto; padding-left: 0; align-self: start; } .search-container .global-search-actions .btn-action-label { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 10px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 999px; color: #300067; font-size: 0.72rem; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; flex: 0 0 auto; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .search-container .global-search-actions .btn-action-label.text-warning { color: #b45309; } .search-container .global-search-actions .btn-action-label.text-danger { color: #b91c1c; } .search-container .global-search-actions .btn-action-label:hover, .search-container .global-search-actions .btn-action-label:focus { background: #f8fafc; border-color: #94a3b8; color: #1e293b; } .global-search-metrics { display: grid; grid-template-columns: repeat(5, minmax(86px, 1fr)); gap: 8px; margin-top: 12px; } .global-search-metrics > div { border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; padding: 8px 10px; } .global-search-metrics span { display: block; color: #64748b; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0; } .global-search-metrics strong { display: block; color: #111827; font-size: 0.9rem; line-height: 1.2; } .global-search-section { border-top: 1px solid #e8edf4; margin-top: 12px; padding-top: 10px; } .global-search-section-title { display: flex; align-items: center; gap: 4px; color: #0f172a; font-size: 0.76rem; font-weight: 700; margin-bottom: 8px; } .global-search-assignment { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border: 1px solid #dbe3ee; border-radius: 8px; background: #f8fafc; padding: 10px; margin-bottom: 8px; } .global-search-assignment-main { min-width: 0; flex: 1; } .global-search-assignment-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: #111827; font-size: 0.8rem; font-weight: 700; } .global-search-assignment-subtitle, .global-search-assignment-activity { color: #475569; font-size: 0.74rem; overflow-wrap: anywhere; } .global-search-assignment-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; } .global-search-assignment-actions .btn { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; font-size: 0.68rem; line-height: 1.1; white-space: nowrap; } .global-search-review-btn { display: inline-flex; align-items: center; gap: 5px; border-radius: 6px; font-size: 0.72rem; } .global-search-history-list { display: grid; gap: 6px; } .global-search-history-item { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; color: #475569; font-size: 0.74rem; } .global-search-history-item strong { color: #111827; } .global-search-history-item small { color: #64748b; } .global-search-inline-alert { display: inline-flex; align-items: center; gap: 5px; color: #b91c1c; font-size: 0.76rem; font-weight: 700; } .global-search-form-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; color: #475569; font-size: 0.74rem; margin-bottom: 4px; } .global-search-form-row strong { color: #111827; } .global-search-form-value { overflow-wrap: anywhere; } @media (max-width: 798px) { .top-global-search .search-container .dropdown, .search-container .dropdown { left: 0; transform: none; width: min(100vw - 24px, 100%) !important; max-height: 70vh; } .global-search-card-header, .global-search-assignment { display: flex; flex-direction: column; } .search-container .global-search-actions, .global-search-assignment-actions { justify-content: flex-start; width: 100%; padding-left: 0; } .global-search-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .selected-item { background: var(--dark-purple); } .selected-item .link-name { color: whitesmoke!important; } /* ---------End Global Search On Navbar ---------*/ /* ---------Profile ---------*/ input.country-code { max-width: 70px; } /* ---------End Profile ---------*/ /* ---------Orcaa Assist Parent Dashboard ---------*/ .feature-icon { width: 140px; } .feature-card { background-color: var(--light-purple); border-radius: 15px; padding: 10px; text-align: center; transition: transform 0.3s; } .feature-card:hover { transform: translateY(-5px); } /* dashboard container superset*/ #dashboard-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .superset-container { width: 100%; height: 100vh; } #dashboard-container { width: 100%; height: 100%; max-width: 1000px; } /* Teacher Monitoring Performance â€“ Superset embed should fill card */ #teacher-monitoring-dashboard-wrapper { width: 100%; } #teacher-monitoring-dashboard-container { position: relative; width: 100%; height: 70vh; /* Make dashboard tall enough to be readable */ } #teacher-monitoring-dashboard-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* --------- End Orcaa Assist Parent Dashboard ---------*/ /* --------- Programme Courses Embed (compact cards) ---------*/ .programme-courses-embed-wrapper { width: 100%; } /* The course dashboard has four KPI cards; let them use the full row. */ .programme-courses-embed-wrapper .assessment-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .programme-courses-embed-wrapper .assessment-kpi-tile { min-height: 104px; border-top: 0; } @media (max-width: 767.98px) { .programme-courses-embed-wrapper .assessment-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .programme-courses-import-mount { height: 0; overflow: hidden; position: absolute; width: 0; } .programme-courses-content-card { background: #ededed; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 24px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); padding: 0.85rem 0; } .programme-courses-content-inner { background: transparent; border: 0; border-radius: 20px; min-height: 420px; padding: 1rem 1rem 1.25rem; } .programme-courses-toolbar { align-items: flex-start; display: flex; gap: 0.5rem; justify-content: space-between; margin-bottom: 0.15rem; width: 100%; } .programme-courses-panel-menu-btn { align-items: center; background: #ffffff; border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 999px; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); color: #334155; display: inline-flex; height: 40px; justify-content: center; padding: 0; width: 40px; } .programme-courses-toolbar-menu, .programme-courses-panel-header .dropdown { margin-left: auto; } .programme-courses-panel-menu-btn:hover, .programme-courses-panel-menu-btn:focus { background: #f8fafc; color: #0f172a; } /* Positioning (right/left/top offset) is intentionally left to Bootstrap's default Popper config -- dropdown-menu-end + Popper's flip/preventOverflow already right-align this under its toggle and drop it below, flipping above or shifting sideways when the viewport doesn't have room. A hardcoded right/left/margin-top here would fight that; the global ".dropdown-menu.show { transform: none !important }" rule further down this file carves this class out for the same reason. */ .programme-courses-panel-menu { border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 16px; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14); min-width: 240px; padding: 0.5rem; } .programme-courses-panel-action, .programme-courses-panel-menu-item { border-radius: 12px; } .programme-courses-panel-action { align-items: center; color: #334155; display: flex; font-size: 0.8rem; font-weight: 600; gap: 0.35rem; padding: 0.7rem 0.85rem; } .programme-courses-panel-action:hover, .programme-courses-panel-action:focus { background: rgba(76, 29, 149, 0.08); color: #3b0a73; } .programme-courses-panel-menu-item { margin: 0.15rem 0; overflow: hidden; } .programme-courses-panel-menu-item #import_course_vue_app { width: 100%; } .programme-courses-panel-menu-item #import_course_vue_app .btn { align-items: center; background: transparent; border: 0; border-radius: 12px; box-shadow: none; color: #334155 !important; display: flex; font-size: 0.8rem; font-weight: 600; justify-content: flex-start; padding: 0.7rem 0.85rem; width: 100%; white-space: nowrap; } .programme-courses-panel-menu-item #import_course_vue_app .btn:hover, .programme-courses-panel-menu-item #import_course_vue_app .btn:focus { background: rgba(76, 29, 149, 0.08); color: #3b0a73 !important; } .programme-courses-panel-menu-item #import_course_vue_app .btn i, .programme-courses-panel-menu-item #import_course_vue_app .btn span, .programme-courses-panel-menu-item #import_course_vue_app .btn, .programme-courses-panel-menu-item #import_course_vue_app .text-white { color: inherit !important; } .programme-courses-content-card .admin-courses-status-tabs { border-bottom: 1px solid rgba(148, 163, 184, 0.22); flex: 1 1 auto; margin: 0; min-width: 0; padding: 0; } .programme-courses-content-card .admin-courses-status-tabs .nav-tabs { align-items: center; border-bottom: 0; gap: 0.35rem; margin-bottom: 0; } .programme-courses-content-card .admin-courses-status-tabs .nav-link { border: 0; border-radius: 999px; color: #475569; font-size: 0.78rem; font-weight: 700; padding: 0.55rem 1rem; } .programme-courses-content-card .admin-courses-status-tabs .nav-link.active { background: rgba(76, 29, 149, 0.08); color: #3b0a73; } .programme-courses-content-card .tab-pane .card-body { padding: 0.35rem 0 0; } .programme-state-card-link > div, .qualification-admin-nav-link > div, .programme-assessments-dashboard-link > div, .programme-assessments-manage-link > div { border: 3px solid var(--primary-color) !important; outline: 3px solid var(--primary-color); outline-offset: 0; box-shadow: 0 0 0 2px var(--primary-color); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .programme-state-card-link, .qualification-admin-nav-link { opacity: 1; } .programme-state-card-link.is-faded > div, .qualification-admin-nav-link.is-faded > div { opacity: 1; border-color: var(--primary-color) !important; filter: none; outline-color: var(--primary-color); box-shadow: 0 0 0 2px var(--primary-color), inset 0 0 0 9999px rgba(255, 255, 255, 0.12); } .programme-state-card-link.is-active > div, .qualification-admin-nav-link.is-active > div { opacity: 1; border-color: var(--primary-color) !important; filter: saturate(1) brightness(1); transform: translateY(-2px); outline-color: var(--primary-color); box-shadow: 0 0 0 2px var(--primary-color), 0 16px 34px rgba(15, 23, 42, 0.18) !important; } .programme-state-card-link.is-active > .bg-blue-wave, .qualification-admin-nav-link.is-active > .bg-blue-wave { background: var(--dark-purple-2) !important; border-radius: 11px; background-repeat: no-repeat; background-size: cover; } .programme-state-card-link.is-faded > .bg-blue-wave, .qualification-admin-nav-link.is-faded > .bg-blue-wave { background: linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)), var(--dark-purple-2) !important; border-radius: 11px; background-repeat: no-repeat; background-size: cover; } .programme-state-card-link.is-faded:hover > div, .qualification-admin-nav-link.is-faded:hover > div { opacity: 1; filter: none; outline-color: var(--primary-color); box-shadow: 0 0 0 2px var(--primary-color), inset 0 0 0 9999px rgba(255, 255, 255, 0.07); } .programme-state-card-link.is-faded:hover > .bg-blue-wave, .qualification-admin-nav-link.is-faded:hover > .bg-blue-wave { background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), var(--dark-purple-2) !important; } .programme-state-card-link .text-white-50, .qualification-admin-nav-link .text-white-50, .programme-assessments-dashboard-link .text-white-50, .programme-assessments-manage-link .text-white-50 { color: rgba(255, 255, 255, 0.92) !important; } /* Give the admin-home System Management section a balanced outer inset so the card rail and the embedded panel line up with the same left and right gutter. */ .home-section.admin-home-layout #system-management-section-shell.system-management-home-shell { width: 100%; max-width: 100%; margin: 0; padding: 24px 32px 32px; box-sizing: border-box; } .home-section.admin-home-layout #system-management-section-shell.system-management-home-shell .system-management-card-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin: 0; } .home-section.admin-home-layout #system-management-section-shell.system-management-home-shell .system-management-card-row > .col { width: 100%; max-width: none; min-width: 0; margin-top: 0; padding: 0; } @media (max-width: 1199.98px) { .home-section.admin-home-layout #system-management-section-shell.system-management-home-shell { padding: 20px 24px 28px; } .home-section.admin-home-layout #system-management-section-shell.system-management-home-shell .system-management-card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767.98px) { .home-section.admin-home-layout #system-management-section-shell.system-management-home-shell { padding: 16px 16px 24px; } .home-section.admin-home-layout #system-management-section-shell.system-management-home-shell .system-management-card-row { grid-template-columns: 1fr; gap: 16px; } } /* Keep the System Management dashboard cards aligned on one shared rail. This preserves the existing visual treatment while making the icon, copy, and footer spacing consistent across every card. */ .system-management-home-shell .system-management-card-row > .col { min-width: 0; } .system-management-home-shell .system-management-card-row > .col > .programme-state-card-link { display: block; width: 100%; height: 100%; min-width: 0; } .system-management-home-shell .system-management-card-row > .col > .programme-state-card-link > .system-management-card-shell { display: flex; flex-direction: column; justify-content: flex-start; gap: 0.85rem; width: 100%; min-width: 0; height: 100%; padding: 1rem; } .system-management-home-shell .system-management-card-row > .col > .programme-state-card-link > .system-management-card-shell > .system-management-card-top { display: flex; align-items: flex-start; justify-content: flex-start; margin: 0; } .system-management-home-shell .system-management-card-row > .col > .programme-state-card-link > .system-management-card-shell > .system-management-card-copy { display: flex; flex-direction: column; gap: 0.22rem; flex: 1 1 auto; min-width: 0; margin: 0; } .system-management-home-shell .system-management-card-row > .col > .programme-state-card-link > .system-management-card-shell > .system-management-card-copy > span { min-width: 0; overflow-wrap: anywhere; word-break: normal; } .system-management-home-shell .system-management-card-row > .col > .programme-state-card-link > .system-management-card-shell > .system-management-card-copy > span.text-sm { line-height: 1.25; } .system-management-home-shell .system-management-card-row > .col > .programme-state-card-link > .system-management-card-shell > .system-management-card-copy > span.text-xxs { line-height: 1.35; } .system-management-home-shell .system-management-card-row > .col > .programme-state-card-link > .system-management-card-shell > .system-management-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-top: auto; min-width: 0; width: 100%; } .system-management-home-shell .system-management-card-row > .col > .programme-state-card-link > .system-management-card-shell > .system-management-card-footer > span { min-width: 0; } .system-management-home-shell .system-management-card-row > .col > .programme-state-card-link > .system-management-card-shell > .system-management-card-footer > span:first-child { flex: 0 0 auto; white-space: nowrap; } .system-management-home-shell .system-management-card-row > .col > .programme-state-card-link > .system-management-card-shell > .system-management-card-footer > span:last-child { flex: 0 1 auto; margin-left: auto; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 767.98px) { .system-management-home-shell .system-management-card-row > .col > .programme-state-card-link > .system-management-card-shell { gap: 0.7rem; padding: 0.85rem; } .system-management-home-shell .system-management-card-row > .col > .programme-state-card-link > .system-management-card-shell > .system-management-card-footer { gap: 0.5rem; } } #programme-assessments-manage-pane, #programme-assessments-manage-pane .card, #programme-assessments-manage-pane .card-body, #programme-assessments-manage-pane .tab-content, #programme-assessments-manage-pane .tab-pane { max-width: 100%; overflow-x: hidden; } #programme-assessments-manage-pane .table-responsive, #programme-assessments-manage-pane .assessment-results-table-wrapper { width: 100%; max-width: 100%; overflow-x: auto; } #programme-assessments-manage-pane table { width: 100% !important; max-width: 100%; } #programme-assessments-states, #programme-assessments-wrapper, #programme-assessments-dashboard-pane, #programme-assessments-manage-pane, #programme-assessments-templates-pane { min-width: 0; max-width: 100%; } #programme-assessments-templates-pane.show, #programme-assessments-templates-pane.show .programme-courses-content-card, #programme-assessments-templates-pane.show #assessment-templates-root { display: block !important; visibility: visible !important; opacity: 1 !important; } /* Shared assessment manage menu, matching the course curriculum panel */ body.programme-cards-medium-bootstrap .assessment-manage-button { display: inline-flex; align-items: center; justify-content: center; width: 156px; min-width: 156px; max-width: 100%; padding: 0.45rem 0.7rem; white-space: nowrap; border-radius: 999px; box-shadow: none !important; } body.programme-cards-medium-bootstrap .assessment-manage-button:hover, body.programme-cards-medium-bootstrap .assessment-manage-button:focus, body.programme-cards-medium-bootstrap .assessment-manage-button:focus-visible { box-shadow: none !important; } body.programme-cards-medium-bootstrap .assessment-manage-menu { position: fixed; left: var(--assessment-manage-menu-left, 0); top: var(--assessment-manage-menu-top, 0); width: 260px; max-width: calc(100vw - 1rem); max-height: var(--assessment-manage-menu-max-height, calc(100vh - 1rem)); overflow: hidden auto; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; background: #fff; border: 1px solid rgb(15 23 42 / 8%); border-radius: 1rem; box-shadow: 0 20px 40px rgb(15 23 42 / 18%); z-index: 3000; visibility: hidden; pointer-events: none; } body.programme-cards-medium-bootstrap .assessment-manage-menu.is-open { visibility: visible; pointer-events: auto; } body.programme-cards-medium-bootstrap .assessment-manage-menu[aria-hidden="true"] { display: none !important; } body.programme-cards-medium-bootstrap .assessment-manage-menu-item { width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem; border: 0; border-radius: 0.85rem; background: transparent; appearance: none; box-shadow: none; color: #1f2937; font-size: 0.82rem; font-weight: 600; line-height: 1.25; text-align: left; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } body.programme-cards-medium-bootstrap .assessment-manage-menu-item:hover, body.programme-cards-medium-bootstrap .assessment-manage-menu-item:focus { background: #f8fafc; color: #111827; } body.programme-cards-medium-bootstrap .assessment-manage-menu-item:focus-visible { outline: 2px solid rgb(13 110 253 / 22%); outline-offset: 2px; } body.programme-cards-medium-bootstrap .assessment-manage-menu-item .menu-item-icon { width: 1rem; flex: 0 0 1rem; font-size: 1rem; line-height: 1; } @media (max-width: 768px) { body.programme-cards-medium-bootstrap .programme-assessments-embed-wrapper > .bg-outline-primary, body.assessment-management-standalone-page .programme-assessments-embed-wrapper > .bg-outline-primary { align-items: flex-start !important; gap: 0.5rem !important; padding: 0.85rem 0.85rem 0.75rem !important; } body.programme-cards-medium-bootstrap .programme-assessments-embed-wrapper > .bg-outline-primary > .d-flex, body.assessment-management-standalone-page .programme-assessments-embed-wrapper > .bg-outline-primary > .d-flex { width: 100%; justify-content: flex-end; } body.programme-cards-medium-bootstrap .assessment-manage-button, body.assessment-management-standalone-page .assessment-manage-button { width: auto; min-width: 6.75rem; max-width: 100%; height: 2.1rem; padding: 0.28rem 0.55rem; font-size: 0.64rem; line-height: 1; border-radius: 0.8rem; gap: 0.22rem; } body.programme-cards-medium-bootstrap .assessment-manage-button .bx, body.assessment-management-standalone-page .assessment-manage-button .bx { font-size: 0.88rem; margin-right: 0.15rem !important; } body.programme-cards-medium-bootstrap .assessment-manage-menu, body.assessment-management-standalone-page .assessment-manage-menu { width: min(15.5rem, calc(100vw - 1rem)); max-width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); padding: 0.35rem; border-radius: 0.9rem; box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16); z-index: 4000; } body.programme-cards-medium-bootstrap .assessment-manage-menu-item, body.assessment-management-standalone-page .assessment-manage-menu-item { padding: 0.48rem 0.6rem; font-size: 0.7rem; line-height: 1.1; gap: 0.5rem; border-radius: 0.7rem; } body.programme-cards-medium-bootstrap .assessment-manage-menu-item .menu-item-icon, body.assessment-management-standalone-page .assessment-manage-menu-item .menu-item-icon { width: 0.9rem; flex: 0 0 0.9rem; font-size: 0.9rem; } body.programme-cards-medium-bootstrap .assessment-manage-menu-item span, body.assessment-management-standalone-page .assessment-manage-menu-item span { min-width: 0; white-space: nowrap; } } body.programme-cards-medium-bootstrap #app .programme-team-add-learner-option { padding: 0.85rem 1rem; min-height: 2.95rem; font-size: 0.95rem; line-height: 1.2; } @media (max-width: 768px) { body.programme-cards-medium-bootstrap #app .programme-team-add-learner-option { padding: 0.75rem 0.9rem; min-height: 2.7rem; font-size: 0.9rem; } } #create_pop_up_model { position: fixed; inset: 0; z-index: 1085 !important; opacity: 1 !important; filter: none !important; transform: none !important; padding-right: 0 !important; overflow-x: hidden; overflow-y: auto; } #create_pop_up_model .modal-dialog, #create_pop_up_model .modal-content { position: relative; z-index: 1086 !important; opacity: 1 !important; filter: none !important; transform: none !important; } body.programme-modal-open #create_pop_up_model { opacity: 1 !important; filter: none !important; } body.programme-modal-open { overflow: hidden; } /* Keep every toggle in the "Add {{ programme }}" and "Programme Setup" modals on the brand primary colour. Without this the plain switches fall back to Bootstrap blue and the specialization switch shows purple (see .learner-specialization-switch). */ #create_pop_up_model .form-check-input:checked, #edit_program_form .form-check-input:checked { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; } #create_pop_up_model .form-check-input:focus, #edit_program_form .form-check-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary-color) 20%, transparent); } body.programme-modal-open .modal-backdrop, body.programme-modal-open .programme-modal-backdrop { position: fixed; inset: 0; z-index: 1080 !important; opacity: 0.55 !important; background-color: rgba(15, 23, 42, 0.55); } body.programme-modal-open .programme-standard-modal { position: fixed; inset: 0; opacity: 1 !important; filter: none !important; z-index: 1090 !important; overflow-x: hidden; overflow-y: auto; } body.programme-modal-open .programme-standard-modal .modal-dialog { opacity: 1 !important; filter: none !important; transform: none !important; max-width: 560px; margin: 1.75rem auto; } body.programme-modal-open .programme-standard-modal .modal-content, body.programme-modal-open .programme-standard-modal .modal-body, body.programme-modal-open .programme-standard-modal .modal-header, body.programme-modal-open .programme-standard-modal .modal-footer, body.programme-modal-open .programme-standard-modal form { opacity: 1 !important; filter: none !important; } body.programme-modal-open .programme-standard-modal .modal-content { display: flex; flex-direction: column; max-height: calc(100vh - 3rem); min-height: 0; overflow: hidden; background-color: #fff; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 18px 60px rgba(15, 23, 42, 0.18); } body.programme-modal-open .programme-standard-modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .programme-create-modal-scroll-body, .programme-edit-modal-scroll-body, .programme-create-evaluation-modal-body { max-height: min(68vh, 640px); overflow-y: auto; overflow-x: hidden; padding-right: 0.35rem; -webkit-overflow-scrolling: touch; } #programme_create_evaluation_modal .programme-evaluation-form-modal-content, #programme_assign_evaluation_modal .programme-evaluation-form-modal-content { display: flex; flex-direction: column; max-height: calc(100vh - 3rem); overflow: hidden; } #programme_create_evaluation_modal .programme-create-evaluation-modal-body, #programme_assign_evaluation_modal .programme-assign-evaluation-modal-body { flex: 1 1 auto; max-height: calc(100vh - 11rem); min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .programme-edit-modal-scroll-body::-webkit-scrollbar, .programme-create-modal-scroll-body::-webkit-scrollbar, .programme-create-evaluation-modal-body::-webkit-scrollbar { width: 8px; } .programme-edit-modal-scroll-body::-webkit-scrollbar-thumb, .programme-create-modal-scroll-body::-webkit-scrollbar-thumb, .programme-create-evaluation-modal-body::-webkit-scrollbar-thumb { background-color: rgba(108, 117, 125, 0.55); border-radius: 999px; } .programme-edit-modal-scroll-body .ck.ck-editor { width: 100%; } #programme_create_evaluation_modal .programme-create-evaluation-modal-body .form-label { margin-bottom: 0.3rem; } #programme_create_evaluation_modal .programme-create-evaluation-modal-body hr.programme-evaluation-divider { margin: 0.75rem 0; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.08); } .programme-edit-modal-scroll-body .ck-editor__editable_inline { font-size: 0.78rem; min-height: 190px; } /* "Main Content" vs "Additional Content" placement picker at the top of the Add / Edit Content modals. */ .content-placement-options .content-placement-option { display: flex; align-items: flex-start; gap: 0.55rem; width: 100%; height: 100%; margin: 0; padding: 0.65rem 0.75rem; border: 1px solid var(--bs-border-color, #d7dbe7); border-radius: 0.5rem; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } .content-placement-options .content-placement-option:hover { border-color: var(--primary-color); } .content-placement-options .content-placement-option .form-check-input { margin-top: 0.15rem; flex-shrink: 0; } .content-placement-options .content-placement-option-body { display: flex; flex-direction: column; line-height: 1.25; } .content-placement-options .content-placement-option-title { font-weight: 600; color: var(--bs-body-color, #212529); } .content-placement-options .content-placement-option-subtitle { font-size: 0.75rem; color: var(--bs-secondary-color, #6c757d); } .content-placement-options .content-placement-option:has(.form-check-input:checked) { border-color: var(--primary-color); background-color: color-mix(in srgb, var(--primary-color) 8%, transparent); box-shadow: 0 0 0 1px var(--primary-color) inset; } .content-placement-options .content-placement-option:has(.form-check-input:checked) .content-placement-option-title { color: var(--primary-color); } /* Type Notes editor in the Add/Edit Content modal was rendering much smaller than the Content Name field and never grew with the content. */ .rich-edit-container .ck.ck-editor, .rich-edit-container-edit .ck.ck-editor { width: 100%; } .rich-edit-container .ck-editor__editable_inline, .rich-edit-container-edit .ck-editor__editable_inline { min-height: 480px; height: auto; width: 100%; } .programme-edit-intro-icon { align-items: center; background: #ffffff; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 999px; color: #111827; display: inline-flex; flex: 0 0 auto; font-size: 1rem; height: 40px; justify-content: center; width: 40px; } .programme-edit-image-preview-card { background: #ffffff; border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 22px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); aspect-ratio: 1 / 1; display: flex; overflow: hidden; } .programme-edit-image-preview-img { background: #f8fafc; display: block; height: 100%; object-fit: cover; width: 100%; } .programme-edit-image-placeholder { align-items: center; background: radial-gradient(circle at top, rgba(99, 102, 241, 0.12), transparent 36%), linear-gradient(135deg, #f8fafc 0%, #eef2ff 55%, #e2e8f0 100%); box-sizing: border-box; display: flex; flex-direction: column; gap: 0.55rem; height: 100%; justify-content: center; padding: 0.95rem; text-align: center; width: 100%; } .programme-edit-image-placeholder-icon { align-items: center; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(148, 163, 184, 0.3); border-radius: 24px; box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08); color: var(--primary-color); display: inline-flex; font-size: 1.55rem; height: 64px; justify-content: center; width: 64px; } .programme-edit-image-placeholder-copy { color: #475569; display: flex; flex-direction: column; gap: 0.12rem; margin-top: 0; max-width: 14rem; } .programme-edit-image-placeholder-copy strong { color: #111827; font-size: 0.85rem; font-weight: 700; line-height: 1.15; text-wrap: balance; } .programme-edit-image-placeholder-copy span { font-size: 0.68rem; line-height: 1.3; text-wrap: balance; } .programme-edit-image-copy { color: #64748b; font-size: 0.84rem; line-height: 1.55; max-width: 32rem; } .programme-edit-image-actions { align-items: flex-start; display: flex; flex-direction: column; gap: 0.65rem; } .programme-edit-image-action-btn { align-items: center; border-radius: 16px; display: inline-flex; font-size: 0.79rem; font-weight: 600; gap: 0.35rem; justify-content: center; min-width: 176px; padding: 0.58rem 0.9rem; } .programme-edit-image-action-btn.btn-outline-dark { background: #ffffff; border-color: rgba(15, 23, 42, 0.22); color: #111827; } .programme-edit-image-action-btn.btn-outline-dark:hover, .programme-edit-image-action-btn.btn-outline-dark:focus { background: #f8fafc; border-color: rgba(15, 23, 42, 0.32); color: #111827; } .programme-edit-image-action-btn.btn-outline-danger { background: #ffffff; border-color: rgba(220, 38, 38, 0.42); color: #b91c1c; } .programme-edit-image-action-btn.btn-outline-danger:hover, .programme-edit-image-action-btn.btn-outline-danger:focus { background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.62); color: #991b1b; } .programme-edit-image-file-name { color: #64748b; word-break: break-word; } .programme-document-add-btn { background: var(--primary-color); align-items: center; border: 0; border-radius: 999px; box-shadow: 0 8px 18px rgba(13, 110, 253, 0.2); display: inline-flex; height: 36px; justify-content: center; color: #fff; width: 36px; } .programme-document-add-btn:hover, .programme-document-add-btn:focus { background: var(--primary-color); color: #fff; } .programme-document-summary-actions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; } .programme-document-action-btn { align-items: center; display: inline-flex; font-weight: 600; justify-content: center; min-width: 5.2rem; white-space: nowrap; } /* Document management summary table should stay readable even when body text color is themed light (e.g. white) for other sections. */ #programme-document-management-section .table tbody td { color: #111827 !important; } #programme-document-management-section .table tbody a { color: #1d4ed8; } #programme-document-management-section .table tbody a:hover, #programme-document-management-section .table tbody a:focus { color: #1e40af; } #programme-document-management-section .programme-document-status-badge { border: 1px solid transparent; color: #111827 !important; font-weight: 600; } #programme-document-management-section .programme-document-status-badge--pending { background-color: #e2e8f0; border-color: #cbd5e1; } #programme-document-management-section .programme-document-status-badge--assigned-configured { background-color: #bbf7d0; border-color: #86efac; } #programme-document-management-section .programme-document-status-badge--assigned { background-color: #bfdbfe; border-color: #93c5fd; } #programme-document-management-section .programme-document-status-badge--configured { background-color: #bae6fd; border-color: #7dd3fc; } #programme-document-management-section .programme-document-status-badge--uploaded { background-color: #fde68a; border-color: #fcd34d; } body.programme-details-compact #app .programme-document-action-btn { font-size: 0.6rem !important; min-width: 4.8rem; padding: 0.22rem 0.55rem !important; } .programme-edit-modal-scroll-body .choices:hover .choices__inner, .programme-edit-modal-scroll-body .choices.is-focused .choices__inner, .programme-edit-modal-scroll-body .choices.is-open .choices__inner { border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.18); } .programme-edit-modal-scroll-body .choices__list--dropdown .choices__item--selectable.is-highlighted { background-color: #e9ecef; color: #212529; } .programme-edit-modal-scroll-body .choices__list--multiple .choices__item { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #fff !important; font-weight: 600; } .programme-edit-modal-scroll-body .choices__list--multiple .choices__item.is-highlighted { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #fff !important; } .programme-edit-modal-scroll-body .choices__list--multiple .choices__item .choices__button { border-left-color: rgba(255, 255, 255, 0.55) !important; color: #fff !important; } body.programme-modal-open .programme-standard-modal .modal-header, body.programme-modal-open .programme-standard-modal .modal-footer { flex-shrink: 0; } body.programme-modal-open #addNotificationModal { z-index: 1090 !important; opacity: 1 !important; filter: none !important; } body.programme-modal-open #addNotificationModal .modal-dialog { max-width: 560px; margin: 1.75rem auto; } body.programme-modal-open #addNotificationModal .modal-content { display: flex; flex-direction: column; max-height: calc(100vh - 3rem); overflow: hidden; } body.programme-modal-open #addNotificationModal form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } body.programme-modal-open #addNotificationModal .modal-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } body.programme-modal-open #addNotificationModal .notification-modal-scroll-area { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 0.25rem; } body.programme-modal-open #addNotificationModal .notification-modal-scroll-area .table-responsive { margin-bottom: 0; } .notification-management-modal .notification-rich-text-editor-shell { border: 1px solid #ced4da; border-radius: 0.5rem; overflow: hidden; } .notification-management-modal .notification-rich-text-editor-shell .ql-toolbar.ql-snow { background: #f8fafc; border: 0; border-bottom: 1px solid #e2e8f0; display: flex; flex-wrap: wrap; gap: 0.15rem; padding: 0.5rem; } .notification-management-modal .notification-rich-text-editor-shell .ql-container.ql-snow { border: 0; font-family: inherit; font-size: 0.78rem; min-height: 9rem; } .notification-management-modal .notification-rich-text-editor-shell .ql-editor { min-height: 9rem; overflow-wrap: anywhere; padding: 0.75rem; } .notification-management-modal .notification-rich-text-editor-shell:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary-color) 20%, transparent); } body.programme-modal-open #addNotificationModal .notification-recipients-table thead th { position: sticky; top: 0; z-index: 2; background-color: var(--primary-color); color: #fff; } body.programme-modal-open #addNotificationModal .modal-header, body.programme-modal-open #addNotificationModal .modal-footer { flex-shrink: 0; } body.assign-programme-modal-open { overflow: hidden; } body.assign-programme-modal-open .modal-backdrop { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1080 !important; opacity: 0.55 !important; background-color: rgba(15, 23, 42, 0.55); } body.assign-programme-modal-open .modal-backdrop.show { opacity: 0.55 !important; } body.assign-programme-modal-open #assign_programme { z-index: 1090 !important; } body.assign-programme-modal-open #assign_programme .modal-dialog { position: relative; z-index: 1091 !important; } body.course-assign-programme-modal-open { overflow: hidden; } body.course-assign-programme-modal-open .modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1040 !important; opacity: 1 !important; background-color: rgba(0, 0, 0, 0.5) !important; } body.course-assign-programme-modal-open .modal-backdrop.show { opacity: 1 !important; } body.course-assign-programme-modal-open #course_assign_programme { z-index: 1055 !important; } body.course-assign-programme-modal-open #course_assign_programme .modal-dialog { position: relative; z-index: 1056 !important; } /* Give the Assign (Scheduled) Course modal real breathing room: it needs to fit a wide table (name, access type, start/end date-time, mainskill, assign) plus a long list of rows, so widen the dialog and make the body scroll internally instead of being clipped by a fixed-size modal. */ #course_assign_programme .modal-dialog { width: min(1400px, calc(100vw - 2rem)); max-width: min(1400px, calc(100vw - 2rem)); margin: 1.75rem auto; } #course_assign_programme .modal-content { display: flex; flex-direction: column; /* Fixed size: the modal keeps this shape no matter how much content loads (the body scrolls internally instead of the modal growing/shrinking). max-height keeps it inside the viewport on short screens. */ height: min(88vh, 900px); max-height: calc(100vh - 3rem); overflow: hidden; max-width: 100%; } #course_assign_programme .modal-content > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } #course_assign_programme .modal-content > .modal-body::-webkit-scrollbar { width: 8px; } #course_assign_programme .modal-content > .modal-body::-webkit-scrollbar-thumb { background-color: rgba(108, 117, 125, 0.55); border-radius: 999px; } #course_assign_programme .assign_card, #course_assign_programme .assign_to_program, #course_assign_programme .specialization_element { max-width: 100%; } /* Assign Additional Programmes (learner profile modal): shares the .programme-standard-modal structure (header, dialog size, scroll body, footer) used by the Add Programme modal; this just flattens the checklist rows instead of boxed list-group "cards". */ #additionalProgrammeModal .additional-programme-item { display: flex; align-items: center; padding: 0.4rem 0.25rem; margin: 0; border: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); background: transparent; cursor: pointer; } #additionalProgrammeModal .additional-programme-item:last-child { border-bottom: 0; } #additionalProgrammeModal .additional-programme-item:hover { background-color: rgba(0, 0, 0, 0.03); } #course_assign_programme .table-responsive { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } #course_assign_programme table .assign_switch { white-space: nowrap; } #course_assign_programme table td:last-child, #course_assign_programme table th:last-child { min-width: 110px; } body.programme-modal-open .programme-modal-standard, body.programme-modal-open .programme-standard-modal { --programme-label-font-size: 0.84rem; --programme-muted-font-size: 0.68rem; } body.programme-modal-open .programme-modal-standard .programme-label-bold, body.programme-modal-open .programme-standard-modal .programme-label-bold { font-size: var(--programme-label-font-size) !important; font-weight: 600; line-height: 1.3; } body.programme-modal-open .programme-modal-standard .programme-text-muted, body.programme-modal-open .programme-standard-modal .programme-text-muted { color: #6c757d !important; font-size: var(--programme-muted-font-size) !important; line-height: 1.25; } body.programme-modal-open .programme-modal-standard .programme-text-muted .programme-label-bold, body.programme-modal-open .programme-standard-modal .programme-text-muted .programme-label-bold, .programme-modal-standard .programme-text-muted .programme-label-bold, .programme-standard-modal .programme-text-muted .programme-label-bold { font-size: inherit !important; font-weight: 700; line-height: inherit; } body.programme-modal-open .programme-modal-standard .btn, body.programme-modal-open .programme-standard-modal .btn, body.programme-modal-open .programme-modal-standard .form-control, body.programme-modal-open .programme-standard-modal .form-control, body.programme-modal-open .programme-modal-standard .form-select, body.programme-modal-open .programme-standard-modal .form-select, body.programme-modal-open .programme-modal-standard textarea, body.programme-modal-open .programme-standard-modal textarea { font-size: 0.84rem !important; line-height: 1.35; } .programme-modal-standard, .programme-standard-modal { --programme-label-font-size: 0.84rem; --programme-muted-font-size: 0.68rem; filter: none !important; opacity: 1 !important; z-index: 1090; } .programme-modal-standard .modal-dialog, .programme-standard-modal .modal-dialog { height: auto !important; margin: 1.75rem auto; max-width: min(560px, calc(100vw - 1.5rem)) !important; opacity: 1 !important; transform: none !important; width: min(560px, calc(100vw - 1.5rem)) !important; filter: none !important; } .programme-modal-standard .modal-content, .programme-standard-modal .modal-content, .programme-modal-standard .modal-body, .programme-standard-modal .modal-body, .programme-modal-standard .modal-header, .programme-standard-modal .modal-header, .programme-modal-standard .modal-footer, .programme-standard-modal .modal-footer, .programme-modal-standard form, .programme-standard-modal form { filter: none !important; opacity: 1 !important; } .programme-modal-standard .modal-content, .programme-standard-modal .modal-content { background-color: #fff !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; border-radius: 8px; box-shadow: 0 18px 60px rgba(15, 23, 42, 0.18) !important; display: flex; flex-direction: column; max-height: calc(100vh - 3rem); min-height: 0; overflow: hidden; } .programme-modal-standard form, .programme-standard-modal form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; width: 100%; } .programme-modal-standard .modal-body, .programme-standard-modal .modal-body { background-color: #fff !important; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Manage Assessment Questions modals (Create Question, Update Assessment): this page does not toggle `body.programme-modal-open`, so the constrained- height rules above can be beaten by Bootstrap's own `.modal-dialog-scrollable .modal-content`. Pin the flex-column + scrolling- body layout here with the id so a tall form scrolls inside the modal instead of pushing the Save buttons off-screen -- the same behaviour as the Create Mainskill modal on the programme pages. */ #create_quiz_popup .modal-content, #update_assessment_modal .modal-content { display: flex; flex-direction: column; max-height: calc(100vh - 3rem); min-height: 0; overflow: hidden; } #create_quiz_popup #question_form, #update_assessment_modal #assessment_form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; } #create_quiz_popup .modal-body, #update_assessment_modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* Create Question holds several questions with long answer options, so the standard 560px cap squeezed the options and showed little per scroll. Widen it and let it use more of the viewport height. */ #create_quiz_popup .modal-dialog { max-width: min(960px, calc(100vw - 2rem)) !important; width: min(960px, calc(100vw - 2rem)) !important; margin: 1rem auto; } #create_quiz_popup .modal-content { max-height: calc(100vh - 2rem); } /* Give the dynamic-form editor enough room for its field configuration panels. */ .dynamic-form-editor-modal .modal-dialog { max-width: min(960px, calc(100vw - 1.5rem)) !important; width: min(960px, calc(100vw - 1.5rem)) !important; } .dynamic-form-editor-modal .modal-content { max-height: calc(100vh - 2rem); } .dynamic-form-editor-modal .programme-create-modal-scroll-body { max-height: calc(100vh - 7rem); } @media (max-width: 767.98px) { .dynamic-form-editor-modal .modal-dialog { max-width: calc(100vw - 1rem) !important; width: calc(100vw - 1rem) !important; margin: 0.5rem auto; } .dynamic-form-editor-modal .modal-content { max-height: calc(100vh - 1rem); } } .programme-modal-standard .modal-header, .programme-standard-modal .modal-header { align-items: center; background: var(--primary-color) !important; background-image: none !important; border-bottom: 1px solid rgba(15, 23, 42, 0.08); color: #fff !important; padding: 1rem !important; } .programme-modal-standard .modal-header > .modal-title, .programme-standard-modal .modal-header > .modal-title, .programme-modal-standard .modal-header > h1, .programme-standard-modal .modal-header > h1, .programme-modal-standard .modal-header > h2, .programme-standard-modal .modal-header > h2, .programme-modal-standard .modal-header > h3, .programme-standard-modal .modal-header > h3, .programme-modal-standard .modal-header > h4, .programme-standard-modal .modal-header > h4, .programme-modal-standard .modal-header > h5, .programme-standard-modal .modal-header > h5, .programme-modal-standard .modal-header > h6, .programme-standard-modal .modal-header > h6 { color: #fff !important; font-size: 0.95rem !important; font-weight: 700; line-height: 1.25; margin: 0 !important; } .programme-modal-standard .modal-header > .modal-title-standard, .programme-standard-modal .modal-header > .modal-title-standard, .modal-header.modal-header-standard > .modal-title-standard { color: #fff !important; font-family: inherit; font-size: 0.95rem !important; font-weight: 700; line-height: 1.25; margin: 0 !important; } .programme-modal-standard .modal-header .text-dark, .programme-standard-modal .modal-header .text-dark, .programme-modal-standard .modal-header .fa-times, .programme-standard-modal .modal-header .fa-times { color: #fff !important; font-size: 1rem !important; line-height: 1; } .programme-modal-standard .modal-header .btn-close, .programme-standard-modal .modal-header .btn-close, .programme-modal-standard .modal-header .modal-close-standard, .programme-standard-modal .modal-header .modal-close-standard, .modal-header.modal-header-standard .btn-close, .modal-header.modal-header-standard .modal-close-standard { filter: brightness(0) invert(1); opacity: 1; } #add_curriculum_popup .modal-header > button[data-bs-dismiss="modal"], #add_curriculum_popup .modal-header > i.fa-times[data-bs-dismiss="modal"] { align-items: center; display: inline-flex; /* Cross halved from 1.8rem / 2.1rem at the user's request. */ font-size: 0.9rem !important; height: 1.05rem; justify-content: center; line-height: 1; min-width: 1.05rem; padding: 0; } #add_curriculum_popup .modal-header > button.btn-close[data-bs-dismiss="modal"] { /* .btn-close draws its X from a background SVG sized in em, so the halved font-size above already halves the glyph; keep the SVG in step and let the small Bootstrap padding utility (p-1) set the hit area. */ background-size: 0.9rem; width: 0.9rem; } .programme-modal-standard .modal-footer, .programme-standard-modal .modal-footer { background-color: #fff !important; border-top: 0 !important; flex-shrink: 0; margin-top: 0 !important; padding: 1rem !important; } /* The Edit Course modal uses filled secondary buttons; keep both action labels readable against their backgrounds. */ #editCourseModal .modal-footer .btn { background-color: var(--secondary-color) !important; border-color: var(--secondary-color) !important; color: #fff !important; } /* Keep Edit Course footer labels white even when a tenant theme applies a higher-priority text rule to generic Bootstrap buttons. */ #editCourseModal .modal-footer .edit-course-modal-action, #course_action_modal.course-action-edit-modal .modal-footer .edit-course-modal-action, #editCourseModal .modal-footer .edit-course-modal-action:hover, #editCourseModal .modal-footer .edit-course-modal-action:focus, #editCourseModal .modal-footer .edit-course-modal-action:active, #course_action_modal.course-action-edit-modal .modal-footer .edit-course-modal-action:hover, #course_action_modal.course-action-edit-modal .modal-footer .edit-course-modal-action:focus, #course_action_modal.course-action-edit-modal .modal-footer .edit-course-modal-action:active { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* Keep both actions visible in the Add User modal after a save attempt. */ #system_add_user_modal .modal-footer { align-items: center; display: flex !important; gap: 0.5rem; justify-content: flex-end; } #system_add_user_modal #system_add_user_save { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; } /* Keep the edit action visible while Vue toggles its loading state. */ #editUserModal .user-edit-submit { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; } .programme-modal-standard .modal-header.modal-header-standard, .modal-header.modal-header-standard { align-items: center; padding: 1rem !important; } .programme-modal-standard .modal-header.modal-header-standard .btn-close, .modal-header.modal-header-standard .btn-close { opacity: 1 !important; } /* Keep Add Content header proportions aligned with the AI assessment header. */ #upload_content_popup .modal-header.modal-header-standard { align-items: center; padding: 1rem !important; } #upload_content_popup .modal-header.modal-header-standard > h1 { color: #fff !important; font-size: 0.95rem !important; font-weight: 700; line-height: 1.25; margin: 0 !important; } #upload_content_popup .modal-header.modal-header-standard .btn-close { opacity: 1 !important; } .programme-modal-standard label, .programme-standard-modal label, .programme-modal-standard .form-label, .programme-standard-modal .form-label, .programme-modal-standard .labels, .programme-standard-modal .labels, .programme-modal-standard .form-check-label, .programme-standard-modal .form-check-label { font-size: 0.84rem !important; font-weight: 600; line-height: 1.35; } .programme-modal-standard .programme-label-bold, .programme-standard-modal .programme-label-bold { font-size: var(--programme-label-font-size) !important; font-weight: 600; line-height: 1.3; } .programme-modal-standard .programme-text-muted, .programme-standard-modal .programme-text-muted, .programme-modal-standard .form-text, .programme-standard-modal .form-text, .programme-modal-standard small, .programme-standard-modal small, .programme-modal-standard .text-muted, .programme-standard-modal .text-muted { color: #6c757d !important; font-size: var(--programme-muted-font-size) !important; line-height: 1.25; } .programme-modal-standard .text-xs, .programme-standard-modal .text-xs { font-size: 0.84rem !important; line-height: 1.35; } .programme-modal-standard .programme-modal-intro-copy, .programme-standard-modal .programme-modal-intro-copy { font-size: 0.84rem !important; line-height: 1.4; } .programme-modal-standard .programme-modal-intro-copy h6, .programme-standard-modal .programme-modal-intro-copy h6, .programme-modal-standard .programme-modal-intro-copy li, .programme-standard-modal .programme-modal-intro-copy li { font-size: 0.84rem !important; line-height: 1.4; } .programme-modal-standard .programme-modal-intro-copy strong, .programme-standard-modal .programme-modal-intro-copy strong, .programme-modal-standard .programme-modal-intro-copy .programme-label-bold, .programme-standard-modal .programme-modal-intro-copy .programme-label-bold { font-size: inherit !important; line-height: inherit !important; font-weight: 700 !important; } .programme-modal-standard .invalid-feedback, .programme-standard-modal .invalid-feedback, .programme-modal-standard .profile-invalid-feedback, .programme-standard-modal .profile-invalid-feedback { font-size: 0.84rem !important; line-height: 1.25; } .programme-modal-standard .btn, .programme-standard-modal .btn, .programme-modal-standard .btn-sm, .programme-standard-modal .btn-sm, .programme-modal-standard .form-control, .programme-standard-modal .form-control, .programme-modal-standard .form-select, .programme-standard-modal .form-select, .programme-modal-standard textarea, .programme-standard-modal textarea { font-size: 0.84rem !important; line-height: 1.35; } /* Keep the applicant profile modal flat and page-like instead of nested card scroll areas. */ body #initial_profile_modal.applicant-profile-modal .modal-dialog, body.programme-modal-open .applicant-profile-modal .modal-dialog { height: 100vh !important; margin: 0 !important; max-width: 100vw !important; width: 100vw !important; } body #initial_profile_modal.applicant-profile-modal .modal-content, body.programme-modal-open .applicant-profile-modal .modal-content { display: flex; flex-direction: column; border-radius: 0 !important; height: 100vh; max-height: 100vh; min-height: 0; overflow: hidden; background-color: #fff; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 18px 60px rgba(15, 23, 42, 0.18); } body #initial_profile_modal.applicant-profile-modal .modal-body, body #initial_profile_modal.applicant-profile-modal .applicant-profile-modal-body, body.programme-modal-open .applicant-profile-modal .modal-body, body.programme-modal-open .applicant-profile-modal .applicant-profile-modal-body { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 1.25rem clamp(1rem, 2.2vw, 2.5rem) 1.5rem; } body #initial_profile_modal.applicant-profile-modal .modal-footer, body.programme-modal-open .applicant-profile-modal .modal-footer { position: static; z-index: auto; margin-top: 1rem !important; background: transparent !important; box-shadow: none; border-top: 0 !important; padding: 0 !important; } body #initial_profile_modal.applicant-profile-modal .applicant-profile-form-actions { align-items: center; display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1rem; padding-bottom: 1.5rem; } body #initial_profile_modal.applicant-profile-modal .tab-content, body #initial_profile_modal.applicant-profile-modal .tab-pane, body #initial_profile_modal.applicant-profile-modal #profile_form, body #initial_profile_modal.applicant-profile-modal #learner-dashboard-app, body #initial_profile_modal.applicant-profile-modal .ld-carousel-wrapper { width: 100%; max-width: none; } body #initial_profile_modal.applicant-profile-modal .ld-carousel-wrapper { margin: 0; padding: 0; } body #initial_profile_modal.applicant-profile-modal #learner-dashboard-app .bg-transparent.p-0.overflow-auto.hide-survey-scrollbar.rounded-3.shadow-sm.border.border-1.max-height-600, body #initial_profile_modal.applicant-profile-modal #learner-dashboard-app .border.rounded.p-3.mb-4.bg-light.max-height-800.overflow-y-auto, body #initial_profile_modal.applicant-profile-modal #learner-dashboard-app .overflow-y-auto.max-height-350 { max-height: none !important; overflow: visible !important; } body #initial_profile_modal.applicant-profile-modal .programme-modal-intro-copy { max-width: none; } body #initial_profile_modal.applicant-profile-modal .modal-body { padding-top: 0.75rem; } body #initial_profile_modal.applicant-profile-modal .modal-body > .card { margin-bottom: 0.5rem !important; } body #initial_profile_modal.applicant-profile-modal .programme-modal-intro-copy.card-body { padding: 0.6rem 0.8rem !important; } body #initial_profile_modal.applicant-profile-modal .programme-modal-intro-copy h6 { font-size: 0.88rem; line-height: 1.2; margin-bottom: 0.2rem !important; } body #initial_profile_modal.applicant-profile-modal .programme-modal-intro-copy p { font-size: 0.78rem; line-height: 1.25; } body #initial_profile_modal.applicant-profile-modal .ld-steps { gap: 0.4rem; padding: 0 0 0.35rem; width: 100%; border-bottom-width: 1px; } body #initial_profile_modal.applicant-profile-modal .ld-step { flex-direction: row; gap: 0.35rem; padding: 0 0.35rem; } body #initial_profile_modal.applicant-profile-modal .ld-step-num { width: 1.45rem; height: 1.45rem; font-size: 0.78rem; } body #initial_profile_modal.applicant-profile-modal .ld-step-title { margin-top: 0; font-size: 0.82rem; line-height: 1.15; } body #initial_profile_modal.applicant-profile-modal .ld-forms-carousel { gap: 0.5rem; padding-top: 0.6rem; } body #initial_profile_modal.applicant-profile-modal .ld-form-slide.mb-5 { margin-bottom: 1rem !important; } body #initial_profile_modal.applicant-profile-modal #learner-dashboard-app .border.rounded.p-3.mb-4.bg-light.max-height-800.overflow-y-auto { margin-bottom: 0.75rem !important; padding: 0.7rem !important; } body #initial_profile_modal.applicant-profile-modal #learner-dashboard-app .row.g-3 { --bs-gutter-y: 0.55rem; } body #initial_profile_modal.applicant-profile-modal #learner-dashboard-app .row.mb-3 { margin-bottom: 0.45rem !important; } body #initial_profile_modal.applicant-profile-modal #learner-dashboard-app .row.mb-3 .d-flex.justify-content-between.align-items-center.mb-2.border-bottom.pb-1.text-dark { margin-bottom: 0.35rem !important; padding-bottom: 0.35rem !important; } body #initial_profile_modal.applicant-profile-modal #learner-dashboard-app .row.mb-3 h5 { font-size: 1.05rem; line-height: 1.15; } body #initial_profile_modal.applicant-profile-modal #learner-dashboard-app .mb-2.p-2.rounded.bg-transparent { margin-bottom: 0.45rem !important; padding: 0.25rem 0 !important; } body #initial_profile_modal.applicant-profile-modal #learner-dashboard-app .form-label { margin-bottom: 0.18rem !important; font-size: 0.84rem !important; line-height: 1.2; } body #initial_profile_modal.applicant-profile-modal #learner-dashboard-app .text-muted.small.mb-2 { margin-bottom: 0.35rem !important; line-height: 1.25; } body #initial_profile_modal.applicant-profile-modal #learner-dashboard-app .form-control:not(textarea), body #initial_profile_modal.applicant-profile-modal #learner-dashboard-app .form-select { min-height: 2.15rem; padding-top: 0.38rem; padding-bottom: 0.38rem; } body #initial_profile_modal.applicant-profile-modal #learner-dashboard-app textarea.form-control { min-height: 4.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } .view-applicant-profile-page #learner-dashboard-app.applicant-profile-layout { width: 100%; max-height: none; overflow: visible; padding: 0; border: 0; background: transparent; box-shadow: none; } .view-applicant-profile-page #learner-dashboard-app.applicant-profile-layout .bg-transparent.p-0.overflow-auto.hide-survey-scrollbar.rounded-3.shadow-sm.border.border-1.max-height-600, .view-applicant-profile-page #learner-dashboard-app.applicant-profile-layout .border.rounded.p-3.mb-4.bg-light.max-height-800.overflow-y-auto, .view-applicant-profile-page #learner-dashboard-app.applicant-profile-layout .overflow-y-auto.max-height-350 { max-height: none !important; overflow: visible !important; } .view-applicant-profile-page #learner-dashboard-app.applicant-profile-layout .bg-transparent.p-0.overflow-auto.hide-survey-scrollbar.rounded-3.shadow-sm.border.border-1.max-height-600 { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .view-applicant-profile-page #learner-dashboard-app.applicant-profile-layout .border.rounded.p-3.mb-4.bg-light.max-height-800.overflow-y-auto { margin-bottom: 1.5rem !important; padding: 0 0 1.25rem !important; border: 0 !important; border-bottom: 1px solid rgba(34, 197, 94, 0.35) !important; border-radius: 0 !important; background: transparent !important; } .view-applicant-profile-page #learner-dashboard-app.applicant-profile-layout .row.mb-3 { margin-bottom: 1rem !important; } .view-applicant-profile-page #learner-dashboard-app.applicant-profile-layout .row.mb-3 .d-flex.justify-content-between.align-items-center.mb-2.border-bottom.pb-1.text-dark { display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 0.15rem; width: 100%; margin-bottom: 0 !important; padding-bottom: 0.35rem !important; border-bottom: 1px solid rgba(34, 197, 94, 0.55) !important; } .view-applicant-profile-page #learner-dashboard-app.applicant-profile-layout .row.mb-3 .d-flex.justify-content-between.align-items-center.mb-2.border-bottom.pb-1.text-dark h5 { margin: 0 !important; font-size: 0.95rem; font-weight: 700 !important; letter-spacing: 0.04em; text-transform: uppercase; } .view-applicant-profile-page #learner-dashboard-app.applicant-profile-layout .row.mb-3 .d-flex.justify-content-between.align-items-center.mb-2.border-bottom.pb-1.text-dark .text-muted.ms-3 { margin-left: 0 !important; font-size: 0.8rem !important; font-weight: 400 !important; } .view-applicant-profile-page #learner-dashboard-app.applicant-profile-layout .mb-2.p-2.rounded.bg-transparent { padding: 0 !important; margin-bottom: 1.25rem !important; border: 0 !important; background: transparent !important; } .view-applicant-profile-page #learner-dashboard-app.applicant-profile-layout .form-label { margin-bottom: 0.35rem; font-size: 0.92rem !important; font-weight: 500 !important; color: #1f2937 !important; } .view-applicant-profile-page #learner-dashboard-app.applicant-profile-layout .form-control:not(textarea):not([type="file"]), .view-applicant-profile-page #learner-dashboard-app.applicant-profile-layout .form-select { min-height: 2.55rem; border-radius: 999px; border: 1px solid #cfd6df; background-color: #fff; box-shadow: none; padding: 0.55rem 1rem; } .view-applicant-profile-page #learner-dashboard-app.applicant-profile-layout textarea.form-control { border-radius: 1rem; border: 1px solid #cfd6df; background-color: #fff; box-shadow: none; padding: 0.75rem 1rem; } .view-applicant-profile-page #learner-dashboard-app.applicant-profile-layout .form-check { margin-bottom: 0.35rem; } .view-applicant-profile-page #learner-dashboard-app.applicant-profile-layout .form-check-input { margin-top: 0.2rem; } .view-applicant-profile-page #learner-dashboard-app.applicant-profile-layout .form-check-label { font-weight: 400 !important; } .view-applicant-profile-page #learner-dashboard-app.applicant-profile-layout .d-flex.flex-wrap.gap-3 { flex-direction: column !important; align-items: flex-start !important; gap: 0.25rem !important; } .view-applicant-profile-page #learner-dashboard-app.applicant-profile-layout .contact-methods-field .row.g-2 > [class*="col-"] { flex: 0 0 100%; max-width: 100%; } .global-access-modal.programme-modal-standard .modal-header, .global-access-modal.programme-standard-modal .modal-header { background: #000 !important; background-image: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #fff !important; padding: 0.95rem 1rem !important; } .global-access-modal.programme-modal-standard .modal-header > .modal-title, .global-access-modal.programme-standard-modal .modal-header > .modal-title, .global-access-modal.programme-modal-standard .modal-header > h1, .global-access-modal.programme-standard-modal .modal-header > h1, .global-access-modal.programme-modal-standard .modal-header > h2, .global-access-modal.programme-standard-modal .modal-header > h2, .global-access-modal.programme-modal-standard .modal-header > h3, .global-access-modal.programme-standard-modal .modal-header > h3, .global-access-modal.programme-modal-standard .modal-header > h4, .global-access-modal.programme-standard-modal .modal-header > h4, .global-access-modal.programme-modal-standard .modal-header > h5, .global-access-modal.programme-standard-modal .modal-header > h5, .global-access-modal.programme-modal-standard .modal-header > h6, .global-access-modal.programme-standard-modal .modal-header > h6 { color: #fff !important; font-size: 0.95rem !important; font-weight: 700; line-height: 1.25; margin: 0 !important; min-width: 0; } .global-access-modal.programme-modal-standard .modal-header .fa-times, .global-access-modal.programme-standard-modal .modal-header .fa-times, .global-access-modal.programme-modal-standard .modal-header .btn-close, .global-access-modal.programme-standard-modal .modal-header .btn-close { align-items: center; color: #fff !important; display: inline-flex; font-size: 1.35rem !important; height: 1.8rem; justify-content: center; line-height: 1; min-width: 1.8rem; opacity: 1; padding: 0; cursor: pointer; width: 1.8rem; } .global-access-modal .modal-body { gap: 1.25rem; } .global-access-modal .global-access-intro { border-left: 3px solid rgba(148, 163, 184, 0.22); padding-left: 1rem; } .global-access-modal .global-access-intro .text-xs { color: #6b7280 !important; line-height: 1.45; } .global-access-modal .global-access-intro ul { margin-bottom: 0; margin-top: 0.35rem; padding-left: 1.15rem; } .global-access-modal .global-access-intro li + li { margin-top: 0.15rem; } /* "Global settings for: " modal - make-course-public confirmation. */ .global-programme-settings-modal .course-public-warning { background: #f6f7f8; border: 1px solid #e6e6e6; border-left: 4px solid #b6b6b6; border-radius: 8px; padding: 0.85rem 1rem; font-size: 0.8rem; line-height: 1.5; color: #374151; } .global-access-modal .global-access-type-row { color: #111827; font-size: 0.84rem; line-height: 1.35; } .global-access-modal .global-access-type-row .course_type_name_display { font-weight: 600; margin-left: 0.25rem; } .global-access-modal .global-access-toggle-row { display: flex; align-items: center; } .global-access-modal .modal-footer.global-access-modal-footer { padding: 0 1rem 1rem !important; } @media (max-width: 575.98px) { .global-access-modal.programme-modal-standard .modal-header, .global-access-modal.programme-standard-modal .modal-header { padding: 0.85rem 0.9rem !important; } .global-access-modal.programme-modal-standard .modal-header > .modal-title, .global-access-modal.programme-standard-modal .modal-header > .modal-title, .global-access-modal.programme-modal-standard .modal-header > h1, .global-access-modal.programme-standard-modal .modal-header > h1, .global-access-modal.programme-modal-standard .modal-header > h2, .global-access-modal.programme-standard-modal .modal-header > h2, .global-access-modal.programme-modal-standard .modal-header > h3, .global-access-modal.programme-standard-modal .modal-header > h3, .global-access-modal.programme-modal-standard .modal-header > h4, .global-access-modal.programme-standard-modal .modal-header > h4, .global-access-modal.programme-modal-standard .modal-header > h5, .global-access-modal.programme-standard-modal .modal-header > h5, .global-access-modal.programme-modal-standard .modal-header > h6, .global-access-modal.programme-standard-modal .modal-header > h6 { font-size: 0.9rem !important; } .global-access-modal .modal-body { gap: 1rem; } .global-access-modal .modal-footer.global-access-modal-footer { padding: 0 0.9rem 0.9rem !important; } } body.programme-modal-open #create_pop_up_model .modal-dialog { max-width: 560px; margin: 1.75rem auto; } #create_pop_up_model .modal-body, #create_pop_up_model .modal-header, #create_pop_up_model .modal-footer, #create_pop_up_model form { opacity: 1 !important; filter: none !important; } #popUpModel { z-index: 1085 !important; opacity: 1 !important; filter: none !important; transform: none !important; padding-right: 0 !important; } #popUpModel .modal-dialog, #popUpModel .modal-content, #popUpModel .modal-body, #popUpModel .modal-header, #popUpModel .modal-footer, #popUpModel form { position: relative; z-index: 1086 !important; opacity: 1 !important; filter: none !important; transform: none !important; } body.programme-modal-open #popUpModel { opacity: 1 !important; filter: none !important; } body.programme-modal-open #popUpModel .modal-dialog { max-width: 560px; margin: 1.75rem auto; } body.programme-modal-open #profileModal { z-index: 1090 !important; opacity: 1 !important; filter: none !important; } body.programme-modal-open #profileModal .modal-dialog { position: relative; z-index: 1091 !important; } body.programme-modal-open #profileModal .modal-content, body.programme-modal-open #profileModal .modal-body, body.programme-modal-open #profileModal .modal-header, body.programme-modal-open #profileModal .modal-footer, body.programme-modal-open #profileModal form { opacity: 1 !important; filter: none !important; } /* Keep the Add User modal fully bright above any faded backdrop layer. */ body.modal-open #createUserModal { z-index: 1090 !important; opacity: 1 !important; filter: none !important; } body.modal-open #createUserModal .modal-dialog { position: relative; z-index: 1091 !important; opacity: 1 !important; filter: none !important; } body.modal-open #createUserModal .modal-content, body.modal-open #createUserModal .modal-body, body.modal-open #createUserModal .modal-header, body.modal-open #createUserModal .modal-footer, body.modal-open #createUserModal form { opacity: 1 !important; filter: none !important; } /* Keep the warehouse modals above both the backdrop and the page loader. */ body.modal-open #upload_files_modal, body.modal-open #view_file_modal, body.modal-open #update_files_modal, body.modal-open #create_folder_modal, body.modal-open #arrange_files_modal { position: fixed; inset: 0; z-index: 10060 !important; opacity: 1 !important; filter: none !important; pointer-events: auto !important; transform: none !important; } body.modal-open #upload_files_modal .modal-dialog, body.modal-open #view_file_modal .modal-dialog, body.modal-open #update_files_modal .modal-dialog, body.modal-open #create_folder_modal .modal-dialog, body.modal-open #arrange_files_modal .modal-dialog { position: relative; z-index: 10061 !important; opacity: 1 !important; filter: none !important; transform: none !important; pointer-events: auto !important; } body.modal-open #upload_files_modal .modal-content, body.modal-open #upload_files_modal .modal-body, body.modal-open #upload_files_modal .modal-header, body.modal-open #upload_files_modal .modal-footer, body.modal-open #upload_files_modal form, body.modal-open #view_file_modal .modal-content, body.modal-open #view_file_modal .modal-body, body.modal-open #view_file_modal .modal-header, body.modal-open #view_file_modal .modal-footer, body.modal-open #view_file_modal form, body.modal-open #update_files_modal .modal-content, body.modal-open #update_files_modal .modal-body, body.modal-open #update_files_modal .modal-header, body.modal-open #update_files_modal .modal-footer, body.modal-open #update_files_modal form, body.modal-open #create_folder_modal .modal-content, body.modal-open #create_folder_modal .modal-body, body.modal-open #create_folder_modal .modal-header, body.modal-open #create_folder_modal .modal-footer, body.modal-open #create_folder_modal form, body.modal-open #arrange_files_modal .modal-content, body.modal-open #arrange_files_modal .modal-body, body.modal-open #arrange_files_modal .modal-header, body.modal-open #arrange_files_modal .modal-footer, body.modal-open #arrange_files_modal form { opacity: 1 !important; filter: none !important; pointer-events: auto !important; } body.modal-open #upload_files_modal .modal-content, body.modal-open #view_file_modal .modal-content, body.modal-open #update_files_modal .modal-content, body.modal-open #create_folder_modal .modal-content, body.modal-open #arrange_files_modal .modal-content { position: relative; z-index: 10062 !important; background-color: #fff !important; } body.modal-open #upload_files_modal .modal-body, body.modal-open #upload_files_modal .modal-footer, body.modal-open #view_file_modal .modal-body, body.modal-open #view_file_modal .modal-footer, body.modal-open #update_files_modal .modal-body, body.modal-open #update_files_modal .modal-footer, body.modal-open #create_folder_modal .modal-body, body.modal-open #create_folder_modal .modal-footer, body.modal-open #arrange_files_modal .modal-body, body.modal-open #arrange_files_modal .modal-footer { background-color: #fff !important; } .programme-details-solid-modal { z-index: 1085 !important; opacity: 1 !important; filter: none !important; transform: none !important; padding-right: 0 !important; } .swal2-container { z-index: 20000 !important; } .programme-details-solid-modal .modal-dialog, .programme-details-solid-modal .modal-content, .programme-details-solid-modal .modal-body, .programme-details-solid-modal .modal-header, .programme-details-solid-modal .modal-footer, .programme-details-solid-modal form { position: relative; z-index: 1086 !important; opacity: 1 !important; filter: none !important; transform: none !important; } body.programme-modal-open .programme-details-solid-modal { opacity: 1 !important; filter: none !important; } #programme-store-modal .programme-store-dialog { max-width: 720px; } #programme-store-modal .programme-store-modal-content { border: 0; border-radius: 10px; box-shadow: 0 18px 45px rgba(14, 23, 38, 0.22); overflow: hidden; } #programme-store-modal .programme-store-modal-header { background: var(--primary-color); border: 0; color: #fff; padding: 0.8rem 1rem; } #programme-store-modal .modal-title { color: #fff; font-size: 0.94rem; font-weight: 700; letter-spacing: 0; } #programme-store-modal .programme-store-title-icon { align-items: center; background: rgba(255, 255, 255, 0.16); border-radius: 7px; display: inline-flex; height: 26px; justify-content: center; width: 26px; } #programme-store-modal .programme-store-title-icon i { color: #fff; font-size: 1rem; } #programme-store-modal .programme-store-modal-close { align-items: center; background: rgba(0, 0, 0, 0.18); border: 0; border-radius: 999px; color: #fff; display: inline-flex; font-size: 1.1rem; height: 28px; justify-content: center; line-height: 1; padding: 0; width: 28px; } #programme-store-modal .programme-store-modal-close:hover { background: rgba(0, 0, 0, 0.3); } #programme-store-modal .modal-body { padding: 1rem; } #programme-store-modal .programme-store-programme-field .form-control, #programme-store-modal .programme-store-row-fields .form-control { border: 1px solid #d8dee8; border-radius: 8px; min-height: 36px; } #programme-store-modal .programme-store-programme-field .form-control:disabled { background: #eef1f5; color: #2d3748; opacity: 1; } #programme-store-modal .dealer_dropdown_searchable { border-color: #d8dee8; border-radius: 8px; margin-bottom: 0.55rem; } #programme-store-modal .add-new-store-toggle { align-items: center; background: #fff; border: 1px solid var(--primary-color); border-radius: 999px; color: var(--primary-color); display: inline-flex; font-size: 0.68rem; font-weight: 700; gap: 0.25rem; line-height: 1; padding: 0.42rem 0.7rem; } #programme-store-modal .add-new-store-toggle:hover { background: var(--primary-color); color: #fff; } #programme-store-modal .add-store-row, #programme-store-modal .remove-store-row { align-items: center; border-radius: 999px; display: inline-flex; height: 30px; justify-content: center; margin-top: 0.15rem !important; padding: 0; width: 30px; } #programme-store-modal .add-store-row { background: #050505; } #programme-store-modal .remove-store-row { background: var(--primary-color); } #programme-store-modal .add-store-row i, #programme-store-modal .remove-store-row i { background: transparent !important; color: #fff !important; font-size: 1rem; padding: 0 !important; } #programme-store-modal .manual-store-fields { background: #f8fafc; border: 1px solid #e1e7ef; border-radius: 8px; margin-left: 0; margin-right: 0; padding: 0.45rem; } #programme-store-modal .manual-store-help { color: #667085 !important; font-size: 0.68rem; } #programme-store-modal .use-existing-store-toggle { background: transparent; border: 0; color: var(--primary-color); font-size: 0.68rem; font-weight: 700; margin-left: 0.35rem; padding: 0; } #programme-store-modal .use-existing-store-toggle:hover { text-decoration: underline; } #programme-store-modal .programme-store-save-btn { background: #050505; border: 0; border-radius: 999px; color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1; padding: 0.55rem 0.85rem; } #programme-store-modal .programme-store-save-btn:hover { background: var(--primary-color); } #programme-recruitment-adverts-card { border: 1.5px solid rgb(99 102 241 / 30%); border-radius: 16px; } #programme-recruitment-adverts-list.programme-recruitment-adverts-grid { align-items: start; display: grid; gap: 1.1rem; grid-template-columns: repeat(1, minmax(0, 1fr)); } #programme-recruitment-adverts-list.programme-recruitment-adverts-grid.is-starting { grid-template-columns: minmax(0, 1fr); } #programme-recruitment-adverts-list.programme-recruitment-adverts-grid.is-template-browser { grid-template-columns: minmax(0, 1fr); } .programme-recruitment-start-panel { display: grid; gap: 1.35rem; width: 100%; } .programme-recruitment-start-header { align-items: center; background: #2f5590; border-radius: 8px; color: #fff; display: flex; justify-content: space-between; min-height: 4.8rem; padding: 1rem 1.3rem; } .programme-recruitment-start-header-copy { min-width: 0; } .programme-recruitment-start-header h3 { color: #fff; font-size: 1rem; font-weight: 800; line-height: 1.25; margin: 0; } .programme-recruitment-start-header p { color: rgba(255, 255, 255, 0.82); font-size: 0.78rem; font-weight: 700; margin: 0.2rem 0 0; } .programme-recruitment-start-header-action { align-items: center; color: #2f5590; display: inline-flex; font-weight: 800; gap: 0.25rem; justify-content: center; white-space: nowrap; } .programme-recruitment-start-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(16rem, 22rem)); justify-content: center; } .programme-recruitment-start-card { align-items: center; background: #fff; border: 1px solid #d7dce5; border-radius: 8px; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06); display: flex; flex-direction: column; gap: 1rem; justify-content: center; min-height: 18rem; padding: 2rem 1.5rem; text-align: center; width: 100%; } .programme-recruitment-start-icon { align-items: center; background: #dbeafe; border-radius: 8px; color: #2f5590; display: inline-flex; font-size: 2rem; height: 4.4rem; justify-content: center; width: 4.4rem; } .programme-recruitment-start-card h3 { color: #0f172a; font-size: 1.05rem; font-weight: 800; line-height: 1.25; margin: 0; } .programme-recruitment-start-card p { color: #334155; font-size: 0.82rem; font-weight: 600; line-height: 1.45; margin: 0; max-width: 18rem; } .programme-recruitment-start-card .programme-recruitment-start-action { font-weight: 800; margin-top: auto; } .programme-recruitment-template-browser-head { align-items: center; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; color: #1e3a8a; display: flex; font-size: 0.75rem; font-weight: 700; gap: 1rem; grid-column: 1 / -1; justify-content: space-between; justify-self: stretch; padding: 0.75rem 1rem; } /* Add/Edit/Use-template Advert wizard, embedded inline in #programme-recruitment-wizard-panel (programme_management_content.html). */ .recruitment-wizard-stepper { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin-bottom: 1.1rem; } .recruitment-wizard-step { display: flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; font-weight: 700; color: #9aa3b8; } .recruitment-wizard-step-num { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; border: 1.5px solid #dfe4ee; color: #9aa3b8; flex-shrink: 0; } .recruitment-wizard-step.is-done .recruitment-wizard-step-num { background: var(--btn-outline-primary-bg, #ecf0fb); border-color: var(--primary-color, #300067); color: var(--primary-color, #300067); } .recruitment-wizard-step.is-active .recruitment-wizard-step-num { background: var(--primary-color, #300067); border-color: var(--primary-color, #300067); color: #fff; } .recruitment-wizard-step.is-active { color: #10284d; } .recruitment-wizard-step-rule { width: 1.8rem; height: 1px; background: #dfe4ee; margin: 0 0.6rem; } .recruitment-pipeline-row { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 0.25rem 0.1rem 0.5rem; } .recruitment-stage-card { width: 13rem; flex-shrink: 0; border: 1.5px solid #e7ecf6; border-radius: 0.7rem; padding: 0.65rem 0.7rem; background: #f8fbff; } .recruitment-stage-card.is-default { background: #ecf0fb; } .recruitment-stage-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; font-size: 0.62rem; font-weight: 700; color: #5f7190; text-transform: uppercase; } .recruitment-stage-title { font-size: 0.78rem; font-weight: 700; color: #10284d; margin-bottom: 0.2rem; } .recruitment-stage-meta { font-size: 0.66rem; color: #5f7190; line-height: 1.5; margin-bottom: 0.45rem; } .recruitment-stage-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 0.4rem; border-top: 1px solid #e7ecf6; font-size: 0.66rem; } .recruitment-stage-footer a { cursor: pointer; } .recruitment-add-step-card { width: 9rem; flex-shrink: 0; border: 1.5px dashed #c9d3e6; border-radius: 0.7rem; display: flex; align-items: center; justify-content: center; gap: 0.3rem; color: var(--primary-color, #300067); font-weight: 700; font-size: 0.74rem; cursor: pointer; margin-left: 0.5rem; } .recruitment-add-step-card:hover { background: #ecf0fb; } .recruitment-stage-chevron { width: 1.3rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #b9c1d4; } @media (width >= 768px) { #programme-recruitment-adverts-list.programme-recruitment-adverts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (width >= 1200px) { #programme-recruitment-adverts-list.programme-recruitment-adverts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767.98px) { .programme-recruitment-start-header { align-items: flex-start; flex-direction: column; gap: 0.85rem; } .programme-recruitment-start-grid { grid-template-columns: minmax(0, 22rem); } } #programme-recruitment-adverts-card .programme-recruitment-advert-card { background: #fff; border: 1.5px solid rgb(99 102 241 / 52%) !important; border-radius: 16px; box-shadow: 0 8px 20px rgb(15 23 42 / 8%); display: flex; flex-direction: column; height: 31rem; min-height: 31rem; max-height: 31rem; overflow: hidden !important; } #programme-recruitment-adverts-card .programme-recruitment-advert-card .programme-recruitment-advert-card-body { gap: 0.85rem; height: 100%; min-height: 0; padding: 1.15rem; } #programme-recruitment-adverts-card .programme-recruitment-advert-name { color: #0f172a; font-size: 0.9rem; font-weight: 700; line-height: 1.2; } #programme-recruitment-adverts-card .programme-recruitment-advert-subtitle { color: #64748b; font-weight: 600; } #programme-recruitment-adverts-card .programme-recruitment-status-badge { border-radius: 999px; font-weight: 700; line-height: 1; padding: 0.35rem 0.55rem; text-transform: uppercase; white-space: nowrap; } #programme-recruitment-adverts-card .programme-recruitment-status-badge.is-recruiting { background: rgb(22 163 74 / 15%); color: #166534; } #programme-recruitment-adverts-card .programme-recruitment-status-badge.is-paused { background: rgb(148 163 184 / 20%); color: #334155; } #programme-recruitment-adverts-card .programme-recruitment-advert-details { border-top: 1px dashed rgb(148 163 184 / 52%); display: flex; flex-direction: column; flex: 1 1 auto; gap: 0.05rem; margin-top: 0.1rem; min-height: 0; overflow: hidden; padding-top: 0.35rem; } #programme-recruitment-adverts-card .programme-recruitment-advert-detail-row { align-items: baseline; border-bottom: 1px solid rgb(148 163 184 / 44%); display: flex; gap: 0.55rem; justify-content: space-between; min-height: 1.85rem; padding: 0.28rem 0; } #programme-recruitment-adverts-card .programme-recruitment-advert-meta-label { color: #64748b; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; } #programme-recruitment-adverts-card .programme-recruitment-advert-detail-value { color: #0f172a; font-size: 0.72rem; font-weight: 600; line-height: 1.3; max-width: 68%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #programme-recruitment-adverts-card .programme-recruitment-advert-detail-row.is-multiline { align-items: flex-start; flex: 1 1 auto; flex-direction: column; gap: 0.22rem; min-height: 0; overflow: hidden; padding-bottom: 0.4rem; padding-top: 0.42rem; } #programme-recruitment-adverts-card .programme-recruitment-advert-detail-row.is-multiline .programme-recruitment-advert-detail-value { color: #334155; display: block; font-size: 0.69rem; line-height: 1.35; max-width: 100%; min-height: 0; overflow: hidden; white-space: normal; } #programme-recruitment-adverts-card .programme-recruitment-advert-detail-row:last-child { border-bottom: 0; } #programme-recruitment-adverts-card .programme-recruitment-advert-detail-value.is-rich-text { flex: 1 1 auto; height: 100%; max-height: none; min-height: 0; overflow: auto; padding-right: 0.1rem; } #programme-recruitment-adverts-card .programme-recruitment-advert-detail-value.is-rich-text p { margin: 0 0 0.45rem; } #programme-recruitment-adverts-card .programme-recruitment-advert-detail-value.is-rich-text p:last-child { margin-bottom: 0; } #programme-recruitment-adverts-card .programme-recruitment-advert-detail-value.is-rich-text h1, #programme-recruitment-adverts-card .programme-recruitment-advert-detail-value.is-rich-text h2, #programme-recruitment-adverts-card .programme-recruitment-advert-detail-value.is-rich-text h3, #programme-recruitment-adverts-card .programme-recruitment-advert-detail-value.is-rich-text h4, #programme-recruitment-adverts-card .programme-recruitment-advert-detail-value.is-rich-text h5, #programme-recruitment-adverts-card .programme-recruitment-advert-detail-value.is-rich-text h6 { color: #0f172a; font-size: 0.74rem; font-weight: 700; line-height: 1.3; margin: 0.2rem 0 0.45rem; } #programme-recruitment-adverts-card .programme-recruitment-advert-detail-value.is-rich-text ul, #programme-recruitment-adverts-card .programme-recruitment-advert-detail-value.is-rich-text ol { margin: 0.2rem 0 0.45rem 1rem; padding-left: 0.85rem; } #programme-recruitment-adverts-card .programme-recruitment-advert-detail-value.is-rich-text li { margin-bottom: 0.2rem; } #programme-recruitment-adverts-card .programme-recruitment-advert-detail-value.is-rich-text blockquote { border-left: 2px solid rgb(99 102 241 / 35%); color: #334155; margin: 0.25rem 0 0.5rem; padding-left: 0.55rem; } #programme-recruitment-adverts-card .programme-recruitment-advert-detail-value.is-rich-text a { color: #4338ca; text-decoration: underline; } #programme-recruitment-adverts-card .programme-recruitment-advert-action-row { margin-top: auto; } #programme-recruitment-adverts-card .programme-recruitment-advert-action-row .btn { color: #ffffff !important; } #programme-recruitment-adverts-card .programme-recruitment-apply-button { background: #111827; border-color: #111827; color: #ffffff !important; min-width: 6.45rem; } #programme-recruitment-adverts-card .programme-recruitment-view-more-button { background-color: var(--btn-outline-primary-bg, var(--primary-color)); background-image: var(--btn-outline-primary-bg); background-repeat: no-repeat; background-size: cover; border: 1px solid transparent; color: #ffffff !important; min-width: 10.5rem; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18); transition: none; } #programme-recruitment-adverts-card .programme-recruitment-view-more-button:hover, #programme-recruitment-adverts-card .programme-recruitment-view-more-button:focus, #programme-recruitment-adverts-card .programme-recruitment-view-more-button:active { background-color: var(--btn-outline-primary-bg, var(--primary-color)); background-image: var(--btn-outline-primary-bg); border-color: transparent; color: #ffffff !important; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18); transform: none; } #programme-recruitment-adverts-card .programme-recruitment-apply-button:hover, #programme-recruitment-adverts-card .programme-recruitment-apply-button:focus, #programme-recruitment-adverts-card .programme-recruitment-apply-button:active { color: #ffffff !important; } #programme-recruitment-adverts-card .programme-recruitment-manage-toggle { padding-left: 0.6rem; padding-right: 0.6rem; } #programme-recruitment-adverts-card .programme-recruitment-manage-dropdown .assessment-manage-menu { max-height: none !important; overflow: visible !important; } #programme-recruitment-adverts-card .programme-recruitment-advert-card.is-expanded { height: min(42rem, calc(88vh - 10rem)); min-height: min(36rem, calc(88vh - 10rem)); max-height: min(42rem, calc(88vh - 10rem)); overflow: hidden !important; } #programme-recruitment-adverts-card .programme-recruitment-advert-card.is-expanded .programme-recruitment-advert-details { flex: 1 1 auto; overflow: hidden; } #programme-recruitment-adverts-card .programme-recruitment-advert-card.is-expanded .programme-recruitment-advert-detail-row.is-multiline { flex: 1 1 auto; overflow: hidden; position: relative; } #programme-recruitment-adverts-card .programme-recruitment-advert-card.is-expanded .programme-recruitment-advert-detail-value.is-rich-text { scrollbar-color: rgba(71, 85, 105, 0.75) rgba(226, 232, 240, 0.85); scrollbar-width: thin; height: 100%; max-height: none; overflow-x: hidden; overflow-y: auto; padding-bottom: 1.8rem; padding-right: 0.55rem; } #programme-recruitment-adverts-card .programme-recruitment-advert-card.is-expanded .programme-recruitment-advert-detail-value.is-rich-text::-webkit-scrollbar { width: 0.56rem; } #programme-recruitment-adverts-card .programme-recruitment-advert-card.is-expanded .programme-recruitment-advert-detail-value.is-rich-text::-webkit-scrollbar-track { background: rgba(226, 232, 240, 0.9); border-radius: 999px; } #programme-recruitment-adverts-card .programme-recruitment-advert-card.is-expanded .programme-recruitment-advert-detail-value.is-rich-text::-webkit-scrollbar-thumb { background: rgba(71, 85, 105, 0.78); border-radius: 999px; } #programme-recruitment-adverts-card .programme-recruitment-advert-card.is-expanded.has-scrollable-summary .programme-recruitment-advert-detail-row.is-multiline::before { background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 74%); bottom: 0; content: ""; height: 2.8rem; left: 0; pointer-events: none; position: absolute; right: 0.7rem; z-index: 1; } #programme-recruitment-adverts-card .programme-recruitment-advert-card.is-expanded.has-scrollable-summary .programme-recruitment-advert-detail-row.is-multiline::after { background: rgba(15, 23, 42, 0.9); border-radius: 999px; bottom: 0.35rem; color: #ffffff; content: "Scroll for more"; font-size: 0.62rem; font-weight: 800; letter-spacing: 0; line-height: 1; padding: 0.36rem 0.55rem; pointer-events: none; position: absolute; right: 0.8rem; z-index: 2; } #programme-recruitment-adverts-card .programme-recruitment-advert-card.is-expanded .programme-recruitment-advert-action-row { margin-top: 0.65rem; } @media (width < 576px) { #programme-recruitment-adverts-card .programme-recruitment-advert-card { height: auto; min-height: 0; max-height: none; } #programme-recruitment-adverts-card .programme-recruitment-advert-detail-row { align-items: flex-start; flex-direction: column; gap: 0.12rem; padding-bottom: 0.36rem; padding-top: 0.36rem; } #programme-recruitment-adverts-card .programme-recruitment-advert-detail-value { max-width: 100%; white-space: normal; } #programme-recruitment-adverts-card .programme-recruitment-advert-action-row { align-items: stretch !important; flex-direction: column; } #programme-recruitment-adverts-card .programme-recruitment-advert-detail-value.is-rich-text { height: auto; max-height: 9rem; } #programme-recruitment-adverts-card .programme-recruitment-advert-action-row .btn, #programme-recruitment-adverts-card .programme-recruitment-advert-action-row .programme-recruitment-manage-dropdown { width: 100%; } #programme-recruitment-adverts-card .programme-recruitment-manage-toggle { width: 100%; } } #programme-recruitment-modal .programme-recruitment-title-icon { align-items: center; background: rgba(255, 255, 255, 0.16); border-radius: 7px; display: inline-flex; height: 26px; justify-content: center; width: 26px; } #programme-recruitment-modal .programme-recruitment-title-icon i { color: #fff; font-size: 1rem; } #programme-recruitment-modal .programme-recruitment-save-btn { background: #050505; border: 0; border-radius: 999px; color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1; padding: 0.55rem 0.85rem; } #programme-recruitment-modal .programme-recruitment-save-btn:hover { background: var(--primary-color); } #programme-recruitment-modal .ck.ck-editor { width: 100%; } #programme-recruitment-modal .ck-editor__editable_inline { font-size: 0.78rem; min-height: 180px; } body.programme-management-content-page #programme-recruitment-adverts-card { background: #f6f7fb; border: 0; border-radius: 0; overflow: visible !important; padding: 1rem 0 !important; position: relative; } body.programme-management-content-page #programme-recruitment-adverts-list.programme-recruitment-adverts-grid { align-items: stretch; display: grid; gap: 0.95rem; grid-template-columns: minmax(0, 1fr) !important; overflow: visible; } body.programme-management-content-page #programme-recruitment-adverts-list.programme-recruitment-adverts-grid.is-starting { grid-template-columns: minmax(0, 1fr) !important; } body.programme-management-content-page #programme-recruitment-adverts-list.programme-recruitment-adverts-grid.is-template-browser { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-start-grid { grid-template-columns: repeat(2, minmax(0, 20rem)) !important; justify-content: center; margin-left: auto; margin-right: auto; max-width: 41.25rem; width: 100%; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-start-card { max-width: 20rem; } body.programme-management-content-page #programme-recruitment-section .programme-table-card { overflow: visible; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-card { align-items: stretch; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.1) !important; border-radius: 10px; box-sizing: border-box; box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08); display: flex; flex-direction: row; gap: 0.8rem; height: auto; max-height: none; max-width: 100%; min-height: 150px; min-width: 0; overflow: visible !important; padding: 0.7rem; position: relative; width: 100%; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-media { align-items: center; background: var(--dark-purple-2, #3d0878); border-radius: 12px; color: #ffffff; display: flex; flex: 0 0 150px; flex-direction: column; gap: 0.55rem; justify-content: center; min-height: 122px; text-align: center; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-media i { color: #ffffff; font-size: 2rem; line-height: 1; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-media span { color: #ffffff; font-size: 0.95rem; font-weight: 500; line-height: 1.2; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-body { align-items: center; display: grid; flex: 1 1 auto; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; padding: 0.2rem 0.15rem 0.2rem 0.05rem; width: 100%; } /* Recruitment step configuration needs room for its conditional forms and assessment library. Keep the shared standard-modal appearance without its compact 560px dialog cap. */ .programme-modal-standard.recruitment-workflow-wide-modal .modal-dialog, .programme-standard-modal.recruitment-workflow-wide-modal .modal-dialog, body.programme-modal-open .programme-standard-modal.recruitment-workflow-wide-modal .modal-dialog { max-width: min(1140px, calc(100vw - 2rem)) !important; width: min(1140px, calc(100vw - 2rem)) !important; } body.programme-management-content-page .programme-recruitment-reference-heading { align-items: center; display: flex; flex-wrap: wrap; gap: 0.65rem; } body.programme-management-content-page .programme-recruitment-reference-heading .programme-recruitment-preview-status-value { background: #e9f8ef; border-radius: 999px; color: #159455; font-size: 0.68rem; padding: 0.22rem 0.65rem; } body.programme-management-content-page .programme-recruitment-reference-heading .programme-recruitment-preview-status-value.is-closed { background: #f0f1f5; color: #777b8c; } body.programme-management-content-page .programme-recruitment-reference-meta, body.programme-management-content-page .programme-recruitment-reference-metrics { align-items: center; color: #77758d; display: flex; flex-wrap: wrap; font-size: 0.76rem; gap: 1rem; } body.programme-management-content-page .programme-recruitment-reference-pipeline { align-items: center; display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.25rem 0; } body.programme-management-content-page .programme-recruitment-pipeline-pill { align-items: center; background: #eaf8f0; border-radius: 999px; color: #168950; display: inline-flex; font-size: 0.68rem; font-weight: 700; gap: 0.3rem; padding: 0.32rem 0.65rem; } body.programme-management-content-page .programme-recruitment-pipeline-pill.is-monitoring { background: #f1eaff; color: #733ee2; } body.programme-management-content-page .programme-recruitment-pipeline-pill.is-interview { background: #eaf1ff; color: #3768dd; } body.programme-management-content-page .programme-recruitment-pipeline-pill.is-approval { background: #fff1df; color: #d17a16; } body.programme-management-content-page .programme-recruitment-pipeline-arrow { color: #d7d6e3; font-size: 0.68rem; } body.programme-management-content-page .programme-recruitment-reference-metrics { margin-top: 0.15rem; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-actions .programme-recruitment-manage-toggle { background: #6e3e98; border-color: #6e3e98; border-radius: 6px !important; color: #fff; font-weight: 700; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-content { display: flex; flex-direction: column; gap: 0.36rem; min-width: 0; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-advert-name { color: #050816; font-size: 1rem; font-weight: 800; line-height: 1.2; margin: 0; overflow-wrap: anywhere; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-meta { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.35rem; min-width: 0; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-meta-label, body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-date-label { color: #506080; font-size: 0.67rem; font-weight: 800; line-height: 1.2; text-transform: uppercase; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-meta-value { color: #050816; font-size: 0.82rem; font-weight: 800; line-height: 1.2; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-status-value { color: #058342; font-size: 0.84rem; font-weight: 800; line-height: 1.2; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-status-value.is-closed { color: #64748b; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-dates { display: flex; flex-direction: column; gap: 0.72rem; margin-top: 0.34rem; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-date { align-items: center; display: flex; flex-wrap: wrap; gap: 0.45rem; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-date-value { align-items: center; color: #050816; display: inline-flex; gap: 0.35rem; font-size: 0.82rem; font-weight: 800; line-height: 1.2; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-date-value i { color: #d82323; font-size: 0.92rem; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: flex-end; margin-top: 0; max-width: 100%; min-width: 0; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-actions .btn { max-width: 100%; min-height: 2rem; white-space: nowrap; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-manage-toggle, body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-use-template-btn { align-items: center; background: var(--primary-color, #6b16bd) !important; border-color: var(--primary-color, #6b16bd) !important; box-shadow: 0 10px 20px rgba(107, 22, 189, 0.16); color: #ffffff !important; display: inline-flex; font-weight: 800; gap: 0.35rem; justify-content: center; line-height: 1.15; max-width: 100%; min-height: 2.15rem; padding-left: 0.95rem; padding-right: 0.95rem; text-align: center; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-manage-toggle:hover, body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-manage-toggle:focus, body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-manage-toggle:active, body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-use-template-btn:hover, body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-use-template-btn:focus, body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-use-template-btn:active { background: color-mix(in srgb, var(--primary-color, #6b16bd) 88%, #000 12%) !important; border-color: color-mix(in srgb, var(--primary-color, #6b16bd) 88%, #000 12%) !important; color: #ffffff !important; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-manage-dropdown { display: inline-flex; max-width: 100%; min-width: 0; position: relative; z-index: 20; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-manage-dropdown.show { z-index: 1105; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-manage-dropdown .dropdown-menu { max-width: min(18rem, calc(100vw - 2rem)); overflow-wrap: anywhere; z-index: 1100; } body.programme-management-content-page #programme-recruitment-adverts-card .assessment-manage-menu-item.is-delete { color: #1f2937; } body.programme-management-content-page #programme-recruitment-adverts-card .assessment-manage-menu-item.is-delete .menu-item-icon { color: #dc2626; } body.programme-management-content-page #programme-recruitment-adverts-card .assessment-manage-menu-item.is-delete:hover, body.programme-management-content-page #programme-recruitment-adverts-card .assessment-manage-menu-item.is-delete:focus { background: #f8fafc; color: #111827; } @media (min-width: 768px) and (max-width: 1199.98px) { body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-card { flex-direction: column; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-media { flex-basis: auto; min-height: 110px; width: 100%; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-body { align-items: stretch; gap: 0.75rem; grid-template-columns: 1fr; padding: 0; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-actions { justify-content: flex-start; width: 100%; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-actions .btn, body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-actions .programme-recruitment-manage-dropdown, body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-manage-toggle { width: 100%; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-actions .btn { white-space: normal; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-manage-dropdown .dropdown-menu { min-width: 100%; width: 100%; } } #programme-recruitment-details-modal .modal-dialog { max-width: min(560px, calc(100vw - 1.5rem)) !important; width: min(560px, calc(100vw - 1.5rem)) !important; } #programme-recruitment-details-modal .modal-content { background: #ffffff; border: 1px solid #7472d9; border-radius: 9px; box-shadow: 0 18px 42px rgba(15, 23, 42, 0.2); overflow: hidden; position: relative; } #programme-recruitment-details-modal .programme-recruitment-details-close { opacity: 0.85; } #programme-recruitment-details-modal .programme-recruitment-details-close:hover { opacity: 1; } #programme-recruitment-details-modal .programme-recruitment-details-body { padding: 1rem !important; } #programme-recruitment-details-modal .programme-recruitment-details-card { background: #ffffff; min-height: 0; padding: 0; } #programme-recruitment-details-modal .programme-recruitment-details-summary { align-items: center; display: grid; gap: 0.55rem; grid-template-columns: 41px minmax(0, 1fr) auto; padding: 0 1.7rem 0.92rem 0; } #programme-recruitment-details-modal .programme-recruitment-details-preview { background: #5656a4; border-radius: 8px; display: block; height: 41px; width: 41px; } #programme-recruitment-details-modal .programme-recruitment-details-heading { min-width: 0; } #programme-recruitment-details-modal .programme-recruitment-details-heading h5 { color: #0f172a; font-size: 0.95rem; font-weight: 800; line-height: 1.18; margin: 0 0 0.16rem; overflow-wrap: anywhere; padding-right: 0.25rem; text-transform: uppercase; } #programme-recruitment-details-modal .programme-recruitment-details-heading span { color: #65708b; display: block; font-size: 0.82rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; } #programme-recruitment-details-modal .programme-recruitment-status-badge { border-radius: 999px; font-size: 0.72rem; font-weight: 800; justify-self: end; line-height: 1; max-width: 7.2rem; overflow-wrap: anywhere; padding: 0.43rem 0.68rem; text-align: center; text-transform: uppercase; } #programme-recruitment-details-modal .programme-recruitment-status-badge.is-recruiting { background: #d9f2df; color: #166534; } #programme-recruitment-details-modal .programme-recruitment-status-badge.is-paused { background: #e5e7eb; color: #334155; } #programme-recruitment-details-modal .programme-recruitment-details-meta-list { border-top: 1px solid #d3d7e4; } #programme-recruitment-details-modal .programme-recruitment-details-meta-row { align-items: center; border-bottom: 1px solid #d3d7e4; display: flex; justify-content: space-between; min-height: 33px; padding: 0.38rem 0.52rem 0.38rem 0.05rem; } #programme-recruitment-details-modal .programme-recruitment-details-meta-row span, #programme-recruitment-details-modal .programme-recruitment-details-description-label { color: #66718d; display: block; font-size: 0.65rem; font-weight: 800; letter-spacing: 0; line-height: 1.2; text-transform: uppercase; } #programme-recruitment-details-modal .programme-recruitment-details-meta-row strong { color: #1f2937; font-size: 0.68rem; font-weight: 800; line-height: 1.2; text-align: right; } #programme-recruitment-details-modal .programme-recruitment-details-description { padding: 0.58rem 0.16rem 0.75rem 0.05rem; } #programme-recruitment-details-modal .programme-recruitment-details-description-body { background: #ffffff; border: 1px solid #d5d9e6; border-radius: 6px; color: #334155; font-size: 0.72rem; font-weight: 800; line-height: 1.28; margin-top: 0.32rem; max-height: min(50vh, 286px); min-height: 238px; overflow: auto; overflow-wrap: anywhere; padding: 0.28rem; resize: none; white-space: pre-wrap; width: 100%; } #programme-recruitment-details-modal .programme-recruitment-details-description-body:focus { border-color: rgba(116, 114, 217, 0.55); box-shadow: 0 0 0 0.16rem rgba(116, 114, 217, 0.14); outline: 0; } #programme-recruitment-details-modal .programme-recruitment-details-description-body p:last-child { margin-bottom: 0; } @media (max-width: 767.98px) { body.programme-management-content-page #programme-recruitment-adverts-list.programme-recruitment-adverts-grid { grid-template-columns: 1fr !important; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-start-grid { grid-template-columns: minmax(0, 20rem) !important; max-width: 20rem; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-card { flex-direction: column; min-height: 0; max-width: 100%; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-media { flex-basis: auto; min-height: 118px; width: 100%; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-body { align-items: stretch; gap: 0.75rem; grid-template-columns: 1fr; padding: 0; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-actions { align-items: stretch; flex-direction: column; justify-content: flex-start; width: 100%; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-actions .btn, body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-actions .programme-recruitment-manage-dropdown, body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-manage-toggle { width: 100%; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-actions .btn { white-space: normal; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-manage-dropdown .dropdown-menu { min-width: 100%; width: 100%; } #programme-recruitment-details-modal .modal-dialog { max-width: calc(100% - 1rem); } #programme-recruitment-details-modal .programme-recruitment-details-card { min-height: auto; } } @media (max-width: 575.98px) { body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-card { border-radius: 14px; padding: 0.6rem; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-meta, body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-date { align-items: flex-start; flex-direction: column; gap: 0.2rem; } body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-actions .btn, body.programme-management-content-page #programme-recruitment-adverts-card .programme-recruitment-preview-actions .programme-recruitment-manage-dropdown { width: 100%; } #programme-recruitment-details-modal .programme-recruitment-details-summary { grid-template-columns: 41px minmax(0, 1fr); padding-right: 0.45rem; } #programme-recruitment-details-modal .programme-recruitment-status-badge { grid-column: 2; justify-self: start; } } .programme-course-card { padding: 0.75rem 0.75rem 0.85rem; margin-bottom: 1.25rem; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 18px !important; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important; } .programme-course-card .card-title { font-size: 0.8rem; } .programme-course-card .card-text, .programme-course-card .small, .programme-course-card .text-muted { font-size: 0.7rem; } .programme-course-card .btn, .programme-course-card .btn-sm { font-size: 0.6rem; padding: 0.18rem 0.45rem; } .programme-course-card .custom-image-size { width: 100%; max-width: 100%; max-height: 200px; height: auto; object-fit: contain; display: block; margin: 0 auto; } .programme-course-card .course-actions-toggle { align-items: center; background: var(--btn-outline-primary-bg, var(--primary-color)); border: 1px solid var(--btn-outline-primary-border, var(--primary-color)); border-radius: 6px; color: var(--btn-outline-primary-text, #fff); display: flex; font-size: 0.75rem; font-family: inherit; font-weight: 600; justify-content: flex-start; min-height: 26px; padding: 5px 10px; text-align: left; width: 100%; } .programme-course-card .course-actions-panel { border: 1px solid #dfcdef; border-top: 0; border-radius: 0 0 12px 12px; margin-top: -1px; padding: 0.7rem 0.85rem; } /* The open card grows to show its actions. While any actions list is open, cards keep their own height instead of stretching to the tallest card in the row, so the other cards do not appear to expand too. */ .programme-course-card-table.dataTable tbody:has(.course-actions-panel:not([hidden])) > tr { align-self: start; } .programme-course-card-table.dataTable tbody:has(.course-actions-panel:not([hidden])) > tr, .programme-course-card-table.dataTable tbody:has(.course-actions-panel:not([hidden])) td, .programme-course-card-table.dataTable tbody:has(.course-actions-panel:not([hidden])) .programme-course-table-item, .programme-course-card-table.dataTable tbody:has(.course-actions-panel:not([hidden])) .programme-course-table-item > .card { height: auto; } [data-programme-course-grid]:has(.course-actions-panel:not([hidden])) { align-items: flex-start; } [data-programme-course-grid]:has(.course-actions-panel:not([hidden])) .programme-course-card { height: auto !important; } [data-programme-course-grid].has-open-course-actions { align-items: flex-start; } [data-programme-course-grid].has-open-course-actions [data-programme-course-item] { align-self: flex-start; } [data-programme-course-grid].has-open-course-actions .programme-course-card { height: auto !important; } [data-programme-course-grid].has-open-course-actions .programme-course-card:not(.course-actions-open) { height: fit-content !important; } .programme-course-card.course-actions-open { height: auto !important; } .programme-course-card .course-action-link { align-items: center; background: transparent; border: 0; color: var(--primary-color); display: flex; font-size: 12px; font-family: "Poppins", sans-serif; font-weight: 500; justify-content: flex-start; margin: 0.15rem 0; padding: 0.5rem 0.35rem; text-align: left; text-decoration: none; width: 100%; } .programme-course-card .course-action-link i { color: #7040b0; flex: 0 0 1.35rem; font-size: 1.35rem; margin-right: 0.65rem; } .programme-course-card .course-action-delete i { color: inherit; } .programme-course-card .course-actions-panel .row { display: block; margin-left: 0; margin-right: 0; } .programme-course-card .course-actions-panel .row > [class*="col-"] { padding-left: 0; padding-right: 0; width: 100%; } .programme-course-card .course-action-delete { background-color: #dc3545; border: 1px solid #dc3545; border-top: 1px solid #dc3545; border-radius: 0.375rem; color: #fff; margin-top: 0.35rem; padding-top: 0.7rem; } .programme-course-card .course-action-delete:hover, .programme-course-card .course-action-delete:focus, .programme-course-card .course-action-delete:active, .programme-course-card .delete_course_btn:hover, .programme-course-card .delete_course_btn:focus, .programme-course-card .delete_course_btn:active { background-color: #dc3545; border-color: #dc3545; color: #fff; } .programme-course-card-table.dataTable { display: block; width: 100% !important; border: 0; } .programme-course-card-table.dataTable thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .programme-course-card-table.dataTable tbody { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 1rem; width: 100%; } .programme-course-card-table.dataTable tbody tr, .programme-course-card-table.dataTable tbody td { display: block !important; width: 100% !important; height: 100%; border: 0 !important; background: transparent !important; } .programme-course-card-table.dataTable tbody td { padding: 0 !important; } .programme-course-card-table .programme-course-table-item { width: 100% !important; max-width: none; height: 100%; padding: 0; } .programme-course-card-table .programme-course-table-item > .card { height: 100%; margin-bottom: 0 !important; } .programme-course-card-table.dataTable tbody td.dt-empty { padding: 2rem 1rem !important; text-align: center; } .programme-courses-content-card .dt-container .dt-layout-row { gap: 0.75rem; align-items: center; } @media (min-width: 576px) { .programme-course-card-table.dataTable tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .programme-course-card-table.dataTable tbody { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 992px) { .programme-course-card-table.dataTable tbody { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .programme-course-dashboard-v2 { padding-top: 0.2rem; } .programme-course-dashboard-v2-title { font-size: 1.55rem; font-weight: 800; color: #1f172c; } .programme-course-kpi-card { position: relative; background: #fff; border-radius: 18px; border-top: 4px solid #4c1d95; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12); padding: 1.15rem 1rem 1rem; min-height: 152px; overflow: hidden; } .programme-course-kpi-card::after { content: ""; position: absolute; right: -0.5rem; bottom: -0.75rem; width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(circle, rgba(76, 29, 149, 0.08), rgba(76, 29, 149, 0)); } .programme-course-kpi-card.accent-gold { border-top-color: #c27a00; } .programme-course-kpi-card.accent-purple { border-top-color: #4c1d95; } .programme-course-kpi-card.accent-orange { border-top-color: #f59e0b; } .programme-course-kpi-card.accent-danger { border-top-color: #dc2626; } .programme-course-kpi-icon { width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.8rem; background: rgba(76, 29, 149, 0.12); color: #4c1d95; font-size: 1.15rem; } .programme-course-kpi-card.accent-gold .programme-course-kpi-icon { background: rgba(194, 122, 0, 0.14); color: #c27a00; } .programme-course-kpi-card.accent-orange .programme-course-kpi-icon { background: rgba(245, 158, 11, 0.14); color: #d97706; } .programme-course-kpi-card.accent-danger .programme-course-kpi-icon { background: rgba(220, 38, 38, 0.14); color: #dc2626; } .programme-course-kpi-card h3 { font-size: 2rem; font-weight: 800; color: #1f172c; } .programme-course-chart-card { background: #fcfbff; border: 1px solid rgba(76, 29, 149, 0.1); border-radius: 18px; padding: 1.25rem 1.2rem 1rem; } .programme-course-chart-legend { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.65rem; color: #6b7280; font-weight: 600; } .programme-course-chart-legend .dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; } .programme-course-chart-legend .dot.revenue { background: #4c1d95; } .programme-course-chart-legend .dot.engagement { background: #f97316; } .programme-course-chart-grid { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0.75rem; min-height: 280px; } .programme-course-chart-axis { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding: 0.3rem 0 1.8rem; color: #9ca3af; font-size: 0.65rem; font-weight: 600; } .programme-course-chart-canvas { position: relative; border-radius: 16px; background: linear-gradient(to top, rgba(76, 29, 149, 0.08) 1px, transparent 1px) 0 0 / 100% 20%, linear-gradient(to right, rgba(76, 29, 149, 0.05) 1px, transparent 1px) 0 0 / 12.5% 100%, #fff; min-height: 280px; overflow: hidden; } .programme-course-chart-line { position: absolute; left: 4%; right: 4%; top: 12%; bottom: 18%; border-radius: 16px 16px 0 0; } .programme-course-chart-line.revenue-line { background: radial-gradient(circle at 0% 68%, rgba(76, 29, 149, 0.9) 0 3px, transparent 4px), radial-gradient(circle at 14% 64%, rgba(76, 29, 149, 0.9) 0 3px, transparent 4px), radial-gradient(circle at 28% 30%, rgba(76, 29, 149, 0.9) 0 3px, transparent 4px), radial-gradient(circle at 42% 66%, rgba(76, 29, 149, 0.9) 0 3px, transparent 4px), radial-gradient(circle at 57% 82%, rgba(76, 29, 149, 0.9) 0 3px, transparent 4px), radial-gradient(circle at 71% 26%, rgba(76, 29, 149, 0.9) 0 3px, transparent 4px), radial-gradient(circle at 85% 92%, rgba(76, 29, 149, 0.9) 0 3px, transparent 4px), radial-gradient(circle at 100% 86%, rgba(76, 29, 149, 0.9) 0 3px, transparent 4px), linear-gradient(180deg, rgba(76, 29, 149, 0.28), rgba(76, 29, 149, 0.02)); clip-path: polygon(0% 68%, 14% 64%, 28% 30%, 42% 66%, 57% 82%, 71% 26%, 85% 92%, 100% 86%, 100% 100%, 0% 100%); border-bottom: 2px solid rgba(76, 29, 149, 0.55); } .programme-course-chart-line.engagement-line { background: radial-gradient(circle at 0% 66%, rgba(249, 115, 22, 0.9) 0 3px, transparent 4px), radial-gradient(circle at 14% 78%, rgba(249, 115, 22, 0.9) 0 3px, transparent 4px), radial-gradient(circle at 28% 46%, rgba(249, 115, 22, 0.9) 0 3px, transparent 4px), radial-gradient(circle at 42% 66%, rgba(249, 115, 22, 0.9) 0 3px, transparent 4px), radial-gradient(circle at 57% 54%, rgba(249, 115, 22, 0.9) 0 3px, transparent 4px), radial-gradient(circle at 71% 48%, rgba(249, 115, 22, 0.9) 0 3px, transparent 4px), radial-gradient(circle at 85% 72%, rgba(249, 115, 22, 0.9) 0 3px, transparent 4px), radial-gradient(circle at 100% 84%, rgba(249, 115, 22, 0.9) 0 3px, transparent 4px), linear-gradient(180deg, rgba(249, 115, 22, 0.12), rgba(249, 115, 22, 0.01)); clip-path: polygon(0% 66%, 14% 78%, 28% 46%, 42% 66%, 57% 54%, 71% 48%, 85% 72%, 100% 84%, 100% 100%, 0% 100%); mix-blend-mode: multiply; opacity: 0.75; } .programme-course-chart-months { position: absolute; left: 4%; right: 4%; bottom: 0.6rem; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); color: #6b7280; font-size: 0.66rem; font-weight: 600; } .programme-course-status-stack { display: flex; width: 100%; height: 18px; border-radius: 999px; overflow: hidden; background: #efe9fb; } .programme-course-status-segment { height: 100%; } .programme-course-status-segment.approved { background: linear-gradient(90deg, #4c1d95, #6d28d9); } .programme-course-status-segment.pending { background: linear-gradient(90deg, #f59e0b, #fbbf24); } .programme-course-status-segment.declined { background: linear-gradient(90deg, #dc2626, #f87171); } .programme-course-status-card { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.85rem 0.9rem; border-radius: 14px; background: #ffffff; border: 1px solid rgba(76, 29, 149, 0.1); } .programme-course-status-card strong { font-size: 1.35rem; color: #1f172c; line-height: 1; } .programme-course-status-card small { font-size: 0.68rem; color: #6b7280; font-weight: 600; } .programme-course-status-label { font-size: 0.72rem; font-weight: 700; color: #1f172c; } .programme-course-status-card.approved { border-top: 3px solid #4c1d95; } .programme-course-status-card.pending { border-top: 3px solid #f59e0b; } .programme-course-status-card.declined { border-top: 3px solid #dc2626; } .programme-course-donut-wrap { display: flex; align-items: center; gap: 0.85rem; } .programme-course-donut-svg { flex: 0 0 45%; width: 100%; max-width: 120px; height: auto; } .programme-course-donut-total { font-size: 1.15rem; font-weight: 800; fill: #1f172c; } .programme-course-donut-label { font-size: 0.42rem; font-weight: 600; letter-spacing: 0.04em; fill: #6b7280; } .programme-course-donut-legend { flex: 1; min-width: 0; font-size: 0.68rem; } /* Enrollment Status key: size of the colour dot before each status. Shape, display and spacing are Bootstrap classes in the template (rounded-circle, d-inline-block, me-1); Bootstrap 5.0 has no fixed-size width/height utility this small, so only the size lives here. */ .programme-course-donut-legend .legend-dot { width: 0.5rem; height: 0.5rem; } .course-not-started-dot { background-color: #9ca3af; } .course-in-progress-dot { background-color: #f59e0b; } .course-completed-dot { background-color: #16a34a; } .course-dropped-dot { background-color: #dc2626; } .programme-course-histogram-svg { width: 100%; height: 160px; } .programme-course-histogram-axis { display: flex; justify-content: space-between; margin-top: 0.35rem; font-size: 0.62rem; color: #6b7280; text-align: center; } .programme-course-histogram-axis span { flex: 1; } .programme-course-illustrative-badge { font-size: 0.62rem; font-weight: 600; color: #92400e; background-color: #fffbeb; border-radius: 999px; padding: 0.15rem 0.55rem; white-space: nowrap; } @media (max-width: 991.98px) { .programme-course-dashboard-v2-title { font-size: 1.25rem; } .programme-course-chart-grid { grid-template-columns: 1fr; } .programme-course-chart-axis { display: none; } } @media (max-width: 767.98px) { .programme-courses-content-card { border-radius: 18px; padding: 0.75rem; } .programme-courses-content-inner { border-radius: 16px; padding: 0.85rem 0.85rem 1rem; } .programme-courses-panel-header { align-items: center; } .programme-courses-toolbar { align-items: center; } } /* ---------Profile ---------*/ input.country-code { max-width: 70px; } /* ---------End Profile ---------*/ /* ------------------Home Page new ------------------ */ .home-page-card { border-radius: 30px; height: 53%; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.3s; position: relative; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1); color: white; cursor:pointer; text-decoration: none; } .home-page-card:hover { transform: translateY(-5px); color: white; } .home-page-card-2 { border-radius: 30px; height: 40%; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.3s; position: relative; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); color: white; text-decoration: none; } .h-277 { height:277px; } .home-page .home-page-card-2:hover { transform: translateY(-5px); color: white; } .card-icon { height: 100px; margin-bottom: 15px; } .home-page .card-title { font-size: 16px; justify-content: start !important; position: absolute; bottom: 5px; left: 27px; } .next-icon { position: absolute; top: 13px; right: 15px; background-color: white; border-radius: 50%; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; color: #6c757d; } .next-icon-2 { position: absolute; right: 10px; bottom: 14px; background-color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: #6c757d; } @media screen and (width >= 979px) { .home-page-sm { display:none; } } @media screen and (width <= 978px) { .home-page-sm { display:block; } .next-icon { top:initial; bottom:10px; } .home-page-md { display:none; } } /* For smaller cards */ .col-md-6 .home-page-card { height: 180px; } .welcome-text { margin: 30px 0; text-align: center; } /* ------------------END Home Page new ------------------ */ /* ---------------- APP 4 CARDS DISPLAY AND STATUS TABS ---------------- */ .top-nav-item { display: flex; flex-direction: column; align-items: center; padding: 10px 15px; color: var(--text-color); text-decoration: none; } .nav-circle { width: 40px; height: 40px; border-radius: 50%; background-color: #888; display: flex; justify-content: center; align-items: center; margin-bottom: 5px; } .scrollable-nav-container .active { width: 40px; height: 40px; border-radius: 50%; background-color: var(--primary-color);; display: flex; justify-content: center; align-items: center; margin-bottom: 5px; } .scrollable-nav-container .active .nav-circle { width: 40px; height: 40px; border-radius: 50%; background-color: var(--primary-color); display: flex; justify-content: center; align-items: center; margin-bottom: 5px; } .scrollable-nav-container .active:before { content: ""; position: absolute; width: 46px; height: 46px; background-color: var(--primary-color); opacity: 0.1; border-radius: 50%; z-index: -1; animation: pulse 3s ease-in-out; animation-iteration-count: 2; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.1; } 50% { transform: scale(1.1); opacity: 0.2; } 100% { transform: scale(1); opacity: 0.1; } } .nav-label { font-size: 12px; } .stats-card { background: linear-gradient(135deg, var(--homepage-card-color-1), var(--homepage-card-color-2)); color: #fff; border-radius: 30px; padding: 20px; text-align: right; position: relative; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; } .stats-card h1 { font-size: 25px; font-weight: bold; margin: 0; text-align: end; } .stats-card p { font-size: 15px; margin: 0; position: absolute; bottom: 20px; left: 20px; } .view-analytics-card { background: var(-- --white-1); color: var(--black-1); border-radius: 30px; padding: 20px; text-align: right; position: relative; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; } .view-analytics-card i { font-size: 15px; font-weight: bold; text-align: end; } .view-analytics-card p { font-size: 15px; margin: 0; position: absolute; bottom: 20px; left: 20px; } .tab-content-section { min-height: 400px; background-color:#e3f2fd; border-radius: 5px; margin-top: 20px; padding: 20px; } .nav-tabs { border-bottom: none; } .nav-tabs .nav-link { border: none; color: var(--text-color); padding: 10px 20px; font-weight: 500; border-radius: 20px; margin-right: 10px; cursor: pointer; /* ensure whole tab shows as clickable */ } .nav-tabs .nav-link.active { color: #000 !important; background-color: transparent !important; border-radius: 0; border-bottom: 5px solid var(--primary-color); transition: all 0.2s ease; } /* Compact tabs for the Manage Forms hub */ .system-management-forms .system-management-forms-tabs { border-bottom: 0; } .system-management-forms .system-management-forms-tabs .nav-item { flex: 0 0 auto; } .system-management-forms .system-management-forms-tabs .nav-link { padding: 0.35rem 0.75rem; font-size: 0.84rem; line-height: 1.15; border-radius: 0.7rem 0.7rem 0 0; border-bottom: 2px solid transparent; margin-right: 0; } .system-management-forms .system-management-forms-tabs .nav-item.show .nav-link, .system-management-forms .system-management-forms-tabs .nav-link.active { border-bottom-color: var(--primary-color); border-bottom-width: 2px; } /* * Keep inactive User Management panes out of layout even before the * Bootstrap/permissions tab initializer runs after an HTMX swap. */ [data-user-register-root] > #myTabContent > .tab-pane:not(.active), [data-user-register-root] #roleSubTabsContent > .tab-pane:not(.active) { display: none !important; } [data-user-register-root] > #myTabContent > .tab-pane.active, [data-user-register-root] #roleSubTabsContent > .tab-pane.active { display: block !important; } /* Keep the system-management tables on the same horizontal rail as the top cards. */ .system-management-users .system-management-table-shell, .system-management-roles .system-management-table-shell, .system-management-permissions .system-management-table-shell { padding-left: 0 !important; padding-right: 0 !important; } .system-management-users .system-management-table-shell .card-body, .system-management-roles .system-management-table-shell .card-body, .system-management-permissions .system-management-table-shell .card-body { padding-left: 0 !important; padding-right: 0 !important; } .system-management-users .system-management-table-shell .table, .system-management-roles .system-management-table-shell .table, .system-management-permissions .system-management-table-shell .table { width: 100%; margin-bottom: 0; } .system-management-notifications .system-management-table-shell { overflow-x: auto !important; overflow-y: visible !important; padding-left: 0 !important; padding-right: 0 !important; } .system-management-notifications .system-management-table-shell .table { width: 100%; margin-bottom: 0; } .notification-management-modal.show { background: rgba(15, 23, 42, 0.45); z-index: 20000 !important; } .notification-management-modal .modal-dialog, .notification-management-modal .modal-content { position: relative; z-index: 20001 !important; } /* Action buttons style like in the image */ .status-tab{ border-radius: 50px; padding: 6px 13px; margin: 5px; display: inline-flex; align-items: center; color: var(--text-color); text-decoration: none; font-size: 12px; border: transparent; cursor: pointer; /* treat status tabs as fully clickable buttons */ } .status-tab.active { color: #000 !important; background-color: transparent !important; border-radius: 0; border-bottom: 3px solid var(--primary-color); transition: all 0.2s ease; } .status-tab.icon { width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 8px; } .programme-management-embed .programme-management-status-tabs-wrap { padding: 0.55rem 0.55rem 0.2rem; } .programme-management-embed .programme-management-status-tabs { margin: 0; justify-content: center; gap: 0.45rem; } .view-analytics-card { background-color: var(--white-1); border-radius: 30px; padding: 20px; text-align: center; height: 100%; } .user-avatar { width: 30px; height: 30px; border-radius: 50%; background-color: var(--white); } .icon{ background:var(--primary-color); } @media (max-width: 998px) { .scrollable-section { overflow-x: auto; -webkit-overflow-scrolling: touch; /* Smooth scrolling */ padding-bottom: 10px; display: flex; gap: 10px; } .row.flex-nowrap { flex-wrap: nowrap; /* Prevent wrapping on small screens */ } } @media (max-width: 998px) { .scrollable-nav-container { overflow-x: auto; -webkit-overflow-scrolling: touch; /* Smooth scrolling */ padding-bottom: 10px; padding: 20px; } .scrollable-nav { display: flex; flex-wrap: nowrap; /* Prevent wrapping */ gap: 5px!important; justify-content:start!important; } .top-nav-item { flex: 0 0 auto; /* Prevent shrinking */ white-space: nowrap; /* Prevent text from breaking */ } .d-flex.justify-content-center { justify-content: center; /* Center the content */ } } /* ----------------END APP 4 CARDS DISPLAY AND STATUS TABS ----------------*/ /* bulk option */ .create-assessment-container { max-width: 320px; } .create-assessment-container .circle-group { display: flex; align-items: center; margin-bottom: 10px; } .create-assessment-container .circle { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: -8px; } .create-assessment-container .dropdown-menu { padding: 15px; border-radius: 15px; border: none; box-shadow: 0 4px 12px var(--shadow-color); } .create-assessment-container .dropdown-item { color: var(--text-gray); padding: 10px 12px; border-radius: 8px; margin-bottom: 5px; font-size: 14px; } .create-assessment-container .dropdown-item:hover { background-color: var(--primary-color); color: #fff; } .create-assessment-container .create-text { font-size: 16px; font-weight: 500; margin-left: 10px; color: var(--text-gray); } .create-assessment-container .dropdown-toggle::after { display: none; } /* ----------------- APP LAUNCHER MENU -----------------*/ .launcher-icon { cursor: pointer; font-size: 25px; color: #fff; } .app_launcher .dropdown-menu { width: 600px; background-color: var(--ms-dark); color: var(--ms-text); border-radius: 6px; padding: 20px; margin-top: 10px; border: none; } .app_search_bar { background-color: rgba(255, 255, 255, 0.1); border: none; color: white; border-radius: 4px; padding: 10px; } .app_search_bar::placeholder { color: rgba(255, 255, 255, 0.7); } .search-icon { color: rgba(255, 255, 255, 0.7); } .app-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 20px; } .app-item { display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; transition: background-color 0.2s; padding: 10px; border-radius: 4px; } .app-item:hover { background-color: rgba(255, 255, 255, 0.1); } .app-icon { width: 50px; height: 50px; margin-bottom: 5px; } .app-name { font-size: 12px; font-weight: 600; color: #1d1d1d; } .divider { height: 1px; background-color: rgba(255, 255, 255, 0.1); margin: 20px 0; } .create-more { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); color: var(--ms-text); font-size: 20px; } .app-launcher .dropdown-menu { background-color: #fff; border-radius: 20px; inset: 46px auto auto -16px!important; } /* ----------------- APP LAUNCHER MENU -----------------*/ /*----------------- Orcaa new sidebar ----------------- */ .orcaa-sidebar-container { position: relative; height: 100vh; width: 200px; /* match .sidebar width to avoid overlapping main content */ max-width: 125px; transition: all 0.3s ease; margin-top: 2.5rem; overflow-y: auto; /* container can scroll */ } .orcaa-sidebar { background-color: var(--orcaa-sidebar-white); height: 90vh; width: 115px; /* fill container */ box-shadow: 0 0 15px var(--orcaa-sidebar-shadow); display: flex; flex-direction: column; overflow-y: auto; /* inner menu scrolls when taller than viewport */ transition: width 0.3s ease; /* Match the rounded cardâ€‘like style used for .chiefluthuli-sidebar .orcaa-sidebar */ border-radius: 26px; border: 1px solid rgba(0, 0, 0/ 50%); padding-top: 1.5rem; margin-top: 2.8rem; } /* Dedicated sidebar styling for curriculum "Up next" panel */ .upnes-sidebar { background-color: var(--orcaa-sidebar-white); height: 84vh; width: 100%; box-shadow: 0 0 15px var(--orcaa-sidebar-shadow); display: flex; flex-direction: column; overflow-y: auto; /* inner menu scrolls when taller than viewport */ transition: width 0.3s ease; } .orcaa-sidebar.collapsed { width: 70px; padding: 20px 10px; overflow: visible; } /* Mobile bottom-nav layout for unified sidebar */ @media (max-width: 767.98px) { /* Reposition the unified sidebar to the bottom of the viewport */ .sidebar.sidebar-md { top: auto; bottom: 0; left: 0; margin: 0; width: 100%; height: auto; z-index: 1040; } .orcaa-sidebar-container { height: auto; width: 100%; max-width: 100%; margin: 0; overflow-x: auto; overflow-y: hidden; } .orcaa-sidebar { height: auto; width: 100%; margin-top: 0; border-radius: 0; background-color: var(--navbar-bg-color); box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.12); padding-top: 0.25rem; padding-bottom: 0.25rem; } /* Mobile sidebar: ensure icons and labels are white for all users (learner, admin, etc.) */ .sidebar.sidebar-md .orcaa-sidebar .programme-icon-link, .sidebar.sidebar-md .orcaa-sidebar .nav-text, .sidebar.sidebar-md .orcaa-sidebar .programme-icon-label { color: #fff; } .sidebar.sidebar-md .orcaa-sidebar .programme-icon-circle i { color: #fff; } /* Display app sidebars (home, programme-cards, etc.) horizontally */ .orcaa-sidebar .programme-icons-sidebar { flex-direction: row; justify-content: space-around; align-items: center; padding: 0.25rem 0.4rem; gap: 0.25rem; } /* Neutralise large negative top margins used on desktop */ .orcaa-sidebar .programme-icons-sidebar.card-margin-top, .orcaa-sidebar .home-root-link.card-margin-top { margin-top: 0 !important; } /* Remove large bottom margin from home link (.mb-4) inside bottom nav */ .orcaa-sidebar .home-root-link { margin-bottom: 0 !important; } .orcaa-sidebar .programme-icon-link { margin-bottom: 0; padding: 0.15rem 0.25rem; } /* Make bottom-nav icons and labels more compact */ .orcaa-sidebar .programme-icon-circle { width: 26px; height: 26px; margin-bottom: 0.05rem; } .orcaa-sidebar .programme-icon-circle i { font-size: 11px; } /* Slightly larger icon just for the home link so it stays legible */ .orcaa-sidebar .home-root-link .programme-icon-circle { width: 30px; height: 30px; } .orcaa-sidebar .home-root-link .programme-icon-circle i { font-size: 14px; } .orcaa-sidebar .programme-icon-label { font-size: 8px; } .app-home-list #home-admin-fixed-sidebar .programme-icon-label, .app-home-list #home-default-sidebar .programme-icon-label, .app-home-list .home-root-link .programme-icon-label, .app-programme-cards-list .mentor-primary-sidebar .programme-icon-label { font-size: 11px !important; font-weight: 500; line-height: 1.2; text-align: center; } /* On touch phones, do not retain a hover/focus colour after tapping the bottom navigation. Devices with a real hover pointer can keep the desktop-style affordance. */ @media (hover: hover) { .sidebar.sidebar-md .orcaa-sidebar .programme-icon-link:hover, .sidebar.sidebar-md .orcaa-sidebar .programme-icon-link:focus { color: var(--secondary-color, #fff); } .sidebar.sidebar-md .orcaa-sidebar .programme-icon-link:hover .programme-icon-circle i, .sidebar.sidebar-md .orcaa-sidebar .programme-icon-link:focus .programme-icon-circle i { color: var(--secondary-color, #fff); } } /* Also shrink generic nav text in the unified sidebar on mobile */ .orcaa-sidebar .nav-text { font-size: 9px; } /* On mobile, active nav items use a very compact width */ .orcaa-sidebar-container .nav-item.active { width: 6%; } /* Ensure page content is not hidden behind the bottom nav */ .academic-page { padding-bottom: 4.5rem; } } /* Shared curriculum hero card (Chief Luthuli style) */ .teacher-curriculum-hero { background-color: #2f326b; background-image: linear-gradient(90deg, rgba(47, 50, 107, 0.62) 0%, rgba(47, 50, 107, 0.32) 38%, rgba(47, 50, 107, 0.12) 68%, rgba(47, 50, 107, 0.26) 100%), url("../../images/ChatGPT%20Image%20Sep%204,%202026,%2010_05_36%20AM%20(1).png"); background-size: cover; background-position: center; border-radius: 24px; color: #fff; } .teacher-curriculum-hero .card-body { min-height: 80px; display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; padding-bottom: 0.75rem; } /* Learner assessment records header: match the My Courses hero photo instead of the flat purple gradient from the assessment governance workspace section below (.assurance-hero). */ #learner-assessment-records .assurance-hero-compact, #assessment-assurance-workspace .assurance-hero-compact { background-color: #2f326b; background-image: linear-gradient(90deg, rgba(47, 50, 107, 0.62) 0%, rgba(47, 50, 107, 0.32) 38%, rgba(47, 50, 107, 0.12) 68%, rgba(47, 50, 107, 0.26) 100%), url("../../images/ChatGPT%20Image%20Sep%204,%202026,%2010_05_36%20AM%20(1).png"); background-size: cover; background-position: center; } /* This page's hero card sat almost flush against the top nav -- the shared .card-margin-top utility only adds space from 768px up, and even then it reads tighter than the gap Course Insights gives its own header panel. Give the hero card explicit breathing room at every width, scoped to this page only. */ #learner-assessment-records.card-margin-top { margin-top: 2rem !important; } /* Keep the records content spacing intact while aligning only the hero card with the top of the learner sidebar. */ @media (min-width: 768px) { #learner-assessment-records .assurance-hero { transform: translateY(-34px); } } #learner-assessment-records .assurance-back-button { background-color: var(--secondary-color); border-color: var(--secondary-color); } @media (min-width: 768px) { #learner-assessment-records .assurance-kpis { margin-top: -11px; } } @media (max-width: 767.98px) { #learner-assessment-records.card-margin-top { margin-top: 1.25rem !important; } } .teacher-curriculum-hero-main { display: flex; flex-direction: column; align-items: flex-start; flex: 1; } .teacher-curriculum-hero-main .hero-actions { margin-top: auto; } .teacher-curriculum-hero .hero-back { align-self: flex-start; } .teacher-curriculum-hero .academic-title, .teacher-curriculum-hero p, .teacher-curriculum-hero .small, .teacher-curriculum-hero .text-muted, .teacher-curriculum-hero .text-uppercase { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0/ 40%); } /* Curriculum content page overrides */ .teacher-subject-curriculum-page.container-fluid { margin-top: -0.6rem; } .teacher-subject-curriculum-page .teacher-curriculum-hero { margin-bottom: 0.75rem !important; } .teacher-subject-curriculum-page .teacher-curriculum-hero .card-body { min-height: 108px; padding-top: 0.65rem; padding-bottom: 0.45rem; } .teacher-subject-curriculum-page .teacher-curriculum-hero .academic-title { font-size: 1.26rem; } .teacher-subject-curriculum-page .teacher-curriculum-hero p, .teacher-subject-curriculum-page .teacher-curriculum-hero .small, .teacher-subject-curriculum-page .teacher-curriculum-hero .text-uppercase { font-size: 0.76rem; } .edit-content-type-wrapper { position: relative; } .edit-content-type-select { padding-right: 2.75rem; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: none; } .edit-content-type-icon { position: absolute; top: 50%; right: 0.9rem; transform: translateY(-50%); color: #6c757d; pointer-events: none; } .learner-teams-page .learner-teams-empty-wrap { min-height: clamp(160px, 20vh, 220px); display: flex; align-items: center; justify-content: center; } .learner-teams-page.tables-margin-top { /* The learner shell already positions the content below its fixed navbar. A negative table offset pulled the page hero and the team card header underneath that navbar. Keep the complete Teams page in normal flow so its headings remain visible. */ margin-top: 1rem !important; } /* The shared desktop shell reserves an extra 24px on its right edge. Give that width back only on the learner Teams page: its left edge stays fixed while the cards expand to an equal right-hand gutter. */ @media (min-width: 768px) { .home-section:has(> .learner-teams-page) { width: calc(100% - 75px); } .learner-teams-page .learner-teams-groups-card, .learner-teams-page .learner-team-detail-card { margin-top: -7px; } } /* Empty-state desktop/tablet: the base -5.25rem pull-up (tuned for the populated teams list) drags the hero card up under the navbar when there's no list beneath it. Push it back down, same fix as the equivalent Learner Certificates empty state. */ @media (min-width: 768px) { .academic-page.learner-teams-page.learner-teams-empty-page.tables-margin-top { margin-top: 0.425rem !important; } } /* Pull the "My Groups" hero card itself up an extra 7px, on top of whatever the container above it already contributes. */ .learner-teams-page .teacher-curriculum-hero { margin-top: -7px !important; } .learner-teams-page .learner-teams-empty-state { width: 100%; margin: 0 auto; border-radius: 24px; overflow: hidden; background: radial-gradient( circle at top left, color-mix(in srgb, var(--primary-color, #6f42c1) 14%, #ffffff 86%) 0%, transparent 42% ), radial-gradient( circle at bottom right, color-mix(in srgb, var(--btn-color, var(--primary-color, #6f42c1)) 16%, #ffffff 84%) 0%, transparent 44% ), linear-gradient( 180deg, rgba(255, 255, 255, 0.99), color-mix(in srgb, var(--primary-color, #6f42c1) 6%, #ffffff 94%) ); border: 1px solid color-mix(in srgb, var(--primary-color, #6f42c1) 10%, #e5e7eb 90%); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08); } .learner-teams-page .learner-teams-empty-state .card-body { position: relative; padding: 1rem 1.5rem; } .learner-teams-page .learner-teams-empty-state .card-body::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 8px; background: linear-gradient( 180deg, color-mix(in srgb, var(--primary-color, #6f42c1) 78%, #ffffff 22%), color-mix(in srgb, var(--btn-color, var(--primary-color, #6f42c1)) 92%, #000000 8%) ); } .learner-teams-page .learner-teams-empty-icon { width: 48px; height: 48px; margin: 0 auto 0.45rem; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem; background: linear-gradient( 135deg, color-mix(in srgb, var(--primary-color, #6f42c1) 86%, #ffffff 14%), color-mix(in srgb, var(--btn-color, var(--primary-color, #6f42c1)) 92%, #000000 8%) ); box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14); } .learner-teams-page .learner-teams-empty-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--btn-color, var(--primary-color, #6f42c1)); } .learner-teams-page .learner-teams-empty-title { font-size: clamp(1.15rem, 1.3vw, 1.4rem); font-weight: 700; color: #0f172a; } .learner-teams-page .learner-teams-empty-copy { max-width: 440px; margin-left: auto; margin-right: auto; font-size: 0.95rem; line-height: 1.5; color: #334155; } @media (max-width: 767.98px) { .learner-teams-page.tables-margin-top { margin-top: 0.75rem !important; } .learner-teams-page .learner-teams-empty-wrap { min-height: auto; } .learner-teams-page .learner-teams-empty-state .card-body { padding: 1.1rem 0.85rem; } .learner-teams-page .learner-teams-empty-icon { width: 44px; height: 44px; border-radius: 14px; font-size: 1.15rem; } .learner-teams-page .learner-teams-empty-title { font-size: 1.05rem; } .learner-teams-page .learner-teams-empty-copy { font-size: 0.9rem; line-height: 1.45; } } .learner-certificates-page .learner-certificates-empty-wrap { min-height: clamp(160px, 20vh, 220px); display: flex; align-items: center; justify-content: center; } .mobile-learner-home.learner-certificates-mobile-home { padding-bottom: 0 !important; } .learner-certificates-page .tables-margin-top { margin-top: -5.25rem !important; } /* Pull the hero card itself up an extra 7px, on top of whatever the row/container above it already contribute. */ .learner-certificates-page .teacher-curriculum-hero { margin-top: -7px !important; } /* Empty-state desktop/tablet: the base -5.25rem pull-up (tuned for the populated table view) drags the hero card up under the navbar when there's no table beneath it. Push it back down, matching the equivalent mobile override below. */ @media (min-width: 768px) { .academic-page.learner-certificates-page.learner-certificates-empty-page .tables-margin-top { margin-top: 0.85rem !important; } } .learner-certificates-page .learner-certificates-empty-state { width: 100%; margin: 0 auto; border-radius: 24px; overflow: hidden; height: auto !important; min-height: 0; max-height: none !important; display: block; background: radial-gradient( circle at top left, color-mix(in srgb, var(--primary-color, #6f42c1) 14%, #ffffff 86%) 0%, transparent 42% ), radial-gradient( circle at bottom right, color-mix(in srgb, var(--btn-color, var(--primary-color, #6f42c1)) 16%, #ffffff 84%) 0%, transparent 44% ), linear-gradient( 180deg, rgba(255, 255, 255, 0.99), color-mix(in srgb, var(--primary-color, #6f42c1) 6%, #ffffff 94%) ); border: 1px solid color-mix(in srgb, var(--primary-color, #6f42c1) 10%, #e5e7eb 90%); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08); } .learner-certificates-page .learner-certificates-empty-inner { position: relative; padding: 1rem 1.5rem; height: auto !important; min-height: 0; max-height: none !important; } .learner-certificates-page .learner-certificates-empty-inner::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 8px; background: linear-gradient( 180deg, color-mix(in srgb, var(--primary-color, #6f42c1) 78%, #ffffff 22%), color-mix(in srgb, var(--btn-color, var(--primary-color, #6f42c1)) 92%, #000000 8%) ); } .learner-certificates-page .learner-certificates-empty-icon { width: 48px; height: 48px; margin: 0 auto 0.45rem; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.55rem; background: linear-gradient( 135deg, color-mix(in srgb, var(--primary-color, #6f42c1) 86%, #ffffff 14%), color-mix(in srgb, var(--btn-color, var(--primary-color, #6f42c1)) 92%, #000000 8%) ); box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14); } .learner-certificates-page .learner-certificates-empty-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--btn-color, var(--primary-color, #6f42c1)); } .learner-certificates-page .learner-certificates-empty-title { font-size: clamp(1.4rem, 1.55vw, 1.75rem); font-weight: 700; color: #0f172a; } .learner-certificates-page .learner-certificates-empty-copy { max-width: 520px; margin-left: auto; margin-right: auto; font-size: 0.92rem; line-height: 1.55; color: #475569; } @media (max-width: 767.98px) { /* These used to rely on the in-flow (non-fixed) .mobile-learner-hero above this container for top clearance under the navbar; that hero has been removed from the template, so give a small top gap here directly instead of zeroing it out. */ .academic-page.learner-certificates-page { padding-top: 1rem !important; } .academic-page.learner-certificates-page .tables-margin-top { margin-top: 0 !important; } .academic-page.learner-certificates-page.learner-certificates-empty-page { width: 100% !important; max-width: 100% !important; box-sizing: border-box; padding-top: 1rem !important; padding-bottom: 6rem; } .academic-page.learner-certificates-page.learner-certificates-empty-page .tables-margin-top { margin-top: 0.85rem !important; justify-content: center; } /* Keep the empty card inside the mobile viewport. Bootstrap's row and column gutters otherwise shift this full-width card right. */ .academic-page.learner-certificates-page.learner-certificates-empty-page > .row { --bs-gutter-x: 0; margin-left: 0 !important; margin-right: 0 !important; } .academic-page.learner-certificates-page.learner-certificates-empty-page > .row > .col-12 { padding-left: 0 !important; padding-right: 0 !important; } .academic-page.learner-certificates-page.learner-certificates-empty-page .learner-certificates-empty-state { max-width: 100%; box-sizing: border-box; } .academic-page.learner-certificates-page.learner-certificates-empty-page .mx-25 { display: flex; justify-content: center; } .learner-certificates-page .learner-certificates-empty-wrap { min-height: auto; margin-top: 0; } .academic-page.learner-certificates-page.learner-certificates-empty-page .learner-certificates-empty-wrap { width: 100%; min-height: calc(100vh - 22rem); align-items: flex-start; justify-content: center; padding: 0 0.1rem 6.5rem; } .learner-certificates-page .learner-certificates-empty-state { overflow: visible; width: min(100%, 29rem); margin-left: auto; margin-right: auto; } .learner-certificates-page .learner-certificates-empty-inner { padding: 1.35rem 0.95rem 1.4rem; } .learner-certificates-page .learner-certificates-empty-icon { width: 48px; height: 48px; border-radius: 14px; font-size: 1.2rem; } .learner-certificates-page .learner-certificates-empty-title { font-size: 1.15rem; } .learner-certificates-page .learner-certificates-empty-copy { font-size: 0.84rem; line-height: 1.45; } } /* Ensure page content is not hidden behind the bottom nav */ .academic-page { padding-bottom: 4.5rem; } /* Tighter hero card on mobile: reduce height and font sizes */ @media (max-width: 767.98px) { /* Base hero card-body is hardcoded to flex-direction: row (for desktop), which beats Bootstrap's "d-flex flex-column flex-md-row" utility classes on the element by specificity alone -- so the hero never actually stacked on mobile. Force column here so hero-main and hero-back (the Back button) stack full-width instead of being squeezed side by side. */ .teacher-curriculum-hero .card-body { flex-direction: column; min-height: 58px; padding: 0.75rem 0.85rem; } .teacher-curriculum-hero .academic-title { font-size: 18px; } .teacher-curriculum-hero p, .teacher-curriculum-hero .small, .teacher-curriculum-hero .text-muted, .teacher-curriculum-hero .text-uppercase { font-size: 0.78rem; } } /* Shared Chief Luthuli academic layout (used for homepage, teacher_course_curriculum and curriculum_content across suits) */ .academic-page { padding-top: 1.75rem; } /* Background colour for the teacher subject / course curriculum pages */ .teacher-subject-curriculum-page { background-color: transparent; } .academic-page .academic-header { margin-bottom: 0.75rem; } .academic-page .academic-title { font-size: 24px; font-weight: 700; color: #111827; } .academic-page .academic-subtitle { font-size: 13px; color: #6b7280; } .academic-page .academic-tabs { border-bottom: 1px solid #e5e7eb; column-gap: 2.5rem; } .academic-page .academic-tab-link { border: none; background: transparent; padding: 0.4rem 0; font-size: 14px; font-weight: 600; color: #6b7280; position: relative; } .academic-page .academic-tab-link.active { color: #111827; } .academic-page .academic-tab-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 999px; background-color: var(--primary-color); } .academic-page .academic-tab-content { padding-top: 1.5rem; } /* Teacher subject / course curriculum page: smaller text + buttons on mobile */ @media (max-width: 767.98px) { .teacher-subject-curriculum-page { font-size: 0.85rem; } .teacher-subject-curriculum-page .academic-title { font-size: 1.1rem; } .teacher-subject-curriculum-page .academic-subtitle, .teacher-subject-curriculum-page p, .teacher-subject-curriculum-page .small, .teacher-subject-curriculum-page .text-muted { font-size: 0.78rem; } .teacher-subject-curriculum-page .btn { font-size: 0.7rem; padding: 0.2rem 0.55rem; } /* Wrap the mobile week filters in a subtle card */ .teacher-subject-curriculum-page .mobile-course-weeks { background: #ffffff; border-radius: 16px; padding: 0.5rem 0.75rem; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); } .teacher-subject-curriculum-page .curriculum-card h5 { font-size: 0.95rem; } .teacher-subject-curriculum-page .curriculum-card .text-xxs, .teacher-subject-curriculum-page .curriculum-card .badge { font-size: 0.7rem; } /* Curriculum card actions: two small buttons side by side on mobile */ .teacher-subject-curriculum-page .curriculum-card .curriculum-actions { width: 100%; justify-content: space-between; } .teacher-subject-curriculum-page .curriculum-card .curriculum-actions .btn { font-size: 0.65rem; padding: 0.18rem 0.5rem; flex: 1 1 calc(50% - 0.5rem); text-align: center; } /* Mobile course curriculum pills + cards */ .teacher-subject-curriculum-page .mobile-course-weeks { padding: 0.25rem 0.25rem 0.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; } .teacher-subject-curriculum-page .mobile-week-pill { border-radius: 999px; background-color: #f3f4ff; color: #4b5563; border: none; font-size: 0.75rem; padding: 0.35rem 0.8rem; flex: 1 0 calc(50% - 0.4rem); text-align: center; } .teacher-subject-curriculum-page .mobile-week-pill.active { background-color: var(--primary-color); color: #fff; } .teacher-subject-curriculum-page .mobile-course-curriculum { margin-top: 0.5rem; } .teacher-subject-curriculum-page .mobile-module-card-shell { border-radius: 18px; overflow: hidden; } .teacher-subject-curriculum-page .mobile-module-card-shell .mobile-module-card:last-child { margin-bottom: 0 !important; } .teacher-subject-curriculum-page .mobile-module-card { background: #e2e8f0; border-radius: 18px; padding: 0.85rem 0.9rem; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06); } .teacher-subject-curriculum-page .mobile-module-index { width: 32px; height: 32px; border-radius: 999px; background: #eef2ff; color: #4f46e5; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; } .teacher-subject-curriculum-page .mobile-module-title { font-size: 0.95rem; font-weight: 600; color: #0f172a; margin-top: 0.25rem; } .teacher-subject-curriculum-page .mobile-module-subtitle { font-size: 0.8rem; color: #6b7280; } .teacher-subject-curriculum-page .mobile-module-meta { font-size: 0.75rem; color: #6b7280; } .teacher-subject-curriculum-page .mobile-status-badge { font-size: 0.7rem; border-radius: 999px; padding: 0.15rem 0.6rem; } .teacher-subject-curriculum-page .mobile-status-complete { background: #dcfce7; color: #15803d; } .teacher-subject-curriculum-page .mobile-status-progress { background: #fef9c3; color: #a16207; } .teacher-subject-curriculum-page .mobile-status-notstarted { background: #e5e7eb; color: #374151; } .teacher-subject-curriculum-page .mobile-view-btn, .teacher-subject-curriculum-page .mobile-assessments-btn { font-size: 0.8rem; border-radius: 999px; } .teacher-subject-curriculum-page .mobile-view-btn { background-color: var(--navbar-bg-color); border-color: var(--navbar-bg-color); } .teacher-subject-curriculum-page .independent-assessment-card, .teacher-subject-curriculum-page .independent-assessment-mobile-card { padding: 1rem; border-radius: 20px; } .teacher-subject-curriculum-page .independent-assessment-icon { width: 3rem; height: 3rem; } .teacher-subject-curriculum-page .independent-assessment-mobile-card .mobile-module-index { background: var(--assessment-card-accent-soft); color: var(--assessment-card-accent); } .teacher-subject-curriculum-page .independent-assessment-card .curriculum-action-row, .teacher-subject-curriculum-page .independent-assessment-mobile-card .curriculum-action-row { width: 100%; } .teacher-subject-curriculum-page .independent-assessment-card .curriculum-action-btn, .teacher-subject-curriculum-page .independent-assessment-mobile-card .curriculum-action-btn, .teacher-subject-curriculum-page .independent-assessment-card .curriculum-lock-chip, .teacher-subject-curriculum-page .independent-assessment-mobile-card .curriculum-lock-chip { width: auto; } .teacher-subject-curriculum-page .independent-assessment-start-btn { flex: 0 0 2.75rem; height: 2.75rem; min-width: 2.75rem; width: 2.75rem; } /* Keep the curriculum content back button compact and visible on mobile. Pull it to the front of the now-column hero (order: -1) so it sits above the title instead of below the whole stack of admin action buttons (AI Generated Assessments, Add Content, etc.) -- otherwise it's pushed off the bottom of the hero and reads as broken/unreachable. */ body.curriculum-content-layout .teacher-subject-curriculum-page .teacher-curriculum-hero .hero-back { order: -1; margin-top: 0; margin-bottom: 0.5rem; max-width: 100%; } body.curriculum-content-layout .teacher-subject-curriculum-page .teacher-curriculum-hero .hero-back .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2rem; min-width: 3.4rem; padding: 0.22rem 0.55rem; font-size: 0.68rem; line-height: 1; border-radius: 999px; white-space: nowrap; } } @media (max-width: 767.98px) { .teacher-subject-curriculum-page .mobile-status-notstarted { background: #ccc; color: #374151; } } /* Default subject / course card image */ .teacher-subject-image { display: block; width: calc(100% - 10px); height: 140px; margin: 4px; background-image: url("../../images/ChatGPT%20Image%20Sep%204,%202026,%2010_05_36%20AM%20(1).png"); background-size: cover; background-position: center; border-radius: 18px; object-fit: cover; } /* Learner home: use more of the content area and make course cards easier to scan without changing the shared teacher/admin card layouts. */ .learner-home-dashboard-page .learner-home-subject-card { min-height: 360px; } .learner-home-dashboard-page .learner-home-subject-card .teacher-subject-image { height: 180px; background-image: url("../../images/ChatGPT%20Image%20Sep%204,%202026,%2010_05_36%20AM%20(1).png"); } .learner-home-dashboard-page .learner-home-subject-card > .card-body { padding: 1.5rem; } .academic-page .card .btn-learner-progress { background-color: var(--navbar-bg-color); border-color: var(--navbar-bg-color); color: #000; } .academic-page .card .btn-learner-progress-link { background-color: var(--navbar-bg-color); border-color: var(--navbar-bg-color); color: #000; } /* Parent "My Children" cards (shared Chief Luthuli academic layout) */ .children-card { border-radius: 18px; border: 1px solid #e5e7eb; position: relative; overflow: hidden; } /* Center child cards and let them fill the available width */ body.parent-my-children-layout .children-card { margin-left: auto; margin-right: auto; width: 95%; } /* The "View Subjects" learner header card sits above a full-width subject-card row, so it should stay flush left/right like its siblings instead of the 95%-centered treatment above. */ body.parent-my-children-layout .learner-subjects-header-card { width: 100%; margin-left: 0; margin-right: 0; } /* Reclaim the full-width layout for the "My Children" page: the shared spacing utilities below assume a right-hand sidebar/widget, but this layout hides the sidebar instead, so neutralize their right-side margins/padding here. */ body.parent-my-children-layout .margin-right { margin-right: 0 !important; padding-right: var(--bs-gutter-x, .75rem) !important; } body.parent-my-children-layout .card-gap { margin-right: 0 !important; } body.parent-my-children-layout .mobile-spacing { margin-right: 0 !important; margin-left: 0 !important; } .mobile-spacing { margin-right: 1rem !important; margin-left: -1rem !important; } .mobile-spacing-main { margin-right: 0rem !important; margin-left: -1rem !important; } .mobile-margin-bottom { margin-bottom: 8rem !important; } .margin-right{ margin-right: 125px; } .container-mobile, .container-fluid-mobile{ padding-right: var(--bs-gutter-x, 16.75rem); padding-left: var(--bs-gutter-x, .75rem); margin-right: auto; margin-left: auto; } .card-gap { gap: 1rem !important; margin-right: 379px; } /* Parent My Children â€“ mobile layout refinements */ @media (max-width: 767.98px) { body.parent-my-children-layout .children-card { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } .margin-right { margin-right: 0 !important; } .mobile-spacing { margin-right: 0.75rem !important; margin-left: 0.75rem !important; } .card-gap { gap: 0.75rem !important; margin-right: 0 !important; } } /* Thin top accent bar on each child card */ .children-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--secondary-color, #f9a8d4); } .children-name { font-weight: 600; } .parent-children-nav-link { border-radius: 18px; padding: 0.75rem 1rem; border: none; background: transparent; font-size: 14px; font-weight: 600; color: #374151; } .parent-children-nav-link.active { background: var(--navbar-bg-color); color: #fff; } .subject-pill { background-color: var(--sidebar-color, var(--primary-color)); color: #f9fafb; font-size: 11px; padding: 0.2rem 0.75rem; } .grade-pill { background: var(--navbar-bg-color); color: #374151; font-size: 11px; padding: 0.2rem 0.9rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .children-actions .btn { font-size: 12px; background: var(--secondary-color, #f9a8d4); border-color: var(--secondary-color, #f9a8d4); color: #ffffff; min-width: 120px; } .children-actions .btn:hover { filter: brightness(0.96); color: #ffffff; } @media (max-width: 767.98px) { .children-actions { width: 100%; } } /* Curriculum view learning mode layout */ body.cv-learning-mode { /* Use the same light app background tone as the rest of the platform instead of a solid black */ background-color: var(--bg-color, #f8f9ff); overflow: hidden; } /* Turn the Vue shell into a full-screen overlay */ body.cv-learning-mode #curriculum-view-app { position: fixed; inset: 0; z-index: 1040; } body.cv-learning-mode #curriculum-view-app::before { content: ""; position: absolute; inset: 0; background-color: var(--bg-color, #f8f9ff); z-index: 1035; } body.cv-learning-mode #curriculum-view-app > * { position: relative; z-index: 1036; } body.cv-learning-mode .cv-learning-layout { position: relative; } body.cv-learning-mode .cv-learning-background { position: absolute; inset: 0; background-color: var(--bg-color, #f8f9ff); z-index: 1035; } body.cv-learning-mode .cv-learning-main-wrapper { position: relative; z-index: 1036; } /* Hide the global sidebar and top learning navbar in learning mode, but keep the main profile-menu navbar visible */ body.cv-learning-mode .sidebar.sidebar-md, body.cv-learning-mode .top-learning-navbar { display: none !important; } /* Hide global sidebars for parent My Children layout, but keep navbar */ body.parent-my-children-layout .sidebar.sidebar-md { display: none !important; } /* Hide global sidebars for the parent learner progress overview page, but keep navbar */ body.parent-learner-progress-layout .sidebar.sidebar-md { display: none !important; } /* Let the content shell reclaim the space freed by hiding the sidebar */ body.parent-my-children-layout .home-section, body.parent-learner-progress-layout .home-section { left: 0; width: 100%; margin-left: 0 !important; margin-right: 0 !important; } body.parent-my-children-layout .navbar, body.parent-my-children-layout .home-section nav, body.parent-learner-progress-layout .navbar, body.parent-learner-progress-layout .home-section nav { left: 0; width: 100%; } /* Hide global sidebars when a parent views the curriculum page, but keep navbar */ body.parent-curriculum-layout .sidebar.sidebar-md { display: none !important; } body.parent-curriculum-layout .home-section { left: 0; width: 100%; margin-left: 0 !important; margin-right: 0 !important; } body.parent-curriculum-layout .navbar, body.parent-curriculum-layout .home-section nav { left: 0; width: 100%; } body.parent-curriculum-layout .learner-activity-profile.card-margin-top { width: calc(100% - 3rem); max-width: 1480px; margin-left: auto !important; margin-right: auto !important; } .parent-learner-profile-topbar { justify-content: flex-start; } .parent-learner-profile-back { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; padding: 0.65rem 1rem; border: none; background: var(--secondary-color, #f9a8d4); color: #ffffff; font-size: 12px; font-weight: 600; line-height: 1; text-decoration: none; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); } .parent-learner-profile-back:hover { color: #ffffff; filter: brightness(0.97); } @media (max-width: 767.98px) { body.parent-curriculum-layout .learner-activity-profile.card-margin-top { width: calc(100% - 1.5rem); } .parent-learner-profile-back { padding: 0.55rem 0.9rem; font-size: 11px; } } body.parent-my-children-layout .academic-page .mx-25 { /* Center the main column and let cards control their own max-width */ margin-left: auto !important; margin-right: auto !important; width: 100%; } /* Remove the centered max-width behaviour on the main column */ body.cv-learning-mode .academic-page .mx-25 { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; } /* Make the learning layout truly full-screen and flush with edges */ body.cv-learning-mode #curriculum-view-app > .container-fluid { height: 100%; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; } body.cv-learning-mode #curriculum-view-app > .container-fluid > .row { height: 100%; margin-left: 0 !important; margin-right: 0 !important; } body.cv-learning-mode #curriculum-view-app > .container-fluid > .row > .col-12 { height: 100%; padding-left: 0 !important; padding-right: 0 !important; } /* Remove extra gutters/margins so content touches the edges */ body.cv-learning-mode .teacher-subject-curriculum-page { margin: 0 !important; padding: 0 !important; } /* Stretch sidebar + content card to full height */ body.cv-learning-mode .cv-learning-layout { height: 100%; align-items: stretch; } body.cv-learning-mode .cv-learning-main { display: flex; flex-direction: column; height: 96%; margin-bottom: 0 !important; /* cancel Bootstrap mb-3 so bottoms align */ } body.cv-learning-mode .cv-learning-main .card-body { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; margin-bottom: 0 !important; /* remove space below buttons */ padding-bottom: 0 !important; /* no padding under buttons */ } /* In learning mode, push action buttons to the bottom of the card */ body.cv-learning-mode .cv-learning-main .cv-learning-actions-row { margin-top: auto; } /* Notes should size to their content. The generic learning viewer is intentionally tall for video and embedded documents, but that leaves short notes floating in a large empty scroll area and hides Next. */ body.cv-learning-mode .cv-learning-main--manual-note .cv-content-viewer--manual-note { flex: 0 0 auto; min-height: 0; max-height: none; overflow: visible; } body.cv-learning-mode .cv-learning-main--manual-note .cv-learning-actions-row { margin-top: 0.75rem; } .cv-learning-layout { min-height: calc(100vh - 120px); } .cv-learning-main { border-radius: 1rem; } .cv-learning-sidebar { display: block !important; position: relative; z-index: 1036; width: 100%; max-width: 320px; } /* ORCAA-style Up next sidebar in learning mode */ body.cv-learning-mode .cv-upnext-sidebar { margin-top: 0 !important; padding: 1rem 0.75rem; } body.cv-learning-mode .cv-upnext-sidebar .upnes-sidebar { height: 100%; border-radius: 1rem; border: 1px solid rgba(0, 0, 0, 0.125); background-color: #ddd; /* match .learning-card background */ padding: 0.75rem; box-shadow: 0 10px 24px rgba(15, 23, 42 / 12%); } body.cv-learning-mode .cv-upnext-sidebar-card { border: none; box-shadow: 0 4px 12px rgba(15, 23, 42 / 80%); background-color: #e6e6e6; /* slightly darker than white */ height: auto; display: flex; flex-direction: column; flex: 1 1 auto; } body.cv-learning-mode .cv-upnext-sidebar .card-body { padding: 0.75rem 0.85rem; flex: 1 1 auto; } body.cv-learning-mode .cv-upnext-sidebar ul li + li { border-top: 1px solid rgba(0, 0, 0 / 40%); padding-top: 0.45rem; } body.cv-learning-mode .cv-upnext-active-card { border-radius: 18px; border: 1px solid rgba(0, 0, 0 / 6%); box-shadow: 0 6px 14px rgba(15 23 42 / 12%); } /* Main content viewer: tall but scrollable when content is long */ .cv-content-viewer { min-height: 660px; max-height: 70vh; overflow-y: auto; } .cv-content-viewer.cv-content-viewer--embed { min-height: 0; max-height: none; overflow: visible; } /* Standalone curriculum-view-content page (content creator / admin, i.e. NOT the learner "learning mode" shell): the note/slide viewer must not be its own scroll container. Its own max-height:70vh + overflow-y:auto competed with the page scroll -- dragging the page scrollbar moved the card ~250px while the slides stayed trapped in a 660px box, so the visible scrollbar and the content fell out of sync. Let it grow with its content and scroll natively with the page (one scroll container). Learning mode keeps its bounded scroll; embeds and code challenges keep their bespoke layouts. */ body.curriculum-view-content-page:not(.cv-learning-mode) .cv-content-viewer:not(.cv-content-viewer--embed):not(.cv-content-viewer--code-challenge) { max-height: none; overflow: visible; } .cv-content-viewer.cv-content-viewer--code-challenge { display: flex; flex-direction: column; } .cv-code-challenge-inline { background: #f7f4f1; border: 1px solid #e2d8cf; border-radius: 1rem; box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08); color: #211c18; display: flex; flex: 1 1 auto; flex-direction: column; min-height: 100%; overflow: hidden; } .cv-code-challenge-inline > div { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; } .cv-code-challenge-inline > div > div:not(.alert) { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; } .cv-code-challenge-inline .text-center.py-4 { background: #ffffff; flex: 1 1 auto; } .cv-challenge-lab-card { background: #ffffff; border-radius: inherit; display: flex; flex: 1 1 auto; flex-direction: column; min-height: 100%; overflow-x: hidden; overflow-y: auto; } /* Desktop: the lab has a fixed height and scrolls inside its own card, so the hint, Kubiki input and footer buttons are always reachable. */ @media (min-width: 768px) { .cv-challenge-lab-card { height: min(80vh, 760px); min-height: 0; } } .cv-challenge-lab-head { align-items: center; background: #ffffff; border-bottom: 1px solid #e3d9d1; display: flex; gap: 0.85rem; justify-content: space-between; padding: 0.85rem 1rem; } .cv-challenge-title { color: #211c18; font-size: 1rem; font-weight: 800; line-height: 1.25; } .cv-challenge-meta { color: #7a7068; font-size: 0.76rem; font-weight: 700; } .cv-challenge-actions, .cv-challenge-switcher { align-items: center; display: flex; flex-wrap: wrap; gap: 0.45rem; } .cv-challenge-btn, .cv-challenge-switcher-btn, .cv-challenge-reset-btn { align-items: center; border-radius: 0.65rem; display: inline-flex; font-size: 0.78rem; font-weight: 800; gap: 0.35rem; justify-content: center; line-height: 1.1; min-height: 2.35rem; padding: 0.48rem 0.78rem; } .cv-challenge-btn-outline { background: #ffffff; border: 1px solid #d4c8bf; color: #211c18; } .cv-challenge-btn-success { background: #16b879; border: 1px solid #16b879; box-shadow: 0 10px 20px rgba(22, 184, 121, 0.22); color: #ffffff; } .cv-challenge-btn-success:disabled { opacity: 0.7; } .cv-challenge-switcher { background: #fbfaf8; border-bottom: 1px solid #e3d9d1; padding: 0.55rem 1rem; } .cv-challenge-switcher-btn { background: #ffffff; border: 1px solid #ded5ce; color: #554d47; min-height: 2rem; padding: 0.35rem 0.65rem; } .cv-challenge-switcher-btn.active { border-color: var(--primary-color); color: var(--primary-color); } .cv-challenge-lab-grid { display: grid; flex: 1 1 auto; grid-template-columns: minmax(220px, 0.95fr) minmax(320px, 1.45fr) minmax(320px, 1.35fr); min-height: 520px; } .cv-challenge-mission-panel { background: #fffdfa; border-right: 1px solid #e3d9d1; display: flex; flex-direction: column; min-width: 0; padding: 0.9rem 1rem; } .cv-challenge-mission-panel h6 { color: #7b6f68; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.12em; margin: 0 0 0.55rem; text-transform: uppercase; } .cv-challenge-mission-panel p { color: #2f2925; font-size: 0.85rem; line-height: 1.5; margin: 0 0 0.85rem; } .cv-challenge-task-list { display: grid; gap: 0.45rem; list-style: none; margin: 0; padding: 0; } .cv-challenge-task-item { align-items: flex-start; color: #4a413b; display: grid; font-size: 0.8rem; gap: 0.48rem; grid-template-columns: auto 1fr; line-height: 1.35; } .cv-challenge-task-check { align-items: center; background: #f1eee9; border: 1px solid #dfd5cc; border-radius: 0.35rem; color: #8a7d72; display: inline-flex; font-size: 0.7rem; font-weight: 900; height: 1.15rem; justify-content: center; margin-top: 0.05rem; width: 1.15rem; } .cv-challenge-task-item.is-passed .cv-challenge-task-check { background: #17b879; border-color: #17b879; color: #ffffff; } .cv-challenge-task-item.is-failed .cv-challenge-task-check { background: #fff1f1; border-color: #f2b5b5; color: #b42318; } .cv-challenge-task-body { display: grid; gap: 0.2rem; min-width: 0; } .cv-challenge-task-body small, .cv-challenge-task-empty { color: #786f68; font-size: 0.72rem; } .cv-ada-panel { border-top: 1px solid #e8ded6; margin: 1rem -1rem 0; padding: 0.85rem 1rem 0; } .cv-ada-head { align-items: center; color: #201b18; display: flex; gap: 0.55rem; margin-bottom: 0.75rem; } .cv-ada-avatar { align-items: center; background: linear-gradient(135deg, #8d4cf6, #c847d9); border-radius: 0.55rem; color: #ffffff; display: inline-flex; flex: 0 0 1.95rem; font-size: 0.85rem; font-weight: 900; height: 1.95rem; justify-content: center; width: 1.95rem; } .cv-ada-head strong { display: block; font-size: 0.86rem; line-height: 1.1; } .cv-ada-head small { align-items: center; color: #10a86f; display: inline-flex; font-size: 0.72rem; font-weight: 700; gap: 0.25rem; line-height: 1.1; } .cv-ada-head small span { background: #10c47f; border-radius: 50%; display: inline-block; height: 0.42rem; width: 0.42rem; } .cv-ada-messages { display: grid; gap: 0.55rem; max-height: 10rem; overflow-y: auto; padding-right: 0.15rem; } .cv-ada-bubble { background: #ffffff; border: 1px solid #e2d7cf; border-radius: 0.65rem; color: #231f1c; font-size: 0.76rem; line-height: 1.4; padding: 0.62rem 0.68rem; } .cv-ada-bubble.is-user { background: #f2edff; border-color: #d8cbff; } .cv-ada-bubble strong { color: var(--primary-color); font-weight: 900; margin-right: 0.2rem; } .cv-ada-hint-btn { background: #ffffff; border: 1px solid #e0d6ce; border-radius: 0.55rem; color: #2a2420; font-size: 0.78rem; font-weight: 800; margin-top: 0.75rem; min-height: 2.45rem; padding: 0.45rem 0.75rem; width: 100%; } .cv-ada-hint-btn:hover { border-color: var(--primary-color); color: var(--primary-color); } .cv-ada-hint-btn:disabled, .cv-ada-send-btn:disabled, .cv-ada-input-row input:disabled { cursor: not-allowed; opacity: 0.68; } .cv-ada-input-row { display: grid; gap: 0.45rem; grid-template-columns: minmax(0, 1fr) auto; margin-top: 0.85rem; } .cv-ada-input-row input { background: #ffffff; border: 1px solid #e0d6ce; border-radius: 0.55rem; color: #26211d; font-size: 0.78rem; min-height: 2.3rem; min-width: 0; padding: 0.45rem 0.65rem; } .cv-ada-input-row input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.15rem rgba(65, 0, 127, 0.12); outline: 0; } .cv-ada-send-btn { align-items: center; background: var(--primary-color); border: 0; border-radius: 0.55rem; color: #ffffff; display: inline-flex; font-size: 0.8rem; font-weight: 900; height: 2.3rem; justify-content: center; width: 2.3rem; } .cv-ada-send-btn:hover { background: #2f005f; } .cv-challenge-editor { background: #10141f; color: #e7edf8; display: flex; flex-direction: column; min-height: 520px; min-width: 0; } .cv-challenge-editor-tabs { align-items: flex-end; background: #10141f; border-bottom: 1px solid #262d3f; display: flex; gap: 0.18rem; min-height: 2.6rem; padding: 0.55rem 0.7rem 0; } .cv-challenge-editor-tab { align-items: center; border: 1px solid transparent; border-bottom: 0; border-radius: 0.55rem 0.55rem 0 0; color: #9aa5ba; display: inline-flex; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.78rem; font-weight: 800; gap: 0.42rem; min-height: 2.05rem; padding: 0.42rem 0.65rem; } .cv-challenge-editor-tab.active { background: #171d2c; border-color: #36415c; color: #ffffff; } .cv-challenge-file-dot { border-radius: 50%; height: 0.5rem; width: 0.5rem; } .cv-challenge-file-dot--html { background: #ff6b5f; } .cv-challenge-file-dot--css { background: #63a5ff; } .cv-challenge-file-dot--js { background: #ffc457; } .cv-code-challenge-inline .code-editor-container { background: #10141f; border: 0; border-radius: 0; flex: 1 1 auto; height: auto; min-height: 0; resize: none; } .cv-code-challenge-inline .code-editor-container .line-numbers-editor { background: #10141f; border-right: 1px solid #222a3b; color: #647087; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.82rem; padding-top: 0.85rem; } .cv-code-challenge-inline .code-editor-container textarea { color: #e7edf8; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.86rem; line-height: 1.55; min-height: 0; padding: 0.85rem 1rem; } .cv-code-challenge-inline .code-editor-container textarea::placeholder { color: #7b8496; } .cv-challenge-editor-foot { align-items: center; border-top: 1px solid #262d3f; color: #778196; display: flex; font-size: 0.72rem; justify-content: space-between; min-height: 2.2rem; padding: 0.45rem 0.75rem; } .cv-challenge-reset-btn { background: transparent; border: 1px solid #344059; color: #d6deee; min-height: 1.6rem; padding: 0.2rem 0.55rem; } .cv-challenge-preview { background: #fbfaf8; display: flex; flex-direction: column; min-height: 520px; min-width: 0; } .cv-challenge-preview-top { align-items: center; border-bottom: 1px solid #e3d9d1; display: flex; gap: 0.55rem; min-height: 2.6rem; padding: 0.5rem 0.7rem; } .cv-challenge-preview-dots { display: inline-flex; flex: 0 0 auto; gap: 0.22rem; } .cv-challenge-preview-dots span { border-radius: 50%; height: 0.5rem; width: 0.5rem; } .cv-challenge-preview-dots span:nth-child(1) { background: #ff6559; } .cv-challenge-preview-dots span:nth-child(2) { background: #f7b84b; } .cv-challenge-preview-dots span:nth-child(3) { background: #25c96f; } .cv-challenge-preview-url { background: #ffffff; border: 1px solid #ded5ce; border-radius: 0.45rem; color: #7a7068; display: block; flex: 1 1 auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.72rem; min-width: 0; overflow: hidden; padding: 0.28rem 0.55rem; text-overflow: ellipsis; white-space: nowrap; } .cv-code-challenge-inline .live-preview-iframe { border: 0; border-radius: 0; flex: 1 1 auto; height: auto; min-height: 0; } @media (max-width: 1199.98px) { .cv-challenge-lab-grid { grid-template-columns: minmax(220px, 0.8fr) minmax(320px, 1fr); } .cv-challenge-preview { grid-column: 1 / -1; min-height: 360px; } } @media (max-width: 767.98px) { .cv-challenge-lab-head { align-items: flex-start; flex-direction: column; } .cv-challenge-actions { width: 100%; } .cv-challenge-btn { flex: 1 1 8rem; } .cv-challenge-lab-grid { grid-template-columns: 1fr; min-height: 0; } .cv-challenge-mission-panel { border-bottom: 1px solid #e3d9d1; border-right: 0; } .cv-challenge-editor, .cv-challenge-preview { min-height: 340px; } } .curriculum-rich-text { color: #2d2d2d; font-size: 1.02rem; line-height: 1.5; } .curriculum-rich-text h1, .curriculum-rich-text h2, .curriculum-rich-text h3, .curriculum-rich-text h4, .curriculum-rich-text h5, .curriculum-rich-text h6 { margin-top: 1rem; margin-bottom: 0.4rem; font-weight: 700; color: #262626; line-height: 1.25; } .curriculum-rich-text h1 { font-size: 2.1rem; } .curriculum-rich-text h2 { font-size: 2rem; } .curriculum-rich-text h3 { font-size: 1.6rem; } .curriculum-rich-text p { margin: 0 0 0.8rem; } .curriculum-rich-text ul, .curriculum-rich-text ol { margin: 0 0 0.9rem; padding-left: 1.35rem; } .curriculum-rich-text li { margin: 0.2rem 0; } #curriculum-view-app .cv-learning-main-wrapper { min-width: 0; } .curriculum-note-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; margin-bottom: 1rem; } .curriculum-note-table-scroll:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; } .curriculum-rich-text table.curriculum-note-table { width: 100%; margin: 0 0 1rem; border-collapse: collapse; font-size: 0.92em; } .curriculum-rich-text table.curriculum-note-table th, .curriculum-rich-text table.curriculum-note-table td { padding: 0.55rem 0.75rem; border: 1px solid #e2e5ea; text-align: left; vertical-align: top; } .curriculum-rich-text table.curriculum-note-table th { background: var(--primary-color, #36006f); color: #fff; font-weight: 700; } .curriculum-rich-text table.curriculum-note-table tr:nth-child(even) td { background: #f8f9fb; } .curriculum-rich-text strong { font-weight: 700; } .curriculum-rich-text a { color: #0d6efd; text-decoration: underline; word-break: break-word; } /* Keep the note body readable at narrow learner widths. */ .cv-content-viewer--manual-note .curriculum-rich-text { font-size: 1rem; line-height: 1.55; } .cv-content-viewer--manual-note .curriculum-rich-text p { font-size: inherit; } .cv-embed-wrapper { width: 100%; min-height: 72vh; max-height: 80vh; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; border: 1px solid rgba(15, 23, 42, 0.14); border-radius: 0.75rem; background: #ffffff; } /* Documents use the same explicit media viewport as videos. This is important on mobile, where PDF object fallbacks otherwise collapse to the height of their fallback text. */ .cv-document-wrapper { width: 100%; height: 72vh; min-height: 520px; overflow: hidden; border: 1px solid rgba(15, 23, 42, 0.14); border-radius: 0.75rem; background: #ffffff; } .cv-embed-iframe { display: block; width: 100%; height: 72vh; min-height: 520px; border: 0; } .cv-embed-actions { display: flex; justify-content: flex-end; } /* Ensure video and play overlay are clickable */ .cv-content-viewer .cv-video-wrapper { position: relative; } .cv-content-viewer .cv-video-overlay-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(0,0,0,0.35) 0, rgba(0,0,0,0.6) 60%); color: #fff; font-size: 3rem; cursor: pointer; z-index: 2; } .cv-content-viewer .cv-video-overlay-play i { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); } /* Keep the course-content video viewport compact. The video remains responsive, while its source is contained inside a shorter centered frame instead of expanding to the natural media height. */ @media (min-width: 768px) { body.curriculum-view-content-page .cv-content-viewer { min-height: 0; } body.curriculum-view-content-page .cv-video-wrapper { width: 100%; height: min(56.25vw, 52vh, 520px); display: flex; align-items: center; justify-content: center; overflow: hidden; background: #0b0d12; } body.curriculum-view-content-page .cv-video-wrapper video { display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; object-position: center; } } /* Let the viewer grow inside the flex card in learning mode */ body.cv-learning-mode .cv-learning-main .cv-content-viewer { flex: 1 1 auto; } /* Mobile tweaks: adjust viewer height and shrink typography */ @media (max-width: 767.98px) { /* Reduce overall viewer height so buttons sit closer */ .cv-content-viewer { min-height: 260px; max-height: 60vh; } .cv-content-viewer.cv-content-viewer--embed { min-height: 0; max-height: none; } .cv-content-viewer.mb-3 { margin-bottom: 0.75rem !important; } .cv-learning-actions-row.mt-3 { margin-top: 0.75rem !important; } /* Give the video/iframe a taller minimum area on phones */ .cv-content-viewer .cv-video-wrapper video, .cv-content-viewer .cv-embed-iframe { min-height: 280px; } .cv-embed-wrapper { min-height: 70vh; max-height: 78vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .cv-document-wrapper { height: 70vh; min-height: 420px; overflow: hidden; } .cv-image-preview { width: 100%; max-height: 70vh; overflow: auto; text-align: center; background: #fff; } .cv-image-preview img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; } .cv-mobile-pdf-preview { width: 100%; max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #e9ecef; padding: 0.75rem; } .cv-mobile-pdf-pages { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .cv-mobile-pdf-toolbar { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 0.75rem; } .cv-mobile-pdf-page { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.2); } .cv-embed-iframe { height: 100%; min-height: 100%; } /* Extra-small text/buttons inside the curriculum view card */ .curriculum-view-card h5 { font-size: 0.9rem; } .curriculum-view-card p, .curriculum-view-card .small { font-size: 0.72rem; } .cv-content-viewer--manual-note .curriculum-rich-text, .cv-content-viewer--manual-note .curriculum-rich-text p { font-size: 1rem; line-height: 1.55; } .curriculum-view-card .btn { font-size: 0.7rem; padding: 0.2rem 0.55rem; } .curriculum-rich-text { font-size: 0.95rem; line-height: 1.45; } .curriculum-rich-text h1 { font-size: 1.65rem; } .curriculum-rich-text h2 { font-size: 1.55rem; } .curriculum-rich-text h3 { font-size: 1.3rem; } } @media (min-width <= 1200px) { .cv-content-viewer { min-height: 560px; } } @media (min-width: 1200px) { body.cv-learning-mode .cv-learning-main { flex: 1 1 82%; max-width: 98%; } body.cv-learning-mode .cv-learning-sidebar { flex: 0 0 18%; max-width: 18%; order: 0; } body.cv-learning-mode .cv-learning-main-wrapper { order: 1; flex: 1 1 auto; } } .academic-page .card .btn-learner-progress:hover { opacity: 0.9; } .academic-page .card .btn-curriculum { background-color: var(--btn-color); border-color: var(--btn-color); color: #000; } .academic-page .card .btn-curriculum:hover { opacity: 0.9; } /* Term / week tabs on curriculum pages */ .academic-page .learner-progress-terms .nav-link { color: #333; font-weight: 500; border-radius: 0; padding-bottom: 0.75rem; margin-right: 5.5rem; } .academic-page .learner-progress-terms .nav-link.active { border-color: transparent; border-bottom: 3px solid var(--navbar-bg-color); color: #000; } .academic-page .learner-progress-terms-detailed { background-color: var(--navbar-bg-color); } /* Question paper page: make typography denser on mobile for better fit */ @media (max-width: 767.98px) { .question-paper-page { width: calc(100% - 0.3rem) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0.15rem !important; padding-right: 0.15rem !important; font-size: 0.85rem; } .question-paper-page > .card-body { padding-left: 0.35rem !important; padding-right: 0.35rem !important; } .question-paper-page .sticky-header { margin-left: 0 !important; margin-right: 0 !important; } .question-paper-page .card-header, .question-paper-page label, .question-paper-page p, .question-paper-page .form-check-label, .question-paper-page .mark a { font-size: 0.8rem; } /* The header's two spans ("Assessment: X" / "Pass Mark: Y") are a d-flex justify-content-between row with no wrap - a long assessment name has nowhere to go but wrap mid-span while "Pass Mark" stays pinned to the right, producing a jumbled two-line/two-column mess. Stack them instead on narrow screens. */ .question-paper-page .card-header { flex-direction: column !important; align-items: flex-start !important; gap: 0.15rem; } .question-paper-page .card-header span { width: 100%; } .question-paper-page .btn { font-size: 0.7rem; padding: 0.2rem 0.5rem; } .question-paper-page .card { padding: 0.4rem 0.5rem; } .question-paper-page .question-row .card { margin-left: 0.2rem !important; margin-right: 0.2rem !important; } } /* Keep term tabs in a single horizontal row on mobile (scrollable) */ @media (max-width: 767.98px) { .academic-page .learner-progress-terms { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; } .academic-page .learner-progress-terms .nav-item { flex: 0 0 auto; } .academic-page .learner-progress-terms .nav-link { margin-right: 0.75rem; font-size: 11px; padding: 0.25rem 0; } } /* Curriculum cards used on teacher / course curriculum page */ .curriculum-card { background-color: rgba(228, 222, 222/80%); border-radius: 18px; box-shadow: 0 8px 16px rgba(0, 0, 0/50%); } .curriculum-card .curriculum-icon { width: 48px; height: 48px; background-color: var(--primary-color); color: #fff; font-size: 1.4rem; } /* Assessment tree styling reused on curriculum content page */ .learner-activity-profile .learner-assessment-item-list { position: relative; margin-left: 1.75rem; padding-left: 1.25rem; border-left: 2px solid #888; } .learner-activity-profile .learner-assessment-item { position: relative; padding: 0.45rem 0.75rem; background: #dfdfdf; border-radius: 12px; box-shadow: 0 2px 6px rgba(0 0 0 / 4%); margin-bottom: 0.6rem; } .learner-activity-profile .learner-assessment-item::before { content: ""; position: absolute; left: -1.25rem; top: 50%; width: 1.25rem; height: 1px; background: #888; } /* Suppress connector lines on curriculum_content page only */ .curriculum-content-page .learner-assessment-item-list { border-left: none; margin-left: 0; padding-left: 0; } .curriculum-content-page .learner-assessment-item::before { background: none; width: 0; } .curriculum-content-page .learner-assessment-item .badge { display: inline-block; } .learner-activity-profile .learner-assessment-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 12px; background: #ef9b9f; color: #fff; font-size: 0.9rem; } /* Compliance rule checklist (progress_reporting_tool/internCharts.html) */ .learner-profile-page .compliance-check-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.6rem; } .learner-profile-page .compliance-check-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.85rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; transition: box-shadow 160ms ease; } .learner-profile-page .compliance-check-row:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); } .learner-profile-page .compliance-check-row.is-passed { border-left: 3px solid #16a34a; } .learner-profile-page .compliance-check-row.is-failed { border-left: 3px solid #dc2626; } .learner-profile-page .compliance-check-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; font-size: 0.85rem; } .learner-profile-page .compliance-check-row.is-passed .compliance-check-icon { background: #ecfdf3; color: #16a34a; } .learner-profile-page .compliance-check-row.is-failed .compliance-check-icon { background: #fef2f2; color: #dc2626; } .learner-profile-page .compliance-check-body { flex: 1 1 auto; min-width: 0; } .learner-profile-page .compliance-check-label { font-size: 0.86rem; font-weight: 600; color: #1f2937; } .learner-profile-page .compliance-check-source { font-weight: 400; color: #9ca3af; font-size: 0.78rem; margin-left: 0.35rem; } .learner-profile-page .compliance-check-values { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.25rem; flex-wrap: wrap; } .learner-profile-page .compliance-check-value-item { display: inline-flex; align-items: baseline; gap: 0.3rem; font-size: 0.78rem; } .learner-profile-page .compliance-check-value-key { color: #9ca3af; font-weight: 500; } .learner-profile-page .compliance-check-value-val { color: #374151; font-weight: 600; background: #f3f4f6; padding: 0.05rem 0.4rem; border-radius: 6px; } .learner-profile-page .compliance-check-value-divider { color: #d1d5db; font-size: 0.75rem; } .learner-profile-page .compliance-check-chip { flex: 0 0 auto; } /* Shared rounded sidebar variant used across all clients */ .orcaa-sidebar-variant.orcaa-sidebar-container { margin-top: 70px; } .orcaa-sidebar-variant .orcaa-sidebar { border-radius: 26px; border: 1px solid rgba(0, 0, 0/ 50%); background-color: var(--white); padding-top: 0.75rem; margin-top: 0.75rem; } .orcaa-sidebar-variant .nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: -22px; list-style: none; } .orcaa-sidebar-variant .nav.p-4 { padding: 0.5rem !important; } .orcaa-sidebar-variant .nav-item { border-radius: 18px; margin: 0 0.75rem 0.85rem; } .orcaa-sidebar-variant .nav-item.active { margin-left: 0.15rem; margin-right: 0.15rem; width: calc(100% - 0.3rem); background-color: #6f7ab8; color: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0/ 16%); } .orcaa-sidebar-variant .nav-item.active .nav-icon, .orcaa-sidebar-variant .nav-item.active .nav-text { color: #fff; } /* On mobile, strip extra padding/margin from the sidebar variant wrapper and make sure it uses the compact bottom-nav styling and navbar bg */ @media (max-width: 767.98px) { .sidebar.sidebar-md .orcaa-sidebar-variant.orcaa-sidebar-container { margin: 0 !important; padding: 0 !important; } .sidebar.sidebar-md .orcaa-sidebar-variant .orcaa-sidebar { background-color: var(--navbar-bg-color) !important; border-radius: 0; border: none; margin-top: 0; padding-top: 0.2rem; padding-bottom: 0.2rem; height: auto; box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.12); } } .curriculum-card-background-light { background-color: #e0dbdb; border-radius: 15px; box-shadow: 0 2px 6px rgba(0, 0, 0/ 5%); } /* teacher_subject_curriculum locked-state refinements */ .teacher-subject-curriculum-page .curriculum-card { position: relative; overflow: hidden; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .teacher-subject-curriculum-page .mobile-module-card { position: relative; overflow: hidden; } /* Match the left/right card gutter and top spacing used on the content_creator/view_course_curriculums card list */ .teacher-subject-curriculum-page:not(.course-view-curriculum-page) .curriculum-list.d-none.d-md-block .curriculum-card { margin-left: 0; margin-right: 0; margin-top: 0.75rem; } /* Match the white "page card" look (border-0 shadow-sm) used for the course/subject cards on home_page, instead of the flat grey block */ .teacher-subject-curriculum-page:not(.course-view-curriculum-page) .curriculum-list.d-none.d-md-block .curriculum-card { background-color: #fff; border: 1px solid rgba(15, 23, 42, 0.06); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08); } .teacher-subject-curriculum-page:not(.course-view-curriculum-page) .curriculum-list.d-none.d-md-block .curriculum-card:hover { box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12); } .teacher-subject-curriculum-page .curriculum-card--locked { background-image: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) ); border: 1px solid rgba(0, 0, 0, 0.14); } .teacher-subject-curriculum-page .curriculum-card--locked::before, .teacher-subject-curriculum-page .mobile-module-card--locked::before, .teacher-subject-curriculum-page .curriculum-card--available::before, .teacher-subject-curriculum-page .mobile-module-card--available::before, .teacher-subject-curriculum-page .curriculum-card--complete::before, .teacher-subject-curriculum-page .mobile-module-card--complete::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 6px; pointer-events: none; } .teacher-subject-curriculum-page .curriculum-card--locked::before, .teacher-subject-curriculum-page .mobile-module-card--locked::before { background: color-mix( in srgb, var(--btn-color, #6f42c1) 78%, #000000 22% ); opacity: 0.72; } .teacher-subject-curriculum-page .curriculum-card--available::before, .teacher-subject-curriculum-page .mobile-module-card--available::before { background: color-mix( in srgb, var(--primary-color, var(--btn-color, #6f42c1)) 72%, #ffffff 28% ); opacity: 0.72; } .teacher-subject-curriculum-page .curriculum-card--complete::before, .teacher-subject-curriculum-page .mobile-module-card--complete::before { background: color-mix( in srgb, var(--primary-color, var(--btn-color, #6f42c1)) 84%, #ffffff 16% ); opacity: 0.9; } .teacher-subject-curriculum-page .mobile-module-card--locked { background-image: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) ); border: 1px solid rgba(0, 0, 0, 0.14); } .teacher-subject-curriculum-page .curriculum-action-stack { min-width: 220px; display: flex; flex-direction: column; gap: 0.75rem; } .teacher-subject-curriculum-page .curriculum-action-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; } .teacher-subject-curriculum-page .curriculum-action-btn { min-width: 168px; padding: 0.6rem 1rem; border-radius: 999px !important; font-size: 12px !important; line-height: 1.2; font-weight: 600; border: 1px solid transparent; } .teacher-subject-curriculum-page .curriculum-action-btn:hover, .teacher-subject-curriculum-page .curriculum-action-btn:focus { color: #fff; } .teacher-subject-curriculum-page .curriculum-action-btn--primary { background-color: var(--btn-color, #6f42c1); border-color: var(--btn-color, #6f42c1); color: var(--white, #fff); } .teacher-subject-curriculum-page .curriculum-action-btn--primary:hover, .teacher-subject-curriculum-page .curriculum-action-btn--primary:focus { background-color: var(--btn-color, #6f42c1); border-color: var(--btn-color, #6f42c1); } .teacher-subject-curriculum-page .curriculum-action-btn--secondary { background-color: var(--secondary-color, var(--primary-color, #6f42c1)); border-color: var(--secondary-color, var(--primary-color, #6f42c1)); color: var(--white, #fff); } .teacher-subject-curriculum-page .curriculum-action-btn--secondary:hover, .teacher-subject-curriculum-page .curriculum-action-btn--secondary:focus { background-color: var(--secondary-color, var(--primary-color, #6f42c1)); border-color: var(--secondary-color, var(--primary-color, #6f42c1)); } .teacher-subject-curriculum-page .curriculum-lock-chip { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-width: 168px; padding: 0.6rem 1rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; line-height: 1.1; border: 1px solid transparent; user-select: none; } .teacher-subject-curriculum-page .curriculum-lock-chip--content { background: rgba(255, 255, 255, 0.88); border-color: var(--primary-color, var(--btn-color, #6f42c1)); color: var(--primary-color, var(--btn-color, #6f42c1)); } .teacher-subject-curriculum-page .curriculum-lock-chip--assessment { background: rgba(255, 255, 255, 0.45); border-color: var(--primary-color, var(--btn-color, #6f42c1)); color: var(--primary-color, var(--btn-color, #6f42c1)); } .teacher-subject-curriculum-page .curriculum-manage-menu { position: fixed; left: var(--curriculum-manage-menu-left, 0); top: var(--curriculum-manage-menu-top, 0); width: 272px; max-width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); overflow: hidden auto; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.18rem; background: #fff; border: 1px solid rgb(15 23 42 / 7%); border-radius: 1.35rem; box-shadow: 0 18px 38px rgb(15 23 42 / 16%); z-index: 99999; visibility: hidden; pointer-events: none; } .teacher-subject-curriculum-page .curriculum-manage-menu.is-open { visibility: visible; pointer-events: auto; } .teacher-subject-curriculum-page .curriculum-manage-menu[aria-hidden="true"] { display: none !important; } .teacher-subject-curriculum-page .curriculum-manage-menu-item { width: 100%; display: flex; align-items: center; gap: 0.82rem; padding: 0.82rem 0.95rem; border: 0; border-radius: 1rem; background: transparent; appearance: none; box-shadow: none; color: #16233d; font-size: 0.93rem; font-weight: 700; line-height: 1.25; text-align: left; text-decoration: none; white-space: nowrap; letter-spacing: -0.01em; transition: background-color 0.15s ease, color 0.15s ease; } .teacher-subject-curriculum-page .curriculum-manage-menu-item:hover, .teacher-subject-curriculum-page .curriculum-manage-menu-item:focus { background: #f4f7fb; color: #101828; } .teacher-subject-curriculum-page .curriculum-manage-menu-item:focus-visible { outline: 2px solid rgb(13 110 253 / 22%); outline-offset: 2px; } .teacher-subject-curriculum-page .curriculum-manage-menu-item .menu-item-icon { width: 1.1rem; flex: 0 0 1.1rem; font-size: 1.08rem; line-height: 1; color: #16233d; } .teacher-subject-curriculum-page .curriculum-manage-menu .delete-curriculum-btn, .teacher-subject-curriculum-page .curriculum-manage-menu .delete-curriculum-btn .menu-item-icon { color: #dc3545; } .teacher-subject-curriculum-page .curriculum-manage-menu .delete-curriculum-btn:hover, .teacher-subject-curriculum-page .curriculum-manage-menu .delete-curriculum-btn:focus { background: rgb(220 53 69 / 9%); color: #b02a37; } .teacher-subject-curriculum-page .curriculum-manage-menu .delete-curriculum-btn:hover .menu-item-icon, .teacher-subject-curriculum-page .curriculum-manage-menu .delete-curriculum-btn:focus .menu-item-icon { color: #b02a37; } .teacher-subject-curriculum-page .independent-assessment-card, .teacher-subject-curriculum-page .independent-assessment-mobile-card { background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%); border: 1px solid rgba(234, 88, 12, 0.24); } .teacher-subject-curriculum-page .independent-assessment-card::before, .teacher-subject-curriculum-page .independent-assessment-mobile-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 6px; pointer-events: none; } .teacher-subject-curriculum-page .independent-assessment-card--available::before { background: #ea580c; opacity: 0.86; } .teacher-subject-curriculum-page .independent-assessment-card--locked::before { background: #6b7280; opacity: 0.76; } .teacher-subject-curriculum-page .independent-assessment-icon { background: rgba(234, 88, 12, 0.13); color: #c2410c; } .teacher-subject-curriculum-page .independent-assessment-card--locked .independent-assessment-icon { background: rgba(107, 114, 128, 0.14); color: #4b5563; } .teacher-subject-curriculum-page .independent-assessment-kicker { color: #c2410c; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.1; text-transform: uppercase; } .teacher-subject-curriculum-page .independent-assessment-title { color:var(--primary-color); } .teacher-subject-curriculum-page .independent-assessment-card--locked .independent-assessment-kicker, .teacher-subject-curriculum-page .independent-assessment-card--locked .independent-assessment-title { color: #374151; } .teacher-subject-curriculum-page .independent-assessment-start-btn { background: var(--btn-color); border-color: var(--btn-color); color: #fff; } .teacher-subject-curriculum-page .independent-assessment-start-btn:hover, .teacher-subject-curriculum-page .independent-assessment-start-btn:focus { background: var(--btn-color); border-color: var(--btn-color); color: #fff; } .teacher-subject-curriculum-page .independent-assessment-lock-chip { background: rgba(255, 255, 255, 0.68); border-color: var(--btn-color); color: #374151; } .teacher-subject-curriculum-page .independent-assessment-ready-badge { background: #fed7aa; color: #9a3412; } .teacher-subject-curriculum-page .independent-assessment-card, .teacher-subject-curriculum-page .independent-assessment-mobile-card { --assessment-card-accent: #e86674; --assessment-card-accent-soft: rgba(232, 154, 157, 0.14); background: #ffffff; border: 1px solid rgba(232, 154, 157, 0.18); border-bottom: 4px solid var(--assessment-card-accent); border-radius: 18px; box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06); min-height: 160px; padding: 18px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .teacher-subject-curriculum-page .independent-assessment-card:hover, .teacher-subject-curriculum-page .independent-assessment-card:focus-within, .teacher-subject-curriculum-page .independent-assessment-mobile-card:hover, .teacher-subject-curriculum-page .independent-assessment-mobile-card:focus-within { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.11); border-color: rgba(232, 154, 157, 0.3); } .teacher-subject-curriculum-page .independent-assessment-card--locked, .teacher-subject-curriculum-page .independent-assessment-mobile-card--locked { --assessment-card-accent: #94a3b8; --assessment-card-accent-soft: rgba(148, 163, 184, 0.16); border-color: rgba(148, 163, 184, 0.22); } .teacher-subject-curriculum-page .independent-assessment-card::before, .teacher-subject-curriculum-page .independent-assessment-mobile-card::before { content: none; } .teacher-subject-curriculum-page .independent-assessment-card .d-flex.align-items-start.gap-3, .teacher-subject-curriculum-page .independent-assessment-mobile-card .d-flex.align-items-start.gap-3 { gap: 12px !important; } .teacher-subject-curriculum-page .independent-assessment-icon { width: 54px; height: 54px; flex: 0 0 54px; background: var(--assessment-card-accent-soft); color: var(--assessment-card-accent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); } .teacher-subject-curriculum-page .independent-assessment-icon i { font-size: 24px; line-height: 1; } .teacher-subject-curriculum-page .independent-assessment-card--locked .independent-assessment-icon, .teacher-subject-curriculum-page .independent-assessment-mobile-card--locked .independent-assessment-icon { background: rgba(148, 163, 184, 0.15); color: #64748b; } /* Bootstrap utilities handle the appearance; these are the only dimensions not available as standard Bootstrap utilities. */ .teacher-subject-curriculum-page .independent-assessment-card .independent-assessment-icon, .teacher-subject-curriculum-page .independent-assessment-mobile-card .independent-assessment-icon { width: 48px; height: 48px; flex-basis: 48px; } .teacher-subject-curriculum-page .independent-assessment-card .curriculum-action-row .btn, .teacher-subject-curriculum-page .independent-assessment-mobile-card .curriculum-action-row .btn { min-height: 26px; min-width: 122px; flex: 0 0 auto; } @media (min-width: 768px) { .teacher-subject-curriculum-page .independent-assessment-card .independent-assessment-start-btn { flex: 0 0 auto !important; min-width: 122px !important; } } .teacher-subject-curriculum-page .independent-assessment-title, .teacher-subject-curriculum-page .mobile-module-title.independent-assessment-title { color: #1f2937; font-size: 16px; font-weight: 700; line-height: 1.3; } .teacher-subject-curriculum-page .independent-assessment-card p.text-muted, .teacher-subject-curriculum-page .independent-assessment-mobile-card .mobile-module-subtitle, .teacher-subject-curriculum-page .independent-assessment-mobile-card .mobile-module-meta { color: #6b7280 !important; font-size: 12px; line-height: 1.45; } .teacher-subject-curriculum-page .independent-assessment-card .curriculum-action-stack, .teacher-subject-curriculum-page .independent-assessment-mobile-card .curriculum-action-stack { min-width: 0; width: auto; } .teacher-subject-curriculum-page .independent-assessment-card .curriculum-action-row, .teacher-subject-curriculum-page .independent-assessment-mobile-card .curriculum-action-row { align-items: center; gap: 0.65rem; justify-content: flex-end; } .teacher-subject-curriculum-page .independent-assessment-card .curriculum-action-btn, .teacher-subject-curriculum-page .independent-assessment-mobile-card .curriculum-action-btn, .teacher-subject-curriculum-page .independent-assessment-card .curriculum-lock-chip, .teacher-subject-curriculum-page .independent-assessment-mobile-card .curriculum-lock-chip { max-width: none; width: auto; } .teacher-subject-curriculum-page .independent-assessment-start-btn { align-items: center; background: var(--assessment-card-accent); border-color: var(--assessment-card-accent); border-radius: 50%; color: #fff; box-shadow: 0 10px 20px rgba(232, 154, 157, 0.22); display: inline-flex; flex: 0 0 2.75rem; height: 2.75rem; justify-content: center; min-width: 2.75rem; padding: 0; width: 2.75rem; } .teacher-subject-curriculum-page .independent-assessment-start-btn:hover, .teacher-subject-curriculum-page .independent-assessment-start-btn:focus { background: var(--assessment-card-accent); border-color: var(--assessment-card-accent); color: #fff; box-shadow: 0 14px 26px rgba(232, 154, 157, 0.28); transform: translateY(-1px); } .teacher-subject-curriculum-page .independent-assessment-start-btn i { font-size: 1rem; line-height: 1; } .teacher-subject-curriculum-page .curriculum-lock-note { max-width: 320px; margin-left: auto; color: var(--text-secondary, #666); font-size: 0.76rem; line-height: 1.45; text-align: right; } /* Compact curriculum card layout for content_creator/view_course_curriculums */ .course-view-curriculum-page .combined-curriculum-card { padding: 0.7rem 0.8rem !important; border-radius: 12px; } .course-view-curriculum-page .curriculum-item { margin-top: 0.05rem !important; margin-bottom: 0.05rem !important; padding-top: 0.05rem !important; padding-bottom: 0.05rem !important; } .course-view-curriculum-page .combined-curriculum-card.mx-4 { margin-left: 0.55rem !important; margin-right: 0.55rem !important; } .course-view-curriculum-page .curriculum-card .curriculum-icon { width: 36px; height: 35px; font-size: 0.92rem; } .course-view-curriculum-page .curriculum-item-name { font-size: 0.74rem !important; line-height: 1.2; margin-bottom: 0.2rem !important; } .course-view-curriculum-page .curriculum-card .text-xs, .course-view-curriculum-page .curriculum-card .text-xxs, .course-view-curriculum-page .curriculum-card .badge { font-size: 0.64rem !important; } .course-view-curriculum-page .curriculum-card .text-muted span.fw-bold, .course-view-curriculum-page .curriculum-card .fw-bold.video_count, .course-view-curriculum-page .curriculum-card .fw-bold.note_count, .course-view-curriculum-page .curriculum-card .fw-bold.assessment_count { font-size: 0.64rem; } .teacher-subject-curriculum-page .curriculum-progress-wrap { max-width: 380px; min-width: min(100%, 220px); width: 100%; } .teacher-subject-curriculum-page .curriculum-progress-label { align-items: center; color: #4f5666; display: flex; font-size: 0.64rem; font-weight: 400 !important; gap: 0.65rem; justify-content: space-between; line-height: 1.2; margin-bottom: 0.28rem; } .teacher-subject-curriculum-page .curriculum-progress-label strong { color: #14b87a !important; flex: 0 0 auto; font-size: 0.66rem; font-weight: 900; } .teacher-subject-curriculum-page .curriculum-progress-track { background: rgba(65, 0, 127, 0.12); border-radius: 999px; height: 0.42rem; overflow: hidden; position: relative; width: 100%; } .teacher-subject-curriculum-page .curriculum-progress-fill { background:#14b87a; border-radius: inherit; display: block; height: 100%; min-width: 0; transition: width 0.25s ease; } .teacher-subject-curriculum-page .mobile-curriculum-progress { max-width: 100%; } .course-view-curriculum-page .curriculum-card--managed { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; } .course-view-curriculum-page .curriculum-card--managed .curriculum-card-main { width: 100%; min-width: 0; } .course-view-curriculum-page .curriculum-card--managed .curriculum-card-copy { min-width: 0; } .course-view-curriculum-page .curriculum-card--managed .curriculum-card-actions { width: 100%; display: flex; flex-direction: column; align-items: stretch; margin-top: 0 !important; } .course-view-curriculum-page .curriculum-card--managed .curriculum-action-row { display: flex; width: 100%; justify-content: flex-end; } .course-view-curriculum-page .curriculum-action-stack { min-width: 154px; gap: 0.35rem; } .course-view-curriculum-page .curriculum-action-row { gap: 0.35rem; } .course-view-curriculum-page .curriculum-action-btn, .course-view-curriculum-page .curriculum-lock-chip { min-width: 122px; padding: 0.32rem 0.62rem; font-size: 0.64rem !important; } /* Curriculum card actions use the same button standard as the page header. */ .course-view-curriculum-page .curriculum-card .curriculum-actions .btn { min-height: 26px; min-width: 122px; padding: 5px 16px !important; border: 1px solid transparent !important; border-radius: 0.375rem !important; background: var(--btn-outline-primary-bg, var(--secondary-color, #0d6efd)) !important; color: var(--btn-outline-primary-text, #fff) !important; font-family: "Poppins", sans-serif !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.2 !important; box-shadow: none !important; } /* Dropdown actions remain neutral instead of inheriting the filled primary-button treatment used by the card action buttons. */ .course-view-curriculum-page .curriculum-card .curriculum-manage-menu-item { min-height: 26px; min-width: 122px; padding: 5px 16px !important; border: 1px solid transparent !important; border-radius: 0.375rem !important; background: transparent !important; color: #1f2937 !important; font-family: "Poppins", sans-serif !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.2 !important; box-shadow: none !important; } .course-view-curriculum-page .curriculum-card .curriculum-actions .btn:hover, .course-view-curriculum-page .curriculum-card .curriculum-actions .btn:focus-visible { background: var(--btn-outline-primary-hover-bg, var(--secondary-color, #0d6efd)) !important; border-color: transparent !important; color: var(--btn-outline-primary-hover-text, #fff) !important; box-shadow: none !important; } .course-view-curriculum-page .curriculum-card .curriculum-manage-menu-item:hover, .course-view-curriculum-page .curriculum-card .curriculum-manage-menu-item:focus-visible { background: #f8fafc !important; border-color: transparent !important; color: #111827 !important; box-shadow: none !important; } .course-view-curriculum-page .curriculum-card .curriculum-manage-menu-item.delete-curriculum-btn, .course-view-curriculum-page .curriculum-card .curriculum-manage-menu-item.delete-curriculum-btn .menu-item-icon { color: #dc3545 !important; } .course-view-curriculum-page .curriculum-card .curriculum-manage-menu-item.delete-curriculum-btn:hover, .course-view-curriculum-page .curriculum-card .curriculum-manage-menu-item.delete-curriculum-btn:focus-visible { background: rgb(220 53 69 / 8%) !important; color: #b02a37 !important; } .course-view-curriculum-page .curriculum-card .curriculum-manage-menu-item .menu-item-icon { color: currentColor !important; } .course-view-curriculum-page .curriculum-lock-chip { gap: 0.22rem; } .course-view-curriculum-page .curriculum-card .d-flex.flex-wrap.gap-3.text-xxs { gap: 0.6rem !important; } .course-view-curriculum-page .curriculum-actions { margin-top: 0.55rem !important; } @media (min-width: 768px) { .course-view-curriculum-page .curriculum-card--managed { flex-direction: row; align-items: center; gap: 0.9rem; } .course-view-curriculum-page .curriculum-card--managed .curriculum-card-main { flex: 1 1 auto; width: auto; } .course-view-curriculum-page .curriculum-card--managed .curriculum-card-actions { width: auto; display: flex; flex-direction: column; align-items: stretch; margin-left: auto !important; align-self: center; } .course-view-curriculum-page .curriculum-card--managed .curriculum-action-row { width: auto; } } .course-view-curriculum-page .curriculum-card .d-flex.justify-content-end.mb-2 { margin-bottom: 0.35rem !important; } .teacher-subject-curriculum-page .mobile-status-locked { background: rgba(255, 255, 255, 0.84); border: 1px solid var(--btn-color, #6f42c1); color: var(--btn-color, #6f42c1); } /* Monitoring vs Curriculum tabs on teacher_subject_curriculum */ .teacher-subject-curriculum-page .teacher-monitor-tabs { display: flex; align-items: center; column-gap: 2rem; /* more spacing between tabs */ } .teacher-subject-curriculum-page .teacher-monitor-tabs .btn-link { font-size: 0.9rem; color: #6b7280; border-bottom: 2px solid transparent; border-radius: 0; } .teacher-subject-curriculum-page .teacher-monitor-tabs .btn-link.fw-semibold { color: var(--primary-color, #6f42c1); border-bottom-color: var(--primary-color, #6f42c1); } @media (max-width: 767.98px) { .teacher-subject-curriculum-page .curriculum-action-stack { width: 100%; min-width: 0; } .teacher-subject-curriculum-page .mobile-module-actions { margin-top: 1rem; } .teacher-subject-curriculum-page .curriculum-action-row { justify-content: flex-start; width: 100%; } .teacher-subject-curriculum-page .curriculum-action-btn, .teacher-subject-curriculum-page .curriculum-lock-chip, .teacher-subject-curriculum-page .curriculum-lock-note { width: 100%; max-width: none; text-align: left; } .teacher-subject-curriculum-page .curriculum-manage-menu { width: min(15.5rem, calc(100vw - 0.75rem)); max-width: calc(100vw - 0.75rem); max-height: calc(100vh - 0.75rem); padding: 0.38rem; border-radius: 1.1rem; box-shadow: 0 14px 32px rgb(15 23 42 / 16%); z-index: 99999; } .teacher-subject-curriculum-page .curriculum-manage-menu-item { padding: 0.5rem 0.6rem; font-size: 0.72rem; line-height: 1.1; gap: 0.5rem; border-radius: 0.85rem; } .teacher-subject-curriculum-page .curriculum-manage-menu-item .menu-item-icon { width: 0.95rem; flex: 0 0 0.95rem; font-size: 0.95rem; } .course-view-curriculum-page .combined-curriculum-card.mx-4 { margin-left: 0.15rem !important; margin-right: 0.15rem !important; } .course-view-curriculum-page .combined-curriculum-card { padding: 0.65rem 0.7rem !important; } .course-view-curriculum-page .curriculum-item { width: 100%; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .course-view-curriculum-page .curriculum-item > [class*="col-"] { width: 100%; max-width: 100%; padding-left: 0 !important; padding-right: 0 !important; } .course-view-curriculum-page .curriculum-item .combined-curriculum-card, .course-view-curriculum-page .curriculum-item .combined-curriculum-card.mx-4 { width: 100%; max-width: 100%; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } body:has(.course-view-curriculum-page) .course-view-curriculum-page .curriculum-content-page > .col-12 { padding-left: 0 !important; padding-right: 0 !important; } body:has(.course-view-curriculum-page) .course-view-curriculum-page .teacher-curriculum-hero, body:has(.course-view-curriculum-page) .course-view-curriculum-page .mobile-course-curriculum, body:has(.course-view-curriculum-page) .course-view-curriculum-page .curriculum-list { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } body:has(.course-view-curriculum-page) .course-view-curriculum-page .teacher-curriculum-hero { margin-top: -30px !important; } } .learning-card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0, 0, 0, .125); border-radius: .25rem; } /* Make the learning card more compact on mobile */ @media (max-width: 767.98px) { .learning-card { border-radius: 0.75rem; } .learning-card .card-body { padding: 0.75rem 0.9rem; } .learning-card.mt-2 { margin-top: 0.5rem !important; } .learning-card.mb-3 { margin-bottom: 0.75rem !important; } } .brand { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; } .brand-wrapper { display: flex; align-items: center; gap: 10px; } .brand-icon { min-width: 24px; height: 24px; background-color: var(--orcaa-sidebar-primary); transform: rotate(45deg); border-radius: 4px; } .brand-name { font-weight: 600; font-size: 18px; color: var(--orcaa-sidebar-text-dark); white-space: nowrap; overflow: hidden; opacity: 1; transition: opacity 0.2s ease; } .collapsed .brand-name { opacity: 0; width: 0; } .orcaa-sidebar-container .toggle-sidebar { width: 30px; height: 30px; background-color: var(--orcaa-sidebar-primary); color: var(--orcaa-sidebar-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.3s ease; box-shadow: 0 2px 5px var(--orcaa-sidebar-shadow-dark); } .collapsed .toggle-sidebar { transform: rotate(180deg); } .orcaa-sidebar-container .section-heading { font-size: 12px; text-transform: uppercase; color: var(--orcaa-sidebar-text-light); font-weight: 600; margin: 20px 0 10px 15px; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; transition: opacity 0.2s ease; } .orcaa-sidebar-container .collapsed .section-heading { opacity: 0; height: 10px; margin: 10px 0 5px 0; } .orcaa-sidebar-container .nav-item { display: flex; align-items: center; padding: 9px 15px; border-radius: 10px; margin-top: 0.4rem; margin-bottom: -0.5rem; color: #000; text-decoration: none; transition: all 0.2s ease; cursor: pointer; white-space: nowrap; overflow: hidden; position: relative; font-size: 12px; } .orcaa-sidebar-container .collapsed .nav-item { padding: 12px; justify-content: center; } .orcaa-sidebar-container .nav-item:hover { background-color: var(--orcaa-sidebar-hover-bg); color: #000; width: 50% } .card-margin-top-programme-view { margin-top: -0.5rem !important; } .orcaa-sidebar-container .nav-item.active { background-color: var(--sidebar-color); color: #000; width: 80%; } /* On programme details sidebar, ensure hover width matches active width */ .app-programme-cards-list .nav-item:hover { width: 80%; } .orcaa-sidebar-container .nav-icon { min-width: 16px; margin-right: 10px; font-size: 14px; opacity: 0.8; text-align: center; color: #000; } img.nav-icon { width: 40px; height: 40px; object-fit: contain; vertical-align: -8px; } /* Slightly larger icons for programme details sidebar */ .app-programme-cards-list .nav-icon { font-size: 18px; min-width: 20px; } .orcaa-sidebar-container .collapsed .nav-icon { margin-right: 0; } .orcaa-sidebar-container .nav-text { transition: opacity 0.1s ease; font-size: 13px; color: #000; } .orcaa-sidebar-container .collapsed .nav-text { opacity: 0; width: 0; } /* Distinguish active state between main section buttons and inner options on the programme cards sidebar. - Main headers keep the standard accent (var(--sidebar-color)) - Selected inner options use a light grey background */ .app-programme-cards-list #programme-sidebar-accordion > .nav-item.active, .app-home-list #home-admin-fixed-sidebar > .nav-item.active, .app-home-list #home-default-sidebar > .nav-item.active, .app-home-list .home-root-link.active, .app-course-list #admin-course-sidebar > .nav-item.active, .app-course-list #learner-course-sidebar > .nav-item.active, .app-course-list #teacher-course-sidebar > .nav-item.active { background-color: var(--sidebar-color); } .app-programme-cards-list #programme-sidebar-accordion .collapse .nav-item.active { background-color: #f2f2f2; } /* Keep label visible for programme cards header even when collapsed */ .orcaa-sidebar-container .programme-cards-header.collapsed .nav-text { opacity: 1; width: auto; } /* Keep label visible for Learners header when its submenu is collapsed */ .orcaa-sidebar-container .nav-item[data-programme-section="learners"].collapsed .nav-text { opacity: 1; width: auto; } /* Keep label visible for Evaluation, Courses, Assessments, Settings and Attendance headers when collapsed */ .orcaa-sidebar-container .nav-item[data-programme-section="evaluation"].collapsed .nav-text, .orcaa-sidebar-container .nav-item[data-programme-section="courses"].collapsed .nav-text, .orcaa-sidebar-container .nav-item[data-programme-section="assessments"].collapsed .nav-text, .orcaa-sidebar-container .nav-item[data-programme-section="programme-settings"].collapsed .nav-text, .orcaa-sidebar-container .nav-item[data-programme-section="system-management"].collapsed .nav-text, .orcaa-sidebar-container .nav-item[data-programme-section="attendance"].collapsed .nav-text { opacity: 1; width: auto; } .orcaa-sidebar-container .dropdown-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; } .orcaa-sidebar-container .dropdown-toggle::after { display: none; } .orcaa-sidebar-container .dropdown-toggle .bi-chevron-down { transition: transform 0.2s; font-size: 14px; } .orcaa-sidebar-container .collapsed .dropdown-toggle .bi-chevron-down { opacity: 0; width: 0; } .orcaa-sidebar-container .dropdown-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); } .orcaa-sidebar-container .dropdown-menu { position: static !important; width: 100%; padding: 0; margin: 0 0 5px 0; border: none; box-shadow: none; transform: none !important; background: transparent; } .orcaa-sidebar-container .recruitment-dropdown-menu { margin: 4px 0 5px 0; } .orcaa-sidebar-container .programme-dropdown-menu { margin: 4px 0 5px 0; } .orcaa-sidebar-container .collapsed .dropdown-menu { position: absolute !important; left: 100% !important; top: 0 !important; width: 180px; background: var(--orcaa-sidebar-white); box-shadow: 0 5px 15px var(--orcaa-sidebar-shadow-medium); border-radius: 8px; padding: 8px; margin-left: 5px; display: none; /* Hidden by default in collapsed mode */ } .orcaa-sidebar-container .collapsed .dropdown:hover .dropdown-menu { display: block; /* Show on hover in collapsed mode */ } .orcaa-sidebar-container .dropdown-item { padding: 8px 15px 8px 44px; color: #777; border-radius: 10px; margin-bottom: 2px; font-size: 14px; } .orcaa-sidebar-container .recruitment-dropdown-menu .dropdown-item { padding: 8px 15px; } .orcaa-sidebar-container .programme-dropdown-menu .dropdown-item { padding: 8px 15px; } .orcaa-sidebar-container .dropdown-menu .nav-icon { font-size: 13px; min-width: 14px; margin-right: 8px; } .collapsed .dropdown-item { padding: 8px 15px; } .orcaa-sidebar-container .dropdown-item:hover { background-color: var(--orcaa-sidebar-hover-bg); color: var(--orcaa-sidebar-text-dark); } .orcaa-sidebar-container .dropdown-item.active { background-color: var(--orcaa-sidebar-light-bg); color: var(--orcaa-sidebar-primary); } .orcaa-sidebar-container .collapsed .nav-item:hover .nav-tooltip { display: block; } .orcaa-sidebar-container .nav-tooltip { display: none; position: absolute; left: calc(100% + 10px); top: 0; background: var(--orcaa-sidebar-white); width: 180px; padding: 12px 15px; border-radius: 8px; box-shadow: 0 5px 15px var(--orcaa-sidebar-shadow-medium); color: var(--orcaa-sidebar-text-medium); z-index: 100; } .premium-container { margin-top: auto; background-color: var(--orcaa-sidebar-light-bg); border-radius: 12px; padding: 20px; position: relative; overflow: hidden; margin-bottom: 94px; transition: all 0.3s ease; } .premium-content { position: relative; z-index: 2; } .premium-title { font-weight: 600; font-size: 16px; margin-bottom: 8px; } .premium-description { font-size: 12px; color: var(--orcaa-sidebar-text-medium); margin-bottom: 15px; } .premium-button { background-color: var(--orcaa-sidebar-primary); color: var(--orcaa-sidebar-white); border: none; border-radius: 8px; padding: 8px 15px; font-size: 11px; cursor: pointer; width: 100%; transition: all 0.2s; } .premium-button:hover { background-color: var(--orcaa-sidebar-primary-dark); } .premium-illustration { position: absolute; right: 72px; width: 83px; z-index: 1; } .premium-container { display: none; } .premium-illustration { display: none; } .table>thead { vertical-align: bottom; z-index: auto; } /*----------------- END Orcaa new sidebar ----------------- */ /* ----------------- Manage Program section----------------- */ .bg-team-member-1 { background:var(--team-member-1); } .bg-team-member-2 { background:var(--team-member-2); } .tabs-container { padding: 0 35px; } .tabs-container .nav-pills { display: flex; flex-wrap: nowrap; gap: 10px; margin-bottom: 1rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding-bottom: 5px; overflow-x: auto; } /* Hide scrollbar for Chrome, Safari and Opera */ .tabs-container .nav-pills::-webkit-scrollbar { height: 4px; } /* Handle */ .tabs-container .nav-pills::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; } .tabs-container .nav-item .nav-link { border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; align-items: center; background: var(--color-card); color: var(--color-text); border: 1px solid var(--color-border); box-shadow: 0 2px 4px rgba(0,0,0,0.04); min-width: 80px; } .tabs-container .nav-item .nav-link.active { background-color: var(--color-all-light); color: var(--color-all); border-color: var(--color-all-border); } .tabs-container .nav-item .nav-link i { font-size: 22px; margin-bottom: 4px; } .tabs-container .nav-text { font-size: 12px; font-weight: 500; } /* ----------- Tab specific styles ----------- */ .program-detail-tab { color: var(--color-all) !important; } .active.program_detail_tab { background-color: var(--color-all-light) !important; border-color: var(--color-all-border); } .programme-management-card { background: var(--color-card); border-radius: 12px; margin-top: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: 1px solid var(--color-border); } .tabs-container .card-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-border); padding-bottom: 15px; margin-bottom: 15px; } .programme-management-title { font-weight: 600; color: white; margin-bottom: 0; } .black-outline { border: 2px solid #000000; border-radius: 20px; } .recruit-outline { border: 1px solid #1c1515; border-radius: 15px; } .programme-management-badge { font-size: 11px; padding: 4px 10px; border-radius: 20px; } .programme-badge { background-color: var(--color-all-light); color: var(--color-all); } .tabs-container .card-content { color: var(--color-text); font-size: 14px; } .tabs-container .team-members { font-size: 12px; color: var(--color-text-light); margin-top: 15px; text-align: right; } .avatar-group { display: inline-flex; margin-left: 8px; } .avatar { width: 50px; height: 43px; border-radius: 50%; color: #000; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; margin-left: -8px; border: 2px solid white; } .tabs-container .tab-pane { display: none; } .tabs-container .tab-pane.active { display: block; } /* ----------------- END Manage Program section----------------- */ /* ----------------- Chat whindow -----------------*/ .chat-button { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; border-radius: 50%; background-color: #b197fc; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); cursor: pointer; z-index: 100; transition: all 0.3s ease; } .chat-button:hover { transform: scale(1.05); } .chat-icon { color: white; font-size: 24px; left: 18px; top: 9px; position: absolute; } .close-button { position: fixed; bottom: 30px; right: 100px; width: 60px; height: 60px; border-radius: 50%; background-color: #b197fc; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); cursor: pointer; z-index: 100; transition: all 0.3s ease; opacity: 0; pointer-events: none; } .close-button.active { opacity: 1; pointer-events: auto; } .chat-window { position: fixed; bottom: 100px; right: 30px; width: 320px; height: 450px; background-color: #fff; border-radius: 15px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); overflow: hidden; display: flex; flex-direction: column; opacity: 0; transform: translateY(20px); pointer-events: none; transition: all 0.3s ease; z-index: 99; } .chat-window.active { opacity: 1; transform: translateY(0); pointer-events: auto; } .chat-header { padding: 15px 20px; background-color: #b197fc; display: flex; justify-content: space-between; align-items: center; } .chat-header-title { display: flex; align-items: center; color: #fff; font-weight: bold; } .chat-header-icon { margin-right: 10px; font-size: 20px; } .chat-header-actions { display: flex; } .chat-body { flex-grow: 1; padding: 10px; overflow-y: auto; background-color: #f9f9f9; display: flex; flex-direction: column; } .chat-input-container { padding: 10px; background-color: #fff; border-top: 1px solid #eee; } .chat-input { width: 100%; padding: 10px 15px; border-radius: 20px; border: 1px solid #ddd; outline: none; font-size: 11px; } .message { max-width: 70%; padding: 10px 15px; margin: 5px 0; border-radius: 15px; font-size: 14px; line-height: 1.4; } .user-message { align-self: flex-end; background-color: #fff; border: 1px solid #eee; border-bottom-right-radius: 5px; } .user-message-container { display: flex; justify-content: flex-end; align-items: flex-start; margin: 5px 0; } .agent-message { align-self: flex-start; background-color: #b197fc; color: #fff; border-bottom-left-radius: 5px; } .agent-message-container { display: flex; justify-content: flex-start; align-items: flex-start; margin: 5px 0; } .avatar { width: 50px; height: 43px; border-radius: 50%; overflow: hidden; margin: 0 5px; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .send-button { position: absolute; right: 16px; bottom: 59px; width: 25px; height: 25px; border-radius: 50%; background-color: var(--dark-purple); display: flex; justify-content: center; align-items: center; cursor: pointer; } /* ----------------- END Chat window -----------------*/ /*----------------- Assesment layout -----------------*/ .slide-container { max-width: 1000px; margin: 0 auto; position: relative; } .slide-container .progress-bar-container { height: 15px !important; background-color: #6610f2 !important; border-radius: 30px !important; position: relative; margin-bottom: 20px; } .slide-container .progress-indicator { width: 40px; height: 40px; background-color: #d3d3d3 !important; border-radius: 50%; position: absolute; top: -12px; left: 43%; z-index: 10; } .slide-container .main-content { max-width: 100%!important; } .slide-container .content-container { display: flex; gap: 30px; } .main-content { flex: 5; background-color: white; border-radius: 15px; padding: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1); position: relative; overflow: hidden; margin: 0px; } .card-content { padding: 25px; } .key-takeaway { flex: 1; background-color: #f0f0f0; border-radius: 15px; padding: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .explanation-text { font-size: 1.1rem; line-height: 1.6; } .takeaway-header { font-weight: bold; margin-bottom: 15px; color: #333; font-size: 13px } .takeaway-content { font-size: 0.9rem; line-height: 1.5; } /*-----------------END Assesment layout -----------------*/ /* ----------------- QUIZE Assesment modal ----------------- */ .modal-learning-modal-container .card { width: 350px; border-radius: 25px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); overflow: hidden; max-height: 85vh; display: flex; flex-direction: column; } .modal-learning-modal-container .card-header { background-color: white; border-bottom: none; padding: 20px; } .modal-learning-modal-container .card-body { background-color: white; padding: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d0d0d0 #f5f7ff; } .modal-learning-modal-container .card-body::-webkit-scrollbar { width: 6px; } .modal-learning-modal-container.card-body::-webkit-scrollbar-track { background: #f5f7ff; } .modal-learning-modal-container .card-body::-webkit-scrollbar-thumb { background-color: #d0d0d0; border-radius: 10px; } .modal-learning-modal-container .sub-topics-item { background-color: #f5f7ff; border-radius: 15px; margin: 10px 20px; padding: 15px; display: flex; align-items: center; justify-content: space-between; } .modal-learning-modal-container .sub-topics-icon { width: 45px; height: 45px; background-color: var(--dark-purple); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px; } .modal-learning-modal-container .sub-topics-icon.disabled { background-color: #d0d0d0; } .modal-learning-modal-container .sub-topics-info { flex: 1; } .modal-learning-modal-container .sub-topics-title { font-weight: 600; margin-bottom: 4px; } .modal-learning-modal-container .sub-topics-date { color: #888; font-size: 0.8rem; } .modal-learning-modal-container .header-title { font-weight: bold; } .modal-learning-modal-container .header-subtitle { color: #888; font-size: 0.9rem; } .wave-icon { margin-right: 10px; } .background-shapes .shape { position: absolute; z-index: -1; opacity: 0.7; } .shape-1 { top: 10%; left: 5%; width: 60px; height: 60px; background-color: var(--accent-teal); border-radius: 10px; transform: rotate(45deg); } .shape-2 { bottom: 15%; left: 10%; width: 100px; height: 100px; background-color: var(--primary-purple-light); border-radius: 50%; } .shape-3 { top: 20%; right: 10%; width: 70px; height: 70px; background-color: var(--accent-teal); border-radius: 50%; } .shape-4 { bottom: 20%; right: 5%; width: 80px; height: 80px; background-color: var(--accent-teal); border-radius: 12px; transform: rotate(15deg); } .quize-section .container { max-width: 900px; } .quize-section .card { border-radius: 15px; border: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); padding: 2rem; } .quize-section .progress { height: 10px; background-color: var(--light-purple-bg); } .quize-section .progress-bar { background-color: var(--primary-purple); } .quize-section .quiz-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } .quize-section .quiz-title { font-weight: 600; color: var(--text-dark); margin-bottom: 0; } .quiz-subtitle { color: #6c757d; font-size: 0.9rem; } .quiz-actions { display: flex; align-items: center; gap: 15px; } .btn-review { background-color: var(--medium-gray); color: var(--text-dark); border-radius: 20px; padding: 6px 15px; font-size: 0.85rem; border: none; } .btn-back { background-color: var(--light-gray); color: var(--text-dark); border-radius: 20px; padding: 6px 15px; font-size: 0.85rem; border: 1px solid #dee2e6; } .quize-section .timer { display: flex; align-items: center; gap: 5px; color: var(--text-dark); font-weight: 500; } .timer i { color: var(--primary-purple); } .question-container { margin-top: 2rem; padding: 1rem 0; } .question-number { font-size: 0.9rem; color: #6c757d; margin-bottom: 0.5rem; } .question-text { font-weight: 500; color: var(--text-dark); margin-bottom: 1.5rem; } .options-container { margin-top: 1rem; } .option { display: flex; align-items: center; padding: 12px 16px; margin-bottom: 10px; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; } .option:hover { background-color: var(--light-purple-bg); } /* Style for disabled options */ .option[disabled], .option.disabled { cursor: not-allowed; opacity: 0.8; } .option.selected { background-color: var(--light-purple-bg); border-left: 4px solid var(--primary-purple); } .option-label { width: 30px; color: #6c757d; } .option-text { flex: 1; } .option-radio { width: 18px; height: 18px; border: 2px solid #ced4da; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .option.selected .option-radio { border-color: var(--primary-purple); } .option.selected .option-radio::after { content: ''; width: 10px; height: 10px; background-color: var(--primary-purple); border-radius: 50%; } .option.correct { background-color: rgba(40, 167, 69, 0.2) !important; border-left: 4px solid #28a745 !important; } .option.correct .option-radio { border-color: #28a745; } .option.correct .option-radio::after { background-color: #28a745; } .option.incorrect { background-color: rgba(220, 53, 69, 0.2) !important; border-left: 4px solid #dc3545 !important; } .option.incorrect .option-radio { border-color: #dc3545; } .option.incorrect .option-radio::after { background-color: #dc3545; } /* Notification styling - replacing modal */ .notification { position: fixed; bottom: 20px; right: 20px; padding: 15px 20px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 10px; z-index: 1050; font-weight: 500; animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .navigation { display: flex; justify-content: space-between; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #dee2e6; } .quize-section .quize-prev-btn, .quize-section .quize-next-btn { display: flex; align-items: center; gap: 8px; border-radius: 20px; padding: 6px 15px; font-size: 0.9rem; background-color: var(--light-gray); color: var(--text-dark); border: 1px solid #dee2e6; } .quize-prev-btn:disabled, .quize-next-btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-submit { background-color: var(--primary-purple); color: white; border-radius: 20px; padding: 6px 20px; border: none; } .btn-submit:disabled { background-color: #a491e8; cursor: not-allowed; } /* -----------------END QUIZE Assesment modal ----------------- */ .wave-shape { position: absolute; /* top: -0; */ right: 0; height: 100vh; width: 80%; background-color: #7B68EE; z-index: 0; border-radius: 0; clip-path: path('M1000,0 L1000,1000 L0,1000 C300,850 200,650 400,500 C600,350 500,150 1000,0 Z'); } .hero-section { min-height: 100vh; display: flex; align-items: center; position: relative; color: white; } .hero-title { font-size: 4rem; margin-bottom: 1rem; color: #000; } .hero-subtitle { font-size: 1.5rem; margin-bottom: 2rem; color: #333; } .device-mockup { position: relative; z-index: 2; max-width: 100%; transform: perspective(1000px) rotateY(-10deg); transition: transform 0.5s ease; } .device-mockup:hover { transform: perspective(1000px) rotateY(0deg); } .btn-primary-custom { background-color: #7B68EE; border: none; padding: 0.8rem 2rem; border-radius: 50px; font-weight: 600; transition: all 0.3s ease; color: whitesmoke; } .btn-primary-custom:hover { background-color: #6A5ACD; transform: translateY(-3px); box-shadow: 0 10px 20px var(--shadow-color); color: whitesmoke; } .logo-container { text-align: center; margin-bottom: 1rem; } .logo { width: 50px; height: 50px; background-color: #7B68EE; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; font-weight: bold; } .footer { position: absolute; bottom: 20px; right: 20px; color: #fff; z-index: 2; } @media (max-width: 991.98px) { .hero-title { font-size: 3rem; } .hero-subtitle { font-size: 1.2rem; } .wave-shape { width: 50%; } } @media (max-width: 767px) { .hero-section { padding: 3rem 0; min-height: auto; } .hero-title { font-size: 2.5rem; text-align: center; } .hero-subtitle { text-align: center; } .text-container { margin-bottom: 3rem; text-align: center; } .device-mockup { margin: 0 auto; transform: none; } .wave-shape { display: none; } .bg-primary-custom { background-image: linear-gradient(to bottom, #7B68EE, #9370DB); } } /*-------------------------STEP 1 - PARENTS ONBOARDING-------------------------*/ .top-banner { background-color: var(--purple-primary); height: 25px; width: 100%; } .header-section { color: black; text-align: center; } .welcome-text { font-size: 25px; font-weight: bold; margin-bottom: 1rem; margin-top: 50px; } .purple-text { color: var(--purple-primary); } .progress-bars { margin: 1rem 0; text-align: center; } .bar { display: inline-block; width: 50px; height: 8px; margin: 0 5px; border-radius: 4px; } .bar-active { background-color: var(--purple-primary); } .bar-inactive { background-color:var(--grey-placeholder); } .pricing-card { background-color: var(--grey-light); border-radius: 15px; padding: 2rem; height: 100%; } .pricing-type { background-color: var(--grey-placeholder); color: var(--text-primary); padding: 0.5rem 2rem; border-radius: 25px; display: inline-block; margin-bottom: 1rem; position: relative; top: -15px; } .annual { background-color: var(--purple-primary); color: white; } .btn-subscribe:hover, #subscribe-annual:hover { background-color: var(--purple-hover); border: 1px solid var(--purple-primary); color:#fff; } .price { font-size: 2.5rem; font-weight: bold; margin-bottom: 1.5rem; } .feature-list { list-style-type: none; padding-left: 0; margin-bottom: 2rem; } .feature-list li { margin-bottom: 0.5rem; position: relative; padding-left: 1.5rem; } .feature-list li::before { content: "â€¢"; position: absolute; left: 0; color: var(--text-primary); } .btn-subscribe { background-color: var(--purple-primary); color: white; border: none; border-radius: 25px; padding: 0.75rem 0; width: 100%; font-weight: bold; } .btn-subscribe-outline { background-color: transparent; color: var(--text-primary); border: 2px solid var( --grey-border); border-radius: 25px; padding: 0.75rem 0; width: 100%; font-weight: bold; } .footer { text-align: center; padding: 2rem 0; color: var(--text-primary); } .form-section { max-width: 600px; margin: 0 auto; text-align: center; } .form-control { border-radius: 10px; } .btn-next { background-color: var(--purple-primary); color: white; border: none; border-radius: 25px; padding: 10px 0; width: 200px; font-weight: bold; margin-top: 20px; } .btn-next:hover { background-color: var(--purple-light); color: white; } .form-label { display: block; margin-bottom: 5px; text-align: left; } .registration-page, .pricing-page, .subjects-page { transition: opacity 0.5s ease-in-out; } .side-info { position: absolute; top: 10px; left: 10px; background-color: white; border: 1px solid var( --grey-border); border-radius: 5px; padding: 2px 5px; font-size: 12px; } .avatar-container { display: flex; flex-direction: row; flex-wrap: nowrap; /* Prevents wrapping of the avatars */ justify-content: center; /* Centers the avatars */ gap: 10px; /* Adds spacing between the avatars */ max-width: 100%; overflow-x: auto; } .avatar { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 15px; cursor: pointer; } .avatar.active { border: 3px solid var(--green-primary); } .avatar.inactive { border: 3px solid #000; } .avatar.add { background-color: var(--grey-placeholder); } .avatar-label { text-align: center; margin-top: 5px; font-size: 12px; cursor: pointer; } .search-box { max-width: 400px; margin: 20px auto; position: relative; } .search-input { border-radius: 16px; padding: 4px 10px; width: 100%; border: 1px solid #cccccc5c; } .search-dropdown { position: absolute; top: 100%; left: 0; right: 0; background-color: white; border: 1px solid var( --grey-border); border-radius: 10px; margin-top: 5px; z-index: 100; max-height: 200px; overflow-y: auto; display: none; box-shadow: 0 2px 8px rgba(0,0,0,10%); } .search-dropdown-item { padding: 10px 15px; cursor: pointer; border-bottom: 1px solid var(--grey-border-light); } .search-dropdown-item:last-child { border-bottom: none; } .search-dropdown-item:hover { background-color:var(--grey-light); } .tag { display: inline-block; background-color: var(--green-primary); color: white; border-radius: 25px; padding: 5px 15px; margin: 5px; font-size: 14px; } .subject-grid { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 20px; } .subject-card { width: 100px; height: 100px; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--grey-medium); cursor: pointer; position: relative; } .subject-card.active { background-color: var(--dark-purple); color: white; } .subject-indicator { width: 50px; height: 3px; background-color: white; border-radius: 3px; margin-top: 10px; } .remove-subject { position: absolute; top: 5px; right: 5px; background-color: rgba(255, 255, 255, 0.8); border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; display: none; } .subject-card.active .remove-subject { display: flex; } /* Additional CSS for the new content section */ .subject-btn { background-color: var(--grey-medium); color: var(--text-primary); border-radius: 25px; padding: 8px 25px; margin: 0 10px; border: none; transition: all 0.3s ease; width:300px; font-size: 12px; } .subject-btn.active { background-color: var(--purple-primary); color: white; } .selected-subject-btn { background-color: var(--grey-medium); color: var(--text-primary); border-radius: 25px; padding: 8px 25px; margin: 0 10px; border: none; transition: all 0.3s ease; } .selected-subject-btn.active { background-color: var(--purple-primary); color: white; } .content-card { background:var(--primary-color); border-radius: 15px; overflow: hidden; box-shadow: 0 4px 8px rgb(0 0 0 / 10%); height: 100%; display: flex; flex-direction: column; } .card-header h5 { margin: 0; font-weight: bold; } .card-body { padding: 10px !important; flex-grow: 1; } .resource-count { color: var(--purple-primary); font-weight: bold; margin-top: 10px; } .card-footer { padding: 15px; background-color: var(--grey-lightest); text-align: right; } .btn-view { background-color: transparent; color: var(--purple-primary); border: 2px solid var(--purple-primary); border-radius: 25px; padding: 5px 20px; font-weight: bold; transition: all 0.3s ease; } .btn-view:hover { background-color: var(--purple-primary); color: white; } .btn-continue { background-color: var(--purple-primary); color: white; border: none; border-radius: 25px; padding: 10px 30px; font-weight: bold; transition: all 0.3s ease; } .btn-continue:hover { background-color: #7b68eed9; color: white; } /* Subject section */ .subject-section { margin-bottom: 30px; } .subject-title { font-size: 22px; font-weight: 600; margin-bottom: 15px; padding-left: 5px; text-align: center; } /* Tiles grid */ .tiles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; } @media (max-width: 768px) { .tiles-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .tiles-grid { grid-template-columns: 1fr; } } /* Individual tile */ .tile { background-color: #e5e5e5; border-radius: 12px; padding: 30px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 120px; transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer; position: relative; } .tile.active { background-color: var(--text-dark); color: white; } .tile:hover { transform: scale(1.02); box-shadow: 0 4px 12px color(rgba(0, 0, 0, 0.1)); } .tile-icon { position: absolute; top: 10px; right: 10px; font-size: 18px; width: 24px; height: 24px; background-color: #fff; color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .active .tile-icon { background-color: var(--text-primary); color: var(--purple-primary); } .tile-count { font-size: 42px; font-weight: 600; margin-bottom: 15px; } .tile-name { text-align: center; font-size: 16px; font-weight: 500; } /* Two-line tile names */ .two-line { display: flex; flex-direction: column; align-items: center; } .modal-header { padding: 10px 10px; /* Adjust padding to reduce the header's height */ font-size: 18px; /* Reduce font size for the title */ justify-content: space-between; } .modal-title { font-size: 18px; /* Optional: adjust title font size as needed */ } /* Optional: Adjust the close button size if necessary */ .modal-header .btn-close { font-size: 18px; /* Smaller close button */ padding: 5px; /* Reduce padding around the close button */ background: url("../../images/close-btn.svg") center / 1em auto no-repeat !important; filter: none !important; opacity: 1; } .modal-header i.fa-times[data-bs-dismiss="modal"], .modal-header i.fa-close[data-bs-dismiss="modal"], .modal-header i.fa-xmark[data-bs-dismiss="modal"] { color: #fff !important; opacity: 1; } .file-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed var( --grey-border); border-radius: 10px; padding: 30px; text-align: center; margin-bottom: 20px; cursor: pointer; } .file-upload:hover { border-color: #999; background-color: var(--grey-lighter); } .upload-icon { font-size: 3rem; color: var(--dark-purple); margin-bottom: 1rem; } .file-input { display: none; } .selected-files { margin-top: 15px; padding: 10px; background-color: #f5f5f7; border-radius: 8px; width: 100%; display: none; } .selected-files p { margin: 5px 0; } .btn { position: relative; z-index: 1; /* ensure buttons sit above overlapping layout elements */ } .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); border-radius: 20px; padding: 8px 20px; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--blue-primary); border-color: var(--blue-primary); color: #fff; } .upload-container { background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 20px; max-width: 700px; margin: 0 auto; } .upload-header { margin-bottom: 20px; } .upload-header h4 { color: var(--green-dark); margin: 0 0 5px 0; font-weight: 600; } .upload-header p { color: var(--text-secondary); margin: 0; font-size: 14px; } .upload-content { display: flex; gap: 20px; } .upload-area { flex: 0.4; } .upload-dropzone { border: 2px dashed var( --grey-border); border-radius: 8px; padding: 30px; text-align: center; background-color: var(--grey-lighter); height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s ease; } .upload-dropzone:hover { border-color: var(--green-dark); background-color: #f0f7f0; } .upload-icon { font-size: 40px; color: #9e9e9e; margin-bottom: 15px; } .upload-text { color: var(--text-secondary); margin: 0 0 10px 0; font-size: 14px; } .upload-text-or { color: #999; margin: 5px 0; font-size: 14px; } .upload-button { background-color: var(--green-dark); color: white; border: none; border-radius: 4px; padding: 8px 16px; font-size: 14px; cursor: pointer; margin-top: 10px; transition: background-color 0.3s ease; } .upload-button:hover { background-color:var(--green-darker); } .uploaded-files { flex: 1; } .uploaded-files h5 { margin: 0 0 15px; color: var(--text-primary); font-weight: 600; } .file-list { display: flex; flex-direction: column; gap: 10px; } .file-item { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid var(--grey-border-light); } .file-icon { font-size: 20px; margin-right: 10px; display: flex; align-items: center; justify-content: center; } .file-icon.pdf { color: var(--red-primary); } .file-icon.excel { color: var(--green-light); } .file-icon.doc { color: var(--blue-light); } .file-icon.audio { color:var(--orange-primary); } .file-details { flex: 1; } .file-name { margin: 0; font-size: 13px; color: #555; } .file-status { margin-left: 10px; } .status-complete { color: var(--green-light); font-size: 12px; } .file-actions { display: flex; gap: 4px; } .action-btn { width: 28px; height: 28px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; font-size: 14px; } .view-btn { background-color: #e3f2fd; color: var(--blue-light); } .view-btn:hover { background-color: var(--blue-light); color: white; } .edit-btn { background-color: var(--btn-color); color: var(--green-light); } .edit-btn:hover { background-color: var(--btn-color); color: white; } .delete-btn { background-color: #ffebee; color: var(--red-primary); } .delete-btn:hover { background-color: var(--red-primary); color: white; } /* Drag over state */ .upload-dropzone.drag-over { border-color: var(--green-dark); background-color: #e8f5e9; } @media (max-width: 768px) { .upload-content { flex-direction: column; } .upload-dropzone { margin-bottom: 20px; } } /* Payment Page Specific Styles */ .payment-page { transition: opacity 0.5s ease-in-out; } .bg-light { background-color: var(--grey-light); border-radius: 15px; box-shadow: 0 2px 6px rgba(0,0,0,5%); } .bg-purple { background-color: var(--dark-purple); border-radius: 25px; padding: 4px 15px; font-weight: bold; } .payment-item { padding: 10px 0; border-bottom: 1px solid var(--grey-border-light); } .payment-item:last-child { border-bottom: none; } .payment-label { font-weight: 500; } .payment-value { text-align: right; font-weight: 600; } .total-row { border-top: 2px solid var( --grey-border-lighter); padding-top: 15px; margin-top: 10px; } #proceed-to-pay { background-color: var(--purple-primary); color: white; border: none; border-radius: 25px; padding: 10px 40px; font-weight: bold; font-size: 16px; transition: all 0.3s ease; } #proceed-to-pay:hover { background-color:var(--purple-dark); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .payment-method-options { display: flex; justify-content: center; gap: 15px; margin: 20px 0; } .payment-method { border: 2px solid var( --grey-border-lighter); border-radius: 10px; padding: 15px 20px; text-align: center; cursor: pointer; transition: all 0.2s ease; } .payment-method:hover { border-color: var(--purple-primary); transform: translateY(-2px); } .payment-method.active { border-color: var(--purple-primary); background-color: rgba(123, 104, 238, 0.05); } .payment-icon { font-size: 24px; margin-bottom: 8px; color: var(--text-primary); } .payment-method.active .payment-icon { color: var(--purple-primary); } /* --------------------------Alert-------------------------- */ .alert-container { position: fixed; bottom: 20px; right: 20px; z-index: 1050; } .custom-alert { min-width: 300px; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 15%); margin-bottom: 10px; opacity: 0; transform: translateY(20px); transition: opacity 0.3s, transform 0.3s; } .custom-alert.show { opacity: 1; transform: translateY(0); } .custom-alert .alert-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; margin-right: 10px; } .btn-loading { position: relative; padding-right: 40px !important; pointer-events: none; opacity: 0.8; } .spinner { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 2px solid color(rgba(255, 255, 255, 0.3)); border-radius: 50%; border-top-color: white; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: translateY(-50%) rotate(360deg); } } #avatar-container-first { display: flex; flex-wrap: wrap; /* Allows items to wrap onto the next line */ gap: 10px; /* Adds space between the items */ justify-content: center; /* Centers the content horizontally */ align-items: center; /* Centers the content vertically */ overflow-x: auto; } .child-selector { display: flex; flex-direction: column; align-items: center; /* Centers the children inside each selector */ justify-content: center; /* Centers the children vertically inside each selector */ } .avatar { width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; font-size: 20px; font-weight: bold; } .avatar.add { background-color: #4CAF50; color: white; } .avatar-label { margin-top: 5px; font-size: 14px; text-align: center; /* Centers the label text */ } .d-none { display: none; } .avatar-list-container { display: flex; flex-wrap: wrap; gap: 10px; } .child-selector { display: flex; flex-direction: column; align-items: center; text-align: center; } .avatar { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; background-color: #f0f0f0; } .add { background-color: #ddd; } .subject-grid { display: flex; flex-wrap: nowrap; /* No wrapping */ gap: 5px; overflow-x: auto; /* Enable horizontal scrolling */ white-space: nowrap; padding-bottom: 10px; scroll-behavior: smooth; /* Smooth scrolling */ font-size: 13px; } .selected-subject-grid { display: flex; flex-wrap: nowrap; /* Prevent wrapping */ overflow-x: auto; /* Enable horizontal scrolling */ gap: 5px; /* Adjust spacing */ white-space: nowrap; /* Prevent text wrapping inside items */ } #learner-selected-subjects { max-width: 100%; /* Ensure it fits within the parent container */ overflow-x: auto; /* Enable scrolling */ padding: 5px; /* Optional: for visual clarity */ } #learner-selected-subjects .selected-subject-grid > * { flex-shrink: 0; width: 30%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-top: var(--bs-gutter-y); } .selected-subject-btn { background-color: var(--grey-medium); color: var(--text-primary); border-radius: 25px; padding: 8px 25px; margin: 0 10px; border: none; transition: all 0.3s ease; width: fit-content; } .subject-card { flex: 0 0 150px; /* Fixed width */ background: #f8f9fa; padding: 10px; width:287px; text-align: center; border: 1px solid #ddd; border-radius: 5px; position: relative; } .remove-subject { position: absolute; top: 5px; right: 5px; cursor: pointer; } /* Hide scrollbar for a cleaner look */ .subject-grid::-webkit-scrollbar { display: none; } .subject-grid { -ms-overflow-style: none; scrollbar-width: none; } /* Scroll Buttons */ .scroll-btn { position: absolute; top: 50%; transform: translateY(-30%); background: color(rgba(0, 0, 0, 0.5)); color: black; border: none; padding: 10px 15px; cursor: pointer; border-radius: 50%; z-index: 10; transition: 0.3s; } .scroll-btn:hover { background:rgba(0, 0, 0, 80%); } .scroll-btn.left { left: -70px; } .scroll-btn.right { right: -70px; } /* Show buttons only when scrolling is needed */ .container.position-relative:hover .scroll-btn { display: block; } .uploaded-file-item .btn { padding: 0.25rem 0.5rem; /* Adjust padding */ font-size: 0.5rem; /* Reduce font size */ line-height: 1.5; /* Adjust line-height for consistency */ } .child-selector .active{ display: inline-flex; } body { padding-top: 0; } .header-purple { background-color: var(--primary-color); height: 40px; width: 100%; } .main-content { max-width: 800px; margin: 66px auto; padding: 20px; text-align: center; } .title { margin-top: 100px; margin-bottom: 60px; font-size: 28px; font-weight: 600; } .avatar { display: flex; flex-direction: column; align-items: center; } .avatar-circle { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; margin-bottom: 10px; } .learner-subject-card { width: 172px; height: 110px; background-color: linear-gradient(135deg, var(--homepage-card-color-1), var(--homepage-card-color-2)); border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; color: #000; position: relative; padding: 0; z-index: 1; } .learner-subject-card-footer { width: 100%; text-align: center; position: absolute; bottom: 10px; /* Adjust as needed */ } .file-count { font-size: 14px; font-weight: bold; } .learner-subject-cards { display: flex; justify-content: center; gap: 20px; margin-bottom: 100px; position: relative; } .learner-subject-card-header { background-color: #7d7d7d; width: 77%; height: 9px; border-radius: 20px; position: absolute; top: -20px; z-index: 0; top: -8px; left: 16px; } .learner-subject-card-content { flex-grow: 1; display: flex; align-items: center; justify-content: center; width: 100%; font-size: 14px; font-weight: 500; margin-top: 5px; } .learner-subject-card-footer { width: 19%; height: 3px; background-color: white; border-radius: 10px; margin-bottom: 15px; } .learner-footer { margin-top: auto; padding: 20px; text-align: center; color: #333; } .header { background-color: var(--primary-color); height: 32px; } .avatar-circle { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 18px; } .avatar-velly { border: 2px solid #2ecc71; color: #2ecc71; background-color: white; } .avatar-mpho { border: 2px solid #333; color: #333; background-color: white; } .nav-pill { display: flex; align-items: center; background-color: #e9ecef; border-radius: 20px; padding: 5px 10px; margin: 5px 0; cursor: pointer; } .nav-pill.active { background-color: var(--primary-color); color: white; } .nav-pill i { margin-right: 10px; } .subject-card { background-color: var(--light-gray); border-radius: 10px; padding: 20px; margin-bottom: 15px; cursor: pointer; transition: background-color 0.2s; } .subject-card:hover { background-color: var(--secondary-color); } .progress-col { border-left: 1px solid #dee2e6; } .progress-percentage { font-size: 24px; font-weight: bold; } .locked-item { color: var(--dark-gray); } .back-button { cursor: pointer; font-weight: 500; } .back-button i { margin-right: 5px; } .subject-nav { background-color: #e9ecef; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-right: 15px; cursor: pointer; } .subject-nav.active { background-color: var(--primary-color); color: white; } .footer { text-align: center; color: var(--dark-gray); padding: 20px 0; font-size: 14px; } /* Modal styles */ .modal-content { border-radius: 15px; border: none; } .modal-header { border-bottom: none; padding: 20px 20px 10px; } .modal-body { padding: 0 20px 20px; } .modal-title { font-weight: 600; } /* Ensure modal image is responsive */ .modal-body img { max-width: 100%; height: auto; border-radius: 8px; } .active-subject { border: 2px solid green; background-color: #e0f7e0; /* Optional: gives a light green background */ } .avatar-circle { width: 60px; height: 60px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; margin-bottom: 10px; } .avatar-circle .active { border: 2px solid #4cd137; color: #4cd137; display: inline-flex; } .subject-nav.active { background-color: var(--primary-color); color: white; display: inline-flex; } .topic-header { background-color:var(--purple-dark); height: 32px; } .nav-pill { display: flex; align-items: center; background-color: #e9ecef; border-radius: 20px; padding: 5px 10px; margin: 5px 0; cursor: pointer; } .nav-pill.active { background-color: var(--primary-color); color: white; } .nav-pill i { margin-right: 10px; } .topic-subject-card:hover { background-color: #e9ecef; } .progress-col { border-left: 1px solid #dee2e6; } .progress-percentage { font-size: 24px; font-weight: bold; } .locked-item { color: var(--dark-gray); } .back-button { cursor: pointer; font-weight: 500; } .back-button i { margin-right: 5px; } .subject-nav { background-color: #e9ecef; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-right: 15px; cursor: pointer; } .subject-nav.active { background-color: var(--dark-purple); color: white; } .footer { text-align: center; color: var(--dark-gray); padding: 20px 0; font-size: 14px; } /* Modal styles */ .modal-content { border-radius: 15px; border: none; } .modal-header { border-bottom: none; padding: 20px 20px 10px; } .modal-body { padding: 0 20px 20px; } .modal-title { font-weight: 600; } /* Ensure modal image is responsive */ .modal-body img { max-width: 100%; height: auto; border-radius: 8px; } .back-button a { text-decoration: none; } .topic-item.active { background-color: #f0f0f0; /* Example active background color */ border-left: 4px solid #00ff22; /* Optional border to highlight the active topic */ } .subject-title { font-weight: bold; color: #333; } .topics { max-height: 380px; /* Adjust the height as needed */ overflow-y: auto; /* Enable vertical scrolling */ } /*-------------------------END STEP 1 - PARENTS ONBOARDING-------------------------*/ .loading-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); /* Transparent effect */ display: flex; justify-content: center; align-items: center; transition: opacity 0.5s ease; z-index: 9999; /* Ensure it's on top */ } .loading-modal-content { background: transparent; padding: 20px; border-radius: 10px; text-align: center; max-width: 90%; /* Limit content width */ max-height: 90%; /* Limit content height */ overflow: hidden; } .loading-loader { width: 4rem; height: 4rem; border: 5px solid #f3f3f3; border-top: 5px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; margin: auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .scrollable-container { display: flex; overflow-x: auto; padding: 0 10px; /* Optional: padding for left and right space */ gap: 15px; /* Space between learner cards */ max-width: 100%; } .learner-card { flex: 0 0 auto; /* Prevents wrapping */ min-width: 120px; /* Width of each learner card */ text-align: center; } /* Modal container to hold sidebar and content */ .modal-learning-modal-container { display: flex; height: 100%; } /* Sidebar styles */ .modal-sidebar { width: 250px; background-color: #f8f9fa; padding: 10px; display: flex; flex-direction: column; justify-content: flex-start; border-right: 1px solid #ddd; } .modal-hamburger-menu { display: none; font-size: 24px; cursor: pointer; margin-bottom: 20px; } .modal-menu-item { display: flex; align-items: center; padding: 10px; margin: 5px 0; cursor: pointer; } .modal-menu-item.active { background-color: var(--primary-color); color: white; } .modal-menu-badge { font-weight: bold; margin-right: 10px; } .modal-menu-text { flex: 1; } .modal-menu-icon { font-size: 20px; } /* Main content area */ .modal-main-content { flex: 1; background-color: #fff; padding: 20px; overflow-y: auto; } /* Header styles */ .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .modal-header-hamburger { display: none; } /* Content area */ .modal-purple-bar { height: 5px; background-color: var(--primary-color); margin-bottom: 15px; } .modal-white-content { padding: 20px; background-color: #f4f4f4; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } /* Responsive styling for small screens */ @media (max-width: 768px) { .modal-learning-modal-container { flex-direction: column; } .modal-sidebar { width: 100%; border-right: none; } .modal-main-content { margin-top: 20px; } .modal-hamburger-menu { display: block; } } /*----------------- ASSESMENT MODAL ----------------- */ .file-url-view { width: 100%; height: 500px; border: none; } /* Basic progress bar styles */ .progress-bar { width: 0%; height: 20px; background-color: #007bff; transition: width 0.6s ease; } /* Stripes effect for the progress bar */ .progress-bar-striped { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 40px 40px; } /* Animated progress bar effect */ .progress-bar-animated { animation: progress-bar-stripes 1s linear infinite; } @keyframes progress-bar-stripes { 0% { background-position: 40px 0; } 100% { background-position: 0 0; } } .custom-scrollable-dropdown { max-height: 200px; overflow-y: auto; } .avatar-container .avatar { flex-shrink: 0; /* Prevent avatars from shrinking */ margin-right: 10px; /* Optional: Space between avatars */ } /* Basic styling for modal */ .kubici-modal { display: none; /* Hidden by default */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); /* Darker background shade */ justify-content: center; align-items: center; } .kubici-modal-content { background-color: white; border-radius: 10px; padding: 20px; text-align: center; width: 50%; height: 50%; } .kubici-robot { display: flex; flex-direction: column; align-items: center; } .kubici-robot-image { width: 100px; height: 100px; border-radius: 50%; } .kubici-welcome-text { margin-top: 10px; font-size: 16px; font-weight: bold; } .kubici-modal-footer { display: flex; justify-content: center; margin-top: 20px; } .kubici-close-btn { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; } .kubici-close-btn:hover { background-color: #45a049; } .bg-light-grey { background-color: #878787; /* Light grey color */ color: white; } .bg-green { background-color: #3fcc3f; /* Light grey color */ color: white; } .flashcard-modal-sidebar { display: flex; flex-direction: column; gap: 12px; /* Space between items */ padding: 16px; } .sub-sub-timeline-modal-sidebar { display: flex; flex-direction: column; gap: 12px; /* Space between items */ padding: 16px; } .flashcard-modal-sidebar-menu-item { background: #fff; /* White background */ border-radius: 10px; /* Rounded corners */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow */ padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; transition: all 0.3s ease; cursor: pointer; } .flashcard-modal-sidebar-menu-item:hover { box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */ transform: translateY(-2px); /* Slight lift effect */ } .flashcard-modal-menu-badge { width: 280px; height: 50px; border-radius: 50%; margin-right: 20px; } .modal-menu-text { flex-grow: 1; font-size: 14px; font-weight: bold; color: #333; } .modal-menu-icon { color: #555; font-size: 18px; } /* ----------------- END Manage Program section----------------- */ .search-bar { background-color: var(--light-purple); padding: 10px 0; } .search-container { position: relative; max-width: 500px; margin: 0 auto; } .search-box .search-input { border-radius: 20px; border: none; padding: 8px 15px; width: 100%; text-align: center; } .welcome-container { text-align: center; padding: 50px 20px; } .welcome-title { color: #555; font-size: 32px; margin-bottom: 10px; } .welcome-subtitle { color: #777; font-size: 18px; margin-bottom: 40px; } .countdown-circle { width: 180px; height: 180px; border-radius: 50%; background-color: #666; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; border: 10px solid var(--primary-purple); } .count-number { font-size: 72px; font-weight: bold; line-height: 1; margin-bottom: 5px; } .count-text { font-size: 16px; } .btn-light-outline { background-color: transparent; color: #333; border: 1px solid #ddd; border-radius: 20px; padding: 8px 25px; } .floating-button { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; border-radius: 50%; background-color: #666; display: flex; justify-content: center; align-items: center; color: white; font-size: 24px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } :root { /* Color palette */ --learner-primary: #7b2cbf; --learner-secondary: #1a77b8; --learner-light-blue: #38b6ff; --learner-light-gray: #f0f0f0; --learner-white: #ffffff; --learner-dark-text: #333333; } .learner-header { background-color: var(--learner-primary); color: var(--learner-white); padding: 10px 0; text-align: center; } .learner-subheader { background-color: #d4b8e8; padding: 10px 0; } .learner-search { max-width: 400px; margin: 0 auto; background-color: var(--learner-white); border-radius: 20px; } .learner-search input { border: none; width: 100%; padding: 8px 15px; border-radius: 20px; text-align: center; } .learner-search input:focus { outline: none; } .learner-welcome { text-align: center; margin: 40px 0; } .learner-welcome h1 { font-size: 28px; margin-bottom: 15px; color: var(--learner-dark-text); } .learner-welcome p { color: #666; max-width: 850px; margin: 0 auto; line-height: 1.6; } .learner-subject { height: 60px; width: 100%; aspect-ratio: 1/1; border-radius: 12px; display: flex; justify-content: center; align-items: center; color: var(--learner-white); font-weight: 400; transition: transform 0.2s; cursor: pointer; gap: 2px; } .learner-subject:hover { transform: scale(1.05); } .learner-subject.purple { background-color: var(--learner-primary); } .learner-subject.blue { background-color: var(--learner-secondary); } .learner-subject.light-blue { background-color: var(--learner-light-blue); } .learner-motivation { text-align: center; margin: 50px 0; color: #555; line-height: 1.6; } .learner-question { font-weight: bold; } .learner-action-btn { background-color: var(--learner-primary); color: var(--learner-white); border: none; padding: 10px 40px; border-radius: 30px; font-size: 18px; margin-top: 30px; transition: background-color 0.2s; } .learner-action-btn:hover { background-color: #681fa8; } .learner-profile-page .learner-profile-status-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: flex-end; } .learner-profile-page .learner-profile-status-actions .learner-status-action-btn { margin-top: 0; padding: 0.5rem 0.85rem; font-size: 0.78rem; border-radius: 8px; background-color: var(--btn-outline-primary-bg, var(--primary-color)); color: var(--learner-white); } .learner-profile-page .learner-status-action-btn.is-active { background-color: var(--btn-outline-primary-bg, var(--primary-color)); color: var(--learner-white); } .learner-profile-page .learner-profile-status-actions .learner-status-action-btn:hover { background-color: var(--btn-outline-primary-hover-bg, var(--secondary-color)); color: var(--learner-white); } .learner-profile-page .learner-status-action-btn:disabled { opacity: 0.7; cursor: wait; } .learner-cart-btn { background-color: var(--learner-primary); color: var(--learner-white); border-radius: 5px; padding: 6px 15px; } .learner-admin-btn { background-color: #f0f0f0; color: #555; border-radius: 5px; padding: 6px 15px; margin-left: 10px; } .typing { border-right: 2px solid var(--learner-dark-text); white-space: nowrap; overflow: hidden; display: inline-block; animation: typing 3s steps(40, end), blink 0.5s step-end infinite alternate; } @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes blink { from { border-color: transparent; } to { border-color: var(--learner-dark-text); } } .bot-icon { width: 50px; height: 50px; margin-right: 10px; animation: bounce 1s infinite alternate; } @keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-10px); } } .fade-in { opacity: 0; animation: fadeIn 2s forwards; } /* ----------------- Chat Window -----------------*/ .chat-button { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; border-radius: 50%; background-color: #b197fc; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); cursor: pointer; z-index: 100; transition: all 0.3s ease; } .chat-button:hover { transform: scale(1.05); } .chat-icon { color: white; font-size: 24px; left: 18px; top: 9px; position: absolute; } .close-button { position: fixed; bottom: 30px; right: 100px; width: 60px; height: 60px; border-radius: 50%; background-color: #b197fc; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); cursor: pointer; z-index: 100; transition: all 0.3s ease; opacity: 0; pointer-events: none; } .close-button.active { opacity: 1; pointer-events: auto; } .chat-window { position: fixed; bottom: 100px; right: 30px; width: 320px; height: 450px; background-color: #fff; border-radius: 15px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); overflow: hidden; display: flex; flex-direction: column; opacity: 0; transform: translateY(20px); pointer-events: none; transition: all 0.3s ease; z-index: 99; } .chat-window.active { opacity: 1; transform: translateY(0); pointer-events: auto; } .chat-header { padding: 15px 20px; background-color: #b197fc; display: flex; justify-content: space-between; align-items: center; } .chat-header-title { display: flex; align-items: center; color: #fff; font-weight: bold; } .chat-header-icon { margin-right: 10px; font-size: 20px; } .chat-header-actions { display: flex; } .header-button { width: 28px; height: 28px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); display: flex; justify-content: center; align-items: center; margin-left: 10px; cursor: pointer; } .chat-body { flex-grow: 1; padding: 10px; overflow-y: auto; background-color: #f9f9f9; display: flex; flex-direction: column; } .chat-input-container { padding: 10px; background-color: #fff; border-top: 1px solid #eee; } .chat-input { width: 100%; padding: 10px 15px; border-radius: 20px; border: 1px solid #ddd; outline: none; font-size: 11px; } .message { max-width: 70%; padding: 10px 15px; margin: 5px 0; border-radius: 15px; font-size: 14px; line-height: 1.4; } .user-message { align-self: flex-end; background-color: #fff; border: 1px solid #eee; border-bottom-right-radius: 5px; } .user-message-container { display: flex; justify-content: flex-end; align-items: flex-start; margin: 5px 0; } .agent-message { align-self: flex-start; background-color: #b197fc; color: #fff; border-bottom-left-radius: 5px; } .agent-message-container { display: flex; justify-content: flex-start; align-items: flex-start; margin: 5px 0; } .avatar { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; margin: 0 5px; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .send-button { position: absolute; right: 16px; bottom: 59px; width: 25px; height: 25px; border-radius: 50%; background-color: var(--dark-purple); display: flex; justify-content: center; align-items: center; cursor: pointer; } /* ----------------- END Chat whindow -----------------*/ /*----------------- Assesment layout -----------------*/ .slide-container { max-width: 1000px; margin: 0 auto; position: relative; } .slide-container .progress-bar-container { height: 15px !important; background-color: #6610f2 !important; border-radius: 30px !important; position: relative; margin-bottom: 20px; } .slide-container .progress-indicator { width: 40px; height: 40px; background-color: #d3d3d3 !important; border-radius: 50%; position: absolute; top: -12px; left: 43%; z-index: 10; } .slide-container .main-content { max-width: 100%!important; } .slide-container .content-container { display: flex; gap: 30px; } .main-content { flex: 5; background-color: white; border-radius: 15px; padding: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1); position: relative; overflow: hidden; margin: 0px; } .card-content { padding: 25px; } .key-takeaway { flex: 1; background-color: #f0f0f0; border-radius: 15px; padding: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .explanation-text { font-size: 1.1rem; line-height: 1.6; } .takeaway-header { font-weight: bold; margin-bottom: 15px; color: #333; font-size: 13px } .takeaway-content { font-size: 0.9rem; line-height: 1.5; } /*-----------------END Assesment layout -----------------*/ /* ----------------- QUIZE Assesment modal ----------------- */ .modal-learning-modal-container .card { width: 350px; border-radius: 25px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); overflow: hidden; max-height: 85vh; display: flex; flex-direction: column; } .modal-learning-modal-container .card-header { background-color: white; border-bottom: none; padding: 20px; } .modal-learning-modal-container .card-body { background-color: white; padding: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d0d0d0 #f5f7ff; } .modal-learning-modal-container .card-body::-webkit-scrollbar { width: 6px; } .modal-learning-modal-container.card-body::-webkit-scrollbar-track { background: #f5f7ff; } .modal-learning-modal-container .card-body::-webkit-scrollbar-thumb { background-color: #d0d0d0; border-radius: 10px; } .modal-learning-modal-container .flashcard-sidebar-title-item, .modal-learning-modal-container .question-sidebar-title-item { background-color: #f5f7ff; border-radius: 15px; margin: 10px 20px; padding: 15px; display: flex; align-items: center; justify-content: space-between; } /* flashcard icon */ .modal-learning-modal-container .flashcard-sidebar-title-icon { width: 45px; height: 45px; background-color: var(--dark-purple); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px; } /* question icon */ .modal-learning-modal-container .question-sidebar-title-icon { width: 45px; height: 45px; background-color: #fd79a8; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px; } .modal-learning-modal-container .flashcard-sidebar-title-icon.disabled, .modal-learning-modal-container .question-sidebar-title-icon.disabled { background-color: #d0d0d0; } .modal-learning-modal-container .flashcard-sidebar-title-info, .modal-learning-modal-container .question-sidebar-title-info { flex: 1; } .modal-learning-modal-container .flashcard-sidebar-title, .modal-learning-modal-container .question-sidebar-title { font-weight: 600; margin-bottom: 4px; } .modal-learning-modal-container .flashcard-sidebar-sub-title, .modal-learning-modal-container .question-sidebar-sub-title { color: #888; font-size: 0.8rem; } .modal-learning-modal-container .header-title { font-weight: bold; } .modal-learning-modal-container .header-subtitle { color: #888; font-size: 0.9rem; } .wave-icon { margin-right: 10px; } .modal-learning-modal-container .flashcard-sidebar-title-item:hover, .modal-learning-modal-container .question-sidebar-title-item:hover { background-color: #e2e6ea; /* hover effect */ } .modal-learning-modal-container .flashcard-sidebar-title-item.active, .modal-learning-modal-container .question-sidebar-title-item.active { background-color: #4f46e5; /* Indigo-600 for active item */ opacity: 70%; color: #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .modal-learning-modal-container .flashcard-sidebar-title-item.active .flashcard-sidebar-title-icon i, .modal-learning-modal-container .flashcard-sidebar-title-item.active .flashcard-sidebar-title, .modal-learning-modal-container .flashcard-sidebar-title-item.active .flashcard-sidebar-sub-title, .modal-learning-modal-container .flashcard-sidebar-title-item.active i.bx-chevron-right, .modal-learning-modal-container .question-sidebar-title-item.active .question-sidebar-title-icon i, .modal-learning-modal-container .question-sidebar-title-item.active .question-sidebar-title, .modal-learning-modal-container .question-sidebar-title-item.active .question-sidebar-sub-title, .modal-learning-modal-container .question-sidebar-title-item.active i.bx-chevron-right { color: #ffffff; } .background-shapes .shape { position: absolute; z-index: -1; opacity: 0.7; } /* in your stylesheet */ .flashcard-sidebar-title-item.loading::after, .question-sidebar-title-item.loading::after { content: ''; border: 2px solid #ccc; border-top-color: #4f46e5; border-radius: 50%; width: 16px; height: 16px; animation: spin 1s linear infinite; display: inline-block; margin-left: 8px; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* correct answer highlight */ .option-box-correct { background-color: #d4edda; } /* incorrect answer highlight */ .option-box-incorrect { background-color: #f8d7da; } .shape-1 { top: 10%; left: 5%; width: 60px; height: 60px; background-color: var(--accent-teal); border-radius: 10px; transform: rotate(45deg); } .shape-2 { bottom: 15%; left: 10%; width: 100px; height: 100px; background-color: var(--primary-purple-light); border-radius: 50%; } .shape-3 { top: 20%; right: 10%; width: 70px; height: 70px; background-color: var(--accent-teal); border-radius: 50%; } .shape-4 { bottom: 20%; right: 5%; width: 80px; height: 80px; background-color: var(--accent-teal); border-radius: 12px; transform: rotate(15deg); } .quize-section .container { max-width: 900px; } .quize-section .card { border-radius: 15px; border: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); padding: 2rem; } .quize-section .progress { height: 10px; background-color: var(--light-purple-bg); } .quize-section .progress-bar { background-color: var(--primary-purple); } .quize-section .quiz-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } .quize-section .quiz-title { font-weight: 600; color: var(--text-dark); margin-bottom: 0; } .quiz-subtitle { color: #6c757d; font-size: 0.9rem; } .quiz-actions { display: flex; align-items: center; gap: 15px; } .btn-review { background-color: var(--medium-gray); color: var(--text-dark); border-radius: 20px; padding: 6px 15px; font-size: 0.85rem; border: none; } .btn-back { background-color: var(--light-gray); color: var(--text-dark); border-radius: 20px; padding: 6px 15px; font-size: 0.85rem; border: 1px solid #dee2e6; } .quize-section .timer { display: flex; align-items: center; gap: 5px; color: var(--text-dark); font-weight: 500; } .timer i { color: var(--primary-purple); } .question-container { margin-top: 2rem; padding: 1rem 0; } .question-number { font-size: 0.9rem; color: #6c757d; margin-bottom: 0.5rem; } .question-text { font-weight: 500; color: var(--text-dark); margin-bottom: 1.5rem; } .options-container { margin-top: 1rem; } .option { display: flex; align-items: center; padding: 12px 16px; margin-bottom: 10px; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; } .option:hover { background-color: var(--light-purple-bg); } /* Style for disabled options */ .option[disabled], .option.disabled { cursor: not-allowed; opacity: 0.8; } .option.selected { background-color: var(--light-purple-bg); border-left: 4px solid var(--primary-purple); } .option-label { width: 30px; color: #6c757d; } .option-text { flex: 1; } .option-radio { width: 18px; height: 18px; border: 2px solid #ced4da; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .option.selected .option-radio { border-color: var(--primary-purple); } .option.selected .option-radio::after { content: ''; width: 10px; height: 10px; background-color: var(--primary-purple); border-radius: 50%; } /* Styles for correct and incorrect answers */ .option.correct { background-color: rgba(40, 167, 69, 0.2) !important; border-left: 4px solid #28a745 !important; } .option.correct .option-radio { border-color: #28a745; } .option.correct .option-radio::after { background-color: #28a745; } .option.incorrect { background-color: rgba(220, 53, 69, 0.2) !important; border-left: 4px solid #dc3545 !important; } .option.incorrect .option-radio { border-color: #dc3545; } .option.incorrect .option-radio::after { background-color: #dc3545; } /* Notification styling - replacing modal */ .notification { position: fixed; bottom: 20px; right: 20px; padding: 15px 20px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 10px; z-index: 1050; font-weight: 500; animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .navigation { display: flex; justify-content: space-between; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #dee2e6; } .quize-section .quize-prev-btn, .quize-section .quize-next-btn { display: flex; align-items: center; gap: 8px; border-radius: 20px; padding: 6px 15px; font-size: 0.9rem; background-color: var(--light-gray); color: var(--text-dark); border: 1px solid #dee2e6; } .quize-prev-btn:disabled, .quize-next-btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-submit { background-color: var(--primary-purple); color: white; border-radius: 20px; padding: 6px 20px; border: none; } .btn-submit:disabled { background-color: #a491e8; cursor: not-allowed; } .child-subjects { white-space: nowrap; scroll-behavior: smooth; width: 100%; display: flex; flex-direction: row; align-items: center; padding: 10px 0; } .subject-grid { display: flex; flex-wrap: nowrap; /* Ensure subjects stay in a single row */ gap: 10px; } .subject-card { flex: 0 0 auto; /* Prevent shrinking */ width: 300px; height: 100px; background-color: #e9ecef; text-align: center; padding: 10px; border-radius: 8px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); } .scroll-btn { position: absolute; top: 100%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 5px 10px; cursor: pointer; z-index: 10; } .left { left: -10px; } .right { right: -10px; } #progress-bar-template .progress { height: 7px; } /* -----------------END QUIZE Assesment modal ----------------- */ .uploaded-file-list { max-height: 300px; /* Set the maximum height */ overflow-y: auto; /* Add vertical scrolling */ border: 1px solid #ddd; /* Optional: visual boundary */ padding: 10px; /* Optional: inner spacing */ border-radius: 4px; /* Optional: rounded corners */ background-color: #f9f9f9; /* Optional: background color */ } .timeline-sidebar { display: flex; flex-direction: column; gap: 12px; /* Space between items */ padding: 16px; } .timeline-menu-item { background: #fff; /* White background */ border-radius: 10px; /* Rounded corners */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow */ padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; transition: all 0.3s ease; cursor: pointer; } .timeline-menu-item:hover { box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */ transform: translateY(-2px); /* Slight lift effect */ } .timeline-menu-badge { width: 280px; height: 50px; border-radius: 50%; margin-right: 20px; } .sub-topic-title { font-size: 18px; } .sub-topic-title .topic-name { font-size: 16px; } .timeline-row { width: 100%; display: flex; flex-wrap: nowrap; /* Prevent wrapping of columns */ } .timeline-col-md-2 { flex: 0 0 16.6667%; /* Ensure the sidebar takes up 2/12 of the row */ max-width: 16.6667%; padding: 0 15px; /* Add some padding for spacing */ margin-right: auto; } .sidebar-topics { position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 1px solid #ddd; background-color: white; padding: 15px; box-shadow: 0 2px 4px color(rgba(0, 0, 0, 0.1)); border-radius: 20px; width:400px; } .timeline-container { padding: 8px; position: relative; } .main-timeline { position: absolute; left: 24px; top: 16px; bottom: 16px; width: 4px; background-color: #d1d5db; } .term-container { margin-bottom: 24px; position: relative; } .term-node { position: absolute; left: 16px; width: 20px; height: 20px; border-radius: 50%; background-color: white; border: 2px solid; z-index: 10; transform: translateX(-8px); top: 12px; } .term-button { margin-left: 40px; width: calc(100% - 40px); padding: 8px; border-radius: 4px; color: white; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: bold; } .term-content { margin-left: 40px; padding-left: 16px; border-left: 2px dashed #9ca3af; margin-top: 8px; margin-bottom: 8px; position: relative; display: none; /* Hidden by default */ } .term-title { font-weight: 600; font-size: 14px; color: #374151; margin-bottom: 8px; } .week-container { margin-bottom: 16px; position: relative; } .week-node { position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%; transform: translateX(-20px); } .week-card { display: flex; flex-direction: column; padding: 8px; border-radius: 6px; border-left-width: 4px; border-left-style: solid; } .week-number { font-size: 14px; font-weight: bold; margin-bottom: 4px; } .week-topic { font-size: 14px; color: #4b5563; } /* Term 1 - Blue */ .term-1 .term-node { border-color: #3b82f6; } .term-1 .term-button { background-color: #3b82f6; } .term-1 .week-node { background-color: #3b82f6; } .term-1 .week-card { background-color: #dbeafe; border-left-color: #3b82f6; } .term-1 .week-number { color: #1d4ed8; } /* Term 2 - Green */ .term-2 .term-node { border-color: #10b981; /* Green */ } .term-2 .term-button { background-color: #10b981; /* Green */ } .term-2 .week-node { background-color: #10b981; /* Green */ } .term-2 .week-card { background-color: #d1fae5; /* Light Green */ border-left-color: #10b981; /* Green */ } .term-2 .week-number { color: #047857; /* Dark Green */ } /* Term 3 - Purple */ .term-3 .term-node { border-color: #8b5cf6; /* Purple */ } .term-3 .term-button { background-color: #8b5cf6; /* Purple */ } .term-3 .week-node { background-color: #8b5cf6; /* Purple */ } .term-3 .week-card { background-color: #ede9fe; /* Light Purple */ border-left-color: #8b5cf6; /* Purple */ } .term-3 .week-number { color: #6d28d9; /* Dark Purple */ } /* Term 4 - Red */ .term-4 .term-node { border-color: #ef4444; /* Red */ } .term-4 .term-button { background-color: #ef4444; /* Red */ } .term-4 .week-node { background-color: #ef4444; /* Red */ } .term-4 .week-card { background-color: #fee2e2; /* Light Red */ border-left-color: #ef4444; /* Red */ } .term-4 .week-number { color: #b91c1c; /* Dark Red */ } /* Add styles for other terms as needed */ .term-button:hover { opacity: 0.9; } .active { display: block; } /* Make the card-body scrollable */ .card-body.flashcard-modal-sidebar { overflow-y: auto; /* Enable vertical scrolling */ overflow-x: hidden; /* Prevent horizontal scrolling */ padding-right: 15px; /* Add padding for better spacing */ scrollbar-width: thin; /* For modern browsers, make the scrollbar thinner */ scrollbar-color: #ccc #f8f9fa; /* Customize scrollbar colors */ } /* Optional: Customize the scrollbar for Webkit browsers (Chrome, Safari) */ .card-body.flashcard-modal-sidebar::-webkit-scrollbar { width: 8px; /* Set the width of the scrollbar */ } .card-body.flashcard-modal-sidebar::-webkit-scrollbar-thumb { background-color: #ccc; /* Set the color of the scrollbar thumb */ border-radius: 4px; /* Add rounded corners to the scrollbar thumb */ } .card-body.flashcard-modal-sidebar::-webkit-scrollbar-track { background-color: #f8f9fa; /* Set the color of the scrollbar track */ } .sidebar-toggle-container { z-index: 1055; } #sidebar-toggle { z-index: 1060 !important; } .sidebar-toggle-container.collapsed .flashcard-modal-sidebar-main-sub-topic { display: none; } /* Unique styles for timeline */ .full-screen-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: transparent; /* semi-transparent black */ z-index: 9999; display: flex; align-items: center; justify-content: center; } .loader-overlay { text-align: center; } .full-screen-loader .loader-spinner { width: 4rem; height: 4rem; } .full-screen-loader .loader-text { margin-top: 1rem; } .custom-height { height: 90%; } .center-align { text-align: center; } .sp-learning-module body { background-color: #f8f9fa; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .sp-content-card { border-radius: 15px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s, box-shadow 0.3s; margin-bottom: 20px; overflow: hidden; max-width: 1000px; margin-left: auto; margin-right: auto; } .sp-content-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); } .sp-card-header { color: white; font-weight: bold; padding: 12px 20px; border-bottom: none; } .sp-card-body { padding: 25px; background-color: white; } .sp-explanation-text { font-size: 1.1rem; line-height: 1.6; color: #333; } .sp-option-btn { display: block; width: 100%; margin-bottom: 10px; padding: 12px; border-radius: 8px; transition: all 0.2s; text-align: left; } .sp-option-btn:hover { background-color: #e9ecef; } .sp-option-btn.sp-selected { background-color: #6c5ce7; color: white; border-color: #6c5ce7; } .sp-option-btn.sp-correct { background-color: #28a745; color: white; border-color: #28a745; } .sp-option-btn.sp-incorrect { background-color: #dc3545; color: white; border-color: #dc3545; } .sp-progress { height: 6px; border-radius: 5px; } .sp-progress-bar { background-color: #6c5ce7; } .sp-nav-btn { background-color: #6c5ce7; color: white; border: none; transition: all 0.2s; padding: 10px 25px; } .sp-nav-btn:hover { background-color: #5649c0; } .sp-nav-btn:disabled { background-color: #d1d1d1; } .sp-card-note .sp-card-header { background-color: var(--flashcard-header-color); } .sp-card-quiz .sp-card-header { background-color: var(--quiz-header-color); } .sp-card-icon { margin-right: 10px; font-size: 1.2rem; } .sp-feedback-message { margin-top: 15px; padding: 10px; border-radius: 8px; font-weight: 500; display: none; } .sp-feedback-correct { background-color: rgba(40, 167, 69, 0.2); color: #28a745; } .sp-feedback-incorrect { background-color: rgba(220, 53, 69, 0.2); color: #dc3545; } .sp-card-container { min-height: 300px; } /* Animation for card transitions */ @keyframes spFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .sp-content-card { animation: spFadeIn 0.5s ease-out; } .sp-center-content { display: flex; flex-direction: column; justify-content: center; } .sp-learning-main-content { padding: 20px; border-radius: 10px; background-color: #ffffff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .sp-progress-wrapper { padding: 15px; background-color: #f9f9f9; border-radius: 10px; margin-top: 20px; } .sp-nav-buttons { margin-top: 15px; } /* Status Card */ .status-card { position: fixed; bottom: 20px; right: 20px; width: 350px; z-index: 1050; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); border-radius: 0.5rem; overflow: hidden; } .progress-bar { transition: width 0.5s ease-in-out; } .alert { margin-bottom: 0; border-left: 4px solid; border-radius: 20px; } .alert-warning { border-left-color: #ffc107; } .alert-info { border-left-color: #0dcaf0; } .alert-success { border-left-color: #198754; } .alert-light { border-left-color: #f8f9fa; } /* Animation for appearance */ @keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .status-card:not(.d-none) { animation: slideIn 0.3s ease forwards; } /* ----------------- Global styles ----------------- */ .breadcrumb { padding: 10px 30px; background-color: #fff; border-bottom: 1px solid #e0e0e0; } .breadcrumb a { text-decoration: none; color: #666; } .breadcrumb span { color: #999; } .container-timeline { display: flex; height: calc(100vh - 100px); padding: 15px; gap: 15px; } /* First sidebar for terms */ .terms-sidebar { width: 100px; background-color: #f0f0f5; padding: 20px 0; border-right: 1px solid #e0e0e0; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); overflow: hidden; } .sidebar-item { display: flex; flex-direction: column; align-items: center; padding: 10px; margin-bottom: 10px; cursor: pointer; } .sidebar-icon { width: 40px; height: 40px; background-color: #ddd; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px; } .active-icon { background-color: #7859cb; color: white; } .term-label { font-size: 12px; color: #888; text-align: center; } /* Second sidebar for weeks */ .weeks-sidebar { width: 250px; background-color:var(--side-bar-bg-color); padding: 20px 10px; border-right: 1px solid #e0e0e0; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); overflow-y: auto; } .week-selector { max-height: 100%; overflow-y: auto; padding: 0 10px; } .week-button { display: block; width: 100%; padding: 15px; margin-bottom: 10px; background-color: #e1e0f5; border: none; border-radius: 8px; text-align: center; cursor: pointer; font-size: 14px; color: #555; } .week-button.active { background-color: #7859cb; color: white; } .topic-list { max-height: 200px; overflow-y: auto; } .topic-item { padding: 10px; margin: 5px 0; background-color: var(--bg-primary); border-radius: 5px; display: flex; align-items: center; cursor: pointer; } .topic-item-active { background-color:var(--bg-primary-active); } .topic-icon { margin-right: 10px; } .main-content-timeline { flex: 1; padding: 20px; overflow-y: auto; background-color: #fff; border-radius: 12px; } .content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .progress-bar-timeline { height: 10px; background-color: #e0e0e0; border-radius: 5px; margin: 10px 0 30px; position: relative; } .progress-fill { height: 100%; width: 10%; background-color: #4cd964; border-radius: 5px; } .progress-text { text-align: right; font-size: 12px; color: #888; margin-top: 5px; } .module-container { margin-bottom: 30px; } .modules-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 15px; margin-bottom: 30px; } .module { background-color: #e1e0f5; padding: 25px 20px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 100px; cursor: pointer; height: 60px; } .module.active { background-color: #7859cb; color: white; } .module-title { font-size: 16px; margin-bottom: 10px; } .module-count { font-size: 12px; color: #888; } .module.active .module-count { color: #e0e0e0; } .progress-circle { width: 30px; height: 30px; background-color: transparent; border-radius: 50%; display: flex; align-items: center; justify-content: center; /* color: transparent; */ font-weight: bold; } .module-icon { width: 30px; height: 30px; background-color: transparent; border-radius: 5px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .module.active .module-icon { background-color: #9d86e2; } .footer { text-align: center; padding: 20px; color: #666; font-size: 14px; } .number-patterns-header { background-color: #e1e0f5; padding: 3px 10px; border-radius: 5px; font-size: 12px; color: #7859cb; margin-bottom: 5px; } .nav-btn { padding: 8px 15px; border: none; background-color: #7859cb; color: white; border-radius: 5px; cursor: pointer; } .term-dropdown { cursor: pointer; margin-bottom: 10px; } .term-content { display: none; } .term-content.active { display: block; } .timeline-header { background-color: #f0f0f5; padding: 10px 15px; margin-top: -15px; border-radius: 5px; } .timeline-title { font-size: 18px; margin-bottom: 5px; } .timeline-subtitle { font-size: 14px; color: #666; } .flashcard-modal-sidebar { max-height: 100vh; overflow-y: auto; } .topic-item.active { background-color: #0056b3; color: white; font-weight: bold; font-size: .875em;; /* Font size */ } .sidebar-icon.active { background-color: var(--secondary-color); /* Highlight color */ color: white; border-radius: 8px; /* Optional: rounded corners */ } .topic-item.active { background-color: var(--course-border-light); /* Active background color */ border-left: 4px solid #007bff; /* Blue border on the left */ color: #0056b3; /* Text color */ font-weight: bold; /* Bold text */ font-size: .875em;; /* Font size */ } @media (min-width: 768px) { .week-button { flex: 1 1 calc(25% - 10px); /* Four buttons per row on medium screens */ } } .topic-subject-card { display: flex; flex-wrap: wrap; gap: 15px; } /* Ensure .topic-subject-card retains its fixed size */ .topic-subject-card { background-color: var(--light-gray); border-radius: 10px; padding: 20px; margin-bottom: 15px; cursor: pointer; transition: background-color 0.2s; border: 1px solid #ddd; width: 100%; height: 145px; /* Fixed height */ display: flex; flex-direction: column; gap: 15px; /* Space between modules */ overflow: hidden; /* Prevent overflow if content exceeds height */ } /* Modules grid inside .topic-subject-card */ .topic-subject-card .modules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Flexible layout */ gap: 15px; height: 100%; /* Ensure grid fills the card */ } /* Ensure text remains inside the module */ .topic-subject-card .module { background-color: #e1e0f5; padding: 20px 15px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 80px; cursor: pointer; height: auto; /* Allow height to adjust dynamically */ overflow: hidden; /* Prevent content from overflowing */ } /* Style for the text inside the module */ .topic-subject-card .module h5.small { font-size: 0.875em; /* Default size */ margin: 0; color: var(----modul-bg-color); /* Text color */ display: -webkit-box; /* Use a flexbox-like container */ -webkit-line-clamp: 3; /* Limit to 3 lines */ -webkit-box-orient: vertical; /* Set the box orientation to vertical */ overflow: hidden; /* Hide overflowing text */ text-overflow: ellipsis; /* Add ellipsis for overflowing text */ max-width: 100%; /* Ensure text stays within the module */ word-wrap: break-word; /* Break long words if necessary */ } /* Adjust text styles for smaller screens */ @media (max-width: 768px) { .topic-subject-card .module h5.small { font-size: 0.8em; /* Reduce font size for smaller screens */ } } @media (max-width: 480px) { .topic-subject-card .module h5.small { font-size: 0.75em; /* Further reduce font size for extra small screens */ } } /* Adjust text sizes for module titles and counts */ .topic-subject-card .module-title { font-size: 0.875em; /* Default size */ margin-bottom: 10px; color: #555; } .topic-subject-card .module-count { font-size: 12px; /* Default size */ color: #888; } /* Adjust styles for smaller screens */ @media (max-width: 768px) { .topic-subject-card .modules-grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Smaller grid items */ } .topic-subject-card .module-title { font-size: 0.8em; /* Smaller text for titles */ } .topic-subject-card .module-count { font-size: 11px; /* Smaller text for counts */ } .topic-subject-card .progress-circle { width: 25px; height: 25px; font-size: 0.8em; /* Adjust progress circle text size */ background-color: #666; } .topic-subject-card .module-icon { width: 25px; height: 25px; margin-bottom: 8px; /* Adjust spacing */ } } /* Adjust styles for extra small screens */ @media (max-width: 480px) { .topic-subject-card .modules-grid { grid-template-columns: 1fr; /* Single column layout */ } .topic-subject-card .module-title { font-size: 0.75em; /* Further reduce text size */ } .topic-subject-card .module-count { font-size: 10px; } .topic-subject-card .progress-circle { width: 20px; height: 20px; font-size: 0.7em; } .topic-subject-card .module-icon { width: 20px; height: 20px; margin-bottom: 5px; } } .flashcard-details { width: 80%; /* Maintain the increased width */ height: auto; margin: 0 auto; /* Center the flashcard details */ padding: 20px; /* Add padding for spacing */ border: 2px solid #ddd; /* Add a light border */ border-radius: 10px; /* Add rounded corners */ background-color: var(--primary-color); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */ } .flashcard-details .card-title { font-size: 1.2rem; /* Increase font size for the title */ font-weight: bold; /* Make the title bold */ color: #333; /* Darker color for the title */ margin-bottom: 15px; /* Add spacing below the title */ text-align: center; /* Center-align the title */ border-bottom: 2px solid #ddd; /* Add a bottom border */ padding-bottom: 10px; /* Add padding below the title */ background-color: var(--dark-purple); width: 100%; } .flashcard-details .card-body { font-size: 1rem; /* Set a readable font size for the content */ line-height: 1.6; /* Improve readability with line height */ color: #555; /* Use a medium-dark color for the content */ text-align: justify; /* Justify the content for better alignment */ } body { font-family: 'Arial', sans-serif; /* Replace 'Arial' with your desired font */ font-size: 14px; /* Optional: Set a consistent font size */ line-height: 1.5; /* Optional: Set a consistent line height */ } .selected-option label { font-weight: bold; color: green; /* Bootstrap primary color */ } .selected-option input[type="radio"] { accent-color: green; /* Change the radio button color */ } /* Remove bullet points from options */ .flashcard-details ul { list-style-type: none; /* Remove bullet points */ padding-left: 0; /* Remove default padding */ } .flashcard-details ul li { margin-bottom: 10px; /* Add spacing between options */ } .card .learner-card { background-color: var(--primary-color); } .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { padding-right: var(--bs-gutter-x, .75rem); padding-left: var(--bs-gutter-x, .75rem); margin-right: auto; margin-left: auto; } /* Custom container padding helper for parent My Children layout. Keeps default padding on mobile, adds extra right padding only on large screens to align cards without breaking small viewports. */ .margin-right { padding-right: var(--bs-gutter-x, .75rem); padding-left: var(--bs-gutter-x, .75rem); } @media (min-width: 1200px) { .margin-right { /* Adjust 14.75rem if you want more/less shift */ padding-right: calc(var(--bs-gutter-x, .75rem) + 14.75rem); } } .assist-card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color:var(--assist-subject-card-color); border: 1px solid rgba(0, 0, 0, .125); border-radius: 13px; } /* General styles for the modal */ .modal-learning-modal-container { display: flex; flex-direction: row; gap: 1rem; } /* Sidebar styles */ .flashcard-modal-sidebar-main-sub-topic { flex: 1; max-width: 380px; } /* Main content styles */ .modal-main-content { flex: 3; overflow-y: auto; } /* Responsive styles for smaller screens */ @media (max-width: 768px) { .modal-learning-modal-container { flex-direction: column; } .flashcard-modal-sidebar-main-sub-topic { max-width: 100%; margin-bottom: 1rem; } .modal-main-content { flex: 1; } .sp-progress-wrapper { flex-direction: column; align-items: flex-start; } .monitoring-margin-top { margin-top: -241px !important; } .timeline-and-progress { flex-direction: column; align-items: flex-start; } .progress-counter { margin-left: 0; margin-top: 0.5rem; } /* These three were written for the learning/flashcard modal above (term_week_topics.js) but were unscoped, so on every phone-width page every .btn became 35% of its container (letter-stacked labels, oversized question tiles) and every .text-center flex row turned into a column. Keep them inside the component they were written for. (.btn-semi is a bespoke class used only by that component's pages, so it stays as is.) */ .modal-learning-modal-container .text-center { flex-direction: column; gap: 0.5rem; } .modal-learning-modal-container .btn { width: 35%; } .btn-semi { width: 22%; } } #sidebar_toggle { z-index: 1000; cursor: pointer; font-size: 1.5rem; } /* Loader styles */ .learner-subject.loading { position: relative; pointer-events: none; /* Disable clicks while loading */ opacity: 0.7; /* Optional: Dim the subject while loading */ } .learner-subject.loading::after { content: ''; border: 2px solid #ccc; border-top-color: #4f46e5; border-radius: 50%; width: 16px; height: 16px; animation: spin 1s linear infinite; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @keyframes spin { to { transform: rotate(360deg); } } .custom-transparent-modal .modal-content { background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */ border: none; box-shadow: none; } .custom-transparent-modal .modal-backdrop { background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black backdrop */ } .option-box { transition: background-color 0.3s, border-color 0.3s; } .option-box-correct { background-color: #d4edda; border-color: #28a745; color: #155724; } .option-box-incorrect { background-color: #f8d7da; border-color: #dc3545; color: #721c24; } .option-box-selected { background-color: #f0f8ff; /* Light blue background */ border-color: #007bff; /* Blue border */ } .option-box, .option-box * { filter: none !important; opacity: 1 !important; backdrop-filter: none !important; } /* Adjust layout for smaller screens */ @media (max-width: 768px) { .modal-learning-modal-container { flex-direction: column; } .flashcard-modal-sidebar-main-sub-topic { width: 100%; max-width: none; border-right: none; border-bottom: 1px solid #ddd; } .modal-main-content { width: 100%; padding: 10px; } .sp-card-container { margin-bottom: 20px; } .sp-progress-wrapper { flex-direction: column; align-items: flex-start; } .progress-counter { margin-top: 10px; margin-left: 0; } .text-center { flex-direction: column; } .text-center button { margin-bottom: 10px; width: 40%; text-align: center !important; } } /* Adjust font sizes for smaller screens */ @media (max-width: 576px) { .sp-note-title, .sp-quiz-title { font-size: 1rem; } .sp-quiz-question { font-size: 0.9rem; } .form-check-label { font-size: 0.85rem; } .btn { font-size: 0.8rem; } } /* Recruitment management */ .recruitment-management-standalone-page { background: #f6f7fb; } .recruitment-management-shell { color: #182230; padding: 1.5rem; } .recruitment-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; } .recruitment-eyebrow { color: #6941c6; font-size: .73rem; font-weight: 700; letter-spacing: .08em; margin: 0 0 .35rem; text-transform: uppercase; } .recruitment-page-title { font-size: 1.55rem; font-weight: 700; letter-spacing: -.025em; margin: 0; color: #101828; } .recruitment-page-copy { color: #667085; font-size: .84rem; margin: .4rem 0 0; } .recruitment-head-actions { display: flex; gap: .65rem; flex-shrink: 0; } .recruitment-btn { align-items: center; border: 1px solid #d0d5dd; border-radius: .55rem; display: inline-flex; font-size: .78rem; font-weight: 650; gap: .45rem; justify-content: center; padding: .58rem .85rem; text-decoration: none; transition: .18s ease; } .recruitment-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(16, 24, 40, .08); } .recruitment-btn.light { background: #fff; color: #344054; } .recruitment-btn.primary { background: #7f56d9; border-color: #7f56d9; color: #fff; } .recruitment-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin-bottom: 1rem; } .recruitment-metric { background: #fff; border: 1px solid #eaecf0; border-radius: .75rem; padding: 1rem; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); } .recruitment-metric-top { align-items: center; color: #667085; display: flex; font-size: .75rem; font-weight: 600; justify-content: space-between; } .recruitment-metric-icon { align-items: center; background: #f4ebff; border-radius: .5rem; color: #7f56d9; display: flex; height: 2rem; justify-content: center; width: 2rem; } .recruitment-metric-value { color: #101828; font-size: 1.55rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; margin-top: .85rem; } .recruitment-metric-foot { color: #667085; font-size: .68rem; margin-top: .45rem; } .recruitment-metric-foot strong { color: #039855; font-weight: 700; } .recruitment-workspace { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(17rem, .72fr); gap: 1rem; } .recruitment-panel { background: #fff; border: 1px solid #eaecf0; border-radius: .8rem; box-shadow: 0 1px 3px rgba(16, 24, 40, .04); overflow: hidden; } .recruitment-panel-head { align-items: center; border-bottom: 1px solid #eaecf0; display: flex; justify-content: space-between; padding: 1rem 1.15rem; } .recruitment-panel-title { color: #101828; font-size: .92rem; font-weight: 700; margin: 0; } .recruitment-panel-copy { color: #667085; font-size: .7rem; margin: .25rem 0 0; } .recruitment-more { align-items: center; background: #fff; border: 1px solid #eaecf0; border-radius: .45rem; color: #667085; display: flex; height: 2rem; justify-content: center; width: 2rem; } .recruitment-flow { list-style: none; margin: 0; padding: 1rem 1.15rem 1.2rem; } .recruitment-flow-step { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; gap: .75rem; min-height: 4.75rem; position: relative; } .recruitment-flow-step:not(:last-child)::after { background: #e4e7ec; content: ""; height: calc(100% - 2rem); left: 1rem; position: absolute; top: 2rem; width: 2px; } .recruitment-step-marker { align-items: center; background: #f4ebff; border: 4px solid #f9f5ff; border-radius: 50%; color: #7f56d9; display: flex; font-size: .72rem; font-weight: 700; height: 2.1rem; justify-content: center; position: relative; width: 2.1rem; z-index: 1; } .recruitment-step-marker.complete { background: #12b76a; border-color: #ecfdf3; color: #fff; } .recruitment-step-copy { padding: .12rem 0 .85rem; } .recruitment-step-name { color: #344054; font-size: .8rem; font-weight: 700; margin: 0; } .recruitment-step-description { color: #667085; font-size: .69rem; line-height: 1.45; margin: .25rem 0 0; } .recruitment-step-tools { align-items: flex-start; display: flex; gap: .4rem; padding-top: .08rem; } .recruitment-badge { border-radius: 999px; font-size: .62rem; font-weight: 700; padding: .27rem .52rem; white-space: nowrap; } .recruitment-badge.flexible { background: #f2f4f7; color: #475467; } .recruitment-badge.timed { background: #fff6ed; color: #c4320a; } .recruitment-badge.live { background: #ecfdf3; color: #027a48; } .recruitment-side-stack { display: grid; align-content: start; gap: 1rem; } .recruitment-progress-body { padding: 1rem 1.15rem 1.15rem; } .recruitment-progress-row { align-items: end; display: flex; justify-content: space-between; margin-bottom: .55rem; } .recruitment-progress-label { color: #344054; font-size: .73rem; font-weight: 650; } .recruitment-progress-number { color: #101828; font-size: 1.3rem; font-weight: 700; } .recruitment-progress-track { background: #f2f4f7; border-radius: 999px; height: .48rem; overflow: hidden; } .recruitment-progress-fill { background: #7f56d9; border-radius: inherit; height: 100%; width: 68%; } .recruitment-progress-meta { color: #667085; display: flex; font-size: .65rem; justify-content: space-between; margin-top: .55rem; } .recruitment-action-list { display: grid; gap: .15rem; padding: .55rem; } .recruitment-action { align-items: center; border-radius: .55rem; color: #344054; display: grid; font-size: .74rem; font-weight: 650; gap: .7rem; grid-template-columns: 2rem minmax(0, 1fr) auto; padding: .62rem; text-decoration: none; transition: background .15s ease; } .recruitment-action:hover { background: #f9fafb; color: #6941c6; } .recruitment-action-icon { align-items: center; background: #f4ebff; border-radius: .48rem; color: #7f56d9; display: flex; height: 2rem; justify-content: center; } .recruitment-action small { color: #98a2b3; display: block; font-size: .61rem; font-weight: 500; margin-top: .12rem; } @media (max-width: 991.98px) { .recruitment-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .recruitment-workspace { grid-template-columns: 1fr; } } @media (max-width: 575.98px) { .recruitment-management-shell { padding: .85rem; } .recruitment-page-head { display: block; } .recruitment-head-actions { margin-top: 1rem; } .recruitment-head-actions .recruitment-btn { flex: 1; } .recruitment-metrics { gap: .6rem; } .recruitment-metric { padding: .8rem; } .recruitment-metric-value { font-size: 1.3rem; } .recruitment-flow-step { grid-template-columns: 2.1rem minmax(0, 1fr); } .recruitment-step-tools { grid-column: 2; padding: 0 0 .8rem; } } @media (max-width: 768px) { .sidebar-item { display: flex; align-items: center; justify-content: space-between; padding: 10px; font-size: 14px; } .sidebar-icon.term-icon { margin-right: 10px; } .term-label { flex-grow: 1; text-align: left; } .week-selector { display: flex; flex-direction: column; gap: 10px; } .week-container { display: flex; flex-direction: column; align-items: stretch; } .week-button { width: 100%; font-size: 14px; padding: 8px; } .week-topic-list { margin-top: 10px; padding-left: 15px; } .topic-item { display: flex; align-items: center; padding: 8px; font-size: 14px; } .topic-icon { margin-right: 10px; } } /* Container for the layout */ .container-timeline { display: flex; flex-direction: row; height: 100vh; /* Full height */ overflow: hidden; } /* Term Sidebar */ .terms-sidebar { flex: 0 0 100px; /* Fixed width for the term sidebar */ background-color: #f0f0f5; padding: 20px 0; border-right: 1px solid #e0e0e0; overflow-y: auto; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } /* Week Sidebar */ .weeks-sidebar { flex: 0 0 250px; /* Fixed width for the week sidebar */ background-color: #f0f0f5; padding: 20px 10px; border-right: 1px solid #e0e0e0; overflow-y: auto; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } /* Main Content */ .main-content-timeline { flex: 1; /* Take up the remaining space */ padding: 20px; overflow-y: auto; background-color: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } /* Responsive Adjustments */ @media (max-width: 768px) { .terms-sidebar { flex: 0 0 80px; /* Reduce width for smaller screens */ } .weeks-sidebar { flex: 0 0 200px; /* Reduce width for smaller screens */ } .main-content-timeline { padding: 10px; /* Adjust padding for smaller screens */ } } .learner-card-list { min-width: 180px; max-width: 200px; cursor: pointer; } .selected-learner { background-color:var(--secondary-color); color: white; } .unselected-learner { background-color: text-dark; color: black; } .progress-bar-container { height: 10px; } .performance-dashboard .stats-card { border-radius: 16px; color: white; padding: 1rem; } .performance-dashboard .card-title { margin-bottom: 1rem; font-size: 0.875rem; font-weight: bold; text-align: center; } .performance-dashboard .list-group-item { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; background-color: transparent; color: white; } /* manage subjects */ .search-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); } /* Subject Grid */ .subject-grid { display: flex; overflow-x: auto; gap: 1rem; padding: 0.5rem; scrollbar-width: thin; } .subject-grid::-webkit-scrollbar { height: 4px; } .subject-grid::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; } .subject-card.active, .subject-card.active-subject { border-color: var(--secondary-color); } .scroll-btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: white; border: none; border-radius: 50%; width: 40px; height: 40px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; color: #64748b; transition: all 0.2s; } .scroll-btn:hover { background-color:var(--dark-purple); color: var(--primary-color); } .scroll-btn.left { left: -4.5rem; } .scroll-btn.right { right: -5.5rem; } /* Folders */ .folders-container { margin-top: -3rem; } .tile { background-color: #e9ecef; border-radius: 0.75rem; padding: 1.5rem 1rem; height: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); transition: all 0.2s; cursor: pointer; } .tile:hover { transform: translateY(-3px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .tile-icon { font-size: 2rem; color: var(--dark-purple); margin-bottom: 0.5rem; } .folder-name { font-weight: 600; margin-top: 0.75rem; } .folder-total-content { background-color: var(--purple-primary); color: white; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; margin-bottom: 0.5rem; } .folder-learner-grade { color: #64748b; font-size: 0.875rem; margin-top: 0.25rem; } /* Upload Area */ .upload-area { background-color: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 1.75rem; padding: 52rem; text-align: center; transition: all 0.3s; height: 229px; margin-top: 60px; } .upload-area:hover { border-color: var(--dark-purple); } /* File Items */ .file-item, .uploaded-file-item { background-color: white; border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 0.75rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: all 0.2s; } .uploaded-file-item:hover { background-color: #f1f5f9; } .uploaded-file-link { font-weight: 500; color: #334155; text-decoration: none; } /* Responsive adjustments */ @media (max-width: 768px) { .subject-card { min-width: 150px; } .status-card { width: 300px; } } /* Text sizes */ .text-xs { font-size: 0.95rem; } .text-xxs { font-size: 0.84rem; } /* iFrame */ iframe.file-url-view { width: 100%; height: 600px; border: none; } .dropdown-btn { background-color: var(--dark-purple); color: white; border: none; border-radius: 25px; padding: 10px 30px; font-weight: bold; } .dropdown-btn:hover { background-color: var(--primary-color); color: white; } .assist-form-container { max-width: 800px; /* Set a maximum width for the form */ margin: 0 auto; /* Center the form horizontally */ padding: 20px; /* Add padding inside the form container */ background-color: transparent; /* Set a white background */ border-radius: 10px; /* Add rounded corners */ border: 1px solid #ddd; /* Optional: Add a light border */ } .assist-form-container h2 { text-align: center; /* Center-align the heading */ margin-bottom: 20px; /* Add spacing below the heading */ font-size: 1.5rem; /* Adjust the font size */ } .assist-form-container .form-label { font-weight: bold; /* Make the labels bold */ margin-bottom: 5px; /* Add spacing below the labels */ display: block; /* Ensure labels are on their own line */ } .assist-form-container .form-control { width: 100%; /* Make the input fields take up the full width */ padding: 10px; /* Add padding inside the input fields */ border: 1px solid #ccc; /* Add a light border */ border-radius: 5px; /* Add rounded corners */ font-size: 1rem; /* Set a consistent font size */ margin-bottom: 15px; /* Add spacing below the input fields */ } .tabs-container .assist-nav-item .nav-link { border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; align-items: center; background: var(--purple-primary); color: white; border: 1px solid var(--color-border); box-shadow: 0 2px 4px rgba(0,0,0,0.04); min-width: 80px; } .tabs-container .assist-nav-item .nav-link.active { background-color: var(--color-all-light); color: var(--color-all); border-color: var(--color-all-border); } .tabs-container .assist-nav-item .nav-link i { font-size: 22px; margin-bottom: 4px; } .bg-assist-success { background-color: var(--btn-color) !important; } .bg-selected-subject { background-color: var(--secondary-color) !important; } /* Custom vertical scrollbar for subject tiles */ .child-subjects-tile { overflow-x: auto; white-space: nowrap; scroll-behavior: smooth; width: 100%; flex-direction: row; align-items: center; padding: 10px 0; margin-top: 16px; /* Add space above the scroller */ margin-bottom: 16px; /* Add space below the scroller */ } /* For Chrome, Edge, and Safari */ .child-subjects-tile::-webkit-scrollbar { width: 10px; /* Vertical scrollbar width */ height: 0; /* Hide horizontal scrollbar */ } .child-subjects-tile::-webkit-scrollbar-thumb { background: #7B68EE; border-radius: 8px; } .child-subjects-tile::-webkit-scrollbar-track { background: #f1f1f1; } .nav-tabs-responsive-wrapper { -webkit-overflow-scrolling: touch; width: 100%; overflow-x: auto; } .programme_tabs { min-width: 600px; } @media (max-width: 767.98px) { .programme_tabs { flex-wrap: wrap; display: flex; gap: 0.5rem; } .programme_tabs > .assist-nav-item { width: 33.3333% !important; max-width: 33.3333%; flex: 0 0 33.3333%; padding-left: 4px !important; padding-right: 4px !important; margin-bottom: 8px; } .programme_tabs .nav-link { font-size: 0.85rem; padding: 0.5rem 0.25rem; min-height: 60px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .programme_tabs .nav-text { font-size: 0.8rem; margin-top: 2px; } .programme_tabs i { font-size: 1.2rem; margin-top: 2px; } } @media (max-width: 767.98px) { .programme_tabs { flex-wrap: wrap; display: flex; gap: 0; } .programme_tabs > .assist-nav-item { width: 33.3333% !important; max-width: 16.3333%; flex: 1 0 -5.6667%; padding-left: 0 !important; padding-right: -8px !important; margin-bottom: 4px; } .programme_tabs .nav-link { min-width: 0 !important; width: 100% !important; padding: 0.3rem 0.1rem !important; font-size: 0.75rem !important; min-height: 44px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .programme_tabs .nav-text { font-size: 0.75rem; margin-top: 2px; } .programme_tabs i { font-size: 1rem; margin-top: 2px; } } /* Responsive adjustments for parent_dashboard.html */ @media (max-width: 991.98px) { .home-page-md { display: none !important; } .home-page-sm { display: flex !important; } } @media (min-width: 992px) { .home-page-sm { display: none !important; } .home-page-md { display: flex !important; } } @media (max-width: 767.98px) { .welcome-text h2 { font-size: 1.3rem; line-height: 1.5; letter-spacing: 0.02em; padding-right: 6.5rem; } .home-page-card, .home-page-card-2 { padding: 1rem !important; font-size: 1rem !important; } .card-title { font-size: 1rem !important; } .device-mockup img { width: 100%; height: auto; } .hero-title { font-size: 2rem !important; } .hero-subtitle { font-size: 1rem !important; } .btn-primary-custom { font-size: 1rem !important; padding: 0.5rem 1rem !important; } .container.home-page { padding: 0 !important; } .row.home-page-sm > div { padding-left: 60px !important; padding-right: 0 !important; } } .learner-subjects-tiles { max-height: 600px; overflow-y: auto; margin-top: 20px; } @media (max-width: 600px) { .home-page-card, .home-page-card-2 { height: 120px !important; /* Reduce card height */ min-height: 90px !important; padding: 0.5rem !important; font-size: 0.85rem !important; } .card-icon { height: 48px !important; /* Reduce icon size */ width: 48px !important; margin-bottom: 8px !important; } .card-title { font-size: 0.95rem !important; /* Reduce title font size */ left: 16px !important; bottom: 8px !important; } .next-icon, .next-icon-2 { width: 20px !important; height: 20px !important; font-size: 1rem !important; top: 8px !important; right: 8px !important; bottom: 8px !important; } .welcome-text h2 { font-size: 1.1rem !important; } .hero-title { font-size: 1.3rem !important; } .hero-subtitle { font-size: 0.95rem !important; } .btn-primary-custom { font-size: 0.95rem !important; padding: 0.4rem 0.8rem !important; width: 80%; } } /* Make nav-link smaller on mobile */ @media (max-width: 767.98px) { .programme_tabs .nav-link { font-size: 0.85rem; padding: 0.5rem 0.25rem; } .programme_tabs .nav-text { font-size: 0.8rem; } .programme_tabs i { font-size: 1rem; } } .home-page-md { display: flex; } .home-page-sm { display: none; } /* Mobile: show .home-page-sm, hide .home-page-md, adjust card sizes */ @media (max-width: 767.98px) { .home-page-md { display: none !important; } .home-page-sm { display: block !important; } .home-page-card, .home-page-card-2 { padding: 12px 10px; min-height: 60px; font-size: 0.95rem; border-radius: 12px; } .card-title { font-size: 1rem; } .card-icon { width: 28px; height: 28px; margin-right: 8px; } .next-icon, .next-icon-2 { font-size: 1rem; } .h-277 { min-height: 80px !important; } } @media (max-width: 767.98px) { .home-page-sm { display: flex !important; flex-wrap: wrap; flex-direction: row !important; gap: 0.5rem; } .home-page-sm > div[class^="col-"] { width: 50% !important; max-width: 50%; flex: 0 0 50%; padding-left: 4px !important; padding-right: 4px !important; margin-bottom: 8px; } .home-page-card, .home-page-card-2 { width: 100%; margin-bottom: 0.5rem; } } @media (max-width: 767.98px) { .home-page-sm { display: flex !important; flex-wrap: wrap; flex-direction: row !important; gap: 0.5rem; } .home-page-sm > div[class^="col-"] { width: 33.3333% !important; max-width: 33.3333%; flex: 0 0 33.3333%; /* ... */ } .home-page-card, .home-page-card-2 { width: 100%; height: 120px !important; /* Fixed card height */ min-height: 120px !important; max-height: 120px !important; margin-bottom: 0.5rem; padding: 0.5rem !important; font-size: 0.95rem !important; display: flex; flex-direction: column; align-items: center; justify-content: center; } .card-icon { height: 48px !important; width: 48px !important; margin-bottom: 8px !important; } .card-title { font-size: 0.95rem !important; left: 16px !important; bottom: 8px !important; position: static !important; margin-top: 4px; } .next-icon, .next-icon-2 { width: 20px !important; height: 20px !important; font-size: 1rem !important; top: 8px !important; right: 8px !important; bottom: 8px !important; } } /* Ensure select product suit cards are not clipped on mobile */ @media (max-width: 767.98px) { #select_product_app .home-page-card, #select_product_app .home-page-card-2 { height: auto !important; min-height: 110px !important; max-height: none !important; } } /* Select product page: layout suit cards nicely on mobile */ @media (max-width: 767.98px) { #select_product_app .home-page-sm { display: flex !important; flex-wrap: wrap; flex-direction: row !important; justify-content: center; gap: 0.75rem; } #select_product_app .home-page-sm > div[class^="col-"] { width: 50% !important; max-width: 200px; flex: 0 0 50%; padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 0.75rem; } #select_product_app .home-page-card { width: 100%; margin: 0 auto; } /* Center the "Select a Product" heading on this page */ #select_product_app .welcome-text, #select_product_app .welcome-text h2 { text-align: center !important; padding-left: 0; padding-right: 0; } } /* Select product page: ensure container is tall enough on mobile */ @media (max-width: 767.98px) { #select_product_app .scrollable-nav-container-none { min-height: 100vh; padding-bottom: 4.5rem; /* room above bottom nav */ } } @media (max-width: 767.98px) { .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { width: 100% !important; padding-right: var(--bs-gutter-x, 0.75rem 12px) !important; padding-left: var(--bs-gutter-x, 0.75rem) !important; margin-right: auto !important; margin-left: auto !important; } } @media (max-width: 767.98px) { .welcome-text { text-align: center !important; margin-top: 1rem; margin-bottom: 1rem; padding-left: 1rem; padding-right: 6rem; } .welcome-text h2 { font-size: 1.3rem; line-height: 1.5; /* Add more vertical spacing */ letter-spacing: 0.02em; /* Optional: add a bit of spacing between letters */ } } @media (max-width: 767.98px) { .welcome-text { text-align: center !important; font-size: 1.1rem !important; margin-top: 1rem; margin-bottom: 1rem; padding-left: 1rem; padding-right: 1rem; line-height: 1.4; } .welcome-text h4 { font-size: 1.1rem !important; line-height: 1.3; } .progress-bars { display: flex; justify-content: center; gap: 6px; margin-top: 1rem; margin-bottom: 1rem; } .progress-bars .bar { width: 18px; height: 8px; border-radius: 4px; margin: 0 2px; } .pricing-card { padding: 0.8rem 0.5rem; font-size: 0.95rem; border-radius: 12px; margin-bottom: 1rem; } .pricing-type.annual { font-size: 1rem; } .price { font-size: 1.1rem; font-weight: bold; margin-bottom: 0.5rem; } .feature-list { padding-left: 1rem; font-size: 0.92rem; } .btn-subscribe.subscription-plan { font-size: 0.95rem; padding: 0.4rem 0.8rem; width: 100%; margin-top: 0.5rem; } /* .container, .container-fluid { padding-left: 0.5rem !important; padding-right: 1.5rem !important; } */ .container, .container-fluid { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .container-suits, .container-fluid-suits { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .text-center { text-align: center !important; } } @media (max-width: 767.98px) { .pricing-card { padding: 0.6rem 0.4rem; font-size: 0.85rem; border-radius: 10px; margin-bottom: 0.7rem; } .pricing-type.annual { font-size: 0.92rem; } .price { font-size: 1rem; font-weight: bold; margin-bottom: 0.3rem; } .feature-list { padding-left: 0.8rem; font-size: 0.82rem; } } @media (max-width: 767.98px) { .btn-subscribe.subscription-plan { font-size: 0.75rem !important; width: 40% !important; margin-left: auto !important; margin-right: auto !important; display: block !important; text-align: center !important; padding: 0.3rem 0.5rem !important; } } @media (max-width: 768px) { .text-center button { margin-bottom: 10px; width: 48%; } } @media (max-width: 767.98px) { .container-lg, .container-md, .container-sm, .container-xl { width: 403px !important; padding-right: var(--bs-gutter-x, 4.75rem) !important; padding-left: var(--bs-gutter-x, -1.25rem) !important; margin-right: auto !important; margin-left: auto !important; } body, html { overflow-x: hidden !important; } } /* Make home-page cards and text left-aligned and more compact on mobile */ @media (max-width: 767.98px) { .home-page .row { justify-content: flex-start !important; gap: 0.5rem; } .home-page .col-md-3 { max-width: 95% !important; flex: 0 0 95% !important; margin-left: 0 !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } .home-page-card, .home-page-card-2 { width: 100% !important; max-width: 320px !important; margin-left: 19px !important; margin-right: auto !important; height: auto !important; padding: 0.7rem 0.5rem !important; font-size: 1rem !important; align-items: flex-start !important; text-align: left !important; } .info-row { display: flex; margin-bottom: 8px; font-size: 14px; line-height: 1.5; } .card-title { font-size: 1rem !important; left: 0 !important; right: auto !important; text-align: left !important; position: static !important; margin-top: 8px; margin-bottom: 0; } .device-mockup { margin: 1.5rem 0 0 0 !important; text-align: left !important; } .container.home-page { padding: 0 !important; } } .clickable-subject { cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .clickable-subject:hover { transform: scale(1.02); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); } .clickable-icon { position: absolute; bottom: 0; right: 0; margin: 8px; font-size: 20px; color: white; opacity: 0.8; transition: opacity 0.2s; } .clickable-subject:hover .clickable-icon { opacity: 1; } @media (max-width: 576px) { .small-card, .stats-card { border-radius: 10px; padding: 0.25rem !important; font-size: 0.75rem !important; min-width: 80px; max-width: 293px; min-height: 50px; max-height: 110px; width: auto; height: 100%; text-align: center; word-break: break-word; margin-left: 0.75rem !important; margin-right: 0.75rem !important; display: flex; flex-direction: column; align-items: center; justify-content: center; } .stats-card .card-title, .small-card .card-title { font-size: 0.85em !important; margin-bottom: 0.3em; text-align: center; word-break: break-word; } .stats-card .list-group-item, .small-card .list-group-item { font-size: 0.75em !important; padding: 0.15em 0.2em !important; gap: 0.3em; text-align: center; word-break: break-word; display: flex; justify-content: space-between; align-items: center; } .stats-card .badge, .small-card .badge { font-size: 0.75em !important; padding: 0.1em 0.4em !important; word-break: break-word; } .dashboard-welcome { font-size: 1rem !important; text-align: center !important; } .performance-dashboard, .performance-dashboard .row { justify-content: center !important; align-items: center !important; text-align: center !important; } .program .stats-card { min-width: 150px; min-height: 100px; border-radius: 30px; } } .subject-grid { display: flex !important; flex-wrap: wrap !important; overflow-x: unset !important; white-space: normal !important; } .subject-grid .col-md-6 { display:block; } .preview-section { position: sticky; top: 20px; height: fit-content; align-self: flex-start; /* Align to top within grid */ } /* Code Editor Preview Specific Styles (for the right panel) */ .code-editor-preview { background: #f1f3f5; border: 2px solid #dee2e6; border-radius: 8px; padding: 15px; font-family: 'Courier New', monospace; font-size: 0.9rem; color: #495057; margin: 15px 0; display: flex; /* Use flexbox for line numbers and code content */ align-items: baseline; /* Align content to the top baseline */ overflow-x: auto; /* Allow horizontal scrolling for long lines */ max-height: 300px; /* Limit height and allow vertical scrolling */ overflow-y: auto; } .code-editor-preview .line-numbers { color: #6c757d; margin-right: 15px; user-select: none; flex-shrink: 0; /* Prevent line numbers from shrinking */ text-align: right; white-space: pre; /* Preserve whitespace and line breaks for numbers */ padding-right: 5px; /* Small padding for separation */ border-right: 1px solid #e9ecef; /* Visual separator */ } .code-editor-preview .code-content { flex-grow: 1; /* Allow code content to take remaining space */ white-space: pre-wrap; /* Preserve whitespace and wrap lines */ word-break: break-word; /* Break long words to prevent overflow */ } /* Starter Code Input Editor Styles (for the left panel) */ .starter-code-editor-container { position: relative; display: flex; border: 2px solid #e9ecef; /* Match form control border */ border-radius: 8px; /* Match form control border-radius */ overflow: hidden; /* Hide overflow for scroll sync */ background: white; /* Match form control background */ transition: all 0.3s ease; /* Add transition for consistency */ min-height: 150px; /* Ensure a minimum height for the editor */ } .starter-code-editor-container:focus-within { border-color: #667eea; /* Custom focus color */ box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25); /* Custom focus shadow */ transform: translateY(-2px); /* Slight lift on focus */ } .starter-code-editor-container .line-numbers-input { flex-shrink: 0; width: 40px; /* Fixed width for line numbers */ padding: 12px 0; /* Match textarea vertical padding */ text-align: right; color: #6c757d; background-color: #f8f9fa; /* Light background for line numbers */ border-right: 1px solid #e9ecef; user-select: none; overflow: hidden; /* Hide scrollbar for line numbers */ font-family: 'Courier New', monospace; font-size: 0.9rem; line-height: 1.5; /* Match textarea line-height */ } .starter-code-editor-container textarea { flex-grow: 1; border: none; /* Remove default textarea border */ outline: none; /* Remove default textarea outline */ resize: none; /* Disable textarea resize */ padding: 12px 16px; /* Match form control padding */ font-family: 'Courier New', monospace; font-size: 0.9rem; line-height: 1.5; /* Ensure line height matches line numbers */ background: transparent; /* Transparent background to show container background */ overflow-y: auto; /* Enable scrolling for the textarea */ } /* Modal Styles - Adapted for Bootstrap look */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1050; /* Higher than Bootstrap's default modal-backdrop */ backdrop-filter: blur(1px); } .custom-modal-content { background: white; padding: 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); width: 95%; max-width: 900px; text-align: left; position: relative; transform: translateY(-20px); opacity: 0; animation: modal-fade-in 0.3s forwards; } @keyframes modal-fade-in { to { transform: translateY(0); opacity: 1; } } /* Loading indicator */ .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); display: flex; justify-content: center; align-items: center; z-index: 1060; /* Above modal */ font-size: 1.5rem; color: #667eea; backdrop-filter: blur(3px); } .curriculum-content-list .list-group-item, .challenge-list .list-group-item { cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; border-radius: 8px; margin-bottom: 8px; } .curriculum-content-list .list-group-item:hover, .challenge-list .list-group-item:hover { background-color: #e2f0ff; transform: translateY(-2px); } .curriculum-content-list .list-group-item.active, .challenge-list .list-group-item.active { background-color: #4facfe; border-color: #4facfe; color: white; font-weight: bold; } .code-editor-container { position: relative; display: flex; border: 2px solid #ced4da; border-radius: 8px; overflow: hidden; background: white; min-height: 300px; /* Min height for editor */ height: 100%; /* Make it fill parent height */ resize: vertical; /* Allow vertical resizing */ } .code-editor-container .line-numbers-editor { flex-shrink: 0; width: 40px; padding: 12px 0; text-align: right; color: #6c757d; background-color: #f8f9fa; border-right: 1px solid #e9ecef; user-select: none; overflow: hidden; font-family: 'Courier New', monospace; font-size: 0.9rem; line-height: 1.5; } .code-editor-container textarea { flex-grow: 1; border: none; outline: none; resize: none; padding: 12px 16px; font-family: 'Courier New', monospace; font-size: 0.9rem; line-height: 1.5; background: transparent; overflow-y: auto; } .live-preview-iframe { width: 100%; height: 100%; /* Make it fill parent height */ border: 2px solid #ced4da; border-radius: 8px; background-color: white; } /* New style for the row containing editor and preview */ .editor-preview-row { min-height: 450px; /* Ensure enough vertical space for side-by-side */ display: flex; flex-wrap: wrap; /* Allow wrapping on smaller screens */ } .CodeMirror-gutters { border-right: 1px solid #ddd; background-color: #f8f9fa; } .input-group .btn { z-index: 0; } .school_level_container{ width: 80%; padding-right: var(--bs-gutter-x, .75rem); padding-left: var(--bs-gutter-x, .75rem); margin-right: auto; margin-left: auto; } .folder-tile { position: relative; min-height: 110px; width: 100%; border: 1px solid #dee2e6; padding: 1rem; background: #e9ecef; border-radius: 0.25rem; } .folder-name-top-left { position: absolute; top: 1rem; left: 1rem; text-align: left; font-weight: bold; margin-bottom: 0.5rem; z-index: 2; background: transparent; padding-right: 1rem; } .folder-add-btn { position: relative; top: 1rem; right: 1rem; z-index: 2; background:linear-gradient(135deg, #667eea 0%, #764ba2 100%) } .folder-files-center { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80px; height: 100%; width: 100%; text-align: center; position: relative; z-index: 1; } .btn-link { font-weight: 400; color: #fff; text-decoration: none; } .subject-tick-icon { position: absolute; top: 8px; right: 12px; font-size: 1.4em; color: white; z-index: 2; pointer-events: none; } .learner-subject-badge { font-size: 0.95em; padding: 0.7em 1.5em 0.7em 0.8em; border-radius: 20px; margin-bottom: 8px; } /* create new container style width */ .subject-tile-container { width: 100%; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f8f9fa; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .child-subjects-tile-flex { max-height: 600px; overflow-y: auto; margin-top: 20px; } .top-lebel-badge { position: absolute; top: 12px; right: 12px; } .scrollable-list-icon { overflow-y: auto; } .course_img { height: 100%; object-fit: cover; } @media (max-width: 767.98px) { .terms-sidebar, .weeks-sidebar { display: none !important; /* Hide sidebars on mobile, show via offcanvas */ width: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; } .main-content-timeline { padding: 8px !important; border-radius: 8px !important; } /* If using offcanvas, Vue/Bootstrap will handle sidebar display */ } @media (max-width: 767.98px) { .terms-sidebar, .weeks-sidebar { display: none !important; } /* Offcanvas handled by Bootstrap/Vue, appears on top */ } .responsive-modules-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; align-items: stretch; } @media (max-width: 768px) { .responsive-modules-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .topic-subject-card { margin-bottom: 1rem; } .module-title, .module-count, .progress-circle { font-size: 0.95rem; } } @media (max-width: 480px) { .responsive-modules-grid { grid-template-columns: 1fr; gap: 0.5rem; } .topic-subject-card { padding: 0.5rem; } .module-title, .module-count, .progress-circle { font-size: 0.9rem; } } /* Desktop: 5 columns, good spacing */ .topic-subject-card .modules-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; height: 100%; } /* Tablet: 2 columns */ @media (max-width: 900px) { .topic-subject-card .modules-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } /* Mobile: 1 column, compact, stacked */ @media (max-width: 600px) { .topic-subject-card { padding: 10px !important; height: auto !important; min-height: unset !important; margin-bottom: 10px !important; } .topic-subject-card .modules-grid { grid-template-columns: 1fr; gap: 8px; } .topic-subject-card .module { min-height: 60px; padding: 10px 8px; font-size: 0.95em; } .topic-subject-card .module-title { font-size: 1em; margin-bottom: 4px; } .topic-subject-card .module-count { font-size: 0.95em; } .topic-subject-card .progress-circle { width: 34px; height: 32px; font-size: 0.9em; } .topic-subject-card .module-icon { width: 22px; height: 22px; margin-bottom: 4px; font-size: 1em; } .topic-subject-card .module h5.small { font-size: 1em; margin-bottom: 2px; word-break: break-word; -webkit-line-clamp: 2; line-clamp: 2; } } .btn-xs-custom { padding: 0.25rem 0.5rem !important; font-size: 0.75rem !important; line-height: 1.2 !important; border-radius: 0.2rem !important; } @media (max-width: 768px) { .btn-xs-custom { min-width: 64px; } } .sidebar-toggle-btn { z-index: 1001; } .sidebar-toggle-btn-desktop { position: absolute; top: 0; right: 0; margin-top: 1rem; margin-right: 1rem; } .flashcard-modal-sidebar-main-sub-topic.mobile-sidebar { z-index: 1000; background: white; position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; max-width: 100vw; overflow-y: auto; box-shadow: 2px 0 8px rgba(0,0,0,0.1); border: none !important; } .flashcard-modal-sidebar-main-sub-topic.mobile-sidebar .card { border: none !important; box-shadow: none !important; } .sidebar-close-btn { position: absolute; top: 10px; right: 10px; border: none !important; background: transparent !important; z-index: 1100; box-shadow: none !important; } .btn-xs-custom { padding: 0.25rem 0.5rem !important; font-size: 0.75rem !important; line-height: 1.2 !important; border-radius: 0.2rem !important; } .hide-on-mobile { display: none !important; } @media (min-width: 769px) { .hide-on-mobile { display: block !important; } } @media (max-width: 991.98px) { .profile-tabs-sidebar { flex-direction: row !important; width: 100% !important; margin-bottom: 1rem; margin-right: 0 !important; } .profile-tabs-sidebar ul { flex-direction: row !important; width: 100% !important; } .profile-tabs-sidebar .nav-item { width: 100% !important; margin-bottom: 0.5rem !important; margin-right: 0.5rem !important; } .profile-main-card-content { width: 100% !important; max-width: 100% !important; } .container.d-flex.flex-column.align-items-center.justify-content-center.py-4 { padding: 0.5rem !important; } } @media (max-width: 767.98px) { .profile-tabs-sidebar { flex-direction: row !important; width: 100% !important; margin-bottom: 1rem; margin-right: 0 !important; } .profile-tabs-sidebar ul { flex-direction: row !important; width: 100% !important; } .profile-tabs-sidebar .nav-item { width: 100% !important; margin-bottom: 0.5rem !important; margin-right: 0.5rem !important; } .profile-main-card-content { width: 100% !important; max-width: 100% !important; } .container.d-flex.flex-column.align-items-center.justify-content-center.py-4 { padding: 0.25rem !important; } } /* Tab button: increase width, decrease height */ .profile-tabs-sidebar .nav-link { min-width: 180px; width: 320px !important; min-height: 48px; height: 78px !important; font-size: 1.15rem !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; border-radius: 0.5rem !important; margin-bottom: 0.5rem !important; display: flex; align-items: center; gap: -1.25rem; } @media (max-width: 991.98px) { .profile-tabs-sidebar .nav-link { width: 100% !important; min-width: 0 !important; font-size: 1rem !important; height: 44px !important; min-height: 44px !important; padding: 0.4rem 0.5rem !important; } } @media (max-width: 767.98px) { .profile-tabs-sidebar .nav-link { width: 100% !important; min-width: 0 !important; font-size: 0.98rem !important; height: 40px !important; min-height: 40px !important; padding: 0.3rem 0.4rem !important; } } /* Responsive card widths */ .profile-main-card-content > div[class*="w-100"] { max-width: 900px; margin: 0 auto; } @media (max-width: 991.98px) { .profile-main-card-content > div[class*="w-100"] { max-width: 100% !important; margin: 0 !important; } } @media (max-width: 991.98px) { .profile-main-card-content { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex-grow: 1 !important; } .profile-main-card-content > div[class*="w-100"] { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } } /* Professional Dashboard Styles */ .dashboard { max-width: 2400px; margin: 0 auto; background: white; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); overflow: hidden; } .header { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: white; padding: 30px 40px; position: relative; overflow: hidden; } .header-content { position: relative; z-index: 2; } .student-name { font-size: 2.5rem; font-weight: 700; margin-bottom: 10px; text-shadow: 0 2px 4px rgba(0,0,0,0.3);} .last-updated { font-size: 1rem; opacity: 0.9; font-weight: 300;} .main-content { padding: 40px;} .overview-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; margin-bottom: 40px; } .overview-card { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-radius: 16px; padding: 25px; text-align: center; border: 1px solid #e2e8f0; transition: all 0.3s ease; position: relative; overflow: hidden; } .overview-card.excellent { --accent-color: #10b981; } .overview-card.good { --accent-color: #3b82f6; } .overview-card.needs-attention { --accent-color: #f59e0b; } .overview-card.critical { --accent-color: #ef4444; } .card-value { font-size: 2rem; font-weight: 700; color: #1e293b; margin-bottom: 5px;} .card-label { font-size: 0.85rem; color: #64748b;} .subjects-section { margin-top: 40px;} .section-title { font-size: 1.5rem; font-weight: 600; color: #1e293b; margin-bottom: 25px; display: flex; align-items: center; gap: 10px;} .section-icon { width: 24px; height: 24px; background: linear-gradient(135deg, #4f46e5, #7c3aed); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;} .subjects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 25px; } .subject-card { background: white; border-radius: 16px; padding: 25px; border: 1px solid #e2e8f0; transition: all 0.3s ease; position: relative; overflow: hidden; } .subject-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--progress-color); } .subject-header { display: flex; justify-content: between; align-items: flex-start; margin-bottom: 20px;} .subject-name { font-size: 1.1rem; font-weight: 600; color: black; margin-bottom: 5px;} .subject-status { padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;} .status-excellent { background: #d1fae5; color: #065f46;} .status-good { background: #dbeafe; color: #1e40af;} .status-attention { background: #fef3c7; color: #92400e;} .status-critical { background: #fee2e2; color: #991b1b;} .progress-container { margin: 20px 0;} .progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;} .progress-label { font-size: 0.9rem; color: #64748b; font-weight: 500;} .progress-percentage { font-size: 0.9rem; font-weight: 600; color: #1e293b;} .progress-section .progress-bar { width: 100%; height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden;} .progress-fill { height: 100%; border-radius: 4px; transition: width 0.8s ease; position: relative;} .skills-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px; margin-top: 20px; } .skill-item { text-align: center; padding: 12px; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0;} .skill-score { font-size: 1.5rem; font-weight: 700; margin-bottom: 5px;} .skill-name { font-size: 0.8rem; color: #64748b; font-weight: 500;} .last-activity { margin-top: 15px; padding-top: 15px; border-top: 1px solid #e2e8f0; font-size: 0.85rem; color: #64748b;} .export-section { margin-top: 40px; padding: 25px; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-radius: 16px; text-align: center;} .export-btn { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: white; border: none; padding: 12px 24px; border-radius: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin: 0 10px;} .export-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4);} @media (max-width: 768px) { .main-content { padding: 20px;} .header { padding: 20px;} .student-name { font-size: 2rem;} .subjects-grid { grid-template-columns: 1fr;} } .profile-tab-container { max-width: 900px; margin: 0 auto; width: 100%; } .subjects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 25px; margin-bottom: 40px; } @media (min-width: 1100px) { .subjects-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 700px) and (max-width: 1099px) { .subjects-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 699px) { .subjects-grid { grid-template-columns: 1fr; } } @media (max-width: 767.98px) { .dashboard { max-width: 95%; background: white; border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); overflow: hidden; padding-left: 0.75rem; margin-right: 3rem; padding-right: 0.75rem; } } /* Layout containers */ .parent-desktop-layout { min-height: 30vh; margin-top: 2rem; margin-bottom: 2rem; margin-left: 0.5rem; margin-right: 0.5rem; display: flex; } .parent-mobile-layout { margin-top: 1rem; padding-left: 0.25rem; padding-right: 1.25rem; } .parent-sidebar { width: 306px; min-width: 200px; } .parent-learner-list { gap: 1rem; } .parent-learner-card { cursor: pointer; } .parent-main-content { padding: 1rem; } .parent-top-subjects-list, .parent-attention-subjects-list { max-height: 72px; overflow-y: auto; } .parent-subject-cards-scroll { max-height: 520px; overflow-y: auto; } .parent-export-title { margin-bottom: 15px; color: #1e293b; } .bg-purple { background-color: #7B68EE !important; } @media (max-width: 767.98px) { .xsmall-card { font-size: 0.7rem !important; padding: 0.3rem 0.5rem !important; border-radius: 8px !important; min-height: 60px !important; height: auto !important; box-shadow: none !important; } .xsmall-text { font-size: 0.7rem !important; padding: 0.05rem !important; } .xsmall-bar { height: 0.25rem !important; } .export-btn.btn-sm { font-size: 0.8rem !important; padding: 0.15rem 0.4rem !important; margin-right: 0.1rem; } .progress-card.xsmall-card { padding: 0.5rem !important; margin-bottom: 0.5rem !important; box-shadow: none !important; width: 376px; right: 19px; } } /* Profile Dashboard Styles */ .profile-container { max-width: 2100px; margin: 0 auto; background: rgba(255,255,255,0.95); border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); overflow: hidden; min-height: 100vh; /* Increased height */ } .profile-header { background:var(--primary-color); color: white; padding: 0rem; text-align: center; position: relative; height: 50px; } .profile-header h1 { font-size: 2.5rem; margin-bottom: 0.5rem;} .profile-header p { font-size: 1.1rem; opacity: 0.9; } .profile-content { padding: 2rem; } .profile-tab-navigation { display: flex; background: #f8fafc; border-radius: 12px; padding: 6px; margin-bottom: 2rem; box-shadow: inset 0 2px 4px rgba(0,0,0,0.06); } .profile-tab-btn { flex: 1; padding: 12px 20px; background: none; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; color: #64748b; transition: all 0.3s ease; position: relative; } .profile-tab-btn.active { background: var(--primary-color); color: white; box-shadow: 0 4px 12px rgba(79,70,229,0.3); } .profile-tab-content { } .profile-profile-section { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; margin-bottom: 2rem; } .profile-profile-avatar { text-align: center; } .profile-avatar { width: 150px; height: 150px; border-radius: 50%; background: linear-gradient(135deg,#ff6b6b,#feca57); display: flex; align-items: center; justify-content: center; font-size: 3rem; color: white; margin: 0 auto 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.2); transition: transform 0.3s ease; } .profile-avatar:hover { transform: scale(1.05); } .profile-edit-btn { background: linear-gradient(135deg,#10b981 0%,#059669 100%); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; margin-top: 1rem; } .profile-edit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(16,185,129,0.3); } .profile-profile-info { background: #f8fafc; padding: 1.5rem; border-radius: 12px; border-left: 4px solid #4f46e5; } .profile-info-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid #e2e8f0; } .profile-info-row:last-child { border-bottom: none; } .profile-info-label { font-weight: 600; color: #374151; } .profile-info-value { color: #6b7280; } .profile-edit-profile-card { max-width: 600px; margin: 0 auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); margin-bottom: 2rem; } .profile-card-header { font-weight: bold; padding: 1rem 1.5rem; border-bottom: 1px solid #e2e8f0; } .profile-card-body { padding: 1.5rem; } .profile-row { display: flex; gap: 1rem; margin-bottom: 1rem; } .profile-col { flex: 1; } .profile-col-full { flex: 1 1 100%; } .profile-form-label { font-size: 0.95rem; } .profile-form-control { width: 100%; padding: 0.5rem; border-radius: 6px; border: 1px solid #e2e8f0; } .profile-is-invalid { border-color: #dc3545; } .profile-invalid-feedback { color: #dc3545; font-size: 0.85rem; } .profile-btn-save { background: linear-gradient(135deg,#10b981 0%,#059669 100%); color: white; border: none; padding: 0.5rem 1.2rem; border-radius: 8px; font-weight: 600; margin-right: 1rem; } .profile-btn-cancel { background: #e2e8f0; color: #374151; border: none; padding: 0.5rem 1.2rem; border-radius: 8px; font-weight: 600; } .profile-text-danger { color: #dc3545; } .profile-subscription-card { background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); color: white; padding: 2rem; border-radius: 16px; margin-bottom: 2rem; position: relative; overflow: hidden; } .profile-plan-name { font-size: 1.8rem; font-weight: 700; margin-bottom: 0.5rem; } .profile-plan-price { font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; } .profile-plan-price-unit { font-size: 1rem; opacity: 0.8; } .profile-plan-features { list-style: none; padding-left: 0; } .profile-plan-features li { padding: 0.5rem 0; position: relative; padding-left: 1.5rem; } .profile-plan-features li::before { content: 'âœ“'; position: absolute; left: 0; color: #10b981; font-weight: 800; } .profile-subscription-details { background: #f8fafc; padding: 1.5rem; border-radius: 12px; margin-top: 1rem; } .profile-payment-table { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.07); } .profile-table-header { background: #f8fafc; padding: 1rem; border-bottom: 2px solid #e2e8f0; font-weight: 600; color: #374151; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; } .profile-table-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; padding: 1rem; border-bottom: 1px solid #f1f5f9; transition: background 0.2s ease; } .profile-table-row:last-child { border-bottom: none; } .profile-status-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.875rem; font-weight: 600; } .profile-status-success { background: #dcfce7; color: #166534; } .profile-status-pending { background: #fef3c7; color: #92400e; } .profile-btn-download { color: #4f46e5; text-decoration: none; font-weight: 600; border: none; background: none; cursor: pointer; } .profile-plan-options { display: flex; gap: 2rem; flex-wrap: wrap; } .profile-plan-option { background: #fff; color: #374151; padding: 1.5rem; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); margin-bottom: 1rem; flex: 1 1 300px; border: 2px solid transparent; transition: border 0.2s; } .profile-plan-active { border-color: #4f46e5; } .profile-plan-option-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .profile-btn-subscribe { background: linear-gradient(135deg,#10b981 0%,#059669 100%); color: white; border: none; padding: 0.5rem 1.2rem; border-radius: 8px; font-weight: 600; margin-top: 1rem; } @media (max-width: 768px) { .profile-content { padding: 1rem; } .profile-tab-navigation { flex-direction: column; gap: 4px; padding: 4px; } .profile-tab-btn { padding: 14px 16px; font-size: 0.9rem; } .profile-profile-section { grid-template-columns: 1fr; gap: 1.5rem; } .profile-avatar { width: 120px; height: 120px; font-size: 2.5rem; } .profile-profile-info { padding: 1rem; } .profile-info-row { flex-direction: column; align-items: flex-start; padding: 1rem 0; gap: 0.3rem; } .profile-subscription-card { padding: 1.5rem; margin-bottom: 1.5rem; } .profile-plan-name { font-size: 1.5rem; } .profile-plan-price { font-size: 2rem; } .profile-plan-features { font-size: 0.9rem; } .profile-payment-table { border-radius: 8px; } .profile-table-header { display: none; } .profile-table-row { display: block; padding: 1.5rem 1rem; border-bottom: 1px solid #f1f5f9; background: white; margin-bottom: 8px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .profile-table-row > div { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #f1f5f9; } .profile-table-row > div:last-child { border-bottom: none; } .profile-table-row > div::before { content: attr(data-label); font-weight: 600; color: #6b7280; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; } } .btn-xs, .form-control-xs { padding: 0.15rem 0.5rem; font-size: 0.75rem; border-radius: 0.2rem; line-height: 1.2; } /* Extra small button style */ .btn-xs { font-size: 0.7rem !important; padding: 0.15rem 0.5rem !important; line-height: 1.1 !important; border-radius: 0.2rem !important; } /* Space below subjects list so button doesn't overlap */ .subjects-row { margin-bottom: 2.2rem; padding-right: 7rem; } /* Mobile adjustments */ @media (max-width: 767.98px) { .add-subject-btn-mobile { position: absolute; bottom: 12px; right: 9px; z-index: 2; font-size: 0.7rem !important; padding: 0.15rem 0.4rem !important; line-height: 1.1 !important; border-radius: 0.2rem !important; width: 66px; } .subjects-row-mobile { margin-bottom: 2.2rem; padding-right: 5.5rem; } } .add-subjects-back-btn { font-size: 1.25rem; } .add-subjects-title-desktop { font-size: 1.25rem; } .add-subjects-search-group { max-width: 300px; } .subject-name-desktop { padding: 1rem; } .add-subjects-back-btn-mobile { font-size: 1rem; } .add-subjects-title-mobile { font-size: 1rem; } .add-subjects-mobile-container { padding: 0; margin: 0; } .add-subjects-learner-mobile { margin: 0 4px 8px 4px; } .avatar-mobile { font-size: 0.85rem; width: 32px; height: 32px; } .avatar-label-mobile { font-size: 0.85rem; } .learner-name-mobile { font-size: 0.75rem; white-space: nowrap; } .add-subjects-search-mobile { font-size: 0.85rem; padding: 0 8px; } .add-subjects-search-group-mobile { max-width: 110px; } .add-subjects-tile-mobile { padding: 0 4px; } .add-subjects-col-mobile { padding-left: 2px; padding-right: 2px; } .subject-mobile { min-height: 38px; font-size: 0.72rem; padding: 0.25rem 0.2rem; border-radius: 8px; margin-bottom: 4px; overflow: hidden; width: 100%; } .subject-tick-mobile { top: 2px; right: 2px; font-size: 0.75rem; } .subject-name-mobile { font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0; } .add-subjects-content-btn { font-size: 0.8rem; padding: 2px 8px; } .add-subjects-next-btn-mobile button { font-size: 0.8rem; padding: 2px 18px; } /* Desktop */ .subject-desktop { cursor: pointer; } .subject-name-desktop { padding: 1rem; } .folder-name-desktop { margin-right: 1.5rem; } .folder-add-btn-desktop { font-size: 0.85rem; min-width: 32px; min-height: 24px; line-height: 1; margin-left: auto; } /* Mobile */ .content-back-btn-mobile { font-size: 1rem; } .content-title-mobile { font-size: 1rem; } .avatar-mobile { width: 32px; height: 32px; font-size: 0.85rem; } .learner-name-mobile { font-size: 0.75rem; white-space: nowrap; } .content-alert-mobile { font-size: 0.9rem; } .content-subjects-mobile { padding: 0 2px; } .content-col-mobile { padding-left: 2px; padding-right: 2px; } .subject-mobile { min-height: 38px; font-size: 0.72rem; padding: 0.25rem 0.2rem; border-radius: 8px; margin-bottom: 4px; overflow: hidden; width: 100%; } .subject-tick-mobile { top: 2px; right: 2px; font-size: 0.75rem; } .subject-name-mobile { font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0; } .folder-tile-mobile { padding: 0.5rem 0.7rem; } .folder-name-mobile { margin-right: 1.2rem; font-size: 0.68rem; max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .folder-add-btn-mobile-wrapper { position: relative; flex: 1; margin-top: -13px;padding-left: 42px; } .folder-add-btn-mobile { position: absolute; top: 0; right: 0; font-size: 0.7rem; min-width: 24px; min-height: 20px; line-height: 1; } .folder-files-center-mobile { font-size: 0.85rem; } .content-no-folder-mobile { font-size: 0.9rem; } .next-btn-mobile { font-size: 0.85rem; padding: 2px 18px; } .custom-modal-height { min-height: 85vh; } @media (max-width: 768px) { .btn-mobile { width: 37% 194.531px ; } } /* Mobile Subscription Section Styles */ .mobile-title { font-size: 1.5rem; } .mobile-subtitle { font-size: 0.5rem; } .mobile-arrow-btn { font-size: 0.45rem; padding: 0.04rem 0.09rem; } .mobile-alert { font-size: 0.5rem; width: 100%; box-sizing: border-box; text-align: left; } .mobile-pricing-card { font-size: 0.3rem; min-height: 20px; box-sizing: border-box; } .mobile-plan-name { font-size: 0.30rem; } .mobile-plan-price { font-size: 0.5rem; } .mobile-feature-list { padding-left: 0.1rem; margin-bottom: 0.08rem; } .mobile-feature-list li { font-size: 0.55rem; } .mobile-subscribe-btn { font-size: 0.65rem; padding: 0.2rem 0.5rem; min-height: 1.0em; border-radius: 8px; margin-top: 0.2rem; } .mobile-next-btn { font-size: 0.5rem; padding: 0.04rem 0.12rem; min-height: 1.5rem; } .subscription-card-colored { background: linear-gradient(135deg, #7B68EE 0%, #A084E8 100%); color: #fff; border-radius: 1rem; transition: box-shadow 0.2s, border 0.2s; } .subscription-card-monthly { background: var(--secondary-color); } .subscription-card-annual { background: var(--secondary-color); } .profile-plan-active { border: 2px solid #6c63ff !important; box-shadow: 0 0 0 2px #a084e8; } /* Desktop Card */ .custom-desktop-card { cursor: pointer; margin-bottom: 16px; border-radius: 10px; border: 1px solid #e0e0e0; box-shadow: 0 2px 8px rgba(0,0,0,0.03); transition: box-shadow 0.2s, border-color 0.2s; background: #fff; } .custom-desktop-card-hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); border-color: #b3d4fc; } .subtopic-title { font-weight: 600; } .module-title-desktop { font-size: 1rem; } .module-count-desktop { font-size: 0.95rem; } .notes-icon { color: #1976d2; } .quiz-icon { color: #ff9800; } .assessment-icon { color: #43a047; } .progress-circle-desktop { background: #f5f5f5; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #1976d2; } /* Mobile Card */ .custom-mobile-card { padding: 8px; border-radius: 8px; border: 1px solid #eee; background:#d09eff; margin-bottom: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.03); cursor: pointer; } .subtopic-title-mobile { font-weight: 600; } .module-row-mobile { font-size: 0.97rem; } .notes-icon-mobile { color: #1976d2; } .quiz-icon-mobile { color: #ff9800; } .assessment-icon-mobile { color: #43a047; } .progress-icon-mobile { color: #1976d2; } .module-count-mobile { font-weight: 500; } .progress-mobile { font-weight: 600; } @media (max-width: 768px) { .modal-header { padding-left: 1rem !important; padding-right: 1rem !important; } .modal-header .modal-title { flex: 1 1 auto; text-align: left; } .modal-header .btn { margin-left: auto !important; } } /* Card gradients */ .card-gradient-green { background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%) !important; box-shadow: 0 8px 32px rgba(86, 171, 47, 0.15); border: none !important; } .card-gradient-blue { background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important; box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15); border: none !important; } .card-gradient-orange { background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%) !important; box-shadow: 0 8px 32px rgba(245, 158, 11, 0.15); border: none !important; } .card-gradient-red { background: linear-gradient(135deg, #FFA0AC 0%, #FF6B9D 100%) !important; box-shadow: 0 8px 32px rgba(255, 107, 107, 0.15); border: none !important; } /* Skill circle progress backgrounds */ .skill-item-mobile { background: rgba(255,255,255,0.15); border-radius: 12px; padding: 8px; flex: 1; min-width: 70px; text-align: center; backdrop-filter: blur(10px); margin-bottom: 4px; } .skill-progress-circle { width: 35px; height: 35px; border-radius: 50%; margin: 0 auto 4px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: #000; background: rgba(255,255,255,0.2); position: relative; } .circle-green { background: conic-gradient(#4ade80 0% 80%, rgba(255,255,255,0.2) 80% 100%); } .circle-blue { background: conic-gradient(#3b82f6 0% 60%, rgba(255,255,255,0.2) 60% 100%); } .circle-orange { background: conic-gradient(#f59e0b 0% 40%, rgba(255,255,255,0.2) 40% 100%); } .circle-red { background: conic-gradient(#ef4444 0% 20%, rgba(255,255,255,0.2) 20% 100%); } /* Card and button hover effects */ .progress-card.xsmall-card { border: none !important; border-radius: 16px !important; backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(0,0,0,0.1); } .skill-item-mobile:hover { transform: scale(1.05); transition: transform 0.2s ease; } .progress-card.xsmall-card button:hover { background: rgba(255,255,255,0.3) !important; transform: translateY(-1px); transition: all 0.2s ease; } .min-w-220 { min-width: 220px; } .subject-title-lg { font-size: 1.5rem; font-weight: 700; } .subject-title-mobile { color: #000; font-weight: 700; font-size: 1.25rem; } .subject-status-mobile { background: rgba(251,15,15,0.2); color: #000; padding: 2px 6px; border-radius: 8px; font-size: 0.6rem; } .subject-label-mobile { color: rgba(255,255,255,0.8); font-size: 0.9rem; } .subject-progress-mobile { color: #000; font-weight: 600; font-size: 1.1rem; } .skill-name-mobile { font-size: 0.6rem; color: #212529;; } .subject-last-activity-mobile { font-size: 0.65rem; color: #64748b; } .subject-btn-mobile { font-size: 0.8rem; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); color: white; border-radius: 20px; backdrop-filter: blur(10px); font-weight: 600; padding: 8px 16px; } .xsmall-bar { background: rgba(255,255,255,0.2); height: 6px; border-radius: 3px; } .list-disc { list-style: disc; } @media (min-width: 768px) { .overview-cards.d-md-flex { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 25px !important; width: 100%; } .overview-card { min-width: 0 !important; width: 100% !important; height: 100% !important; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; } } .overview-card { min-height: 180px; } /* Make the profile card bigger on mobile */ @media (max-width: 767.98px) { .mobile-container .profile-card-mobile { min-height: 220px; font-size: 1.2rem; padding: 2rem 1rem; } } .overall-card { background: linear-gradient(135deg, var(--homepage-card-color-1), var(--homepage-card-color-2)); color: #fff; border-radius: 30px; padding: 20px; position: relative; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; } .overall-card h1 { font-size: 25px; font-weight: bold; margin: 0; text-align: end; } .overall-card p { font-size: 15px; margin: 0; position: absolute; bottom: 20px; left: 20px; } .hide-survey-scrollbar::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .hide-survey-scrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .learning-header-card { background: white; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); border: 1px solid #e2e8f0; overflow: hidden; position: relative; } .header-gradient { height: 4px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .header-content { padding: 24px; text-align: center; } .header-title { font-size: 1.5rem; font-weight: 700; color: #1a202c; margin-bottom: 8px; letter-spacing: -0.5px; } .header-subtitle { color: #718096; margin-bottom: 0; font-size: 0.95rem; line-height: 1.5; } .modern-alert { border: none; border-radius: 12px; padding: 20px; display: flex; align-items: center; gap: 16px; background: #fef5e7; border-left: 4px solid #f6ad55; } .alert-content strong { display: block; color: #c05621; margin-bottom: 4px; } .alert-content p { color: #744210; font-size: 0.9rem; } .modern-close { background: none; border: none; font-size: 1.2rem; opacity: 0.6; transition: opacity 0.3s ease; } .modern-close:hover { opacity: 1; } .subject-card-modern { background: white; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); border: 1px solid #e2e8f0; overflow: hidden; transition: all 0.3s ease; position: relative; width: 95%; height: 100%; display: flex; flex-direction: column; right:11px; } .subject-card-modern:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.12); } .subject-header-modern { padding: 20px 20px 16px; position: relative; } .subject-name-modern { font-size: 1.2rem; font-weight: 600; color: #1a202c; margin: 0; flex-grow: 1; padding-right: 12px; } .subject-progress-badge { background: #f7fafc; color: #4a5568; padding: 6px 12px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; border: 1px solid #e2e8f0; } .status-badge-modern { padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .status-badge-modern.needs-attention { background: #fed7d7; color: #c53030; } .status-badge-modern.on-track { background: #c6f6d5; color: #38a169; } .status-badge-modern.completed { background: #bee3f8; color: #3182ce; } .skills-performance-grid { grid-template-columns: repeat(auto-fit, minmax(75px, 1fr)); gap: 5px; padding: 0 20px 20px; margin: 0 -1px; } .skill-performance-item { text-align: center; padding: 12px 8px; background: white; border-radius: 12px; transition: all 0.3s ease; border: 1px solid #e2e8f0; width: 90px; } .skill-performance-item:hover { background: #edf2f7; transform: translateY(-1px); } .skill-progress-circle-modern { width: 50px; height: 50px; border-radius: 50%; margin: 0 auto; position: relative; background: conic-gradient( var(--skill-color) 0deg calc(var(--progress) * 3.6deg), #e2e8f0 calc(var(--progress) * 3.6deg) 360deg ); padding: 3px; } .skill-progress-inner { width: 100%; height: 100%; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .skill-percentage { font-size: 0.75rem; font-weight: 600; color: #4a5568; } .skill-label-modern { font-size: 0.75rem; color: #718096; font-weight: 500; line-height: 1.2; } .subject-action-section { padding: 0 20px 20px; margin-top: auto; } .start-learning-btn-modern { width: 100%; background: var(--button-gradient); color: white; border: none; padding: 14px 20px; border-radius: 12px; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 10px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; gap: 8px; } .start-learning-btn-modern:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(0,0,0,0.15); } .start-learning-btn-modern:active { transform: translateY(0); } .btn-arrow { font-size: 1rem; transition: transform 0.3s ease; } .start-learning-btn-modern:hover .btn-arrow { transform: translateX(2px); } /* Skill-specific colors */ .skill-performance-item:nth-child(1) .skill-progress-circle-modern { --skill-color: #48bb78; } .skill-performance-item:nth-child(2) .skill-progress-circle-modern { --skill-color: #4299e1; } .skill-performance-item:nth-child(3) .skill-progress-circle-modern { --skill-color: #ed8936; } .skill-performance-item:nth-child(4) .skill-progress-circle-modern { --skill-color: #9f7aea; } .skill-performance-item:nth-child(5) .skill-progress-circle-modern { --skill-color: #38b2ac; } /* Responsive improvements */ @media (max-width: 576px) { .skills-performance-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; } .subject-name-modern { font-size: 1.1rem; } .header-title { font-size: 1.3rem; } } .progress-section { background: linear-gradient(135deg, #e1e0f5 0%, #e1e0f5 100%); border: 1px solid #0ea5e9; border-radius: 16px; padding: 24px; margin-bottom: 32px; } .progress-label { font-size: 16px; font-weight: 600; color: #0c4a6e; margin-bottom: 12px; } .subject-chip { background: #fff; color: #333; border-radius: 999px; padding: 0.4rem 1.1rem; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease-in-out; border: 1px solid #e0e0e0; } .subject-chip.active { background-color: #b090f9; color: #fff; font-weight: 500; } .card-top-strip { height: 6px; /* or 4px if you prefer thinner */ width: 100%; border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; } .navigation { background: white; padding: 16px; margin: 16px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); } .term-selector { display: flex; background: #f8f9fa; border-radius: 12px; padding: 4px; margin-bottom: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .term-btn { flex: 1; min-width: 80px; padding: 12px 16px; font-size: 14px; font-weight: 600; border: none; background: transparent; color: #666; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; } .term-btn.active { background: #667eea; color: white; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); } .weeks-container { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; padding-bottom: 8px; scroll-behavior: smooth; scrollbar-width: thin; /* For Firefox */ } .weeks-container::-webkit-scrollbar { height: 6px; } .weeks-container::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 3px; } .weeks-container::-webkit-scrollbar-track { background: transparent; } /* week button styling you already have */ .week-btn { padding: 6px 8px; border: 2px solid #e9ecef; border-radius: 12px; background: white; cursor: pointer; font-size: 14px; font-weight: 500; text-align: center; transition: all 0.3s ease; color: #333; position: relative; overflow: hidden; width: 100px; /* Adjust width as needed */ flex: 0 0 auto; /* Prevent shrinking and wrapping */ } .week-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s; } .week-btn:hover::before { left: 100%; } .week-btn:hover { border-color: #667eea; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.15); } .week-btn.active { background: linear-gradient(135deg, #667eea, #764ba2); border-color: #667eea; color: white; transform: translateY(1px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); } .card { border-radius: 1rem; } .add-learner-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3); padding: 0.6rem 1rem; border-radius: 12px; font-weight: 600; cursor: pointer; } .learners-grid { display: grid; gap: 1.5rem; margin-bottom: 2rem; } .learners-grid .learner-card { background: #fff; backdrop-filter: blur(20px); border-radius: 12px; padding: 1.5rem; border: 2px solid rgba(0, 0, 0, 0.1); transition: all 0.3s ease; position: relative; overflow: hidden; } .learners-grid .learner-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .grade-badge { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; } .subject-tag { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 500; transition: all 0.3s ease; cursor: pointer; } .add-subscription-btn { background: #f8f9fa; border: 1px solid rgba(102, 126, 234, 0.3); padding: 0.5rem 1rem; border-radius: 8px; color: #667eea; font-weight: 500; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; white-space: nowrap; } .add-subscription-btn:hover { transform: translateY(-1px); } .search-limit { max-width: 400px; } @media (max-width: 768px) { .learner-subject { max-width: 95%; } } .list-group-item.disabled { opacity: 0.6; cursor: not-allowed; } .list-group-item.completed { border-left: 4px solid #28a745; } .list-group-item.locked { border-left: 4px solid #6c757d; } .topic-card { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border-radius: 20px; padding: 24px; margin-bottom: 20px; border: 2px solid transparent; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; overflow: hidden; } .topic-card.completed { background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%); border-color: #10b981; } .topic-card.completed:hover { box-shadow: 0 20px 40px rgba(16, 185, 129, 0.2); } .topic-card.in-progress { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border-color: #f59e0b; } .topic-card.in-progress:hover { box-shadow: 0 20px 40px rgba(245, 158, 11, 0.2); } .topic-card.not-started { background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); border-color: #6b7280; } .topic-card .topic-title { font-size: 18px; font-weight: 700; color: #1f2937; flex-grow: 1; line-height: 1.3; } .status-badge { padding: 6px 16px; border-radius: 25px; font-size: 12px; font-weight: 700; margin-left: 16px; white-space: nowrap; backdrop-filter: blur(10px); } .status-badge.completed { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); color: white; box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3); } .status-badge.in-progress { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); color: white; box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3); } .status-badge.not-started { background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%); color: white; box-shadow: 0 4px 8px rgba(107, 114, 128, 0.3); } .topic-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 20px; } .stat-icon { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: white; box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .stat-icon.notes { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); } .stat-icon.quizzes { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); } .stat-icon.assessments { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); } .topic-progress-fill.completed { background: linear-gradient(90deg, #10b981 0%, #34d399 100%); } .topic-progress-fill.in-progress { background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%); } .topic-progress-fill.not-started { background: linear-gradient(90deg, #9ca3af 0%, #d1d5db 100%); } .topic-progress-fill::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: shimmer 2s infinite; } .topic-progress-text { font-size: 14px; font-weight: 700; color: #374151; min-width: 40px; } .topic-progress { display: flex; align-items: center; gap: 16px; } .topic-progress-bar { flex-grow: 1; background: #e5e7eb; border-radius: 8px; height: 8px; overflow: hidden; } .topic-progress-fill { height: 100%; border-radius: 8px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .topic-progress-fill.completed { background: linear-gradient(90deg, #10b981 0%, #34d399 100%); } .topic-progress-fill.in-progress { background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%); } .topic-progress-fill.not-started { background: linear-gradient(90deg, #9ca3af 0%, #d1d5db 100%); } .topic-progress-fill::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: shimmer 2s infinite; } .topic-progress-text { font-size: 14px; font-weight: 700; color: #374151; min-width: 40px; } .custom-image-size { width: 100%; height: 280px; object-fit: contain; background: #f8f9fa; display: block; } .cart_image { width: 100%; height: 200px; /* set a fixed height */ object-fit: cover; background: #f8f9fa; display: block; } .step-card { background-color: #f9f9f9; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .step-circle { width: 20px; height: 20px; border-radius: 50%; background-color: #3498db; color: #fff; } .submitted-overlay { position: relative; } .submitted-overlay::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 128, 0, 0.2); /* green overlay with 20% opacity */ pointer-events: none; } /* User CRUD Vue */ .user-card { transition: all 0.3s ease; border: 1px solid #e0e0e0; } .user-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); transform: translateY(-2px); } .status-badge { font-size: 0.75rem; padding: 0.25rem 0.5rem; } .tab-button { border: none; background: none; padding: 0.5rem 1rem; border-radius: 0.25rem; transition: all 0.3s ease; } .tab-button.active { background-color: #007bff; color: white; } .tab-button:hover:not(.active) { background-color: #f8f9fa; } .assignment-section { border: 1px solid #dee2e6; border-radius: 0.375rem; padding: 1rem; margin-bottom: 1rem; } .assignment-item { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem; border: 1px solid #e9ecef; border-radius: 0.25rem; margin-bottom: 0.5rem; } .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid #f3f3f3; border-top: 3px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .search-box { border-radius: 20px; border: 1px solid #ddd; padding: 0.5rem 1rem; width: 300px; } .search-box:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); } /* Scrollable user types container */ .user-types-container { max-height: 200px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 0.375rem; background: #f8f9fa; position: relative; } .user-types-container::-webkit-scrollbar { width: 8px; } .user-types-container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } .user-types-container::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; } .user-types-container::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } .user-types-scroll-indicator { position: absolute; bottom: 0; left: 0; right: 0; height: 20px; background: linear-gradient(transparent, #f8f9fa); pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .user-types-container.has-scroll .user-types-scroll-indicator { opacity: 1; } .user-type-item { padding: 0.5rem 1rem; border-bottom: 1px solid #e9ecef; cursor: pointer; transition: background-color 0.2s ease; } .user-type-item:hover { background-color: #e9ecef; } .user-type-item.active { background-color: #007bff; color: white; } .user-type-item:last-child { border-bottom: none; } /* DataTable customizations */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { margin-bottom: 1rem; } .dataTables_wrapper .dataTables_info { margin-top: 1rem; } .dataTables_wrapper .dataTables_paginate { margin-top: 1rem; } /* The Manage Assessments tables (Teacher/Mentor embedded card and the admin standalone page share this markup) need the search bar attached to the table instead of the generic 1rem gap above, but still need a small buffer so the input isn't flush against the table header. */ #management_assessment_app [id$="_table_wrapper"] .dataTables_filter, #management_assessment_app [id$="_table_wrapper"] .dt-search { margin-bottom: 0.5rem !important; } #management_assessment_app [id$="_table_wrapper"] .table-responsive, #management_assessment_app [id$="_table_wrapper"] table.dataTable { margin-top: 0 !important; } /* The blanket ".table-responsive { overflow: visible !important; }" rule further down (added so row-action dropdown menus aren't clipped) also kills the horizontal scrollbar these Manage Assessments tables need -- wide tables (many columns, Action buttons) were overflowing their card with no way to reach the cut-off content. Restore scrolling on the wrapper itself, which still lets the "Enhanced dropdown overflow fixes" ".table-responsive" element stay overflow: visible above it. A matching, more detailed override already existed for mobile (max-width: 768px) further down -- this is the missing desktop/tablet counterpart. */ #management_assessment_app [id$="_table_wrapper"] { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Same fix as above for the Assessment Overview / Analysis table (#assessment_overview_table): its wrapper only had a mobile override (.learner-assessments-page .table-responsive, further down) restoring the scrollbar, so on desktop/tablet it fell back to the blanket overflow: visible !important rule and overflowed the card uncontained. */ #programme-assessments-analysis-pane .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Same fix as above for My Evaluations Assigned (#learner_evaluations_table, templates/skill_management/skill_tracker_management/learner_my_evaluations.html): its wrapper shares .learner-assessments-table-responsive with other pages, which already have a mobile-only override further down restoring the scrollbar. On desktop/tablet it fell back to the blanket overflow: visible !important rule too -- with the Name/Target/.../Action columns this table is wide enough to overflow its card with no way to reach the cut-off columns. Not Bootstrap's own .overflow-auto utility: bootstrap.min.css@5.0.2 loads before this stylesheet (templates/index/platform/platform_index.html), and more fundamentally, !important always wins over a non-important declaration for the same longhand regardless of selector specificity or source order -- overflow-x is one of the longhands "overflow: visible !important" expands to, so only another !important declaration for it can win at all; a plain utility class (or a non-important override, no matter how specific) cannot. Bootstrap 5.0.2 also has no axis-only overflow-x utility (added in 5.2), and no utility at all for -webkit-overflow-scrolling (a non-standard, WebKit-only property Bootstrap has never covered). Scoped with :has() (already used the same way further down in this file) so only this table's wrapper is affected -- every other .table-responsive on the site keeps the blanket rule's overflow: visible, needed there so row-action dropdown menus aren't clipped. */ .learner-assessments-page:has(#learner_evaluations_table) .learner-assessments-table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .user-actions-wrapper { display: flex; flex-direction: column; align-items: flex-end; width: 100%; min-width: 0; position: relative; overflow: visible; } /* Learner specialization toggle used by the Add Learners modal */ .learner-specialization-field { display: flex; flex-direction: column; gap: 0.35rem; } .learner-specialization-toggle-row { display: flex; align-items: center; gap: 0.55rem; flex-wrap: nowrap; } .learner-specialization-switch.form-check.form-switch { display: inline-flex; align-items: center; padding-left: 0; min-height: 0; margin: 0; } .learner-specialization-switch .form-check-input { width: 1.6rem; height: 0.9rem; margin: 0; cursor: pointer; background-color: #d7dbe7; border-color: #d7dbe7; box-shadow: none; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .learner-specialization-switch .form-check-input:checked { background-color: #4c1d95; border-color: #4c1d95; } .learner-specialization-switch .form-check-input:focus { border-color: #4c1d95; box-shadow: 0 0 0 0.15rem rgba(76, 29, 149, 0.15); } .learner-specialization-mode-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0.08rem; flex-wrap: nowrap; line-height: 1.05; min-width: 0; padding-top: 0.03rem; } .learner-specialization-mode-title { color: #2b233d; font-size: 0.82rem; font-weight: 700; white-space: nowrap; } .learner-specialization-mode-hint { color: #8c93a6; font-size: 0.72rem; white-space: nowrap; } /* ID/passport capture used by the Add Learner modal on programme pages. */ .programme-identity-field { display: flex; flex-direction: column; gap: 0.45rem; width: 100%; } .programme-identity-field .programme-identity-type, .programme-identity-field .programme-identity-value { min-height: 2.35rem; background-color: #fff; border: 1px solid #d8dce4; border-radius: 0.55rem; box-shadow: none; } .programme-identity-field .programme-identity-type { font-weight: 600; color: #2f3340; padding-left: 0.7rem; padding-right: 1.8rem; } .programme-identity-field .programme-identity-value { min-width: 0; padding-left: 0.75rem; } .programme-identity-field .programme-identity-type:focus, .programme-identity-field .programme-identity-value:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.16rem rgba(143, 70, 155, 0.14); } .programme-identity-field .programme-identity-value.is-invalid { padding-right: 0.75rem; } .programme-swal-loading { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; color: #4b5563; font-size: 0.98rem; line-height: 1.4; } .programme-swal-spinner { width: 2rem; height: 2rem; border: 0.22rem solid rgba(48, 128, 214, 0.18); border-top-color: #3080d6; border-radius: 50%; animation: programme-swal-spinner 0.8s linear infinite; flex: 0 0 auto; } @keyframes programme-swal-spinner { to { transform: rotate(360deg); } } /* Programme specialization header used by the Add Programme modal */ .programme-specialization-row { display: flex; flex-direction: column; gap: 0.35rem; } .programme-specialization-label { margin: 0; } .programme-specialization-toggle-line { display: flex; align-items: center; gap: 0.55rem; width: 100%; min-width: 0; } .programme-specialization-switch-copy { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; } .programme-specialization-optional { color: #dc3545; font-size: 0.72rem; line-height: 1; white-space: nowrap; } .programme-specialization-hint { margin: 0; } .programme-specialization-feedback { width: 100%; } .programme-specialization-existing { width: 100%; } .programme-specialization-create { width: 100%; } @media (max-width: 767.98px) { .learner-specialization-toggle-row { flex-wrap: wrap; } .learner-specialization-mode-title, .learner-specialization-mode-hint { white-space: normal; } .programme-specialization-toggle-line { flex-wrap: wrap; } } .user-actions-wrapper .manage-user-toggle { display: inline-flex; align-items: center; gap: 0.35rem; width: auto; min-width: 0; white-space: nowrap; } .manage-user-popover-wrapper.is-open { z-index: 5; } .manage-user-popover { position: absolute; top: auto; bottom: calc(100% + 0.45rem); right: 0; z-index: 10000; width: 12.75rem; max-width: calc(100vw - 1rem); overflow: visible; } .manage-user-popover .manage-user-action-panel { width: 100%; box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, 0.18); } .manage-user-action-panel { display: flex; flex-direction: column; gap: 0.35rem; background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%); border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 1.35rem; padding: 0.4rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); } .manage-user-action-btn { display: flex; align-items: center; gap: 0.75rem; width: 100%; border: 0; -webkit-appearance: none; appearance: none; background: transparent; padding: 0.7rem 0.85rem; border-radius: 0.85rem; text-align: left; color: #1f2937; font-weight: 600; font-size: 0.82rem; line-height: 1.25; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .manage-user-action-btn:hover, .manage-user-action-btn:focus { background: #f8fafc; color: #111827; } .manage-user-action-btn:focus-visible { outline: 2px solid rgb(13 110 253 / 22%); outline-offset: 2px; } .manage-user-action-btn i { display: inline-flex; align-items: center; justify-content: center; width: 1rem; flex: 0 0 1rem; font-size: 1rem; line-height: 1; } .manage-user-action-btn-edit i { color: #334155; } .manage-user-action-btn-profile i { color: #334155; } .manage-user-action-btn-assign i { color: #334155; } .manage-user-action-btn-toggle i { color: #334155; } .manage-user-action-btn-delete i { color: #dc3545; } .manage-user-action-btn.is-activate i { color: #334155; } .system-management-roles .manage-role-row-dropdown, .system-management-roles .manage-user-popover-wrapper, .system-management-roles .manage-assessment-row-dropdown { display: flex; flex-direction: column; align-items: flex-end; width: 100%; min-width: 0; position: relative; overflow: visible; } .system-management-roles .manage-role-actions-toggle, .system-management-roles .manage-assessment-actions-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; width: auto; min-width: 0; white-space: nowrap; line-height: 1; } .system-management-roles .manage-role-actions-menu, .system-management-roles .manage-assessment-actions-menu { position: absolute !important; top: auto !important; bottom: calc(100% + 0.45rem) !important; right: 0 !important; left: auto !important; z-index: 10000 !important; width: 12.75rem; min-width: 0 !important; max-width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); overflow: visible !important; padding: 0 !important; display: block !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin-top: 0 !important; transform: none !important; visibility: hidden; pointer-events: none; } .system-management-roles .manage-role-actions-menu.is-open, .system-management-roles .manage-assessment-actions-menu.is-open { visibility: visible; pointer-events: auto; } .system-management-roles .manage-role-row-dropdown.is-open, .system-management-roles .manage-user-popover-wrapper.is-open, .system-management-roles .manage-assessment-row-dropdown.is-open { z-index: 5; } .system-management-roles .manage-role-actions-menu[aria-hidden="true"], .system-management-roles .manage-assessment-actions-menu[aria-hidden="true"] { display: none !important; } .system-management-roles .manage-role-actions-menu .manage-user-action-panel, .system-management-roles .manage-assessment-actions-menu .manage-user-action-panel { width: 100%; box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, 0.18); } .system-management-roles .manage-role-menu-item.is-danger { color: #d14343; } .system-management-roles .manage-role-menu-item.is-danger:hover, .system-management-roles .manage-role-menu-item.is-danger:focus { background: #fff1f1; color: #b42318; } .programme-learner-manage-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; width: auto; min-width: 0; white-space: nowrap; line-height: 1; } .programme-learner-manage-toggle .programme-learner-manage-toggle-icon { transition: transform 0.18s ease; } .programme-learner-manage-toggle[aria-expanded="true"] .programme-learner-manage-toggle-icon { transform: rotate(180deg); } .programme-learner-manage-menu { position: fixed; z-index: 3000; /* Grow to the longest label (e.g. "Mark as submitted to SETA") instead of letting it run past the menu edge. */ width: max-content; min-width: min(14.5rem, calc(100vw - 1rem)); max-width: calc(100vw - 1rem); padding: 0.4rem; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 1rem; box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.16); overflow: visible; } .programme-learner-manage-menu::after { content: ""; position: absolute; left: var(--programme-learner-menu-arrow-left, 50%); width: 0.8rem; height: 0.8rem; background: #ffffff; transform: translateX(-50%) rotate(45deg); } .programme-learner-manage-menu[data-placement="top"]::after { bottom: -0.38rem; border-right: 1px solid rgba(15, 23, 42, 0.08); border-bottom: 1px solid rgba(15, 23, 42, 0.08); } .programme-learner-manage-menu[data-placement="bottom"]::after { top: -0.38rem; border-left: 1px solid rgba(15, 23, 42, 0.08); border-top: 1px solid rgba(15, 23, 42, 0.08); } .programme-learner-manage-menu .programme-learner-menu-item { display: flex; align-items: center; gap: 0.72rem; width: 100%; border: 0; -webkit-appearance: none; appearance: none; background: transparent; padding: 0.72rem 0.9rem; border-radius: 0.85rem; text-align: left; text-decoration: none; font-size: 0.84rem; font-weight: 600; line-height: 1.2; color: #334155; white-space: nowrap; transition: background-color 0.18s ease, color 0.18s ease; } .programme-learner-manage-menu .programme-learner-menu-item:hover, .programme-learner-manage-menu .programme-learner-menu-item:focus { background: #f3f6fb; color: #111827; outline: none; } .programme-learner-manage-menu .programme-learner-menu-item:focus-visible { box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.18); } .programme-learner-manage-menu .programme-learner-menu-item.is-danger { color: #dc3545; } .programme-learner-manage-menu .programme-learner-menu-item.is-danger:hover, .programme-learner-manage-menu .programme-learner-menu-item.is-danger:focus { background: rgba(220, 53, 69, 0.09); color: #b02a37; } .programme-learner-manage-menu .programme-learner-menu-item.is-success { color: #198754; } .programme-learner-manage-menu .programme-learner-menu-item.is-success:hover, .programme-learner-manage-menu .programme-learner-menu-item.is-success:focus { background: rgba(25, 135, 84, 0.09); color: #157347; } .programme-learner-manage-menu .programme-learner-menu-item.is-brand { color: #4f46e5; } .programme-learner-manage-menu .programme-learner-menu-item.is-brand:hover, .programme-learner-manage-menu .programme-learner-menu-item.is-brand:focus { background: rgba(79, 70, 229, 0.09); color: #4338ca; } .programme-learner-manage-menu .programme-learner-menu-icon { width: 1.15rem; flex: 0 0 1.15rem; text-align: center; font-size: 1rem; line-height: 1; } body.programme-management-content-page .programme-table-card, body.programme-management-content-page .programme-table-wrapper { overflow: visible; } body.programme-management-standalone-page.programme-management-content-page .programme-table-card, body.programme-management-standalone-page.programme-management-content-page .programme-table-wrapper { overflow: visible; } /* Unprefixed by design (not scoped to body.programme-management-content-page): .programme-learner-row-menu/-actions-cell/-manage-dropdown are specific enough names that nothing else in the codebase uses them, so this same "Manage X" row dropdown look is reusable on any page (e.g. manage_team.html) just by reusing these classes, without carrying the rest of that body class's page-wide styling along with it. */ .programme-learner-actions-cell { position: relative; overflow: visible; } .programme-learner-manage-dropdown { position: relative; z-index: 40; width: 100%; justify-content: flex-end; } .programme-learner-row-menu { width: 12.5rem; min-width: 12.5rem; max-width: min(12.5rem, calc(100vw - 1rem)); padding: 0.35rem; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 0.8rem; box-shadow: 0 0.85rem 2rem rgba(15, 23, 42, 0.16); overflow: hidden; z-index: 99999 !important; } /* Keep the team action labels on one line, including "Add existing programme learners". */ .programme-teams-table .programme-learner-row-menu { width: 24rem; min-width: 24rem; max-width: min(24rem, calc(100vw - 1rem)); } /* The toolbar's own "{{ learner_plural }} Actions" dropdown (e.g. "Team Actions") had no z-index of its own outside the mobile layout below, so it only had Bootstrap's default dropdown z-index to fall back on -- lower than the per-row "Manage" toggles' menu just above, which is why the toolbar menu could render underneath a row's Manage button. Matching the same z-index those row menus already use keeps it on top regardless of stacking context inside the table. */ .programme-learner-actions-dropdown { position: relative; z-index: 40; } .programme-learner-actions-menu { z-index: 99999 !important; } /* programme_management_content.html "{{ learner_plural }} Actions" toggle: keep the standard themed btn-outline-primary look in every state. The theme only recolours :hover/:focus, so Bootstrap's :active and .dropdown-toggle.show (bright #0d6efd) showed through on click/open; .programme-table-header's button rule also added a transparent border and a dark hover. Scoped to this wrapper (only used here) and specific enough to beat Bootstrap's .btn-outline-primary.dropdown-toggle.show. The focus ring / header drop shadow are removed by Bootstrap's shadow-none on the button instead. Custom CSS only because no Bootstrap utility can target :active/.show states, and the bg and text colour utilities use fixed palette colours rather than the per-tenant --btn-outline-primary-bg/-border/-text theme variables. */ .programme-learner-actions-dropdown > .btn.btn-outline-primary, .programme-learner-actions-dropdown > .btn.btn-outline-primary:hover, .programme-learner-actions-dropdown > .btn.btn-outline-primary:focus, .programme-learner-actions-dropdown > .btn.btn-outline-primary:focus-visible, .programme-learner-actions-dropdown > .btn.btn-outline-primary:active, .programme-learner-actions-dropdown > .btn.btn-outline-primary.active, .programme-learner-actions-dropdown > .btn.btn-outline-primary.show, .programme-learner-actions-dropdown > .btn.btn-outline-primary.show:hover, .programme-learner-actions-dropdown > .btn.btn-outline-primary.show:focus, .programme-learner-actions-dropdown > .btn.btn-outline-primary:active:focus { background-color: var(--btn-outline-primary-bg, var(--primary-color)); border-color: var(--btn-outline-primary-border, var(--primary-color)); color: var(--btn-outline-primary-text, #fff); } /* shadow-none removes the focus ring entirely, so keyboard users need a visible focus indicator back; :focus-visible only matches keyboard focus, so mouse clicks stay glow-free. Custom because Bootstrap has no focus-visible utility, and its focus-ring helper (5.3 only) is a box-shadow that shadow-none's !important would cancel. */ .programme-learner-actions-dropdown > .btn.btn-outline-primary:focus-visible { outline: 2px solid var(--btn-outline-primary-border, var(--primary-color)); outline-offset: 2px; } /* No hardcoded inset/transform here: Popper (via data-bs-boundary="viewport" on the toggle) needs to be able to set its own inline position so the menu can flip above the button for rows near the bottom of the table/viewport. */ .programme-learner-row-menu .programme-learner-menu-item { display: flex; align-items: center; gap: 0.58rem; width: 100%; border: 0; background: transparent; padding: 0.58rem 0.7rem; border-radius: 0.62rem; text-align: left; text-decoration: none; font-size: 0.78rem; font-weight: 600; line-height: 1.2; color: #334155; white-space: nowrap; transition: background-color 0.18s ease, color 0.18s ease; } .programme-learner-row-menu .programme-learner-menu-item:hover, .programme-learner-row-menu .programme-learner-menu-item:focus { background: #f3f6fb; color: #111827; outline: none; } .programme-learner-row-menu .programme-learner-menu-item.is-danger { color: #dc3545; } .programme-learner-row-menu .programme-learner-menu-item.is-danger:hover, .programme-learner-row-menu .programme-learner-menu-item.is-danger:focus { background: rgba(220, 53, 69, 0.09); color: #b02a37; } .programme-learner-row-menu .programme-learner-menu-item.is-success { color: #198754; } .programme-learner-row-menu .programme-learner-menu-item.is-success:hover, .programme-learner-row-menu .programme-learner-menu-item.is-success:focus { background: rgba(25, 135, 84, 0.09); color: #157347; } .programme-learner-row-menu .programme-learner-menu-item.is-brand { color: #4f46e5; } .programme-learner-row-menu .programme-learner-menu-item.is-brand:hover, .programme-learner-row-menu .programme-learner-menu-item.is-brand:focus { background: rgba(79, 70, 229, 0.09); color: #4338ca; } .programme-learner-row-menu .programme-learner-menu-icon { width: 1.15rem; flex: 0 0 1.15rem; text-align: center; font-size: 1rem; line-height: 1; } /* Ensure dropdown can overflow outside table boundaries */ .dataTables_wrapper { overflow: visible !important; } /* Force dropdown to be visible even when parent has overflow hidden */ .dropdown-menu.show { position: absolute !important; z-index: 9999 !important; overflow: visible !important; } /* Additional positioning for dropup */ .dropup .dropdown-menu { margin-bottom: 0.125rem; } /* Enhanced dropdown overflow fixes for all table scenarios */ .table-responsive { overflow: visible !important; } .table { overflow: visible !important; } /* The completed-programmes table has no row dropdown menus, so unlike the blanket rule above, it's safe -- and necessary -- to let it scroll horizontally instead of overflowing the page on narrow screens. Same specificity as .table-responsive above, so this wins on source order -- keep it below that rule, not above. */ .completed-programs-table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } /* Ensure all dropdowns in tables have proper z-index */ .table .dropdown-menu, .table-responsive .dropdown-menu, .dataTables_wrapper .dropdown-menu { z-index: 99999 !important; position: absolute !important; overflow: visible !important; } /* Fix for Bootstrap DataTables */ .dataTables_wrapper .dataTables_scroll { overflow: visible !important; } .dataTables_wrapper .dataTables_scrollBody { overflow: visible !important; } /* Ensure dropdowns appear above modals and other overlays */ .dropdown-menu { z-index: 99999 !important; } /* Fix for specific table containers */ .table-container, .table-wrapper, .data-table-container { overflow: visible !important; } /* Ensure action buttons container doesn't clip wrapped buttons */ .action-buttons { overflow: visible !important; position: relative; } @media (max-width: 575.98px) { .user-actions-wrapper { align-items: stretch; } .user-actions-wrapper .manage-user-toggle { width: 100%; justify-content: center; } .manage-user-popover { right: 0; left: auto; top: auto; bottom: calc(100% + 0.4rem); width: min(15rem, calc(100vw - 1rem)); } .system-management-roles .manage-role-actions-toggle, .system-management-roles .manage-assessment-actions-toggle { min-width: 7.25rem !important; padding: 0.22rem 0.52rem !important; font-size: 0.58rem !important; line-height: 1.05; } .system-management-roles .manage-role-actions-menu, .system-management-roles .manage-assessment-actions-menu { width: min(15rem, calc(100vw - 1rem)) !important; min-width: 0 !important; max-width: calc(100vw - 1rem) !important; max-height: calc(100vh - 1rem) !important; z-index: 5000 !important; } .system-management-roles .manage-role-actions-menu .manage-user-action-panel, .system-management-roles .manage-assessment-actions-menu .manage-user-action-panel { padding: 0.35rem !important; border-radius: 0.95rem !important; box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16) !important; } .system-management-roles .manage-role-menu-item { padding: 0.5rem 0.65rem !important; font-size: 0.68rem !important; line-height: 1.05; } } /* Force dropdown positioning for edge cases */ .dropdown-menu.show, .dropdown-menu.dropdown-menu-end.show { position: absolute !important; z-index: 99999 !important; overflow: visible !important; min-width: 13rem; } /* Every dropdown-menu gets transform: none EXCEPT .programme-courses-panel-menu (the "Learners Actions" panel-header menus, the per-row "Manage Learner"/"Manage Doc" row menus, and the recruitment "Manage " card menu). That class is Popper-positioned: Bootstrap's bundled Popper already computes the correct `transform: translate(x, y)` to drop the menu below its toggle, right-aligned, flipping/shifting when the viewport is tight. Forcing `transform: none !important` on it (as every other dropdown gets, above) discarded that correct value and left the menu pinned to the toggle's top-left corner -- overlapping the toggle and whatever sits beside it -- instead of dropping below it. Simply not setting `transform` with !important on this class lets Popper's own inline transform (which nothing else here overrides) take effect; position/z-index/overflow/ min-width above are unaffected and still apply to it exactly as before. */ .dropdown-menu.show:not(.programme-courses-panel-menu), .dropdown-menu.dropdown-menu-end.show:not(.programme-courses-panel-menu) { transform: none !important; } .menu-items .app-name { font-size: 0.65rem !important; /* Smallest readable */ line-height: 1.1; padding: 0; margin: 0; } .menu-items .app-item { padding: 0.25rem 0 !important; } /* Additional fix for dropup menus */ .dropup .dropdown-menu.show { margin-bottom: 0.125rem; z-index: 99999 !important; } /* Notification message inner container (assist_index.html's own dropdown, which is unrelated to platform_index.html's #notificationDropdown panel below -- see main_system_index.css's "Notification bell panel" section). */ .notification-bell-panel .collapse > .text-muted { border-radius: 0.65rem; } /* Make the notification bell pop while dropdown is open (no panel color changes). */ .notification-bell-toggle[aria-expanded="true"] { position: relative; z-index: 100001; background-color: rgba(255, 255, 255, 0.14) !important; border-radius: 0.5rem; } .notification-bell-toggle[aria-expanded="true"] > .bi-bell-fill { filter: brightness(1.55) drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)); } .notification-bell-toggle[aria-expanded="true"] > .bi-bell { filter: brightness(1.55) drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)); } .notification-bell-toggle[aria-expanded="true"] > .badge { position: relative; z-index: 100002; } .menu-items { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0.5rem !important; } .menu-items .col { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; } /* Hierarchical tree styling for edit modal */ .hierarchical-tree { max-height: 400px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 0.375rem; padding: 1rem; background: #f8f9fa; } .tree-node { margin-bottom: 0.5rem; } .tree-node-header { display: flex; align-items: center; padding: 0.5rem; background: #fff; border: 1px solid #e9ecef; border-radius: 0.25rem; cursor: pointer; transition: background-color 0.2s ease; } .tree-node-header:hover { background-color: #f8f9fa; } .tree-node-content { margin-left: 1.5rem; margin-top: 0.5rem; padding-left: 1rem; border-left: 2px solid #dee2e6; } .level-name, .class-name { font-weight: 600; margin-left: 0.5rem; flex-grow: 1; } .level-actions, .class-actions { display: flex; gap: 0.25rem; } .class-teacher-checkbox { display: flex; align-items: center; margin-left: 1rem; } .subject-item { padding: 0.25rem 0; } .add-class-section { margin-top: 1rem; padding: 0.5rem; background: #e9ecef; border-radius: 0.25rem; } .assignment-summary { max-height: 300px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 0.375rem; padding: 1rem; background: #fff; } .summary-level { margin-bottom: 1rem; } .summary-class { margin-left: 1rem; margin-bottom: 0.5rem; } .summary-subject { margin-left: 1rem; color: #6c757d; } .class-indent, .subject-indent { font-size: 0.9rem; } /* Choices.js customizations */ .choices { margin-bottom: 0; } .choices__inner { background-color: #fff; border: 1px solid #ced4da; border-radius: 0.375rem; min-height: 38px; padding: 0.375rem 0.75rem; } .choices__input { background-color: transparent; border: 0; padding: 0; margin: 0; } .choices__input:focus { outline: none; box-shadow: none; } .choices__list--dropdown { border: 1px solid #ced4da; border-radius: 0.375rem; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); } /* Inside a Bootstrap modal, the open dropdown must render in front of the rest of the modal (e.g. the footer's submit button) instead of being visually covered by it, so it always opens on top of - not behind - other modal content. */ .modal .choices__list--dropdown { z-index: 5; } /* While a Choices dropdown inside a modal is open, grow the modal itself so the full options list has room and isn't clipped - it shrinks back down once the dropdown closes. */ .modal-content.choices-dropdown-open { min-height: 480px; transition: min-height 0.15s ease; } .choices__list--dropdown .choices__item--selectable { padding: 0.5rem 0.75rem; } .choices__list--dropdown .choices__item--selectable.is-highlighted { background-color: #007bff; color: white; } .choices__list--multiple .choices__item { background-color: #007bff; border: 1px solid #007bff; border-radius: 0.25rem; color: white; margin: 2px; padding: 0.25rem 0.5rem; } .choices__list--multiple .choices__item .choices__button { border-left: 1px solid rgba(255, 255, 255, 0.5); color: white; margin-left: 0.5rem; padding-left: 0.5rem; } .choices__list--multiple .choices__item .choices__button:hover { background-color: rgba(255, 255, 255, 0.2); } .choices__placeholder { color: #6c757d; opacity: 1; } /* .dynamic-report-page's Choices.js theming lives further down (search "Build Report page" below) - that version is brand-color-aware (var(--report-brand), so it follows each tenant's --primary-color) rather than hardcoded to Bootstrap blue like the generic rules above. */ /* Hierarchical Tree Styles */ .hierarchical-tree { border: 1px solid #dee2e6; border-radius: 0.375rem; max-height: 400px; overflow-y: auto; background-color: #f8f9fa; } .tree-node { border-bottom: 1px solid #dee2e6; } .tree-node:last-child { border-bottom: none; } .tree-node-header { display: flex; align-items: center; padding: 0.75rem 1rem; background-color: #e9ecef; cursor: pointer; transition: background-color 0.2s; font-weight: 600; } .tree-node-header:hover { background-color: #dee2e6; } .tree-node-header i { margin-right: 0.5rem; color: #fff; transition: transform 0.2s; } .tree-node-header .level-name { flex: 1; color: #495057; } .level-actions { display: flex; gap: 0.25rem; } .tree-node-content { background-color: #ffffff; border-top: 1px solid #dee2e6; } .sub-node { border-bottom: 1px solid #f1f3f4; } .sub-node:last-child { border-bottom: none; } .sub-node-header { display: flex; align-items: center; padding: 0.5rem 1rem 0.5rem 2rem; background-color: #f8f9fa; cursor: pointer; transition: background-color 0.2s; font-weight: 500; } .sub-node-header:hover { background-color: #e9ecef; } .sub-node-header i { margin-right: 0.5rem; color: #6c757d; transition: transform 0.2s; } .sub-node-header .class-name { flex: 1; color: #495057; } .class-actions { display: flex; gap: 0.25rem; } .sub-node-content { background-color: #ffffff; border-top: 1px solid #f1f3f4; padding: 0.5rem 1rem 0.5rem 3rem; } .subject-item { padding: 0.25rem 0; } .subject-item .form-check { margin-bottom: 0; } .subject-item .form-check-label { color: #495057; font-weight: normal; } .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; } /* Assignment Summary Styles */ .assignment-summary { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.375rem; padding: 1rem; max-height: 200px; overflow-y: auto; } .summary-level { margin-bottom: 0.75rem; } .summary-level:last-child { margin-bottom: 0; } .summary-level strong { color: #495057; font-size: 0.9rem; } .summary-class { margin-left: 1rem; margin-top: 0.25rem; } .class-indent { color: #6c757d; font-size: 0.85rem; } .summary-subject { margin-left: 1rem; margin-top: 0.125rem; } .subject-indent { color: #6c757d; font-size: 0.8rem; } .add-class-section { margin-top: 1rem; padding: 0.75rem; background-color: #f8f9fa; border: 1px dashed #dee2e6; border-radius: 0.375rem; } .add-class-section .input-group { max-width: 400px; } .add-class-section .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; } .add-class-section .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* end of hierarchical tree styles */ .bg-light-success { background-color: #d4edda !important; } .bg-light-danger { background-color: #f8d7da !important; } .payment-method-card { border: 2px solid #e0e0e0; border-radius: 8px; padding: 20px; margin-bottom: 15px; cursor: pointer; transition: all 0.3s ease; } .payment-method-card:hover { border-color: #007bff; box-shadow: 0 2px 8px rgba(0,123,255,0.2); } .payment-method-card.selected { border-color: #007bff; background-color: #f8f9ff; } .payment-method-card.disabled { opacity: 0.5; cursor: not-allowed; } .gateway-logo { width: 60px; height: 40px; object-fit: contain; margin-right: 15px; } .order-summary { background-color: #f8f9fa; border-radius: 8px; padding: 20px; } .loading-overlay { position: fixed; top: 0;c left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; } .dot { width: 10px; height: 10px; display: inline-block; } .student-info-card { background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%); border-radius: 16px; padding: 25px 35px; margin-bottom: 30px; box-shadow: 0 8px 32px rgba(0,0,0,0.08); border: 1px solid rgba(102, 126, 234, 0.1); position: relative; overflow: hidden; } .student-info-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #667eea, #764ba2, #f093fb); } .student-info-card::after { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(102, 126, 234, 0.03) 0%, transparent 70%); pointer-events: none; } .table-loader{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.6); z-index:5; } .table-responsive{ position:relative; } .table-loader .spinner-border{ width:2.5rem; height:2.5rem; } /* spacing + consistent control widths */ .filters .form-select { min-width: 220px; } @media (max-width: 768px) { .filters .form-select { min-width: 160px; } } /* keep the button on one line */ .text-nowrap { white-space: nowrap; } /* Keep widths consistent for the Status column */ .table-transactions { table-layout: fixed; } .table-transactions .col-status { width: 8rem; } /* adjust as you like */ .table-transactions .status-badge { display: block; width: 100%; } /* (optional) a bit narrower on phones */ @media (max-width: 576px) { .table-transactions .col-status { width: 6.5rem; } } /* Payment Gateway css */ .gateway-card { border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; margin-bottom: 20px; transition: all 0.3s ease; } .gateway-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .status-badge { padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; } .status-active { background-color: #d4edda; color: #155724; } .status-tested { background-color: #fff3cd; color: #856404; } .status-inactive { background-color: #f8d7da; color: #721c24; } .btn-group { display: flex; gap: 8px; flex-wrap: wrap; } .btn-sm { padding: 4px 8px; font-size: 12px; } .modal-content { border-radius: 8px; } .form-group { margin-bottom: 15px; } .alert { border-radius: 4px; padding: 12px; margin-bottom: 15px; } .loading { opacity: 0.6; pointer-events: none; } .dataTables_filter { margin: 0.25rem 0.5rem 0.5rem 0; } .dataTables_filter input.form-control.form-control-sm { min-width: 220px; } /* Theme common floating help/support launchers to the current client brand. */ button[aria-label*="help" i], button[aria-label*="support" i], button[title*="help" i], button[title*="support" i], a[aria-label*="help" i], a[aria-label*="support" i], a[title*="help" i], a[title*="support" i] { background: linear-gradient( 135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 35%, var(--secondary-color) 65%) ) !important; color: var(--white) !important; border-color: transparent !important; box-shadow: 0 6px 24px color-mix(in srgb, var(--primary-color) 35%, transparent) !important; } .draggable { position: fixed !important; user-select: none; touch-action: none; cursor: move; } .learner-header-section { /* background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%); */ background: var(--primary-color); border-radius: 12px; padding: 32px; margin-bottom: 24px; color: #fff; box-shadow: 0 4px 20px rgba(26, 54, 93, 0.3); } .learner-header-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .learner-info-block { display: flex; align-items: center; gap: 20px; } .learner-avatar-block { width: 72px; height: 72px; background: linear-gradient(45deg, #4fd1c7, #81e6d9); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; color: #1a365d; box-shadow: 0 4px 15px rgba(79, 209, 199, 0.3); } .learner-details-block h2 { font-size: 26px; font-weight: 600; margin-bottom: 6px; color: #fff; } .learner-meta-block { display: flex; gap: 16px; font-size: 14px; opacity: 0.9; flex-wrap: wrap; } .learner-meta-badge { background: rgba(255, 255, 255, 0.15); padding: 4px 12px; border-radius: 20px; backdrop-filter: blur(10px); color: #fff; font-weight: 400; } .learner-header-actions { display: flex; gap: 12px; flex-wrap: wrap; } .learner-action-btn { background: rgba(255, 255, 255, 0.2); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; backdrop-filter: blur(10px); display: flex; align-items: center; gap: 6px; } .learner-action-btn:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-1px); color: #fff; } .activity-icon-btn { width: 40px; height: 40px; border-radius: 12px; font-size: 1.5rem; text-decoration: none; display: flex; align-items: center; justify-content: center; transition: background 0.2s; background-color: var(--primary-color); } .sidebar-panel { display: flex; flex-direction: column; gap: 20px; } .sidebar-tall-card { min-height: 260px; } /* Attendance progress widget sits on the purple .learner-header-section (internCharts), where its default/.text-muted greys are invisible. Force readable white text; keep the fine print slightly softened. */ .learner-header-section #attendance-progress-app, .learner-header-section #attendance-progress-app h6, .learner-header-section #attendance-progress-app .text-muted { color: #fff !important; } .learner-header-section #attendance-progress-app .small { color: rgba(255, 255, 255, 0.8) !important; } /* Add breathing room below the navbar on mobile for learner header */ @media (max-width: 767.98px) { .learner-activity-profile .learner-header-section { margin-top: 1.25rem !important; } } /* Pull the learner profile header card up 7px on desktop/tablet, matching the -7px pull used on the other hero cards. */ @media (min-width: 768px) { .learner-activity-profile .learner-header-section { margin-top: -7px !important; } } /* Smaller than the shared .learner-header-section default (32px/24px) so the card takes up less room on this page specifically. Scoped to .learner-activity-profile rather than the shared rule, since learner_course.html and verify_application.html reuse that same class at the original size. */ .learner-activity-profile .learner-header-section { padding: 22px; margin-bottom: 16px; } /* Clears the Back/Profile Details buttons pinned to the card's top corners (position-absolute top-0, internCharts.html only) so they don't crowd the avatar/name row below. 22px card padding (above) + 30px of this margin clears the buttons' own ~46px footprint (m-3 offset + btn-sm/text-xxs height) with a small buffer, while still being smaller than the 32px+32px this totaled before the card shrank. Scoped to .learner-activity-profile rather than the shared .learner-header-content rule, since learner_course.html and verify_application.html reuse that same class without those corner buttons. */ .learner-activity-profile .learner-header-content { margin-top: 30px; } /* Smaller than the shared .learner-avatar-block default (72px), to sit proportionate to this page's now-more-compact header card. Scoped the same way and for the same reason as the rules above. */ .learner-activity-profile .learner-avatar-block { width: 52px; height: 52px; font-size: 1.35rem; } /* Scoped the same way and for the same reason as the rules above. */ .learner-activity-profile .learner-details-block h2 { font-size: 22px; } .learner-activity-profile .learner-meta-block { font-size: 13px; gap: 12px; } /* Reserves space for the embedded DocuSeal signing form (progress_reporting_tool/internCharts/'s programme_document_sign_modal) before it loads, so the panel doesn't jump/collapse while the iframe is still fetching. Moved out of a style= attribute on the element itself. */ #programme-document-sign-form-shell { min-height: 620px; } .sidebar-tall-alert { min-height: 110px; display: flex; flex-direction: column; justify-content: center; } .activity-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 16px; font-size: 16px; color: white; } .activity-icon.subjects { background: var(--primary-color); } .activity-icon.classes { background: var(--primary-color); } .activity-icon.assessments { background: var(--primary-color); } .activity-icon.documents { background: var(--primary-color); } .activity-icon.media { background: var(--primary-color); } .activity-icon.certificates { background: var(--primary-color); } .activity-icon.actions { background: var(--primary-color); } .activity-icon.reviews { background: var(--primary-color); } /* Intern learner profile (internCharts): make buttons, badges, and text extra small on mobile */ @media (max-width: 767.98px) { .learner-activity-profile { font-size: 0.8rem; } .learner-activity-profile .learner-header-section { padding: 16px; } .learner-activity-profile .learner-avatar-block { width: 56px; height: 56px; font-size: 1.4rem; } .learner-activity-profile .learner-details-block h2 { font-size: 1.1rem; } .learner-activity-profile .learner-meta-badge { font-size: 0.65rem; padding: 2px 8px; } .learner-activity-profile .btn, .learner-activity-profile .learner-action-btn { font-size: 0.65rem; padding: 0.2rem 0.45rem; } .learner-activity-profile .badge { font-size: 0.65rem; padding: 0.15rem 0.4rem; } .learner-activity-profile .panel-title, .learner-activity-profile .data-value, .learner-activity-profile .data-label, .learner-activity-profile .activity-icon, .learner-activity-profile .list-group-item, .learner-activity-profile .small, .learner-activity-profile .text-xs, .learner-activity-profile .text-xxs { font-size: 0.75rem; } } .data-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; background: transparent; margin: 24px 12px; } .data-cell { display: flex; min-height: 102px; flex-direction: column; align-items: center; justify-content: center; padding: 16px 10px 14px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 2px 8px rgba(30, 41, 59, 0.06); text-align: center; transition: transform 160ms ease, box-shadow 160ms ease; } .data-cell:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(30, 41, 59, 0.1); } .data-value { font-size: 2rem; font-weight: 700; color: #2b6cb0; display: block; margin-bottom: 4px; } .data-label { font-size: 12px; color: #718096; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } @media (max-width: 768px) { .data-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 20px 10px; } .data-cell { min-height: 92px; padding: 14px 8px 12px; } } .content-panel { background: white; border-radius: 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); overflow: hidden; } .panel-header { background: #f7fafc; padding: 20px 24px; border-bottom: 1px solid #e2e8f0; } .panel-title { font-size: 18px; font-weight: 600; color: #2d3748; display: flex; align-items: center; gap: 10px; } .list-group-item.activity-hover:hover { background-color: #f0f4fa !important; cursor: pointer; transition: background 0.2s; } .edit-specs-popper { position: absolute; z-index: 9999; right: 0; top: 50%; transform: translateY(-50%); min-width: 320px; max-width: 95vw; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.15); border-radius: 8px; border: 1px solid #ddd; padding: 16px; overflow-y: auto; max-height: 80vh; } .bg-job-role-icon{ color: var(--white) !important; background: var(--btn-color) !important; } .programme-portfolio-hero { background: linear-gradient(135deg, #43bfc1 0%, #3d7086 100%); border-radius: 1.35rem; color: #fff; } .programme-portfolio-hero-body { position: relative; padding: 1.4rem 1.45rem; } .programme-portfolio-hero-orb { position: absolute; border-radius: 999px; pointer-events: none; opacity: 0.18; background: #7af4e2; } .programme-portfolio-hero-orb-left { width: 110px; height: 110px; left: 28%; top: -34px; } .programme-portfolio-hero-orb-right { width: 170px; height: 170px; right: -36px; top: -72px; } .programme-portfolio-hero-content { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; } .programme-portfolio-title { font-size: 1.55rem; font-weight: 700; color: #fff; } .programme-portfolio-create-btn, .programme-portfolio-link-btn { border-radius: 0.7rem; border: 0; font-weight: 600; padding: 0.48rem 0.95rem; } .programme-portfolio-create-btn { background: #fff; color: #244054; } .programme-portfolio-link-btn { background: rgba(255, 255, 255, 0.14); color: #fff; } .programme-portfolio-setting-group { min-width: 280px; } .programme-portfolio-setting-select { border-radius: 0.7rem; border: 0; } .programme-portfolio-shell { border: 3px solid #4ccfd1; border-radius: 1.2rem; background: #fff; } .programme-portfolio-shell-body { padding: 1rem; } .programme-management-status-nav { justify-content: center; gap: 0.75rem; } .programme-management-status-pill { border: 1px solid #b9e8e8; border-radius: 999px; color: #3f5462; background: #f8ffff; min-width: 112px; } .programme-management-status-pill.active, .programme-management-status-pill:hover { background: #43bfc1; color: #fff; } .programme-tree-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; } .programme-tree-toolbar-count { display: flex; align-items: center; gap: 0.55rem; } .programme-tree-toolbar-select { width: 68px; border-radius: 0.6rem; } .programme-tree-toolbar-label { font-size: 0.88rem; color: #5d6570; } .programme-tree-toolbar-search { min-width: min(100%, 320px); } .programme-tree-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; flex: 1 1 320px; min-width: 0; margin-left: auto; } .programme-tree-toolbar-actions .programme-tree-toolbar-search { flex: 1 1 320px; min-width: 0; max-width: 420px; } .programme-tree-search-wrap { position: relative; } .programme-tree-search-icon { position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); color: #9aa6b2; font-size: 0.9rem; } .programme-tree-search-input { padding-left: 2.45rem; border-radius: 0.65rem; } .program-tree-card { position: relative; margin-bottom: 1.1rem; } .program-tree-card-shell { border: 1.6px solid var(--primary-color); border-radius: 1rem; box-shadow: none; } .program-tree-card .card-body { padding: 0.95rem 1rem; } /* Tree children layout â€“ no connector lines, simple stacked cards */ .tree-children-container { margin-left: 1.5rem; padding-left: 0; position: relative; } .tree-children-container::before, .tree-child::before { display: none; } .tree-child { position: relative; margin-bottom: 1rem; } .tree-child:last-child { margin-bottom: 0; } .program-tree-card-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .program-tree-card-main { display: flex; align-items: center; gap: 0.95rem; min-width: 0; } .program-tree-card-copy { min-width: 0; } .program-tree-card-copy .card-title { color: #17212b; } .program-tree-card-meta, .program-dates { color: #6b7280; } .program-tree-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; border-radius: 0.6rem; background: var(--primary-color); color: #fff; font-size: 1.25rem; flex: 0 0 auto; } /* Programme list cards (programme_management / programme_cards / recruitment programme list -- all mount #app): show the brand "Programmes" illustration used in the sidebar instead of the generic Bootstrap folder glyph, at 2rem. The learner "My Practicals" task cards (.task-tree-card on #user-tasks-app) are outside #app and keep their own clipboard icon. */ #app .program-tree-card-icon { width: 2rem; height: 2rem; background-color: transparent; background-image: url("../../platform_icons/nav/06-programmes.png"); background-repeat: no-repeat; background-position: center; background-size: contain; } #app .program-tree-card-icon > i { display: none; } .program-tree-card-actions { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 0.7rem; flex: 0 0 auto; align-self: stretch; min-height: 100%; } .program-tree-card-action-icons { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; width: 100%; } .program-tree-card-menu-btn, .program-sub-toggle-btn, .program-tree-card-open-link, .program-tree-card-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 0; background: transparent; color: #233143; border-radius: 999px; text-decoration: none; box-shadow: none; } .program-tree-card-menu-btn:hover, .program-sub-toggle-btn:hover, .program-tree-card-open-link:hover, .program-tree-card-icon-btn:hover { background: #eefcfc; color: #0f7d82; } .program-tree-card-icon-btn.is-delete { color: #d14343; } .program-tree-card-icon-btn.is-delete:hover { background: #fff1f1; color: #bb1f1f; } .program-tree-card-menu { border-radius: 0.75rem; border: 1px solid #d8ecec; box-shadow: 0 14px 32px rgba(20, 47, 66, 0.12); } .program-tree-card-action-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; max-width: 26rem; margin-top: auto; } .program-tree-card-action-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; white-space: nowrap; text-align: center; } .program-tree-card-manage-dropdown { position: relative; width: min(20rem, 100%); margin-left: auto; } .program-tree-card-manage-btn { display: inline-flex; align-items: center; width: 100%; justify-content: center; text-align: center; padding-inline: 1rem; } .program-tree-card-manage-menu { position: absolute; top: auto; bottom: calc(100% + 0.7rem); right: 0; width: min(20rem, calc(100vw - 2rem)); max-width: min(20rem, calc(100vw - 2rem)); padding: 0.4rem; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 1.15rem; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16); z-index: 20; overflow: hidden; } .program-tree-card-manage-menu .program-tree-card-menu-item { display: flex; align-items: center; gap: 0.7rem; width: 100%; border: 0; background: transparent; color: #334155; border-radius: 0.85rem; padding: 0.72rem 0.9rem; text-align: left; text-decoration: none; white-space: normal; font-size: 0.86rem; font-weight: 600; line-height: 1.2; } .program-tree-card-manage-menu .program-tree-card-menu-item i { width: 1.35rem; flex: 0 0 auto; text-align: center; font-size: 1.25rem; line-height: 1; color: inherit; } .program-tree-card-manage-menu .program-tree-card-menu-item:hover, .program-tree-card-manage-menu .program-tree-card-menu-item:focus { background: #f4f8ff; color: #0f172a; } .program-tree-card-manage-menu .program-tree-card-menu-item.is-danger { color: #d14343; } .program-tree-card-manage-menu .program-tree-card-menu-item.is-danger:hover, .program-tree-card-manage-menu .program-tree-card-menu-item.is-danger:focus { background: #fff1f1; color: #b42318; } .skill-hierarchy-manage-btn { width: auto; min-width: 10rem; padding-inline: 1rem; } .skill-hierarchy-manage-menu { width: min(15rem, calc(100vw - 2rem)); max-width: min(15rem, calc(100vw - 2rem)); z-index: 1000; } .skill-hierarchy-actions { z-index: 1; } .skill-hierarchy-actions--open { z-index: 1001; } .skill-hierarchy-collapse-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: transparent; box-shadow: none; line-height: 1; } .skill-hierarchy-collapse-btn:hover, .skill-hierarchy-collapse-btn:focus { background: transparent; box-shadow: none; outline: none; } .skill-hierarchy-collapse-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 0.15rem; } .skill-hierarchy-row { position: relative; z-index: 0; margin-left: -0.5rem; margin-right: -0.25rem; padding: 0.45rem 0.75rem; border-radius: 0.5rem; transition: background-color 160ms ease, box-shadow 160ms ease; } .skill-hierarchy-row--open { z-index: 2000; } .skill-hierarchy-row--spec:hover, .skill-hierarchy-row--spec:focus-within { background-color: rgba(25, 135, 84, 0.08); box-shadow: inset 0.25rem 0 0 rgba(25, 135, 84, 0.22); } .skill-hierarchy-row--main:hover, .skill-hierarchy-row--main:focus-within { background-color: rgba(13, 202, 240, 0.1); box-shadow: inset 0.25rem 0 0 rgba(13, 202, 240, 0.28); } .skill-hierarchy-row--sub:hover, .skill-hierarchy-row--sub:focus-within { background-color: rgba(255, 193, 7, 0.14); box-shadow: inset 0.25rem 0 0 rgba(255, 193, 7, 0.34); } .skill-hierarchy-resource-summary { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .skill-hierarchy-resource-pill { display: inline-flex; align-items: center; min-height: 1.45rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(15, 23, 42, 0.06); color: #64748b; font-size: 0.78rem; font-weight: 600; line-height: 1.1; } .skill-hierarchy-swal-popup.swal2-popup { width: min(38rem, calc(100vw - 2rem)); padding: 0; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 1.75rem 4.5rem rgba(15, 23, 42, 0.24); } .skill-hierarchy-swal-title.swal2-title { margin: 0; padding: 1.15rem 3.75rem 1.15rem 1.5rem; background: #3d0066; color: #ffffff; font-size: 1.15rem; font-weight: 700; line-height: 1.25; text-align: left; } .skill-hierarchy-swal-close.swal2-close { top: 0.85rem; right: 1rem; width: 2rem; height: 2rem; color: #ffffff; font-size: 2rem; line-height: 1; opacity: 1; } .skill-hierarchy-swal-close.swal2-close:hover, .skill-hierarchy-swal-close.swal2-close:focus { color: #ffffff; background: rgba(255, 255, 255, 0.12); box-shadow: none; } .skill-hierarchy-swal-content.swal2-html-container { margin: 0; padding: 1.75rem 2rem 0.25rem; text-align: left; } .skill-hierarchy-swal-form { display: grid; gap: 0.65rem; } .skill-hierarchy-swal-help { margin: 0 0 0.75rem; color: #64748b; font-size: 0.9rem; line-height: 1.45; } .skill-hierarchy-swal-label { margin: 0.25rem 0 0; color: #1f2937; font-size: 0.9rem; font-weight: 700; } .skill-hierarchy-swal-control { width: 100%; min-height: 2.9rem; border: 1px solid #d1d5db; border-radius: 0.5rem; background: #ffffff; color: #111827; font-size: 0.95rem; line-height: 1.4; padding: 0.7rem 0.9rem; } .skill-hierarchy-swal-control::placeholder { color: #9ca3af; } .skill-hierarchy-swal-control:focus { border-color: #6ea8fe; outline: 0; box-shadow: 0 0 0 0.2rem rgba(110, 168, 254, 0.25); } .skill-hierarchy-swal-actions.swal2-actions { justify-content: flex-end; gap: 0.75rem; width: 100%; margin: 0; padding: 1.25rem 2rem 1.5rem; } .skill-hierarchy-swal-confirm, .skill-hierarchy-swal-cancel { display: inline-flex; align-items: center; justify-content: center; min-width: 6.75rem; border: 0; border-radius: 0.5rem; color: #ffffff; font-size: 0.92rem; font-weight: 700; line-height: 1; padding: 0.75rem 1.25rem; } .skill-hierarchy-swal-confirm { background: #3d0066; } .skill-hierarchy-swal-cancel { background: #4f46a6; } .skill-hierarchy-swal-confirm:hover, .skill-hierarchy-swal-confirm:focus, .skill-hierarchy-swal-cancel:hover, .skill-hierarchy-swal-cancel:focus { filter: brightness(1.08); box-shadow: 0 0 0 0.2rem rgba(110, 168, 254, 0.22); } .skill-hierarchy-resource-swal-popup.swal2-popup { width: min(50rem, calc(100vw - 2rem)); } .skill-hierarchy-view-swal-popup.swal2-popup { width: min(46rem, calc(100vw - 2rem)); } .skill-hierarchy-view-modal { display: grid; gap: 0.85rem; } .skill-hierarchy-view-summary { display: flex; flex-wrap: wrap; gap: 0.5rem; } .skill-hierarchy-view-summary span { display: inline-flex; align-items: center; min-height: 1.75rem; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 0.82rem; font-weight: 800; padding: 0.25rem 0.7rem; } .skill-hierarchy-view-section { border: 1px solid #e5e7eb; border-radius: 0.65rem; background: #f8fafc; padding: 0.85rem; } .skill-hierarchy-view-section h6 { margin: 0 0 0.65rem; color: #1f2937; font-size: 0.92rem; font-weight: 800; } .skill-hierarchy-view-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .skill-hierarchy-view-list li { display: grid; gap: 0.15rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; background: #ffffff; color: #334155; font-size: 0.9rem; font-weight: 700; padding: 0.65rem 0.75rem; } .skill-hierarchy-view-list small { color: #64748b; font-size: 0.76rem; font-weight: 600; } .skill-hierarchy-view-empty { margin: 0; color: #94a3b8; font-size: 0.86rem; } .skill-hierarchy-resource-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .skill-hierarchy-resource-panel { min-height: 12rem; max-height: 20rem; overflow: auto; border: 1px solid #e5e7eb; border-radius: 0.65rem; background: #f8fafc; padding: 0.85rem; } .skill-hierarchy-resource-panel h6 { margin: 0 0 0.65rem; color: #1f2937; font-size: 0.92rem; font-weight: 800; } .skill-hierarchy-resource-option { display: flex; align-items: flex-start; gap: 0.55rem; width: 100%; margin: 0 0 0.5rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; background: #ffffff; color: #334155; cursor: pointer; font-size: 0.86rem; font-weight: 600; line-height: 1.3; padding: 0.65rem 0.75rem; } .skill-hierarchy-resource-option:hover, .skill-hierarchy-resource-option:focus-within { border-color: #bfdbfe; background: #eff6ff; } .skill-hierarchy-resource-option input { flex: 0 0 auto; margin-top: 0.1rem; } .skill-hierarchy-swal-empty { margin: 0; color: #94a3b8; font-size: 0.86rem; } @media (max-width: 768px) { .skill-hierarchy-resource-columns { grid-template-columns: 1fr; } } .program-tree-card .program-sub-count { font-weight: 600; color: #111827; } .home-section.admin-home-layout .programme-management-admin-home-shell .header-card h6 { font-size: 1.3rem; } .home-section.admin-home-layout .programme-management-admin-home-shell .btn, .home-section.admin-home-layout .programme-management-admin-home-shell .nav-link, .home-section.admin-home-layout .programme-management-admin-home-shell .form-control, .home-section.admin-home-layout .programme-management-admin-home-shell .form-select { font-size: 0.96rem !important; line-height: 1.3; } .home-section.admin-home-layout .programme-management-admin-home-shell .programme-tree-toolbar-label, .home-section.admin-home-layout .programme-management-admin-home-shell .program-tree-card-meta, .home-section.admin-home-layout .programme-management-admin-home-shell .program-dates, .home-section.admin-home-layout .programme-management-admin-home-shell .text-xxs, .home-section.admin-home-layout .programme-management-admin-home-shell small { font-size: 0.92rem !important; line-height: 1.35; } .home-section.admin-home-layout .programme-management-admin-home-shell .program-tree-card-copy .card-title { font-size: 1.12rem; line-height: 1.3; } .home-section.admin-home-layout .programme-management-admin-home-shell .programme-tree-search-input { font-size: 0.95rem; } .home-section.admin-home-layout .programme-management-admin-home-shell .program-tree-card-action-btn { font-size: 0.92rem; font-weight: 600; } @media (max-width: 1199.98px) { .home-section.admin-home-layout.mx-4 { margin-left: 0 !important; margin-right: 0 !important; } .home-section.admin-home-layout { padding-left: 0.65rem !important; padding-right: 0.65rem !important; } .home-section.admin-home-layout #app.container-fluid { padding-left: 0 !important; padding-right: 0 !important; } .home-section.admin-home-layout #status_tabContent { width: 100%; max-width: 100%; padding-left: 0.45rem !important; padding-right: 0.45rem !important; margin-right: 0 !important; box-sizing: border-box; } .home-section.admin-home-layout #status_tabContent.pe-5, .home-section.admin-home-layout #status_tabContent.pe-md-0, .home-section.admin-home-layout #status_tabContent.me-2, .home-section.admin-home-layout #status_tabContent.px-3 { padding-left: 0.45rem !important; padding-right: 0.45rem !important; margin-right: 0 !important; box-sizing: border-box; } .home-section.admin-home-layout #status_tabContent > .card.border-light.shadow, .home-section.admin-home-layout #status_tabContent > .card { width: 100%; max-width: 100%; margin-left: auto !important; margin-right: auto !important; } .home-section.admin-home-layout #status_tabContent > .card > .card-body, .home-section.admin-home-layout #status_tabContent > .card > .card-body.p-4 { padding: 1rem !important; } .home-section.admin-home-layout .programme-management-admin-home-shell { width: 100%; } .home-section.admin-home-layout .programme-management-admin-home-shell .programme-management-embed-header-shell, .home-section.admin-home-layout .programme-management-admin-home-shell .programme-management-embed-content-shell { padding-left: 0 !important; padding-right: 0 !important; } .home-section.admin-home-layout .programme-management-admin-home-shell .programme-management-embed-content-shell { margin-top: 0.85rem !important; } .home-section.admin-home-layout .programme-management-admin-home-shell .header-card, .home-section.admin-home-layout .programme-management-admin-home-shell .programme-management-embed-content-shell > .card { width: 100%; max-width: 100%; } .home-section.admin-home-layout .programme-management-admin-home-shell .header-card .card-body { padding: 0.95rem !important; } .home-section.admin-home-layout .programme-management-admin-home-shell .programme-management-embed-content-shell > .card > .card-body, .home-section.admin-home-layout .programme-management-admin-home-shell .programme-management-embed-content-shell > .card > .card-body.pb-0 { padding: 0.85rem 0.85rem 0 !important; } .home-section.admin-home-layout .programme-management-admin-home-shell .programme-management-embed-tab-panel { padding: 0.85rem 0 0 !important; } .home-section.admin-home-layout .programme-management-admin-home-shell .programme-management-status-tabs-wrap { padding: 0.35rem 0.35rem 0.15rem; } .home-section.admin-home-layout .programme-management-admin-home-shell .programme-tree-toolbar { gap: 0.75rem; align-items: stretch; } .home-section.admin-home-layout .programme-management-admin-home-shell .programme-tree-toolbar-actions { width: 100%; flex: 1 1 100%; justify-content: flex-start; margin-left: 0; } .home-section.admin-home-layout .programme-management-admin-home-shell .programme-tree-toolbar-search, .home-section.admin-home-layout .programme-management-admin-home-shell .programme-tree-toolbar-actions .programme-tree-toolbar-search { width: 100%; max-width: none; min-width: 0; flex: 1 1 100%; } .home-section.admin-home-layout .programme-management-admin-home-shell .program-tree-card { margin-bottom: 0.9rem; width: 100%; } .home-section.admin-home-layout .programme-management-admin-home-shell .program-tree-card-row { flex-direction: column; align-items: stretch; gap: 0.85rem; } .home-section.admin-home-layout .programme-management-admin-home-shell .program-tree-card-main { width: 100%; } .home-section.admin-home-layout .programme-management-admin-home-shell .program-tree-card-actions { width: 100%; align-items: stretch; gap: 0.65rem; } .home-section.admin-home-layout .programme-management-admin-home-shell .program-tree-card-action-icons { justify-content: flex-start; } .home-section.admin-home-layout .programme-management-admin-home-shell .program-tree-card-action-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: none; justify-content: stretch; align-items: stretch; gap: 0.5rem; } .home-section.admin-home-layout .programme-management-admin-home-shell .program-tree-card-action-btn { flex: 1 1 auto; min-width: 0; width: 100%; max-width: 100%; text-align: center; min-height: 2.45rem; white-space: normal; line-height: 1.2; overflow-wrap: anywhere; } .home-section.admin-home-layout .programme-management-admin-home-shell .program-tree-card-action-buttons > .program-tree-card-manage-dropdown:only-child, .home-section.admin-home-layout .programme-management-admin-home-shell .program-tree-card-action-buttons > .program-tree-card-manage-dropdown:last-child:nth-child(odd) { grid-column: 1 / -1; } .home-section.admin-home-layout .programme-management-admin-home-shell .program-tree-card-action-buttons .program-tree-card-action-btn:only-child, .home-section.admin-home-layout .programme-management-admin-home-shell .program-tree-card-action-buttons .program-tree-card-action-btn:last-child:nth-child(odd) { grid-column: 1 / -1; } .home-section.admin-home-layout .programme-management-admin-home-shell .tree-children-container { margin-left: 0.65rem !important; } } @media (min-width: 768px) and (max-width: 1199.98px) { .home-section.admin-home-layout #status_tabContent, .home-section.admin-home-layout #status_tabContent.pe-5, .home-section.admin-home-layout #status_tabContent.pe-md-0, .home-section.admin-home-layout #status_tabContent.me-2, .home-section.admin-home-layout #status_tabContent.px-3 { padding-left: 1rem !important; } .home-section.admin-home-layout #status_tabContent > .card.border-light.shadow, .home-section.admin-home-layout #status_tabContent > .card { margin-left: 0.25rem !important; } } /* Ensure the last horizontal line aligns perfectly with the end of the vertical line */ .tree-child:last-child::before { top: auto; bottom: 2.4rem; /* This aligns the horizontal line with the end of the vertical line */ } @media (max-width: 767.98px) { .home-section.admin-home-layout #status_tabContent { padding-left: 0.2rem !important; padding-right: 0.2rem !important; } .home-section.admin-home-layout #status_tabContent.pe-5, .home-section.admin-home-layout #status_tabContent.pe-md-0, .home-section.admin-home-layout #status_tabContent.me-2, .home-section.admin-home-layout #status_tabContent.px-3 { padding-left: 0.2rem !important; padding-right: 0.2rem !important; } .home-section.admin-home-layout #status_tabContent > .card > .card-body, .home-section.admin-home-layout #status_tabContent > .card > .card-body.p-4 { padding: 0.8rem !important; } .home-section.admin-home-layout .programme-management-admin-home-shell .header-card .card-body { padding: 0.85rem !important; } .home-section.admin-home-layout .programme-management-admin-home-shell .programme-management-embed-content-shell > .card > .card-body, .home-section.admin-home-layout .programme-management-admin-home-shell .programme-management-embed-content-shell > .card > .card-body.pb-0 { padding: 0.75rem 0.75rem 0 !important; } .home-section.admin-home-layout .programme-management-admin-home-shell .programme-management-embed-tab-panel { padding-top: 0.75rem !important; } .home-section.admin-home-layout .programme-management-admin-home-shell .programme-management-status-tabs-wrap { padding-left: 0.15rem; padding-right: 0.15rem; } .home-section.admin-home-layout .programme-management-admin-home-shell .program-tree-card .card-body { padding: 0.75rem !important; } .home-section.admin-home-layout .programme-management-admin-home-shell .program-tree-card-action-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; } .home-section.admin-home-layout .programme-management-admin-home-shell .program-tree-card-action-btn { min-height: 2.35rem; font-size: 0.84rem; padding: 0.45rem 0.55rem; } .home-section.admin-home-layout .programme-management-admin-home-shell .tree-children-container { margin-left: 0.35rem !important; } .programme-management-embed .programme-management-mobile-card, .programme-management-embed .programme-management-mobile-list-card { border-radius: 1rem; } .programme-management-embed .programme-management-mobile-card .card-body { padding: 0.9rem !important; } .programme-management-embed .programme-management-mobile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; } .programme-management-embed .programme-management-mobile-actions .btn { width: 100%; min-height: 2.35rem; display: inline-flex; align-items: center; justify-content: center; padding: 0.45rem 0.65rem; } .programme-management-embed .programme-management-mobile-menu-btn { color: #1f2937; width: 2.1rem; height: 2.1rem; flex: 0 0 auto; } .programme-management-embed .programme-management-mobile-settings { background: #f8fafc; border: 1px solid rgba(13, 110, 253, 0.18); border-radius: 0.85rem; padding: 0.75rem; } .programme-management-embed .programme-management-mobile-tabs-wrap { padding: 0; } .programme-management-embed .programme-management-mobile-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; } .programme-management-embed .programme-management-mobile-tabs .nav-item { width: 100%; } .programme-management-embed .programme-management-mobile-tabs .nav-link { width: 100%; min-height: 2.45rem; padding: 0.48rem 0.35rem; font-size: 0.88rem; } .programme-portfolio-hero-body { padding: 1.1rem; } .programme-portfolio-title { font-size: 1.25rem; } .programme-management-status-nav { justify-content: flex-start; } .programme-tree-toolbar-search { width: 100%; min-width: 100%; } .programme-management-embed .programme-tree-toolbar-count { display: none; } .programme-tree-toolbar-actions { width: 100%; flex-wrap: wrap; } .programme-management-embed .programme-tree-toolbar { margin-bottom: 0.75rem; } .programme-management-embed .programme-tree-search-input { min-height: 2.4rem; font-size: 0.94rem; } .programme-management-embed .program-tree-card { margin-bottom: 0.75rem; } .programme-management-embed .program-tree-card-shell { border-radius: 0.85rem; } .programme-management-embed .program-tree-card .card-body { padding: 0.8rem 0.8rem; } .program-tree-card-row { align-items: flex-start; flex-direction: column; gap: 0.75rem; } .programme-management-embed .program-tree-card-main { gap: 0.7rem; width: 100%; } .programme-management-embed .program-tree-card-icon { width: 2rem; height: 2rem; font-size: 1rem; border-radius: 0.55rem; } .programme-management-embed .program-tree-card-copy .card-title { font-size: 1.05rem; line-height: 1.25; } .programme-management-embed .program-tree-card-meta, .programme-management-embed .program-dates { font-size: 0.86rem; line-height: 1.25; } .program-tree-card-actions { width: 100%; align-items: stretch; gap: 0.55rem; } .programme-management-embed .program-tree-card-action-icons { justify-content: flex-start; } .program-tree-card-action-buttons { width: 100%; justify-content: flex-start; gap: 0.45rem; } .programme-management-embed .program-tree-card-action-btn { flex: 1 1 calc(50% - 0.45rem); min-width: calc(50% - 0.45rem); text-align: center; padding: 0.45rem 0.6rem; font-size: 0.75rem; } } .scrollable-visible { overflow-y: scroll !important; scrollbar-width: thick; /* For Firefox */ background: #f8f9fa; /* Light background for contrast */ } /* For Webkit browsers (Chrome, Edge, Safari) */ .scrollable-visible::-webkit-scrollbar { width: 10px; background: transparent; } .scrollable-visible::-webkit-scrollbar-thumb { background: #b0b0b0; border-radius: 5px; } .scrollable-visible::-webkit-scrollbar-track { background:transparent; } .max-height-250 { max-height: 250px; overflow-y: auto; scrollbar-width: auto; } .max-height-300 { max-height: 300px; overflow-y: auto; scrollbar-width: auto; } .max-height-600 { max-height: 600px; overflow-y: auto; scrollbar-width: auto; } .max-width-100 { max-width: 100px; overflow-y: auto; scrollbar-width: auto; } .max-height-100 { max-height: 100px; overflow-y: auto; scrollbar-width: auto; } .max-height-400 { max-height: 400px; overflow-y: auto; scrollbar-width: auto; } /* Course view assessment table */ #view-assessment-popup table#assessment_table { width: 100% !important; } #view-assessment-popup .assessment-table-container { width: 100%; } #view-assessment-popup .assessment-table-container .row { margin-left: 0; margin-right: 0; flex-wrap: wrap; } #view-assessment-popup .assessment-table-container .row > div { padding-top: 0.25rem; padding-bottom: 0.25rem; } #view-assessment-popup .assessment-table-container .dataTables_scrollHead, #view-assessment-popup .assessment-table-container .dataTables_scrollBody { margin-bottom: 0; } #view-assessment-popup .assessment-table-container .dataTables_scrollBody { max-height: 60vh; overflow-x: auto; } #view-assessment-popup .assessment-table-container .dataTables_length label, #view-assessment-popup .assessment-table-container .dataTables_filter label { width: 100%; } #view-assessment-popup .assessment-table-container .dataTables_filter input { width: 100%; } #manage-assessment-app .manage-assessment-row-dropdown { display: inline-flex; max-width: 100%; width: auto; } #simple-form-table-app .manage-assessment-row-dropdown, #simple-form-table-app .manage-user-popover-wrapper { display: flex; flex-direction: column; align-items: flex-end; width: 100%; min-width: 0; position: relative; overflow: visible; } #manage-assessment-app .manage-assessment-actions-toggle { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; } #simple-form-table-app .manage-assessment-actions-toggle, #simple-form-table-app .manage-user-toggle { display: inline-flex; align-items: center; gap: 0.25rem; width: auto; min-width: 0; padding: 0.14rem 0.3rem; font-size: 0.68rem; line-height: 1; border-radius: 999px; white-space: nowrap; } #manage-assessment-app .manage-assessment-actions-menu { position: fixed !important; left: var(--manage-assessment-actions-menu-left, 0) !important; top: var(--manage-assessment-actions-menu-top, 0) !important; width: 260px; max-width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); overflow: hidden auto; padding: 0.4rem; display: flex !important; flex-direction: column; gap: 0.35rem; background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%); border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 1.35rem; box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, 0.18); z-index: 4000 !important; visibility: hidden; pointer-events: none; right: auto !important; margin-top: 0 !important; transform: none !important; } #manage-assessment-app .manage-assessment-actions-menu .programme-courses-panel-action { gap: 0.75rem; font-size: 0.82rem; font-weight: 600; border-radius: 0.85rem; color: #1f2937; transition: background-color 0.15s ease, color 0.15s ease; } #manage-assessment-app .manage-assessment-actions-menu .programme-courses-panel-action:hover, #manage-assessment-app .manage-assessment-actions-menu .programme-courses-panel-action:focus { background: #f8fafc; color: #111827; } #manage-assessment-app .manage-assessment-actions-menu .programme-courses-panel-action i { color: #334155; width: 1rem; flex: 0 0 1rem; font-size: 1rem; } /* Assessment template "Manage" menu (Edit/Delete/Configure/Learners/Assign) -- fixed-position panel matching the manage-assessment-actions-menu above instead of Bootstrap's Popper-driven dropdown; JS (assessment_templates.js) positions it via the --assessment-template-manage-menu-left/top custom properties so it stays fully visible near table edges. */ .table .dropdown-menu.assessment-template-manage-menu, .table-responsive .dropdown-menu.assessment-template-manage-menu, .dataTables_wrapper .dropdown-menu.assessment-template-manage-menu, .assessment-template-manage-menu { position: fixed !important; left: var(--assessment-template-manage-menu-left, 0) !important; top: var(--assessment-template-manage-menu-top, 0) !important; right: auto !important; width: 240px; max-width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); overflow: hidden auto; display: block !important; margin-top: 0 !important; transform: none !important; z-index: 4000 !important; visibility: hidden; pointer-events: none; } .assessment-template-manage-menu.is-open { visibility: visible; pointer-events: auto; } .assessment-template-manage-menu[aria-hidden="true"] { display: none !important; } @media (max-width: 768px) { .assessment-template-manage-menu { width: min(15.5rem, calc(100vw - 1rem)) !important; max-width: calc(100vw - 1rem) !important; max-height: calc(100vh - 1rem) !important; padding: 0.35rem !important; border-radius: 0.95rem !important; box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16) !important; z-index: 5000 !important; } .assessment-template-manage-menu .programme-courses-panel-action { padding: 0.5rem 0.65rem !important; font-size: 0.68rem !important; line-height: 1.05; } } #simple-form-table-app .manage-assessment-actions-menu, #simple-form-table-app .manage-user-popover { position: absolute !important; top: auto !important; bottom: calc(100% + 0.45rem) !important; right: 0 !important; left: auto !important; width: 12.75rem; max-width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); overflow: visible !important; padding: 0 !important; display: block !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; z-index: 10000 !important; visibility: visible !important; pointer-events: auto !important; margin-top: 0 !important; transform: none !important; } #simple-form-table-app .manage-assessment-actions-menu .manage-user-action-panel, #simple-form-table-app .manage-user-popover .manage-user-action-panel { width: 100%; box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, 0.18); } #manage-assessment-app .manage-assessment-actions-menu.is-open { visibility: visible; pointer-events: auto; } #simple-form-table-app .manage-assessment-actions-menu.is-open, #simple-form-table-app .manage-user-popover-wrapper.is-open { z-index: 5; } #manage-assessment-app .manage-assessment-actions-menu[aria-hidden="true"], #simple-form-table-app .manage-assessment-actions-menu[aria-hidden="true"], #simple-form-table-app .manage-user-popover[aria-hidden="true"] { display: none !important; } @media (max-width: 768px) { #manage-assessment-app .manage-assessment-actions-toggle { width: auto; min-width: 7.25rem !important; padding: 0.22rem 0.52rem !important; font-size: 0.58rem !important; line-height: 1.05; justify-content: center; } #simple-form-table-app .manage-assessment-actions-toggle, #simple-form-table-app .manage-user-toggle { width: auto; min-width: 7.25rem !important; padding: 0.22rem 0.52rem !important; font-size: 0.58rem !important; line-height: 1.05; justify-content: center; } #manage-assessment-app .manage-assessment-actions-menu { width: min(15.5rem, calc(100vw - 1rem)) !important; max-width: calc(100vw - 1rem) !important; max-height: calc(100vh - 1rem) !important; padding: 0.35rem !important; border-radius: 0.95rem !important; box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16) !important; z-index: 5000 !important; } #simple-form-table-app .manage-assessment-actions-menu, #simple-form-table-app .manage-user-popover { width: min(15rem, calc(100vw - 1rem)) !important; max-width: calc(100vw - 1rem) !important; max-height: calc(100vh - 1rem) !important; padding: 0.35rem !important; border-radius: 0.95rem !important; box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16) !important; z-index: 5000 !important; margin-top: 0 !important; } #manage-assessment-app .manage-assessment-actions-menu .programme-courses-panel-action { padding: 0.5rem 0.65rem !important; font-size: 0.68rem !important; line-height: 1.05; } #simple-form-table-app .manage-assessment-actions-menu .programme-courses-panel-action, #simple-form-table-app .manage-user-popover .manage-user-action-btn { padding: 0.5rem 0.65rem !important; font-size: 0.68rem !important; line-height: 1.05; } #manage-assessment-app .manage-assessment-actions-toggle .bx { font-size: 0.95rem; margin-right: 0.2rem !important; } #simple-form-table-app .manage-assessment-actions-toggle .bx { font-size: 0.95rem; margin-right: 0.2rem !important; } #simple-form-table-app .manage-user-toggle i { font-size: 0.95rem; margin-right: 0.2rem !important; } #ai_generated_assessment_popup .modal-dialog { width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); margin: 0.5rem auto; } #ai_generated_assessment_popup .modal-footer { padding: 0.75rem 0.75rem 1rem; justify-content: center; align-items: center; gap: 0.5rem; } #ai_generated_assessment_popup #step1_buttons, #ai_generated_assessment_popup #step2_buttons { width: 100%; } #ai_generated_assessment_popup #step1_buttons { display: flex; justify-content: center; } #ai_generated_assessment_popup #step2_buttons > div { width: 100%; flex-wrap: wrap; justify-content: center; gap: 0.45rem; } #ai_generated_assessment_popup #submit_ai_assessment_btn, #ai_generated_assessment_popup #back_to_step1_btn, #ai_generated_assessment_popup #submit_scheduled_assessment_btn, #ai_generated_assessment_popup #generate_question_btn { max-width: 100%; min-height: 2.25rem; padding: 0.38rem 0.8rem; font-size: 0.72rem; line-height: 1.1; white-space: nowrap; } #ai_generated_assessment_popup #submit_ai_assessment_btn { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: 4.75rem; padding: 0.3rem 0.7rem; font-size: 0.68rem; } .course-view-curriculum-page #view-assessment-popup .modal-dialog { width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); margin: 0.5rem auto; } .course-view-curriculum-page #view-assessment-popup .modal-content { max-height: calc(100vh - 1rem); overflow: hidden; } .course-view-curriculum-page #view-assessment-popup .modal-header { padding: 0.7rem 0.8rem 0.55rem; } .course-view-curriculum-page #view-assessment-popup .modal-header h1 { font-size: 0.9rem; line-height: 1.2; margin-top: 0.15rem !important; } .course-view-curriculum-page #view-assessment-popup .modal-content > .card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 0.75rem; } .course-view-curriculum-page #view-assessment-popup .table-responsive { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable both-edges; padding-bottom: 0.25rem; } .course-view-curriculum-page #view-assessment-popup table#assessment_table { min-width: 780px; table-layout: auto; } .course-view-curriculum-page #view-assessment-popup table#assessment_table th, .course-view-curriculum-page #view-assessment-popup table#assessment_table td { font-size: 0.68rem; line-height: 1.25; padding: 0.35rem 0.45rem; vertical-align: top; white-space: nowrap; word-break: normal; overflow-wrap: normal; } .course-view-curriculum-page #view-assessment-popup table#assessment_table th:last-child, .course-view-curriculum-page #view-assessment-popup table#assessment_table td:last-child { min-width: 7.5rem; text-align: center; } .course-view-curriculum-page #view-assessment-popup table#assessment_table td:last-child .btn, .course-view-curriculum-page #view-assessment-popup table#assessment_table td:last-child a { display: inline-flex; align-items: center; justify-content: center; padding: 0.25rem 0.5rem; font-size: 0.65rem; line-height: 1; white-space: nowrap; } } .assessment-assign-modal .modal-content { max-height: calc(100vh - 2rem); overflow: hidden; } .assessment-assign-modal .modal-content > .modal-body { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: auto; padding-right: 0.35rem; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; scrollbar-width: auto; scrollbar-color: rgb(108 117 125 / 55%) #f1f1f1; } .assessment-assign-modal .modal-content > .modal-body::-webkit-scrollbar { width: 8px; height: 8px; } .assessment-assign-modal .modal-content > .modal-body::-webkit-scrollbar-track { background-color: #f1f1f1; } .assessment-assign-modal .modal-content > .modal-body::-webkit-scrollbar-thumb { background-color: rgb(108 117 125 / 55%); border-radius: 999px; } .assessment-assign-modal .choices { margin-bottom: 0; } .assessment-assign-modal .choices__list--dropdown, .assessment-assign-modal .choices__list[aria-expanded] { z-index: 2055; } .assessment-assign-modal .assign-assessment-table-shell { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; } .assessment-assign-modal .assign-assessment-table-shell > .card-body, .assessment-assign-modal .assign-assessment-table-shell > .col, .assessment-assign-modal .assign-assessment-table-shell > .table-responsive { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; } .assessment-assign-modal .assign-assessment-table-shell .table-responsive { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; } .assessment-assign-modal .assign-assessment-table-shell .dt-container, .assessment-assign-modal .assign-assessment-table-shell .dataTables_wrapper { display: flex; flex-direction: column; min-height: 0; min-width: 0; } .assessment-assign-modal .assign-assessment-table-shell .dt-scroll, .assessment-assign-modal .assign-assessment-table-shell .dataTables_scroll { flex: 1 1 auto; min-height: 0; min-width: 0; } .assessment-assign-modal .assign_switch { cursor: pointer; position: relative; z-index: 2; } .assessment-assign-modal .dt-scroll-head, .assessment-assign-modal .dataTables_scrollHead, .assessment-assign-modal .dt-scroll-body, .assessment-assign-modal .dataTables_scrollBody { margin-bottom: 0; } .assessment-assign-modal .dt-scroll-body, .assessment-assign-modal .dataTables_scrollBody { overflow-x: auto !important; overflow-y: auto !important; padding-bottom: 0.35rem; position: relative; z-index: 1; /* End-edge only: "both-edges" reserves a ~15px gutter on the left of the scroll body that the header strip doesn't get, shifting every body cell right of its header. */ scrollbar-gutter: stable; scrollbar-width: auto; scrollbar-color: #9ca3af #f1f1f1; } /* --- "Assign Assessment" modal tables, every "Assign To" type (Individual / Team / Course / Programme / Specialization) --- give the columns real padding, keep each field under its own header, and scroll the table as one piece. scrollX (set in manage_assessment.js) syncs the header and body table widths; this local DataTables build omits the overflow:hidden it normally puts on the header/footer strips, so pin it here or the wider header leaks past the modal edge. */ .assessment-assign-modal .dt-scroll-head, .assessment-assign-modal .dt-scroll-foot, .assessment-assign-modal .dataTables_scrollHead, .assessment-assign-modal .dataTables_scrollFoot { overflow: hidden; } .assessment-assign-modal table.dataTable > thead > tr > th, .assessment-assign-modal table.dataTable > tbody > tr > td { padding: 0.55rem 0.9rem; vertical-align: middle; } /* DataTables' own `td.dt-center` already centres most control columns, but it also tags the "No" column `dt-type-numeric` and right-aligns it at the same specificity, which wins by source order. Re-assert centre here (no Bootstrap utility both centres and out-ranks `dt-type-numeric` without !important). */ .assessment-assign-modal table.dataTable th.dt-center, .assessment-assign-modal table.dataTable td.dt-center { text-align: center; } /* Compact fields still need to become inline blocks so centring the column actually centres the control, rather than a full-width input / flex row stretching edge to edge under a centred header. */ .assessment-assign-modal table.dataTable td.dt-center input[type="datetime-local"] { width: auto; min-width: 12rem; max-width: 100%; display: inline-block; } .assessment-assign-modal table.dataTable td.dt-center .assign-skills-cell { display: inline-block; text-align: center; } .assessment-assign-modal table.dataTable td.dt-center > .d-flex, .assessment-assign-modal table.dataTable td.dt-center .assign_switch { display: inline-flex; justify-content: center; } .assessment-assign-modal .dt-scroll-body::-webkit-scrollbar, .assessment-assign-modal .dataTables_scrollBody::-webkit-scrollbar { height: 14px; } .assessment-assign-modal .dt-scroll-body::-webkit-scrollbar-track, .assessment-assign-modal .dataTables_scrollBody::-webkit-scrollbar-track { background: #f1f1f1; } .assessment-assign-modal .dt-scroll-body::-webkit-scrollbar-thumb, .assessment-assign-modal .dataTables_scrollBody::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 999px; border: 3px solid #f1f1f1; } .assessment-assign-modal .dt-scroll-body::-webkit-scrollbar-thumb:hover, .assessment-assign-modal .dataTables_scrollBody::-webkit-scrollbar-thumb:hover { background: #6b7280; } /* Mobile responsiveness fix for Cart and Profile/Menu button overlap */ @media (max-width: 768px) { /* Reduce cart button spacing aggressively */ .navbar-nav .cart-btn, button.cart-btn { margin-left: 0.25rem !important; margin-right: 0.25rem !important; padding-left: 0.3rem !important; padding-right: 0.3rem !important; font-size: 0.7rem !important; white-space: nowrap !important; } /* Hide "Cart" text on mobile, show only icon and badge */ .navbar-nav .cart-btn { font-size: 0 !important; line-height: 0 !important; } .navbar-nav .cart-btn .bx-cart { font-size: 1.1rem !important; line-height: normal !important; margin-right: 0 !important; } .navbar-nav .cart-btn .badge { font-size: 0.65rem !important; line-height: normal !important; padding: 0.1rem 0.25rem !important; margin-left: 0.25rem !important; } /* Reduce profile button spacing */ .navbar-nav .profile-button { margin-left: 0.25rem !important; margin-right: 0.25rem !important; padding-left: 0.25rem !important; padding-right: 0.25rem !important; } /* Control navbar list item spacing */ .navbar-nav li.d-flex { gap: 0.15rem !important; flex-wrap: nowrap !important; align-items: center !important; } /* Reduce icon and text sizes */ .navbar-nav .role-icon-sm { font-size: 0.85rem !important; margin-right: 0.25rem !important; } .navbar-nav .role_name_sm { font-size: 0.7rem !important; white-space: nowrap !important; } /* Reduce sidebar menu icon spacing */ .navbar-nav .sidebar-icon-menu { margin-left: 0.25rem !important; font-size: 1.2rem !important; } } /* Extra small devices - even more aggressive spacing */ @media (max-width: 480px) { .navbar-nav .cart-btn, button.cart-btn { margin-left: 0.15rem !important; margin-right: 0.15rem !important; padding-left: 0.2rem !important; padding-right: 0.2rem !important; min-width: auto !important; } .navbar-nav .cart-btn .bx-cart { font-size: 1rem !important; margin-right: 0.1rem !important; } .navbar-nav .cart-btn .badge { font-size: 0.6rem !important; padding: 0.05rem 0.2rem !important; margin-left: 0.1rem !important; } .navbar-nav .profile-button { margin-left: 0.15rem !important; margin-right: 0.15rem !important; padding-left: 0.15rem !important; padding-right: 0.15rem !important; } .navbar-nav li.d-flex { gap: 0.1rem !important; } .navbar-nav .role-icon-sm { font-size: 0.75rem !important; margin-right: 0.15rem !important; } .navbar-nav .role_name_sm { font-size: 0.65rem !important; } .navbar-nav .sidebar-icon-menu { margin-left: 0.15rem !important; font-size: 1rem !important; } } .note-content p { width: 100% !important; margin-bottom: 1.5rem; border-collapse: collapse; } .flashcard-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px 16px; box-shadow: 0 2px 8px rgba(0,0,0,4%); display: flex; flex-direction: column; gap: 8px; margin: 8px 0; } .flashcard-card p { margin: 0; line-height: 1.55; font-size: 15px; } .note-content img { max-width: 35%; /* shrink width on desktop */ height: auto; /* keep aspect ratio */ display: block; margin: 1.5rem auto; /* center + spacing */ border-radius: 12px; /* optional: rounded corners */ object-fit: cover; } .flashcard-card p { white-space: pre-wrap; } .flashcard-card p strong { display: inline-block; min-width: 120px; color: #374151; } /* On mobile, let them use full width */ @media (max-width: 768px) { .note-content img { max-width: 100%; } } .flashcard-line { display: inline; padding: 1px 2px; border-radius: 3px; } .flashcard-line-active{ background-color: #e0e0e0;; box-shadow: 0 0 0 2px rgb(125 124 120 / 60%); transition: background-color 0.05s linear; } /* ---------------- Mobile learner homepage (new UI) ---------------- */ @media (max-width: 767.98px) { .mobile-learner-margins { margin-right: 0 !important; margin-left: 0 !important; } /* Select product mobile view â€“ keep cards centered with equal side spacing */ .select-product-page .mobile-learner-margins { margin-right: 1rem !important; margin-left: 1rem !important; } @media (max-width: 767.98px) { .select-product-page .mobile-learner-margins { margin-right: 4rem !important; margin-left: 1rem !important; } } .mobile-learner-home { /* Keep learner mobile sections clear of the bottom nav. */ padding: 0 0 5.75rem 0; } /* Homepage carries denser content and needs a little extra room above bottom nav. */ .mobile-learner-home.learner-dashboard-mobile-home { padding-bottom: 8.25rem; } .mobile-learner-hero { /* Match the primary gradient look used on the learner homepage hero so all learner flows feel consistent, but keep the header compact and flat-edged on mobile */ background: var(--primary-color); background-image: linear-gradient( 135deg, var(--primary-color), var(--navbar-bg-color, var(--primary-color)) ); padding: 0.55rem 0.75rem 0.7rem; margin-top: -0.8rem; margin-bottom: 0; color: #fff; width: 100%; margin-left: 0; margin-right: 0; border-radius: 0; position: relative; box-sizing: border-box; } .mobile-learner-hero-header .mobile-hello { font-size: 0.8rem; opacity: 0.85; } .mobile-program-name { font-size: 1.1rem; font-weight: 700; } .mobile-program-subtitle { font-size: 0.75rem; opacity: 0.9; } .mobile-learner-metrics { margin-top: 0.25rem; } .mobile-metric-card { /* Use the client's primary brand color for metric tiles */ background: var(--primary-color); border-radius: 8px; padding: 0.12rem 0.3rem; text-align: center; } .mobile-metric-label { font-size: 0.6rem; opacity: 0.9; } .mobile-metric-value { font-size: 0.85rem; font-weight: 700; } .mobile-metric-value-small { font-size: 0.75rem; } .mobile-learner-section { padding: 0.75rem 1rem 0; } .mobile-section-title { font-size: 0.95rem; font-weight: 600; } .mobile-see-all-link { font-size: 0.8rem; color: var(--primary-color); } .mobile-course-card { background: #fff; background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), var(--mobile-course-image, none); background-position: center; background-size: cover; border-radius: 16px; padding: 0.6rem 0.8rem; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); } /* Reduce vertical gap so at least two cards are fully visible above the bottom nav */ .mobile-course-list .mobile-course-card.mb-3 { margin-bottom: 0.6rem !important; } .mobile-course-icon { width: 36px; height: 36px; border-radius: 12px; background: var(--primary-color); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; color: #ffffff; } .mobile-course-image-icon { overflow: hidden; background: transparent; } .mobile-course-image-icon img { display: block; width: 100%; height: 100%; object-fit: cover; } .mobile-course-tag { font-size: 0.65rem; color: #64748b; } .mobile-course-title { font-size: 0.95rem; font-weight: 600; color: #0f172a; } .mobile-course-meta { font-size: 0.75rem; color: #6b7280; } .mobile-view-btn { border-radius: 999px; font-size: 0.8rem; padding: 0.35rem 0.7rem; background-color: var(--navbar-bg-color); border-color: var(--navbar-bg-color); } .mobile-empty-title { font-size: 0.95rem; font-weight: 600; } .mobile-empty-subtitle { font-size: 0.8rem; color: #6b7280; } /* Generic mobile landing wrapper */ .mobile-landing-page { background-color: var(--bg-color); padding: 0 0 5rem 0; /* leave room for bottom nav */ } /* Select product mobile layout: fix container padding so cards are centered */ .select-product-page .container { padding-left: 0 !important; padding-right: 0 !important; } /* Give the select product mobile container extra height so all product cards are visible above the bottom nav */ .select-product-page .mobile-container.container-suits { padding-bottom: 8rem; } /* Select product mobile cards */ .select-product-page .select-product-mobile-shell { margin-top: 1.25rem; } .select-product-page .mobile-product-list { display: flex; flex-direction: column; gap: 0.75rem; /* mimic a custom mx-3 just for this list */ margin-right: -1rem !important; margin-left: 1rem !important; } .select-product-page .mobile-product-card { background: var(--primary-color); border-radius: 16px; padding: 0.7rem 0.9rem; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); color: #ffffff; } .select-product-page .mobile-product-title { font-size: 0.9rem; font-weight: 600; color: #ffffff; } .select-product-page .mobile-product-subtitle { font-size: 0.75rem; color: rgba(255, 255, 255, 0.85); } .select-product-page .mobile-product-icon img.card-icon { width: 32px; height: 32px; } } /* Mobile curriculum_content list styling */ @media (max-width: 767.98px) { .curriculum-content-page .chapters-heading { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: #9ca3af; } .curriculum-content-page .mobile-curriculum-back .mobile-back-btn { background: #eef2ff; border: none; color: #111827; font-size: 0.8rem; } .curriculum-content-page .mobile-curriculum-list { margin-top: 0.5rem; } .curriculum-content-page .mobile-curriculum-item { background: #e2e8f0; border-radius: 18px; padding: 0.85rem 0.9rem; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06); } .curriculum-content-page .mobile-status-badge { font-size: 0.7rem; border-radius: 999px; padding: 0.15rem 0.6rem; } .curriculum-content-page .mobile-status-complete { background: #dcfce7; color: #15803d; } /* Position mobile back button similarly to learner hero back button */ .curriculum-content-page .mobile-curriculum-back { margin-top: 0.25rem; } body.curriculum-content-layout .curriculum-content-page .mobile-manage-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-height: 2rem; width: fit-content; min-width: 6.15rem; max-width: calc(100vw - 1rem); padding: 0.22rem 0.62rem; font-size: 0.66rem; line-height: 1.1; border-radius: 999px; white-space: nowrap; } body.curriculum-content-layout .curriculum-content-page .content-actions-menu { width: min(11rem, calc(100vw - 1rem)); min-width: 7.75rem; max-width: calc(100vw - 1rem); padding: 0.35rem 0.3rem; z-index: 1085; } body.curriculum-content-layout .curriculum-content-page .content-actions-dropdown.dropup .content-actions-menu { margin-bottom: 0.25rem; } body.curriculum-content-layout .curriculum-content-page .content-actions-menu .dropdown-item { align-items: center; gap: 0.35rem; padding: 0.5rem 0.45rem; font-size: 0.72rem; } body.curriculum-content-layout .curriculum-content-page .content-action-icon { width: 0.9rem; min-width: 0.9rem; flex: 0 0 0.9rem; font-size: 0.82rem; } } .curriculum-content-page .content-actions-dropdown { position: relative; } .curriculum-content-page .content-actions-menu { --bs-dropdown-min-width: 6.25rem; min-width: 6.25rem; width: 6.25rem; max-width: 6.25rem; box-sizing: border-box; padding: 0.55rem 0.35rem; border-radius: 16px; background-color: #fff; border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14); } .curriculum-content-page .content-actions-dropdown.dropup .content-actions-menu { margin-bottom: 0.4rem; margin-top: 0; } .curriculum-content-page .content-actions-menu .dropdown-item { display: flex; align-items: center; gap: 0.3rem; padding: 0.8rem 0.5rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; line-height: 1.2; color: #334155; white-space: nowrap; } .curriculum-content-page .content-actions-menu .dropdown-item:hover, .curriculum-content-page .content-actions-menu .dropdown-item:focus { background-color: #f3f6fb; color: #1f2937; } .curriculum-content-page .content-actions-menu .dropdown-item.is-delete:hover, .curriculum-content-page .content-actions-menu .dropdown-item.is-delete:focus { background-color: #fdecee; color: #dc3545; } .curriculum-content-page .content-actions-menu .dropdown-item.is-muted { opacity: 0.55; } .curriculum-content-page .content-action-icon { width: 1rem; min-width: 1rem; text-align: center; font-size: 0.9rem; flex: 0 0 1rem; } .curriculum-content-page .curriculum-content-drag-handle { align-items: center; border: 1px solid rgba(79, 70, 229, 0.16); border-radius: 10px; color: var(--primary-color); cursor: grab; display: inline-flex; flex: 0 0 2rem; height: 2rem; justify-content: center; touch-action: none; width: 2rem; } .curriculum-content-page .curriculum-content-drag-handle:active { cursor: grabbing; } .curriculum-content-page .curriculum-content-drag-handle:hover, .curriculum-content-page .curriculum-content-drag-handle:focus { background: rgba(79, 70, 229, 0.08); border-color: var(--primary-color); outline: none; } .curriculum-content-page .curriculum-content-row, .curriculum-content-page .mobile-curriculum-item { transition: border-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease; } .curriculum-content-page .is-content-dragging { opacity: 0.58; } .curriculum-content-page .is-content-drop-before { box-shadow: inset 0 3px 0 var(--primary-color); } .curriculum-content-page .is-content-drop-after { box-shadow: inset 0 -3px 0 var(--primary-color); } .curriculum-content-page .curriculum-content-sort-placeholder { background: rgba(79, 70, 229, 0.08); border: 2px dashed var(--primary-color); border-radius: 14px; min-height: 4.25rem; margin-bottom: 0.5rem; } /* Academic Years page: custom mobile container padding */ @media (max-width: 767.98px) { .academic-years-mobile-shell { padding-left: 0 !important; padding-right: 0 !important; } } /* Teacher program subjects (All Subjects list) â€“ custom mobile container padding */ @media (max-width: 767.98px) { .teacher-program-subjects-shell { padding-left: 0.5rem !important; padding-right: 4.5rem !important; } } /* Teacher program subjects page shell */ .teacher-program-subjects-shell { position: relative; border: 1px solid var(--primary-color); border-radius: 1.75rem; width: 95%; max-width: 95%; margin: 0.35rem auto 0; background: #ffffff; box-shadow: 0 22px 55px rgba(15, 23, 42, 0.08); padding: clamp(0.875rem, 1vw, 1.25rem) !important; display: flex; flex-direction: column; box-sizing: border-box; } .teacher-all-subjects-header-card { border-radius: 1.25rem; overflow: hidden; } /* All Courses / All Subjects page title+subtitle currently render on plain markup with no header-card wrapper, so they fell back to unstyled browser defaults. Match Academic Years' sizing (.academic-page .academic-title/.academic-subtitle, main_system_index.css ~line 12378/12384) so the two pages read the same. */ .teacher-all-subjects-title { color: #111827; font-size: 24px; font-weight: 700; } .teacher-all-subjects-subtitle { color: #6b7280; font-size: 13px; } .teacher-all-subjects-header-card .card-header { padding: 1rem 1.25rem 1.1rem; } .teacher-all-subjects-header-card.bg-outline-primary .teacher-all-subjects-academic-year { color: rgba(255, 255, 255, 0.88); font-size: clamp(1.15rem, 1.55vw, 1.45rem); font-weight: 700; line-height: 1.08; } .teacher-all-subjects-header-card.bg-outline-primary .teacher-all-subjects-title { color: #ffffff; font-size: clamp(1.05rem, 1.35vw, 1.2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; } .teacher-all-subjects-header-card.bg-outline-primary .teacher-all-subjects-subtitle { color: rgba(255, 255, 255, 0.9); font-size: 0.88rem; line-height: 1.45; } .teacher-subject-card { border: 1px solid var(--primary-color); border-radius: 1.15rem; overflow: hidden; background: #ffffff; } .teacher-grade-card { border: 1px solid var(--primary-color); border-radius: 14px; overflow: hidden; background: #ffffff; } body.mentor-subject-insights-page .mentor-subject-insights-shell { position: relative; border: 1px solid var(--primary-color); border-radius: 1.75rem; width: 95%; max-width: 95%; margin: 0.35rem auto 0; background: #ffffff; box-shadow: 0 22px 55px rgba(15, 23, 42, 0.08); padding: clamp(0.875rem, 1vw, 1.25rem) !important; display: flex; flex-direction: column; box-sizing: border-box; } body.mentor-subject-insights-page.programme-cards-medium-bootstrap .mentor-subject-insights-shell { margin-top: -7px !important; } body.mentor-subject-insights-page .mentor-subject-insights-header-card { border-radius: 1.25rem; overflow: hidden; } body.mentor-subject-insights-page .mentor-subject-insights-header-card .card-header { padding: 1rem 1.25rem 1.1rem; } body.mentor-subject-insights-page .mentor-subject-insights-tag { display: inline-flex; align-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.18); color: rgb(33 29 29 / 92%); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1; padding: 0.38rem 0.7rem; text-transform: uppercase; } body.mentor-subject-insights-page .mentor-subject-insights-title { color: #3a3232; font-size: clamp(1.25rem, 1.7vw, 1.65rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; } body.mentor-subject-insights-page .mentor-subject-insights-subtitle { color: #3a3232; font-size: 0.9rem; line-height: 1.5; max-width: 62rem; } body.mentor-subject-insights-page .mentor-subject-insights-filter-card, body.mentor-subject-insights-page .mentor-subject-insights-tab-card { border: 1px solid var(--primary-color) !important; border-radius: 1.35rem; overflow: hidden; background: #ffffff; } body.mentor-subject-insights-page .mentor-subject-insights-filter-card .card-body, body.mentor-subject-insights-page .mentor-subject-insights-tab-card .card-body { padding: 1rem 1.05rem; } body.mentor-subject-insights-page .mentor-subject-insights-filter-card .form-control, body.mentor-subject-insights-page .mentor-subject-insights-filter-card .form-select, body.mentor-subject-insights-page .mentor-subject-insights-comment-toolbar .form-control, body.mentor-subject-insights-page .mentor-subject-insights-comment-toolbar .form-select { border-radius: 0.9rem; } body.mentor-subject-insights-page .mentor-subject-insights-tabs { gap: 0.5rem; padding: 0.9rem 1.05rem 0; } body.mentor-subject-insights-page .mentor-subject-insights-tabs .nav-link { border: 1px solid rgba(111, 66, 193, 0.18); border-radius: 999px; color: var(--primary-color); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; line-height: 1.5; min-height: 28px; min-width: 7.5rem; padding: 4px 16px; white-space: nowrap; } body.mentor-subject-insights-page .mentor-subject-insights-tabs .nav-link.active { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); border-color: transparent; color: #ffffff; box-shadow: 0 10px 24px rgba(111, 66, 193, 0.24); } body.mentor-subject-insights-page .mentor-subject-insights-summary-grid { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } body.mentor-subject-insights-page .mentor-subject-insights-metric-card { border: 1px solid rgba(111, 66, 193, 0.14); border-radius: 1rem; background: linear-gradient(180deg, #ffffff 0%, #faf8ff 100%); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05); min-height: 8rem; padding: 1rem; } body.mentor-subject-insights-page .mentor-subject-insights-metric-label { color: #6b7280; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } body.mentor-subject-insights-page .mentor-subject-insights-metric-value { color: #111827; font-size: 1.65rem; font-weight: 800; line-height: 1.1; } body.mentor-subject-insights-page .mentor-subject-insights-metric-copy { color: #4b5563; font-size: 0.84rem; line-height: 1.45; } body.mentor-subject-insights-page .mentor-subject-insights-activity-grid { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } body.mentor-subject-insights-page .mentor-subject-insights-activity-card { border: 1px solid rgba(111, 66, 193, 0.14); border-radius: 1rem; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05); height: 100%; } body.mentor-subject-insights-page .mentor-subject-insights-activity-card .card-header { background: linear-gradient(135deg, rgba(111, 66, 193, 0.12), rgba(73, 76, 158, 0.12)); border-bottom: 1px solid rgba(111, 66, 193, 0.12); color: #1f2937; padding: 0.85rem 1rem; } body.mentor-subject-insights-page .mentor-subject-insights-activity-list { display: flex; flex-direction: column; gap: 0.65rem; } body.mentor-subject-insights-page .mentor-subject-insights-activity-item { border-bottom: 1px solid rgba(107, 114, 128, 0.12); padding: 0.75rem 0; } body.mentor-subject-insights-page .mentor-subject-insights-activity-item:last-child { border-bottom: 0; padding-bottom: 0; } body.mentor-subject-insights-page .mentor-subject-insights-timeline { display: flex; flex-direction: column; gap: 0.8rem; } body.mentor-subject-insights-page .mentor-subject-insights-timeline-item { border: 1px solid rgba(111, 66, 193, 0.14); border-radius: 1rem; background: #ffffff; box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05); padding: 1rem; } body.mentor-subject-insights-page .mentor-subject-insights-avatar { align-items: center; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); border-radius: 999px; color: #ffffff; display: inline-flex; flex: 0 0 auto; height: 2.75rem; justify-content: center; width: 2.75rem; } body.mentor-subject-insights-page .mentor-subject-insights-avatar-text { font-size: 0.88rem; font-weight: 800; letter-spacing: 0.04em; } body.mentor-subject-insights-page .mentor-subject-insights-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } body.mentor-subject-insights-page .mentor-subject-insights-content { color: #1f2937; font-size: 0.95rem; line-height: 1.6; white-space: pre-wrap; } body.mentor-subject-insights-page .mentor-subject-insights-empty-state { background: rgba(111, 66, 193, 0.06); border: 1px dashed rgba(111, 66, 193, 0.24); border-radius: 1rem; color: #374151; padding: 1.25rem; text-align: center; } body.mentor-subject-insights-page .mentor-subject-insights-status { border-radius: 0.9rem; } body.mentor-subject-insights-page .mentor-subject-insights-pagination { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; align-items: center; } @media (max-width: 767.98px) { body.mentor-subject-insights-page .mentor-subject-insights-shell { border-radius: 1.25rem; box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08); padding: 0.9rem !important; } body.mentor-subject-insights-page.programme-cards-medium-bootstrap .mentor-subject-insights-shell { margin-top: 0.55rem !important; } body.mentor-subject-insights-page .mentor-subject-insights-header-card .card-header { padding: 0.9rem 0.95rem 1rem; } body.mentor-subject-insights-page .mentor-subject-insights-filter-card .card-body, body.mentor-subject-insights-page .mentor-subject-insights-tab-card .card-body { padding: 0.9rem; } body.mentor-subject-insights-page .mentor-subject-insights-tabs { padding: 0.8rem 0.9rem 0; } body.mentor-subject-insights-page .mentor-subject-insights-metric-card, body.mentor-subject-insights-page .mentor-subject-insights-timeline-item { border-radius: 0.85rem; } } @media (max-width: 767.98px) { /* width/max-width/margin here are already fully governed by the more specific body.teacher-program-subjects-page .teacher-program-subjects-shell rule at this same breakpoint further down this file -- that rule's margin: auto also wins over any 0 set here, so don't re-add them. */ .teacher-program-subjects-shell { border-radius: 1.25rem; padding: 0.75rem !important; box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08); } .teacher-all-subjects-header-card .teacher-all-subjects-academic-year { font-size: 1rem; } .teacher-all-subjects-header-card .teacher-all-subjects-title { font-size: 0.98rem; } .teacher-all-subjects-header-card .teacher-all-subjects-subtitle { font-size: 0.8rem; } .teacher-all-subjects-header-card .card-header { padding: 0.85rem 0.9rem 0.95rem; } } @media (max-width: 767.98px) { .mobile-learner-hero .mobile-back-btn { background: #eef2ff; border: none; color: #111827; font-size: 0.72rem; padding: 0.2rem 0.5rem; } /* Compact, unified top navbar on mobile (profile-menu) */ .profile-menu.navbar-content-md { background-image: linear-gradient( 135deg, var(--profile-menu-bg-color, var(--primary-color)), var(--navbar-bg-color, var(--primary-color)) ); padding: 0.35rem 0.75rem; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.25); } .profile-menu.navbar-content-md .container-fluid { padding-left: 0.25rem; padding-right: 0.25rem; } .profile-menu.navbar-content-md .container-fluid .row { align-items: center; } .profile-menu.navbar-content-md .launcher-icon { font-size: 1.1rem; } .profile-menu.navbar-content-md .btn-link { color: var(--profile-menu-text-color, #fff) !important; } .profile-menu.navbar-content-md .navigation__group .icon i, .profile-menu.navbar-content-md .navigation__group .icon svg { font-size: 1.1rem; color: var(--profile-menu-text-color, #fff) !important; fill: var(--profile-menu-text-color, #fff) !important; } /* For learner and curriculum-content mobile layouts, hide the secondary breadcrumb navbar so we only have a single compact top bar. */ body.learner-homepage-layout .navbar.top-34, body.curriculum-content-layout .navbar.top-34 { display: none !important; } /* On learner mobile pages, hide the extra mobile waffle button from the platform header to avoid duplicate grid icons. */ body.learner-homepage-layout #mobile_waffle_btn { display: none !important; } /* On curriculum content mobile view, pull the hero right up under the profile-menu with no extra gap */ .curriculum-content-page.card-margin-top { margin-top: 0 !important; } .curriculum-content-page .mobile-learner-hero { margin-top: 0 !important; } .mobile-learner-hero .mobile-back-wrapper { position: absolute; top: 0.4rem; right: 0.6rem; margin: 0; } .mobile-learner-hero-header { padding-right: 2.75rem; margin-top: 0; } /* Curriculum view page: keep the hero back button compact and aligned on mobile */ body.curriculum-content-layout #curriculum-view-app .mobile-learner-hero { padding: 0.6rem 0.7rem 0.7rem !important; } body.curriculum-content-layout #curriculum-view-app .mobile-learner-hero-header { padding-right: 2.15rem !important; } body.curriculum-content-layout #curriculum-view-app .mobile-learner-hero .mobile-back-wrapper { top: 0.34rem !important; right: 0.45rem !important; margin: 0 !important; } body.curriculum-content-layout #curriculum-view-app .mobile-learner-hero .mobile-back-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 2.15rem !important; min-width: 2.15rem !important; height: 2.15rem !important; min-height: 2.15rem !important; padding: 0 !important; font-size: 0.72rem !important; line-height: 1 !important; border-radius: 999px !important; white-space: nowrap !important; } } /* Learner mobile sections v2: replace legacy learner mobile overrides with one unified layout for home_page, teacher_course_curriculum, learner assessments and teams. */ @media (max-width: 767.98px) { body.learner-mobile-bootstrap-ui { --learner-mobile-gutter: 0rem; --learner-mobile-max-width: 28.5rem; --learner-mobile-fixed-top: 52px; --learner-mobile-hero-height: 132px; margin: 0 !important; overflow-x: hidden !important; } body.learner-mobile-bootstrap-ui .sidebar.sidebar-md { top: auto !important; bottom: 0 !important; left: 0 !important; width: 100% !important; max-width: 100vw !important; height: auto !important; margin: 0 !important; z-index: 1040 !important; } body.learner-mobile-bootstrap-ui .sidebar.sidebar-md .orcaa-sidebar-container { width: 100% !important; max-width: 100% !important; height: auto !important; overflow-x: auto !important; overflow-y: hidden !important; } body.learner-mobile-bootstrap-ui .sidebar.sidebar-md .orcaa-sidebar { width: max-content !important; min-width: 100% !important; max-width: none !important; height: auto !important; margin-top: 0 !important; padding-top: 0.12rem !important; padding-bottom: 0.12rem !important; } body.learner-mobile-bootstrap-ui .home-section, body.learner-mobile-bootstrap-ui .sidebar.active ~ .home-section { left: 0 !important; top: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; overflow-x: hidden !important; } body.learner-mobile-bootstrap-ui .home-section nav, body.learner-mobile-bootstrap-ui .sidebar.active ~ .home-section nav { left: 0 !important; width: 100% !important; } body.learner-mobile-bootstrap-ui .mobile-learner-home { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: calc(var(--learner-mobile-fixed-top) + var(--learner-mobile-hero-height) + 0.5rem) 0 5.2rem 0 !important; } body.learner-mobile-bootstrap-ui .mobile-learner-home.card-margin-top { margin-top: 0 !important; } /* The assessments mobile hero is fixed and this wrapper contains no other content. Reserve exactly its occupied viewport space in normal flow so the tabs and the "Assessments Assigned" heading cannot slide behind it. */ body.learner-mobile-bootstrap-ui .mobile-learner-home.learner-assessments-mobile-home { height: calc(var(--learner-mobile-fixed-top) + var(--learner-mobile-hero-height) + 0.5rem); padding: 0 !important; } body.learner-mobile-bootstrap-ui .learner-assessments-page.card-margin-top { /* The preceding mobile hero wrapper already reserves the fixed hero's space. Adding another hero-sized margin pushes the tabs and table below the fold on first load. */ margin-top: 0 !important; } /* homepage.html no longer renders a .mobile-learner-hero above this list (removed from the template) -- the generic .mobile-learner-home rule above still reserves --learner-mobile-hero-height (132px default) of padding-top for it, leaving a large empty gap. Override that here with just a small top gap instead. */ body.learner-mobile-bootstrap-ui .mobile-learner-home.learner-dashboard-mobile-home { min-height: calc(100vh - var(--learner-mobile-fixed-top) - 0.2rem); padding-top: 0.75rem !important; padding-bottom: 5.2rem !important; } /* curriculum_content.html renders no .mobile-learner-hero either -- same fix as .learner-dashboard-mobile-home above so the tabs sit close to the navbar instead of leaving the reserved hero-height gap. */ body.learner-mobile-bootstrap-ui .mobile-learner-home.curriculum-content-mobile-home { padding-top: 0.75rem !important; position: relative; } /* Same learner-role back button, reused on teacher_subject_curriculum.html (its container never gets the .mobile-learner-home/.curriculum-content-mobile-home classes for the learner role, so it needs its own anchor for position:relative). */ body.learner-mobile-bootstrap-ui .curriculum-list-page.teacher-subject-curriculum-page { position: relative; } /* Back button floats top-left, absolutely positioned so it never adds to the flow height -- the tabs below stay exactly where the small padding-top above puts them. */ body.learner-mobile-bootstrap-ui .mobile-learner-home.curriculum-content-mobile-home .mobile-curriculum-content-back, body.learner-mobile-bootstrap-ui .curriculum-list-page.teacher-subject-curriculum-page .mobile-curriculum-content-back { position: absolute; top: 0.55rem; left: 0.9rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 0.2rem; width: auto; height: 2rem; min-width: 4.25rem; min-height: 2rem; padding: 0 0.65rem !important; font-size: 0.8rem; line-height: 1; white-space: nowrap; background: var(--btn-outline-primary-bg, var(--secondary-color, #494c9e)); border: none; color: #fff; } body.learner-mobile-bootstrap-ui .mobile-learner-hero { position: fixed !important; top: var(--learner-mobile-fixed-top) !important; left: 0 !important; right: 0 !important; z-index: 98 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-top: 0 !important; border-radius: 0 !important; padding: 0.4rem 0.85rem 0.4rem !important; overflow: hidden !important; } body.learner-mobile-bootstrap-ui .mobile-learner-hero-header { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-right: 2rem !important; } body.learner-mobile-bootstrap-ui .mobile-learner-hero .mobile-back-wrapper { top: 0.34rem !important; right: 0.5rem !important; } body.learner-mobile-bootstrap-ui #curriculum-content-app .mobile-learner-hero .mobile-back-wrapper { right: 0.85rem !important; z-index: 2; } body.learner-mobile-bootstrap-ui #curriculum-content-app .mobile-learner-hero .mobile-back-btn { display: inline-flex !important; align-items: center; justify-content: center; width: auto; min-width: 4.25rem; height: 2rem; min-height: 2rem; padding: 0 0.65rem !important; line-height: 1; white-space: nowrap; } body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page.monitoring-margin-top .mobile-learner-hero .mobile-back-wrapper { right: 0.85rem !important; z-index: 2; } body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page.monitoring-margin-top .mobile-learner-hero .mobile-back-btn { display: inline-flex !important; align-items: center; justify-content: center; width: auto; min-width: 4.25rem; height: 2rem; min-height: 2rem; padding: 0 0.65rem !important; line-height: 1; white-space: nowrap; } body.learner-mobile-bootstrap-ui .mobile-learner-hero .mobile-hello { font-size: 0.76rem !important; line-height: 1.2 !important; margin-bottom: 0.1rem !important; } body.learner-mobile-bootstrap-ui .mobile-learner-hero .mobile-program-name { font-size: 0.92rem !important; line-height: 1.15 !important; margin-bottom: 0.15rem !important; } body.learner-mobile-bootstrap-ui .mobile-learner-hero .mobile-program-subtitle { font-size: 0.68rem !important; line-height: 1.25 !important; } body.learner-mobile-bootstrap-ui .mobile-learner-margins, body.learner-mobile-bootstrap-ui .mobile-learner-section, body.learner-mobile-bootstrap-ui .learner-assessments-page, body.learner-mobile-bootstrap-ui .learner-teams-page, body.learner-mobile-bootstrap-ui #curriculum-content-app .teacher-subject-curriculum-page.card-margin-top, body.learner-mobile-bootstrap-ui #curriculum-view-app .teacher-subject-curriculum-page.card-margin-top, body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page.card-margin-top.monitoring-margin-top { width: calc(100% - (var(--learner-mobile-gutter) * 2)) !important; max-width: var(--learner-mobile-max-width) !important; margin-left: auto !important; margin-right: auto !important; } body.learner-mobile-bootstrap-ui .mobile-course-list { min-height: max(12rem, calc(100vh - var(--learner-mobile-fixed-top) - var(--learner-mobile-hero-height) - 7.3rem)); } body.learner-mobile-bootstrap-ui .learner-assessments-page, body.learner-mobile-bootstrap-ui .learner-teams-page, body.learner-mobile-bootstrap-ui #curriculum-content-app .teacher-subject-curriculum-page.card-margin-top, body.learner-mobile-bootstrap-ui #curriculum-view-app .teacher-subject-curriculum-page.card-margin-top, body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page.card-margin-top.monitoring-margin-top { padding-left: 0 !important; padding-right: 0 !important; } body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page.card-margin-top.monitoring-margin-top { margin-top: 0.85rem !important; } /* learner_team.html no longer renders a .mobile-learner-hero on mobile (removed from the template), so the page needs no reserved space above it any more -- just a small top gap (the shared .academic-page padding-top is only zeroed for this page on desktop, ~line 33707). */ body.learner-mobile-bootstrap-ui .learner-teams-page.academic-page { padding-top: 1rem !important; } body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page > .row { --bs-gutter-x: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page > .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page .mobile-course-weeks, body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page .mobile-course-curriculum, body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page .teacher-monitor-tabs { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page .mobile-course-curriculum { overflow-y: auto !important; overflow-x: hidden !important; max-height: max(18rem, calc(100vh - var(--learner-mobile-fixed-top, 52px) - var(--learner-mobile-hero-height, 132px) - 4.8rem)); -webkit-overflow-scrolling: touch; box-sizing: border-box; } body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page .mian-course-section { display: flex; flex-direction: column; justify-content: flex-start; min-height: calc(100vh - var(--learner-mobile-fixed-top, 52px) - var(--learner-mobile-hero-height, 132px) - 4.9rem); } body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page .mian-course-section > .mobile-course-curriculum { flex: 1 1 auto; } body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page .mobile-module-card-shell { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page .mobile-module-card, body.learner-mobile-bootstrap-ui .teacher-subject-curriculum-page .curriculum-card, body.learner-mobile-bootstrap-ui .mobile-course-card, body.learner-mobile-bootstrap-ui .learner-mobile-content-card { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } body.learner-mobile-bootstrap-ui .mobile-course-card, body.learner-mobile-bootstrap-ui .learner-mobile-content-card .card-body { border-radius: 16px !important; } body.learner-mobile-bootstrap-ui #curriculum-content-app .curriculum-content-page .learner-progress-terms { margin-left: 0 !important; margin-right: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; flex-wrap: nowrap !important; gap: 0.45rem !important; padding-bottom: 0.2rem !important; } body.learner-mobile-bootstrap-ui #curriculum-content-app .curriculum-content-page .learner-progress-terms .nav-item { flex: 0 0 auto !important; } body.learner-mobile-bootstrap-ui #curriculum-content-app .curriculum-content-page .card.border-0.shadow-sm, body.learner-mobile-bootstrap-ui #curriculum-content-app .curriculum-content-page .mobile-curriculum-list { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } body.learner-mobile-bootstrap-ui #curriculum-content-app .curriculum-content-page .mobile-curriculum-item { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } body.learner-mobile-bootstrap-ui #curriculum-content-app .curriculum-content-page .mobile-manage-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: fit-content !important; min-width: 6.15rem !important; max-width: calc(100vw - 1rem) !important; padding: 0.22rem 0.62rem !important; font-size: 0.66rem !important; line-height: 1.1 !important; } body.learner-mobile-bootstrap-ui #curriculum-view-app .curriculum-view-card, body.learner-mobile-bootstrap-ui #curriculum-view-app .cv-upnext-sidebar-card { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } body.learner-mobile-bootstrap-ui #curriculum-view-app .learning-card.curriculum-view-card { margin-top: 0.75rem !important; margin-bottom: 0.7rem !important; border-radius: 16px !important; } body.learner-mobile-bootstrap-ui #curriculum-view-app .learning-card.curriculum-view-card .card-body { padding: 0.72rem 0.82rem !important; } body.learner-mobile-bootstrap-ui #curriculum-view-app .cv-content-viewer { min-height: 18rem !important; max-height: calc(100vh - var(--learner-mobile-fixed-top, 52px) - var(--learner-mobile-hero-height, 132px) - 13.2rem) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; } body.learner-mobile-bootstrap-ui #curriculum-view-app .cv-learning-actions-row { flex-wrap: nowrap !important; gap: 0.5rem !important; align-items: center !important; justify-content: space-between !important; } body.learner-mobile-bootstrap-ui #curriculum-view-app .cv-learning-actions-row > .d-flex { width: auto !important; flex: 0 0 auto !important; align-items: center !important; } body.learner-mobile-bootstrap-ui #curriculum-view-app .cv-learning-actions-row > .d-flex:first-child { margin-right: auto !important; justify-content: flex-start !important; } body.learner-mobile-bootstrap-ui #curriculum-view-app .cv-learning-actions-row > .d-flex:last-child { margin-left: auto !important; justify-content: flex-end !important; flex-wrap: nowrap !important; } body.learner-mobile-bootstrap-ui #curriculum-view-app .cv-learning-actions-row .btn { min-height: 2rem; font-size: 0.72rem !important; line-height: 1.2 !important; } body.learner-mobile-bootstrap-ui #curriculum-view-app .cv-learning-actions-row .btn.prev { width: 2.35rem !important; min-width: 2.35rem !important; padding-left: 0.35rem !important; padding-right: 0.35rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body.learner-mobile-bootstrap-ui #curriculum-view-app .cv-learning-actions-row > .d-flex:last-child .btn { max-width: 12.8rem; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; } body.learner-mobile-bootstrap-ui .learner-assessments-page .learner-assessments-tabs { margin-left: 0 !important; margin-right: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; flex-wrap: nowrap !important; gap: 0.4rem !important; padding-bottom: 0.2rem !important; } body.learner-mobile-bootstrap-ui .learner-assessments-page .learner-assessments-tabs .nav-item { flex: 0 0 auto !important; } body.learner-mobile-bootstrap-ui .learner-assessments-page .learner-assessments-tabs .nav-link { white-space: nowrap !important; font-size: 0.82rem !important; padding: 0.34rem 0.62rem !important; } body.learner-mobile-bootstrap-ui .learner-assessments-page:not(.learner-evaluations-page) .tab-content { padding-right: 0 !important; margin-right: 0 !important; } body.learner-mobile-bootstrap-ui .learner-assessments-page .table-responsive, body.learner-mobile-bootstrap-ui .learner-assessments-page .dataTables_wrapper, body.learner-mobile-bootstrap-ui .learner-assessments-page .dataTables_wrapper .dataTables_scroll, body.learner-mobile-bootstrap-ui .learner-assessments-page .dataTables_wrapper .dataTables_scrollBody { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } body.learner-mobile-bootstrap-ui .learner-assessments-page table.data-table { min-width: 760px !important; } body.learner-mobile-bootstrap-ui .learner-assessments-page table.data-table th:last-child, body.learner-mobile-bootstrap-ui .learner-assessments-page table.data-table td:last-child { min-width: 10.75rem !important; width: 10.75rem !important; vertical-align: top !important; } body.learner-mobile-bootstrap-ui .learner-assessments-page table.data-table td:last-child .d-flex.flex-wrap.gap-2 { width: 100% !important; flex-direction: column !important; align-items: stretch !important; gap: 0.32rem !important; } body.learner-mobile-bootstrap-ui .learner-assessments-page table.data-table td:last-child .btn, body.learner-mobile-bootstrap-ui .learner-assessments-page table.data-table td:last-child > .btn { width: 100% !important; min-width: 0 !important; justify-content: center !important; white-space: nowrap !important; } body.learner-mobile-bootstrap-ui .learner-assessments-page .learner-assessments-table-shell, body.learner-mobile-layout .learner-assessments-page .learner-assessments-table-shell { position: relative; } body.learner-mobile-bootstrap-ui .learner-assessments-page .learner-assessments-table-responsive, body.learner-mobile-layout .learner-assessments-page .learner-assessments-table-responsive { position: relative; z-index: 1; overflow-x: scroll !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } body.learner-mobile-bootstrap-ui .learner-assessments-page #program_table th, body.learner-mobile-bootstrap-ui .learner-assessments-page #program_table td, body.learner-mobile-layout .learner-assessments-page #program_table th, body.learner-mobile-layout .learner-assessments-page #program_table td { font-size: 0.66rem !important; line-height: 1.2 !important; } body.learner-mobile-bootstrap-ui .learner-assessments-page .learner-assessments-bottom-scroll, body.learner-mobile-layout .learner-assessments-page .learner-assessments-bottom-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable both-edges; margin-top: 0.35rem; padding-bottom: 0.15rem; border-top: 1px solid rgba(99, 102, 241, 0.18); } body.learner-mobile-bootstrap-ui .learner-assessments-page .learner-assessments-bottom-scroll-inner, body.learner-mobile-layout .learner-assessments-page .learner-assessments-bottom-scroll-inner { height: 1px; } body.learner-mobile-bootstrap-ui .learner-assessments-page .learner-assessments-bottom-scroll::-webkit-scrollbar, body.learner-mobile-layout .learner-assessments-page .learner-assessments-bottom-scroll::-webkit-scrollbar { height: 0.58rem; } body.learner-mobile-bootstrap-ui .learner-assessments-page .learner-assessments-bottom-scroll::-webkit-scrollbar-track, body.learner-mobile-layout .learner-assessments-page .learner-assessments-bottom-scroll::-webkit-scrollbar-track { background: #e9ecff; border-radius: 999px; } body.learner-mobile-bootstrap-ui .learner-assessments-page .learner-assessments-bottom-scroll::-webkit-scrollbar-thumb, body.learner-mobile-layout .learner-assessments-page .learner-assessments-bottom-scroll::-webkit-scrollbar-thumb { background: #5d56d4; border-radius: 999px; border: 1px solid #e9ecff; } body.learner-mobile-bootstrap-ui .learner-assessments-page .learner-assessments-table-responsive::-webkit-scrollbar, body.learner-mobile-layout .learner-assessments-page .learner-assessments-table-responsive::-webkit-scrollbar { height: 0; } } /* -------------------- Teacher Subject Curriculum Mobile Tweaks -------------------- */ @media (max-width: 767.98px) { /* Make all buttons on the teacher subject curriculum page extra small on mobile, including "View Content" and "View Assessments" actions. */ .teacher-subject-curriculum-page .btn, .teacher-subject-curriculum-page .btn-sm { font-size: 0.7rem !important; padding: 0.2rem 0.35rem !important; } } @media (max-width: 767.98px) { /* Keep action labels readable on mobile (e.g. "Complete & Finish"). */ .teacher-subject-curriculum-page .cv-learning-actions-row .btn { width: auto !important; min-width: max-content; white-space: nowrap; } /* Only the icon-only previous button stays compact. */ .teacher-subject-curriculum-page .cv-learning-actions-row .btn.prev { width: 2.35rem !important; min-width: 2.35rem; padding-left: 0.35rem !important; padding-right: 0.35rem !important; display: inline-flex; align-items: center; justify-content: center; } } /* -------------------- Learner Assessments Mobile Tweaks -------------------- */ @media (min-width: 320px) and (max-width: 767.98px) { /* Only affect the learner assessments page on small screens */ .learner-assessments-page { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; } .learner-assessments-page:not(.learner-evaluations-page) .tab-content { padding-right: 0.75rem !important; margin-right: 0 !important; margin-top: 0.6rem !important; } .learner-assessments-page .table-responsive { overflow-x: auto !important; padding-right: 0.5rem; -webkit-overflow-scrolling: touch; } /* Let the table be wider than the viewport so columns stay readable and can scroll sideways */ .learner-assessments-page table.data-table { min-width: 720px; } /* Practicals roster / code-challenge tables opt into the stacked-card row layout defined further down this file for ".learner-assessments-page table.data-table" (thead:none, td as a label/value grid via data-label). That layout also resets *tbody* back to 100% width, but only clears this table's own 720px min-width under body.learner-mobile-bootstrap-ui/-layout -- neither class is set on the practicals pages, so without this the table stays pinned to 720px and the right-aligned values render off-screen past the visible viewport instead of stacking under their labels. */ .practicals-roster-table, .code-challenges-table { min-width: 0 !important; } .learner-assessments-page table.code-challenges-table.data-table thead.table-header-card tr th:first-child { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .learner-assessments-page table.code-challenges-table.data-table thead.table-header-card tr th:last-child { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* The action-column button ("View" / "Manage") is a grid item with no explicit width, so it shrinks to a narrower "fits the icon" box and white-space: normal (from the shared row-card td rule above) wraps the label onto two lines instead of growing to fit it on one. */ .practicals-roster-table tbody td[data-label="Actions"] .btn, .code-challenges-table tbody td[data-label="Actions"] .btn { white-space: nowrap; } /* Ensure DataTables scroll container can also scroll horizontally */ .learner-assessments-page .dataTables_wrapper, .learner-assessments-page .dataTables_wrapper .dataTables_scroll, .learner-assessments-page .dataTables_wrapper .dataTables_scrollBody { overflow-x: auto !important; } } /* -------------------- Learner Assessments Desktop Hero Tweaks -------------------- */ @media (min-width: 768px) { .learner-assessments-page .learner-assessments-desktop-hero { margin-bottom: 0.65rem !important; } .learner-assessments-page .learner-assessments-desktop-hero .teacher-curriculum-hero { margin-bottom: 0 !important; width: 100%; } .learner-assessments-page .learner-assessments-tabs { margin-top: 0.35rem !important; } .learner-assessments-page .learner-assessments-desktop-hero .teacher-curriculum-hero-main { width: 100%; max-width: 100%; flex: 1 1 100%; } } /* Learner Assessments: align "entries" and "search" in a row and shrink text */ .learner-assessments-page .dataTables_wrapper .row:first-child { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; } .learner-assessments-page .dataTables_wrapper .row:first-child > div { flex: 0 0 50%; max-width: 50%; } .learner-assessments-page .dataTables_wrapper .dataTables_length, .learner-assessments-page .dataTables_wrapper .dataTables_filter { float: none !important; margin: 0 !important; font-size: 0.8rem; } .learner-assessments-page .dataTables_wrapper .dataTables_length label, .learner-assessments-page .dataTables_wrapper .dataTables_filter label { display: flex; align-items: center; gap: 0.25rem; font-size: inherit; margin-bottom: 0; } .learner-assessments-page .dataTables_wrapper .dataTables_filter input[type="search"] { font-size: inherit; max-width: 170px; } /* Learner Assessments: this table is initialised by the local DataTables 2.x build (system_management/static/datatables/datatables.js), which renders the length/search controls as .dt-length/.dt-search inside .dt-layout-cell .dt-layout-start/.dt-layout-end - not the legacy .dataTables_length / .dataTables_filter + Bootstrap .row/.col markup targeted above. Align those on their own row here so "entries per page" and "Search" sit side by side instead of stacking, including on mobile. Matched with :has() instead of ">" + ":first-child" - some tables on this page render an extra wrapper between .dt-container and the row, which silently broke the stricter direct-child selector while the .dt-length/.dt-search rules below (unscoped by depth) kept working. */ .learner-assessments-page .dt-container .dt-layout-row:has(> .dt-layout-cell .dt-length), .learner-assessments-page .dt-container .dt-layout-row:has(> .dt-layout-cell .dt-search) { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 0.6rem; } /* Length control (dt-layout-start) keeps its natural width; search (dt-layout-end) grows to fill the rest of the row - matches the learner_assessments_mockup_v3 reference layout. */ .learner-assessments-page .dt-container .dt-layout-cell:has(> .dt-length) { display: flex; align-items: center; flex: 0 0 auto; max-width: none; } .learner-assessments-page .dt-container .dt-layout-cell:has(> .dt-search) { display: flex; align-items: center; flex: 1 1 auto; max-width: none; min-width: 0; } /* NOTE: DataTables 2.x puts the as SIBLINGS of the (not nested inside it) when the language string starts or ends with _MENU_/_INPUT_ (our default "_MENU_ per page" and "Search:_INPUT_" both qualify). So the label itself must stay an inline element - .dt-length/.dt-search (the parent div) are what need to become the flex row, or the label ends up shoved onto its own line above/below its sibling control. */ .learner-assessments-page .dt-length, .learner-assessments-page .dt-search { display: flex; align-items: center; gap: 6px; margin: 0 !important; font-size: 0.75rem; } /* Capped on every screen size (not just mobile) - this is the search bar used on the "My Assessments" page's tables (program_table etc.), which don't use the evaluations page's custom toolbar layout, so they fall back to this generic rule. Previously unbounded, so it grew to fill all remaining row width on any screen. */ .learner-assessments-page .dt-search { max-width: 180px; } .learner-assessments-page .dt-length label { font-size: inherit; margin-bottom: 0; white-space: nowrap; color: #6c757d; } .learner-assessments-page .dt-length select { /* auto width (sized to the selected option's own text) instead of a fixed px value - a fixed width risked clipping the number once a wider option (25, 50) was selected. min-width is just a floor so it never looks too cramped for single-digit-style values. */ width: auto; min-width: 52px; height: 34px; min-height: 34px; flex: 0 0 auto; border-radius: 8px; border: 1px solid #e2e8f0; padding: 0 1.1rem 0 0.4rem; font-size: inherit; background-color: #fff; } /* The "Search:" label carries no visual value once the input has its own placeholder (matches the reference mockup, which shows no label at all) - hide it visually but keep it in the accessibility tree for screen readers. */ .learner-assessments-page .dt-search label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .learner-assessments-page .dt-search input[type="search"] { font-size: inherit; flex: 1 1 auto; min-width: 90px; max-width: 100%; height: 34px; min-height: 34px; border-radius: 8px; border: 1px solid #e2e8f0; padding: 0 0.75rem; background-color: #fff; } /* "Course Assessments Assigned" table (#subject_assessment_table) is initialised with DataTables scrollX so its extra Course/Curriculum columns scroll horizontally in the table's own body instead of squashing every column. Keep cells on one line so the scroll is meaningful, and keep the DataTables scroll wrapper within the card so only the table body scrolls -- never the page. This local DataTables build's CSS omits the overflow:hidden it normally puts on the header/footer scroll strips, so the (wider) header table leaks out and widens the page -- pin it here. (The partial swaps its Bootstrap .table-responsive wrapper for .overflow-visible on this table, since DataTables owns the scroll.) */ .learner-assessments-page #subject_assessment_table th, .learner-assessments-page #subject_assessment_table td { white-space: nowrap; } .learner-assessments-page #subject_assessment_table_wrapper, .learner-assessments-page #subject_assessment_table_wrapper .dt-scroll { max-width: 100%; overflow: hidden; } .learner-assessments-page #subject_assessment_table_wrapper .dt-scroll-head, .learner-assessments-page #subject_assessment_table_wrapper .dt-scroll-foot { max-width: 100%; overflow: hidden; } .learner-assessments-page #subject_assessment_table_wrapper .dt-scroll-body { max-width: 100%; overflow-x: auto; overflow-y: hidden; } /* Both learner assessment tables ("Assessments Assigned" #program_table and "Course Assessments Assigned" #subject_assessment_table): the #, Attempt and Score columns only ever hold a digit (or a short "In Progress"/"Not Marked"), so size them to their heading instead of an equal share of the row. The value is centred under the heading with Bootstrap's .text-md-center utility on the cells (desktop only -- the <768px card layout keeps its own alignment). Only width:1% and the nowrap live here because Bootstrap has no utility for them. */ @media (min-width: 768px) { .learner-assessments-page .lva-col-compact { width: 1%; white-space: nowrap; } .learner-assessments-page td.lva-col-compact { padding-left: 0.4rem; padding-right: 0.4rem; } /* DataTables reserves 30px on the right of a sortable header for its sort caret, which on these one-digit columns nearly doubles the width. Tuck the caret in and trim the reservation -- sorting still works, the column just fits "Attempt" / "Score". */ .learner-assessments-page table.dataTable thead > tr > th.lva-col-compact { padding-left: 0.4rem; padding-right: 0.95rem; } .learner-assessments-page table.dataTable thead > tr > th.lva-col-compact span.dt-column-order { right: 2px; } } @media (max-width: 767.98px) { .learner-assessments-page .dt-container .dt-layout-row:has(> .dt-layout-cell .dt-length) { font-size: 0.66rem; } } .learner-assessments-page .learner-evals-toolbar-row { margin-bottom: 0.35rem !important; /* Bootstrap's .row defaults to flex-wrap: wrap, and nothing in the rowClass utility list (justify-content-between align-items-center) overrides that - so the pageLength cell and the search cell could silently drop onto separate lines under some widths even though both cells and their controls were individually sized/aligned correctly. */ flex-wrap: nowrap !important; /* Bootstrap's .row also carries negative left/right margins (to offset the padding it expects on "col" children), which made this row's own edges creep outward past the table's edges below it. Cancel that so the row lines up exactly with the table's left/right corners. */ margin-left: 0 !important; margin-right: 0 !important; } .learner-assessments-page .learner-evals-toolbar { min-width: 0; /* Cancel the Bootstrap "col" class's gutter padding on BOTH sides (added via the layout config's topEnd className) for corner alignment - padding-right alone still left padding-left in place, which pushed the search box's start (and therefore its whole span) further right than the pageLength cell actually ends at. */ padding-left: 0 !important; padding-right: 0 !important; } .learner-assessments-page .learner-evals-toolbar .dt-search { display: flex; align-items: center; gap: 0.25rem; /* Matches the Learner Assessments table's search box size (.dataTables_filter input[type="search"] max-width: 170px below) instead of stretching flush to the table's right edge. */ flex: 0 1 auto; width: auto; max-width: 190px; min-width: 110px; } .learner-assessments-page .learner-evals-toolbar .dt-search label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .learner-assessments-page .learner-evals-toolbar .dt-search input[type="search"] { width: 100%; max-width: 170px; min-width: 0; flex: 0 1 auto; } .learner-assessments-page .learner-evals-info-row { margin-top: 0.25rem !important; } /* Pagination now lives in its own row after the table (bottom1Start in the layout config), separate from the "Showing X of Y entries" info row - that row is hidden on mobile below, but pagination needs to stay usable there, so it can't share that row. */ .learner-assessments-page .learner-evals-paging-row { margin-top: 0.5rem !important; } .learner-assessments-page .learner-evals-paging-row .pagination { margin-bottom: 0; flex-wrap: nowrap; justify-content: center; } @media (max-width: 767.98px) { body.learner-mobile-bootstrap-ui .learner-assessments-page:has(#learner_evaluations_table).card-margin-top, body.learner-mobile-layout .learner-assessments-page:has(#learner_evaluations_table).card-margin-top { margin-top: 0.25rem !important; } body.learner-mobile-bootstrap-ui .learner-assessments-page:has(#learner_evaluations_table) .tab-content, body.learner-mobile-layout .learner-assessments-page:has(#learner_evaluations_table) .tab-content { margin-top: 0.35rem !important; } /* This table sets scrollX:true, so DataTables already wraps just the itself in its own .dt-scroll/.dt-scroll-body for horizontal scrolling. The outer .table-responsive wrapper's overflow-x:scroll + overflow-y:hidden (further up in this file) was written for OTHER tables that don't use scrollX and instead rely on that outer scroll + the synced .learner-assessments-bottom-scroll bar. Because DataTables inserts its whole toolbar+table+paging block inside that same outer wrapper, the per-page/search row was getting dragged into that scroll/clip box too, so it could end up scrolled out of view or vertically clipped. Not needed here - let it size and show normally. */ body.learner-mobile-bootstrap-ui .learner-assessments-page:has(#learner_evaluations_table) .learner-assessments-table-responsive, body.learner-mobile-layout .learner-assessments-page:has(#learner_evaluations_table) .learner-assessments-table-responsive { overflow-x: visible !important; overflow-y: visible !important; } .learner-assessments-page .learner-evals-toolbar-row { margin-bottom: 0.25rem !important; } .learner-assessments-page .learner-evals-toolbar .dt-search input[type="search"] { font-size: 0.66rem; } .learner-assessments-page .learner-evals-info-row { display: none !important; } .learner-assessments-page .learner-evals-paging-row .pagination .page-link { padding: 0.18rem 0.34rem; font-size: 0.64rem; } } /* ------------ Global mobile body + learner hero tweaks on mobile ------------ */ @media (max-width: 767.98px) { body { background-color: var(--bg-color); margin: -5px; overflow-x: hidden; } /* Fine-tune the learner mobile hero width independently of the profile-menu */ .mobile-learner-hero { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } .mian-course-section { margin-top: 0 !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; box-sizing: border-box; padding-top: 0.65rem !important; padding-bottom: 0.65rem !important; } /* Override width for the profile-menu header that uses w-100 on general mobile layouts */ .profile-menu.navbar-content-md.w-100 { width: 100vw !important; max-width: 100vw !important; left: 0 !important; right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; overflow-x: clip; } /* Parent view: ensure the mobile profile-menu spans the full visible header area on teacher_subject_curriculum and add a small gap below it so the content is not cramped. */ body.parent-curriculum-layout .profile-menu.navbar-content-md.w-100 { width: 100vw !important; max-width: 100vw !important; left: 0 !important; right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0.5rem; } } /* Written assessment page (mobile only): let a short assessment still fill most of the viewport instead of collapsing to its content height. Desktop used to vertically-center a single self-contained card here; the redesigned page (2026-09) is a normal flowing page instead, so that centering rule -- which fought the page scrolling naturally with more than a couple of questions -- was removed rather than reworked. */ @media (max-width: 767.98px) { .written-assessment-page { min-height: calc(100vh - 120px); display: flex; flex-direction: column; justify-content: flex-start; padding-bottom: 2.5rem; } /* Scoped to the single outer content card, not every nested .card -- a blanket ".written-assessment-page .card" also matched the small Score/Requires marking/Other attempts stat cards and the per-question cards further down, blowing each of them up to 60vh tall on mobile. */ .written-assessment-page .written-assessment-main-card { min-height: 60vh; } } /* Written assessment review page (templates/assessment_management/written_assessment.html). Was an inline