/* Onest font is loaded via layouts/default.php */ :root { /* Imarticus Brand Colors */ --imarticus-primary-green: #014D40; --imarticus-secondary-green: #38A867; --imarticus-accent-orange: #FF8C00; --imarticus-text-dark: #212529; --imarticus-text-light: #FFFFFF; --imarticus-bg-light: #FFFFFF; --imarticus-bg-grey: #F4F6F8; /* Material Design Colors */ --md-primary: var(--imarticus-primary-green); --md-primary-light: #C7E6DF; --md-primary-dark: #003D33; --md-accent: var(--imarticus-secondary-green); --md-text-primary: #212121; --md-text-secondary: #757575; --md-divider: #BDBDBD; --md-surface: #FFFFFF; --md-error: #B00020; /* Override Bootstrap variables */ --bs-primary: var(--imarticus-primary-green); --bs-secondary: var(--imarticus-secondary-green); /* Or another suitable mapping */ --bs-dark: var(--imarticus-text-dark); --bs-light: var(--imarticus-bg-grey); --bs-body-bg: var(--imarticus-bg-grey); --bs-body-color: var(--imarticus-text-dark); } body { background-color: var(--bs-body-bg); color: var(--bs-body-color); font-family: 'Onest', sans-serif; /* Example: Consider a font similar to Imarticus */ } /* Site-wide gradient theme (used on in default layout) */ .theme-gradient { min-height: 100vh; /* Brand-aligned gradient mesh (no photo) */ background: radial-gradient(1000px 700px at -12% -18%, rgba(56, 168, 103, 0.14), transparent 58%), radial-gradient(820px 600px at 112% -12%, rgba(1, 77, 64, 0.12), transparent 52%), radial-gradient(900px 600px at 50% 110%, rgba(1, 77, 64, 0.08), transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, 0.90) 0%, rgba(236, 245, 241, 0.70) 100%), linear-gradient(180deg, #f7fbfa 0%, var(--imarticus-bg-grey) 100%); /* Avoid fixed attachment to keep scroll smooth on low-end devices */ background-repeat: no-repeat; background-size: cover, cover, cover, cover, cover; } /* Global content wrapper to avoid sidebar overlay */ .content-main-wrapper { position: relative; z-index: 10; transition: width 0.25s ease, padding 0.25s ease; } /* Default state - sidebar minimized */ body .content-main-wrapper { width: calc(100% - 6.5rem); margin-left: auto; padding-left: 0.25rem; } /* When sidebar is toggled (expanded) */ body.sidebar-toggled .content-main-wrapper { width: calc(100% - 14rem); margin-left: auto; padding-left: 0.25rem; } /* Global text contrast fixes */ /* Fix text contrast issues on colored backgrounds */ .bg-success, .bg-danger, .bg-primary, .bg-dark, .bg-secondary { color: #fff !important; } /* Ensure all text elements within colored backgrounds are readable */ .bg-success *, .bg-danger *, .bg-primary *, .bg-dark *, .bg-secondary * { color: #fff !important; } /* Direct targeting for button elements with text-dark on colored backgrounds */ .btn-link.text-dark, button.btn-link.text-dark, .accordion-button.text-dark { color: inherit !important; } /* Fix for question text in accordion headers */ .accordion-item button.text-dark span, .accordion-button .d-flex span { color: inherit !important; } /* Override text-dark class when inside colored backgrounds */ .bg-primary .text-dark, .bg-success .text-dark, .bg-danger .text-dark, .bg-dark .text-dark, .bg-secondary .text-dark { color: #fff !important; } /* Fix accordion text visibility */ .accordion-button:not(.collapsed), .accordion-button:focus { color: var(--bs-body-color) !important; background-color: rgba(var(--bs-primary-rgb), 0.1) !important; } /* Make accordion buttons with colored backgrounds have white text */ .accordion-button.bg-success, .accordion-button.bg-danger, .accordion-button.bg-primary, .accordion-button.bg-dark { color: #fff !important; } /* Fix for badges in tabs */ .nav-link .badge.bg-success, .nav-link .badge.bg-danger, .nav-link .badge.bg-primary, .nav-link .badge.bg-dark { color: #fff !important; } /* Header styles */ .app-header { height: 56px; background: var(--imarticus-bg-light); /* border-bottom: 1px solid var(--imarticus-secondary-green); */ /* Darker shade or secondary */ /* position: fixed; */ top: 0; left: 0; right: 0; z-index: 1000; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; } .header-left { display: flex; align-items: center; gap: 15px; } .menu-toggle { color: var(--imarticus-text-dark); /* Changed for light header */ padding: 8px; border-radius: 50%; transition: background-color 0.2s; } .menu-toggle:hover { background-color: var(--imarticus-secondary-green); /* Or a slightly lighter shade of primary green */ color: var(--imarticus-text-light); } .menu-toggle i { font-size: 20px; } .header-logo { display: flex; align-items: center; width: 100%; min-height: 58px; justify-content: center; } .main-mock-exam-container { display: flex; padding-bottom: 24px; flex-direction: column; justify-content: flex-end; align-items: center; /* gap: 24px; */ align-self: stretch; margin-top: 24px; border-radius: 16px; background: #FFF; margin-left: 48px; margin-right: 48px; width: 100%; max-width: calc(100% - 100px); } .mock-exam-heading-div { display: flex; padding: 24px 16px; flex-direction: column; align-items: center; gap: 12px; align-self: stretch; border-radius: 16px 16px 0 0; border-bottom: 1px solid rgba(60, 72, 82, 0.24); background: #FFF; } .mock-exam-heading { color: #212A39 !important; text-align: center; font-family: Onest; font-size: 32px; font-style: normal; font-weight: 700; line-height: 32px; /* 100% */ } .mock-exam-subtext { color: #666; text-align: center; font-feature-settings: 'dlig' on; font-family: Onest; font-size: 16px; font-style: normal; font-weight: 400; line-height: 20px; margin-top: 12px; margin-bottom: 0px; /* 125% */ } .mock-exam-content-main-div { display: flex; padding: 24px 24px 48px 24px; justify-content: space-between; align-items: flex-start; flex-direction: column; border-radius: 16px; background: #FFF; width: 100%; } .mock-exam-selection-div { color: #212A39; font-family: Onest; font-size: 20px; font-style: normal; font-weight: 600; line-height: 24px; /* 120% */ } .mock-exam-dropdown-div { display: flex; flex-direction: row; width: 100%; } .exam-form { width: 100%; margin-top: 8px; } .custom-select-wrapper { position: relative; display: inline-block; width: 70%; /* adjust or fix width as needed */ } @media (max-width: 1100px) and (min-width: 577px) { .custom-select-wrapper { width: 40%; } } .custom-select { display: flex; padding: 16px 40px 16px 12px; /* extra right padding for icon */ justify-content: space-between; align-items: center; align-self: stretch; width: 100%; border-radius: 8px; border: 1px solid rgba(102, 102, 102, 0.16); background: #FFF; font-family: 'Onest', sans-serif; font-size: 15px; color: #333; cursor: pointer; appearance: none; /* removes default arrow */ -webkit-appearance: none; -moz-appearance: none; } /* Dropdown icon styling */ .select-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; pointer-events: none; /* lets clicks go through to select */ opacity: 0.7; } /* Optional hover and focus effects */ .custom-select:hover { border-color: rgba(56, 168, 103, 0.4); } .custom-select:focus { border-color: rgba(56, 168, 103, 0.7); outline: none; } .custom-select:invalid { color: #212A39; font-family: Onest; /* font-size: 12px; */ font-style: normal; font-weight: 400; line-height: 16px; opacity: 0.5; /* 133.333% */ } .start-exam-btn { display: flex; width: 200px; padding: 12px 10px; justify-content: center; align-items: center; gap: 8px; flex-shrink: 0; border-radius: 8px; background: #035642; color: #FFF; font-family: Onest; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; margin-left: auto; /* 150% */ } .start-another-exam-btn { display: flex; width: 232px; padding: 12px 10px; justify-content: center; align-items: center; gap: 8px; flex-shrink: 0; border-radius: 8px; background: #035642; color: #FFF; font-family: Onest; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; text-decoration: none; /* 150% */ } .progress-history { display: flex; padding: 8px 24px; justify-content: center; align-items: center; gap: 4px; border-radius: 76px; border: 1px solid rgba(60, 72, 82, 0.24); max-width: 72px; max-height: 28px; } .mock-exam-history-div { border-radius: 0 0 16px 16px; border-top: 1px solid rgba(60, 72, 82, 0.24); display: flex; padding-bottom: 24px; flex-direction: column; justify-content: flex-end; align-items: center; gap: 24px; align-self: stretch; padding-top: 24px; } .mock-exam-history-btn { display: flex; width: 232px; height: 56px; padding: 10px; justify-content: center; align-items: center; gap: 8px; border-radius: 8px; border: 1px solid #035642; background: rgba(3, 86, 66, 0.08); color: #035642; font-family: Onest; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; /* 16px */ } .exam-form .form-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; /* so it stacks nicely on small screens */ } .exam-form .flex-item { flex: 1; /* makes select stretch and button stay sized */ } .exam-form select.form-control { width: 100%; max-width: 400px; /* optional constraint */ } .exam-form button { white-space: nowrap; /* keep button text in one line */ } .main-mock-result-container { display: flex; padding-bottom: 24px; flex-direction: column; justify-content: flex-end; align-items: center; /* gap: 24px; */ align-self: stretch; margin-top: 24px; border-radius: 16px; background: #FFF; margin-left: 48px; margin-right: 48px; width: 100%; max-width: calc(100% - 100px); padding-top: 40px; margin-bottom: 40px; } .main-mock-history-container { display: flex; padding: 24px 24px 0 24px; flex-direction: column; align-items: flex-start; align-self: stretch; /* margin-top: 24px; */ border-radius: 16px; background: #FFF; margin-left: 48px; margin-right: 48px; width: 100%; max-width: calc(100% - 100px); padding-top: 40px; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; border-top: 1px solid rgba(60, 72, 82, 0.24); margin-bottom: 48px; } .accordion-button:not(.collapsed)::after { display: none !important; } .accordion-button::after { display: none !important; } .w-95 { width: 95% !important; } .accordion-toggle-icon { /* margin-left: 24px; */ padding-left: 24px; } .history-doc-main-div { display: flex; flex-direction: column; align-items: flex-start; /* gap: 16px; */ align-self: stretch; border-radius: 16px !important; background: rgba(4, 142, 108, 0.04); display: flex; padding: 16px 24px 0 24px; } .history-doc-title-div { color: #212A39; font-family: Onest; font-size: 18px; font-style: normal; font-weight: 700; line-height: 24px; /* 133.333% */ } .history-doc-card-div { padding-left: 0px; padding-right: 0px; width: 100%; } .mock-exam-results-container { display: flex; flex-direction: column; gap: 12px; /* space between rows */ width: 100%; } /* Each row (header + data rows) */ .mock-exam-row { display: grid; grid-template-columns: repeat(7, 1fr); /* 7 equal columns */ align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* border-radius: 8px; */ background: #fff; } .mock-exam-result-row { display: grid; grid-template-columns: repeat(7, 1fr); padding: 16px 16px 16px 0; justify-content: center; align-items: center; gap: 10px; align-self: stretch; color: #212A39; font-family: Onest; font-size: 14px; font-style: normal; font-weight: 600; line-height: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 142.857% */ } /* Header row styling */ .mock-exam-header { display: flex; padding: 8px 16px 8px 0; justify-content: center; align-items: center; gap: 10px; background: transparent; color: rgba(60, 72, 82, 0.80); font-family: Onest; font-size: 14px; font-style: normal; font-weight: 600; line-height: 20px; /* 142.857% */ } .exam-feedback-title { color: #3C4852 !important; font-family: Onest; font-size: 24px; font-style: normal; font-weight: 700; line-height: 32px; /* 133.333% */ } .exam-feedback-text { color: rgba(60, 72, 82, 0.80); font-family: Onest; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; /* 150% */ margin-top: 8px; } .exam-feedback-badge { display: flex; padding: 4px 12px; justify-content: center; align-items: center; border-radius: 20px; background: rgba(40, 167, 69, 0.12); color: #28A745; font-family: Onest; font-size: 12px; font-style: normal; font-weight: 600; line-height: 100%; width: 100%; height: 38px; max-width: 154px; /* max-width: 52px; */ } .exam-result-summary-main-div { width: 100%; display: flex; } .exam-result-summary-div { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; flex: 1 0 0; border-radius: 16px; border: 1px solid rgba(60, 72, 82, 0.16); } .exam-result-summary-heading { display: flex; padding: 16px 24px; align-items: center; gap: 8px; align-self: stretch; border-bottom: 1px solid rgba(60, 72, 82, 0.24); background: rgba(60, 72, 82, 0.04); color: #212A39; font-family: Onest; font-size: 18px; font-style: normal; font-weight: 700; line-height: 24px; margin-bottom: 16px; /* 133.333% */ } .exam-result-performance-summary-div { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; flex: 1 0 0; border-radius: 16px; border: 1px solid rgba(60, 72, 82, 0.16); margin-left: 16px; } .metrics-container { width: 100%; background: #fff; /* border: 1px solid rgba(102, 102, 102, 0.16); border-radius: 8px; */ overflow: hidden; } .metric-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 12px; border-bottom: 1px solid rgba(102, 102, 102, 0.1); } .metric-row:last-child { border-bottom: none; } /* Label (left column) */ .metric-label { flex: 1; color: rgba(60, 72, 82, 0.8); font-family: 'Onest', sans-serif; font-size: 14px; font-weight: 600; line-height: 100%; text-transform: capitalize; } /* Value (right column) */ .metric-value { flex: 1; text-align: right; font-family: 'Onest', sans-serif; font-size: 14px; font-weight: 500; color: #2c2c2c; } /* Progress bar style fix for better fit */ .metric-value .progress { height: 10px; border-radius: 5px; overflow: hidden; background: rgba(0, 0, 0, 0.05); } .metric-value .progress-bar { font-size: 12px; font-weight: 600; } .info-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(102, 102, 102, 0.1) !important; width: 100%; margin-left: 24px; margin-right: 24px; width: 92%; } .info-label { color: rgba(60, 72, 82, 0.80); font-family: 'Onest', sans-serif; font-size: 14px; font-style: normal; font-weight: 600; line-height: 100%; text-transform: uppercase; flex: 1; } .info-value { font-family: 'Onest', sans-serif; font-size: 14px; font-style: normal; font-weight: 500; color: #2c2c2c; text-align: right; flex: 1; display: flex; justify-content: flex-end; } /* optional: remove border from last item */ .info-row:last-child { border-bottom: none; } /* Data row hover */ .mock-exam-row:not(.mock-exam-header):hover { background: #f1f9f5; } /* Columns */ .mock-exam-row .col { text-align: center; } .mock-exam-result-row .col { text-align: center; } /* Progress bar tweak */ .progress { height: 8px; background: rgba(0, 0, 0, 0.05); border-radius: 4px; overflow: hidden; } .progress-bar { height: 100%; } .paginated-history { display: flex; padding: 8px 16px; justify-content: center; align-items: center; align-self: stretch; background: rgba(60, 72, 82, 0.04); margin-top: 16px; border-radius: 12px; } .pagination .page-link { color: #198754; border: none; margin: 0 3px; color: #232323 !important; text-align: center; font-family: Onest; font-size: 10px; font-style: normal; font-weight: 400; line-height: 16px; border-radius: 16px !important; /* 160% */ } .pagination .page-item.active .page-link { background-color: #198754; color: #fff; border-radius: 16px; color: #048E6C !important; text-align: center; font-family: Onest; font-size: 10px; font-style: normal; font-weight: 600; line-height: 16px; border-radius: 16px; border: 1px solid #048E6C; background: linear-gradient(0deg, rgba(4, 142, 108, 0.16) 0%, rgba(4, 142, 108, 0.16) 100%), #FFF !important; /* 160% */ } .pagination .page-item.disabled .page-link { color: #999; background: transparent; } .pagination .page-link-btn { border: none; margin: 0 3px; color: #232323 !important; text-align: center; font-family: Onest; font-size: 10px; font-style: normal; font-weight: 400; line-height: 16px; border-radius: 16px !important; /* 160% */ } /* Responsive behavior */ @media (max-width: 768px) { .mock-exam-row { grid-template-columns: 1fr 1fr; /* stack in two columns */ row-gap: 8px; } .mock-exam-header { display: none; } /* hide table header on mobile */ } .result-fail { display: flex; padding: 4px 12px; justify-content: center; align-items: center; border-radius: 20px; background: rgba(220, 53, 69, 0.12); color: #DC3545; font-family: Onest; font-size: 12px; font-style: normal; font-weight: 600; line-height: 100%; width: 100%; height: 20px; max-width: 44px; /* 12px */ } .result-success { display: flex; padding: 4px 12px; justify-content: center; align-items: center; border-radius: 20px; background: rgba(40, 167, 69, 0.12); color: #28A745; font-family: Onest; font-size: 12px; font-style: normal; font-weight: 600; line-height: 100%; width: 100%; height: 20px; max-width: 52px; } .result-incomplete { display: flex; padding: 4px 12px; justify-content: center; align-items: center; border-radius: 20px; background: rgba(233, 148, 13, 0.12); color: #E9940D; font-family: Onest; font-size: 12px; font-style: normal; font-weight: 600; line-height: 100%; width: 100%; height: 20px; max-width: 100px; /* 12px */ } .view-response-btn { color: rgba(60, 72, 82, 0.80); font-family: Onest; font-size: 12px; font-style: normal; font-weight: 600; line-height: 100%; /* 12px */ text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .result-summarny-text { display: flex; height: 28px; padding: 8px 16px; justify-content: center; align-items: center; gap: 4px; border-radius: 76px; background: #DC3545; max-width: 128px; color: #FFF; text-align: center; font-family: Onest; font-size: 10px; font-style: normal; font-weight: 600; line-height: 100%; /* 10px */ } .result-summarny-text-success { display: flex; height: 28px; padding: 8px 16px; justify-content: center; align-items: center; gap: 4px; border-radius: 76px; background: #28A745; max-width: 128px; color: #FFF; text-align: center; font-family: Onest; font-size: 10px; font-style: normal; font-weight: 600; line-height: 100%; /* 10px */ } .result-summarny-text-warning { display: flex; height: 28px; padding: 8px 16px; justify-content: center; align-items: center; gap: 4px; border-radius: 76px; background: #E9940D; max-width: 128px; color: #FFF; text-align: center; font-family: Onest; font-size: 10px; font-style: normal; font-weight: 600; line-height: 100%; /* 10px */ } .question-review-div { display: flex; padding: 24px 16px; flex-direction: column; align-items: center; gap: 24px; align-self: stretch; border-radius: 24px; background: rgba(4, 142, 108, 0.08); margin-top: 24px; } .exam-result-review-heading { display: flex; padding: 16px 24px; align-items: center; gap: 8px; align-self: stretch; color: #212A39; font-family: Onest; font-size: 24px; font-style: normal; font-weight: 600; line-height: 24px; padding-left: 0px; /* margin-bottom: 16px; */ /* 133.333% */ } .toggle-review-heading { display: flex; /* padding: 12px 8px; */ justify-content: center; align-items: center; gap: 10px; /* border-radius: 8px; */ color: rgba(33, 42, 57, 0.60); font-family: Onest; font-size: 16px; font-style: normal; font-weight: 500; line-height: 100%; border-bottom: 1px solid rgba(60, 72, 82, 0.16); /* 16px */ } .question-review-content { display: flex; justify-content: space-between; align-items: center; align-self: stretch; margin-top: 16px; } .app-header .header-logo-image { height: 30px; /* Explicit height for the logo container */ width: auto; /* Maintain aspect ratio */ /* background-color removed as header is now light */ /* border-radius commented out by user */ /* Padding removed to maximize image size within the container */ /* Color property removed as SVG likely has hardcoded fills */ } .app-header .header-title { color: rgba(60, 72, 82, 0.80); font-family: 'Onest', sans-serif; font-size: 18px; font-style: normal; font-weight: 600; line-height: 16px; /* 88.889% */ } .header-right { display: flex; align-items: center; gap: 15px; } .user-email { color: rgba(60, 72, 82, 0.80); font-family: Onest; font-size: 12px; font-style: normal; font-weight: 600; line-height: 16px; /* 133.333% */ /* Slightly less prominent */ } .logout-btn { padding: 6px 12px; font-size: 14px; display: flex; padding: 8px 16px; justify-content: center; align-items: center; gap: 4px; border-radius: 4px; background: rgba(220, 53, 69, 0.16); color: #DC3545; font-family: Onest; font-size: 12px; font-style: normal; font-weight: 600; line-height: 110%; box-shadow: none; text-transform: none !important; /* 13.2px */ } .logout-btn i { margin-right: 4px; } /* Sidebar styles */ .app-sidebar { width: 250px; height: 100vh; background: var(--imarticus-primary-green); border-right: 1px solid var(--imarticus-secondary-green); /* Darker shade or secondary */ position: fixed; left: 0; top: 0px; z-index: 1000; transition: all 0.3s ease; overflow-x: hidden; } .app-sidebar.collapsed { width: 60px; } /* Sidebar menu items */ .nav-main-div { margin-top: 24px; } .nav-link { display: flex; align-items: center; padding: 12px 16px; color: var(--imarticus-text-light); opacity: 0.85; /* Slightly softer text for nav links */ text-decoration: none; transition: all 0.2s; white-space: nowrap; position: relative; margin-left: 4px; margin-right: 4px; } .nav-link i.nav-icon { font-size: 16px; min-width: 24px; text-align: center; margin-right: 12px; transition: margin 0.3s ease; } .nav-link .lock-icon { font-size: 12px; color: #9aa0a6; margin-left: 8px; position: absolute; right: 16px; } .nav-link span.nav-text { transition: opacity 0.2s ease; flex: 1; color: #FFF; font-family: Onest; font-size: 14px; font-style: normal; font-weight: 600; line-height: 20px; /* 142.857% */ } .app-sidebar.collapsed .nav-link { padding: 12px 16px; justify-content: center; } .app-sidebar.collapsed .nav-link i.nav-icon { margin-right: 0; font-size: 18px; } .app-sidebar.collapsed .nav-link span.nav-text, .app-sidebar.collapsed .nav-link .lock-icon { opacity: 0; width: 0; display: none; } .nav-link:hover:not(.disabled) { /* background: var(--imarticus-secondary-green); */ color: var(--imarticus-text-light); opacity: 1; border-radius: 8px; border: 0px; /* background: linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%), #035642; */ } .nav-link.active { /* background: var(--imarticus-secondary-green); */ color: var(--imarticus-text-light); font-weight: 500; opacity: 1; border-radius: 8px; border: 0px; /* background: linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%), #035642; */ } .nav-link.active i { color: var(--imarticus-text-light); } .nav-link.disabled { opacity: 0.6; cursor: not-allowed; } .nav-link.disabled:hover { background: none; color: var(--imarticus-text-light); opacity: 0.6; /* Ensure disabled state is clear */ } .ques-review-incorrect { display: flex; padding: 8px 12px; align-items: center; gap: 4px; border-radius: 8px; background: linear-gradient(0deg, rgba(220, 53, 69, 0.08) 0%, rgba(220, 53, 69, 0.08) 100%), #FFF; color: #DC3545 !important; font-family: Onest; font-size: 14px; font-style: normal; font-weight: 600; line-height: 16px; max-width: 85px; gap: 24px; /* 114.286% */ } .ques-review-correct { display: flex; padding: 8px 12px; align-items: center; gap: 4px; border-radius: 8px; background: linear-gradient(0deg, rgba(40, 167, 69, 0.08) 0%, rgba(40, 167, 69, 0.08) 100%), #FFF; color: #28A745 !important; font-family: Onest; font-size: 14px; font-style: normal; font-weight: 600; line-height: 16px; /* 114.286% */ max-width: 85px; gap: 32px; /* 114.286% */ } .question-text { color: #212A39CC; font-family: 'Onest', sans-serif !important; font-size: 16px !important; font-style: normal !important; font-weight: 500 !important; line-height: 150% !important; } /* Override any inline styles from rich text editor content */ .question-text *, .question-text p, .question-text span, .question-text div { font-family: 'Onest', sans-serif !important; font-size: inherit !important; } .option-types { color: #212A39CC; font-family: Onest; font-size: 16px; font-style: normal; font-weight: 700; line-height: 120%; /* 19.2px */ } .ques-review-parent { display: flex; } .ques-review-info { display: flex; padding: 4px 12px; align-items: center; gap: 4px; border-radius: 8px; background: linear-gradient(0deg, rgba(38, 132, 203, 0.08) 0%, rgba(38, 132, 203, 0.08) 100%), #FFF; color: #2684CB; font-family: Onest; font-size: 14px; font-style: normal; font-weight: 600; line-height: 16px; max-width: 76px; /* 114.286% */ } .ques-review-level { display: flex; padding: 8px 12px; align-items: center; gap: 4px; border-radius: 8px; background: linear-gradient(0deg, rgba(233, 148, 13, 0.08) 0%, rgba(233, 148, 13, 0.08) 100%), #FFF; color: #E9940D; font-family: Onest; font-size: 14px; font-style: normal; font-weight: 600; line-height: 16px; max-width: 80px; margin-left: 8px; margin-right: 8px; /* 114.286% */ } .ques-review-marks { display: flex; padding: 8px 12px; align-items: center; gap: 4px; border-radius: 8px; background: linear-gradient(0deg, rgba(60, 72, 82, 0.08) 0%, rgba(60, 72, 82, 0.08) 100%), #FFF; color: #3C4852; font-family: Onest; font-size: 14px; font-style: normal; font-weight: 600; line-height: 16px; max-width: 120px; /* 114.286% */ } /* Material Design Button Overrides */ .btn { border-radius: 4px; padding: 10px 16px; text-transform: uppercase; font-weight: 500; letter-spacing: 0.5px; transition: background-color 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); border: none; } .btn:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transform: translateY(-1px); } .btn:active { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); transform: translateY(0); } .btn-primary { background-color: var(--md-primary); color: var(--imarticus-text-light); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--md-primary-dark); color: var(--imarticus-text-light); } .btn-outline-primary { border: 1px solid var(--md-primary); color: var(--md-primary); background-color: transparent; } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: rgba(1, 77, 64, 0.05); color: var(--md-primary-dark); } .btn-success { background-color: var(--md-primary); color: #ffffff; transform: scale(1); transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; overflow: visible; } .btn-success:hover, .btn-success:focus, .btn-success:active { background-color: var(--md-accent); /* Lighter color on hover */ color: #ffffff; transform: scale(1.02); /* Reduced scale factor */ box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25); /* Enhanced shadow instead of large scale */ } .btn-outline-success { border: 1px solid var(--md-accent); color: var(--md-accent); background-color: transparent; } .btn-outline-success:hover, .btn-outline-success:focus { background-color: rgba(56, 168, 103, 0.05); color: #2A8553; } /* Small buttons */ .btn-sm { padding: 6px 12px; font-size: 0.875rem; } /* Headings in main content */ .app-main h1, .app-main h2, .app-main h3, .app-main h4, .app-main h5 { color: var(--imarticus-primary-green); } /* Material Design Card Styling */ .card { border: none; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease; margin-bottom: 1.5rem; } .card:hover { box-shadow: 0 8px 17px rgba(0, 0, 0, 0.15), 0 6px 10px rgba(0, 0, 0, 0.12); } .card-header { border-bottom: none; background-color: var(--md-primary); color: #ffffff; font-size: 1.2rem; font-weight: 500; padding: 20px; } /* Ensure all text elements within card header are white */ .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header p, .card-header span, .card-header div { color: #ffffff; } /* Keep the original styling for colored headers */ .card-header.bg-primary, .card-header.bg-success, .card-header.bg-info, .card-header.bg-warning, .card-header.bg-danger, .card-header.bg-dark { color: var(--imarticus-text-light); border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .card- { padding: 20px; } /* More Button Overrides */ .btn-info { background-color: var(--imarticus-secondary-green); color: var(--imarticus-text-light); } .btn-info:hover, .btn-info:focus, .btn-info:active { background-color: #2A8553; /* Darker secondary green */ color: var(--imarticus-text-light); } .btn-block { display: block; width: 100%; } /* Consider if .btn-danger needs adjustment or is fine */ /* .btn-danger { ... } */ /* Pagination Styling */ .pagination .page-item.active .page-link { background-color: var(--imarticus-secondary-green); border-color: var(--imarticus-secondary-green); color: var(--imarticus-text-light); } .pagination .page-link { color: var(--imarticus-primary-green); /* Link color */ } .pagination .page-link:hover { background-color: var(--imarticus-bg-grey); color: var(--imarticus-secondary-green); } .pagination .page-item.disabled .page-link { color: #6c757d; /* Default disabled color */ } /* Responsive styles */ @media (max-width: 768px) { .app-sidebar { transform: translateX(-100%); } .app-sidebar.collapsed { transform: translateX(0); width: 250px; } .app-sidebar.collapsed .nav-link { padding: 12px 16px; justify-content: flex-start; } .app-sidebar.collapsed .nav-link i.nav-icon { margin-right: 12px; font-size: 16px; } .app-sidebar.collapsed .nav-link span.nav-text, .app-sidebar.collapsed .nav-link .lock-icon { opacity: 1; width: auto; display: inline; } body.sidebar-expanded .app-sidebar { transform: translateX(0); } } /* Correct Answer Highlighting */ .correct-answer-highlight { border-left: 5px solid #198754 !important; background-color: #f0fff8 !important; } .correct-answer-highlight>.card-header { background-color: #d1e7dd !important; border-bottom: 1px solid #b6d9c9 !important; } .correct-answer-highlight>.card-header .option-number-header { color: #0f5132 !important; font-weight: bold; } /* Admin Submenu Styles */ .app-sidebar .nav-item .collapse { /* Targeting Bootstrap's collapse class for submenus */ padding-left: 0; /* Reset any default padding */ margin-left: 0; /* Reset any default margin */ list-style: none; /* Remove default list styling if ul/li are used by collapse */ } .app-sidebar .nav-item .collapse .nav-link { padding-top: 8px; padding-bottom: 8px; font-size: 0.9rem; padding-left: 40px; } .app-sidebar .nav-item .collapse .nav-link .nav-icon { min-width: 24px; /* Consistent with parent item icons */ text-align: center; /* Consistent with parent item icons */ margin-right: 12px; /* Space between icon and text */ } /* Collapsed Sidebar - Admin Submenu Adjustments */ .app-sidebar.collapsed .nav-item .collapse .nav-link { display: flex; /* Ensure flex properties for alignment */ align-items: center; /* Vertical alignment */ padding-left: 16px; padding-right: 16px; justify-content: center; } .app-sidebar.collapsed .nav-item .collapse .nav-link .nav-icon { margin-right: 0; opacity: 1 !important; /* Ensure icon is visible */ display: inline-block !important; /* Ensure icon is displayed */ font-size: 18px; /* Match other collapsed icons */ } /* Text for sub-menu items is hidden by the general rule: .app-sidebar.collapsed .nav-link span.nav-text */ /* Ensure the admin panel dropdown arrow (for the main "Admin Panel" item) is also hidden when collapsed */ .app-sidebar.collapsed>.sidebar-content>.nav>.nav-item>.nav-link.dropdown-toggle[data-toggle="collapse"][aria-expanded="true"]::after, .app-sidebar.collapsed>.sidebar-content>.nav>.nav-item>.nav-link.dropdown-toggle[data-toggle="collapse"][aria-expanded="false"]::after { display: none !important; } /* Image Load Error Fallback Styling */ .image-load-error-active { background-color: #fff0f0; /* Light red background */ border: 2px dashed #ff7f7f; /* Dashed red border */ padding: 10px; display: inline-block; /* Or block, depending on layout needs */ text-align: center; color: #cc0000; /* Darker red text for alt text */ position: relative; /* For pseudo-elements if needed */ min-height: 50px; /* Ensure it's visible even if alt text is short */ min-width: 50px; } .image-load-error-active::before { content: "Image not found"; /* Or use attr(alt) if you prefer */ display: block; font-weight: bold; margin-bottom: 5px; } /* General Image Fallback Styling */ img { /* Ensure alt text is visible if image fails to load */ display: inline-block; /* Helps with block-level behavior for alt text */ text-align: center; /* Center alt text */ font-style: italic; color: #777; /* Grey color for alt text */ line-height: 1.5; /* Improve readability of multi-line alt text */ } /* Class added by JavaScript when an image fails to load */ .image-load-error-active { display: inline-block; /* Or 'block' if you prefer full width */ box-sizing: border-box; padding: 15px; background-color: #fff0f0; /* Light red background */ border: 1px solid #ffcccc; /* Slightly darker red border */ color: #cc0000; /* Red color for the alt text */ text-align: center; font-weight: bold; min-width: 150px; /* Ensure it's noticeable */ min-height: 100px; /* Ensure it's noticeable */ /* Preserve aspect ratio if possible, or let content define height */ /* For img-fluid compatibility, width/height might be overridden */ } /* Ensure img-fluid images with errors still behave somewhat responsively */ .image-load-error-active.img-fluid { width: 100%; height: auto; object-fit: contain; } /* Material Design Form Controls */ .form-control, .form-select { border-radius: 4px; border: 1px solid var(--md-divider); padding: 10px 12px; transition: border 0.3s ease, box-shadow 0.3s ease; background-color: var(--md-surface); } .form-control:focus, .form-select:focus { border-color: var(--md-primary); box-shadow: 0 0 0 0.2rem rgba(1, 77, 64, 0.15); } .form-label { font-weight: 500; color: var(--md-text-primary); margin-bottom: 0.5rem; } /* Material Design Range Sliders */ .form-range { height: 8px; } .form-range::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7px; background-color: var(--md-primary); border-radius: 50%; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .form-range::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(1, 77, 64, 0.15); } .form-range::-webkit-slider-runnable-track { background-color: var(--md-primary-light); height: 8px; border-radius: 4px; } .form-range::-moz-range-thumb { width: 20px; height: 20px; background-color: var(--md-primary); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; } .form-range::-moz-range-thumb:hover { background-color: var(--md-accent); transform: scale(1.1); } .form-range::-moz-range-track { background-color: var(--md-primary-light); height: 8px; border-radius: 4px; } /* Material Design Checkboxes and Radio Buttons */ .form-check-input { width: 18px; height: 18px; margin-top: 0.25em; border: 2px solid var(--md-divider); transition: background-color 0.3s ease, border-color 0.3s ease; } .form-check-input:checked { background-color: var(--md-primary); border-color: var(--md-primary); } .form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(1, 77, 64, 0.15); border-color: var(--md-primary); } .form-check-label { padding-left: 0.25rem; color: var(--md-text-primary); color: rgba(33, 42, 57, 0.80); font-family: Onest; font-size: 14px; font-style: normal; font-weight: 400; line-height: 120%; /* 16.8px */ } .form-check-label-custom { color: #212A39; font-family: Onest; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; padding-left: 12px; /* 20.8px */ } .form-check-label-custom-2 { color: #666; font-family: Onest; font-size: 16px; font-style: normal; font-weight: 500; line-height: 140%; /* 22.4px */ } .form-check-input[type="checkbox"]:indeterminate { background-color: transparent; border-color: rgba(60, 72, 82, 0.3); /* default border */ } /* Material Design Accordion */ .accordion-item { border: none; margin-bottom: 16px; box-shadow: none; border-radius: 8px; overflow: hidden; border-radius: 8px !important; border: 1px solid rgba(60, 72, 82, 0.24) !important; background: #FFF; } .accordion-item-custom { border: none; margin-bottom: 16px; box-shadow: none; border-radius: 8px; overflow: hidden; border-radius: 12px !important; border: 1px solid rgba(60, 72, 82, 0.24); background: #F7F8F8 !important; } .accordion-header { margin: 0; display: flex; justify-content: space-between; align-items: center; align-self: stretch; background: transparent; } .accordion-header-custom { margin: 0; display: flex; justify-content: space-between; align-items: center; align-self: stretch; background: #F7F8F8 !important; color: #212A39 !important; font-family: Onest; font-size: 20px; font-style: normal; font-weight: 600; line-height: 140%; /* 28px */ } .accordion-button { /* background-color: var(--md-surface); */ padding: 16px 20px; font-weight: 500; color: var(--md-text-primary); border: none; box-shadow: none; transition: background-color 0.2s ease; background: #FFF; } .accordion-button:not(.collapsed) { /* background-color: var(--md-primary-light); */ background: #FFF; color: var(--md-primary-dark); font-weight: 500; } .accordion-button::after { transition: transform 0.3s ease; } .accordion-button:focus { box-shadow: none; border-color: transparent; } .accordion-button-custom { /* background-color: var(--md-surface); */ padding: 16px 20px; font-weight: 500; color: var(--md-text-primary); border: none; box-shadow: none; transition: background-color 0.2s ease; background: #F7F8F8; position: relative; display: flex; align-items: center; width: 100%; font-size: 1rem; text-align: left; border-radius: 0; overflow-anchor: none } .accordion-button-custom:not(.collapsed) { /* background-color: var(--md-primary-light); */ background: #FFF; color: var(--md-primary-dark); font-weight: 500; } .accordion-button-custom::after { transition: transform 0.3s ease; } .accordion-button-custom:focus { box-shadow: none; border-color: transparent; } .accordion-body { padding: 16px 20px; background-color: var(--md-surface); font-family: Onest; } .accordion-body-custom { padding: 16px 20px; background-color: #F7F8F8; font-family: Onest; } /* Material Design Lists */ .list-group { border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .list-group-item { border: none; padding: 16px 20px; background-color: var(--md-surface); border-bottom: 1px solid var(--md-divider); transition: background-color 0.2s ease; } .list-group-item:last-child { border-bottom: none; } .list-group-item:hover { background-color: rgba(0, 0, 0, 0.01); } .list-group-item.active { background-color: var(--md-primary); border-color: var(--md-primary); } /* Material Design Tables */ .table { background-color: var(--md-surface); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); margin-bottom: 1.5rem; } .table th { font-weight: 500; color: var(--md-text-primary); border-bottom-width: 1px; padding: 16px; background-color: rgba(0, 0, 0, 0.02); } .table td { padding: 16px; vertical-align: middle; border-bottom: 1px solid var(--md-divider); } .table tr:last-child td { border-bottom: none; } /* Trainer view_attempt.php Q&A section style improvements */ /* Fix text contrast issues */ /* IMPORTANT: MTQ result components are excluded from these rules */ /* They use dedicated styles in mtq-results.css */ .bg-success:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *):not(.table-selection-result *):not(.table-input-result *) { color: #fff !important; } .bg-success *:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *):not(.table-selection-result *):not(.table-input-result *) { color: #fff !important; } /* Target specific question text on green background */ .card .bg-success:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .accordion-item .bg-success:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .accordion-button.bg-success:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .list-group-item.bg-success:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), [class*="bg-"] .text-dark:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *) { color: #fff !important; } /* Specific fix for tab badges */ .nav-link .badge.bg-success { color: #fff !important; } /* Target question spans directly - exclude MTQ results */ span.bg-success:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-success span:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .accordion-item.bg-success span:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .accordion-button span.bg-success:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .card-header.bg-success span:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *) { color: #fff !important; } /* Target all nested text elements in colored backgrounds - exclude MTQ results */ .bg-success p:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-success div:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-success span:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-success h1:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-success h2:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-success h3:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-success h4:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-success h5:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-success h6:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-success a:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-danger p:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-danger div:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-danger span:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-danger h1:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-danger h2:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-danger h3:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-danger h4:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-danger h5:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-danger h6:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-danger a:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-primary p:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-primary div:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-primary span:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-primary h1:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-primary h2:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-primary h3:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-primary h4:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-primary h5:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-primary h6:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-primary a:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-dark p:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-dark div:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-dark span:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-dark h1:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-dark h2:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-dark h3:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-dark h4:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-dark h5:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-dark h6:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *), .bg-dark a:not(.mcq-result *):not(.true-false-result *):not(.number-entry-result *):not(.gap-fill-result *):not(.matching-pairs-result *) { color: #fff !important; } /* Direct targeting for btn-link elements with text-dark */ .btn-link.text-dark, button.btn-link.text-dark, .accordion-button.text-dark, .accordion-button.collapsed.text-dark { color: #fff !important; } /* Fix for question button text specifically in accordion headers */ .accordion-item .btn-link.text-dark span, .accordion-header button.text-dark span, .accordion-button .d-flex span, .accordion-button * { color: #035642 !important; font-family: Onest !important; font-size: 14px; font-style: normal; font-weight: 700 !important; line-height: 16px; /* 133.333% */ } .tab-content>.active { display: block; width: 100%; } /* Override Bootstrap dark text in all cases with colored backgrounds */ .bg-primary .text-dark, .bg-success .text-dark, .bg-danger .text-dark, .bg-dark .text-dark, .bg-secondary .text-dark, .bg-info .text-dark { color: #fff !important; } /* Fix question text visibility on dark backgrounds */ .accordion-button:not(.collapsed) { color: #fff !important; background-color: #0d6efd !important; } .incorrect .accordion-button:not(.collapsed) { background-color: #FFF !important; color: #035642 !important; } .correct .accordion-button:not(.collapsed) { background-color: #FFF !important; color: #035642 !important; } /* Ensure badge styles are not overridden inside incorrect/correct accordion items */ .incorrect .ques-review-info, .correct .ques-review-info { background: linear-gradient(0deg, rgba(38, 132, 203, 0.08) 0%, rgba(38, 132, 203, 0.08) 100%), #FFF !important; color: #2684CB !important; } .incorrect .ques-review-level, .correct .ques-review-level { background: linear-gradient(0deg, rgba(233, 148, 13, 0.08) 0%, rgba(233, 148, 13, 0.08) 100%), #FFF !important; color: #E9940D !important; } .incorrect .ques-review-marks, .correct .ques-review-marks { background: linear-gradient(0deg, rgba(60, 72, 82, 0.08) 0%, rgba(60, 72, 82, 0.08) 100%), #FFF !important; color: #3C4852 !important; } /* Ensure correct/incorrect labels in accordion headers have proper styling */ .accordion-button .ques-review-incorrect { background: linear-gradient(0deg, rgba(220, 53, 69, 0.08) 0%, rgba(220, 53, 69, 0.08) 100%), #FFF !important; color: #DC3545 !important; } .accordion-button .ques-review-correct { background: linear-gradient(0deg, rgba(40, 167, 69, 0.08) 0%, rgba(40, 167, 69, 0.08) 100%), #FFF !important; color: #28A745 !important; } /* Fix for accordion buttons in the question review section */ .accordion-button { color: #035642 !important; /* White text for all states */ /* background-color: #198754ad !important; */ background: #FFF; /* Semi-transparent green for collapsed state */ } /* When expanded, use the primary color */ .accordion-button:not(.collapsed) { /* background-color: var(--bs-primary) !important; */ background-color: #FFF !important; color: #035642 !important; } /* Ensure text remains visible when transitioning between states */ .accordion-button.collapsed { color: #035642 !important; background-color: #FFF !important; /* Semi-transparent green for collapsed state */ } .accordion-button-custom { color: #212A39 !important; /* White text for all states */ /* background-color: #198754ad !important; */ background: #F7F8F8; /* Semi-transparent green for collapsed state */ } /* When expanded, use the primary color */ .accordion-button-custom:not(.collapsed) { /* background-color: var(--bs-primary) !important; */ background-color: #F7F8F8 !important; color: #212A39 !important; } /* Ensure text remains visible when transitioning between states */ .accordion-button-custom.collapsed { color: #212A39 !important; background-color: #F7F8F8 !important; /* Semi-transparent green for collapsed state */ } /* Make question text always visible regardless of state */ .accordion-button .d-flex span:first-child { color: inherit !important; /* Use the parent's text color */ font-weight: 500; /* Make it slightly bolder */ } /* Ensure badges always have proper contrast */ .accordion-button .badge.bg-danger, .accordion-button .badge.bg-success { color: #fff !important; } /* Style question options with better visibility */ .list-group-item { border-left: 3px solid transparent; transition: all 0.2s ease; } .list-group-item.selected { border-left-color: #0d6efd; background-color: rgba(13, 110, 253, 0.05); } .list-group-item.correct { border-left-color: #198754; background-color: rgba(25, 135, 84, 0.05); } .list-group-item.incorrect { border-left-color: #dc3545; background-color: rgba(220, 53, 69, 0.05); } /* Fix option text visibility on colored backgrounds */ .option-item.bg-success, .option-item.bg-danger, .option-item.border-success.bg-success, .option-item.border-danger.bg-danger, .list-group-item.bg-success, .list-group-item.bg-danger { color: #000 !important; font-weight: 500; } .border-success-new { border-radius: 8px !important; border: 2px solid rgba(40, 167, 69, 0.80) !important; background: rgba(40, 167, 69, 0.04); } /* Override bg-opacity classes that make text unreadable */ .option-item.bg-success.bg-opacity-10, .option-item.bg-danger.bg-opacity-10 { background-color: rgba(25, 135, 84, 0.2) !important; /* Darker green background */ color: #000 !important; } .option-item.bg-danger.bg-opacity-10 { background-color: rgba(220, 53, 69, 0.2) !important; /* Darker red background */ } /* Make text in options visible but preserve icon colors */ .option-item div:not(.me-2), .option-item p, .option-item span:not(.badge), .list-group-item.bg-success div:not(.me-2), .list-group-item.bg-success p, .list-group-item.bg-success span:not(.badge), .list-group-item.bg-danger div:not(.me-2), .list-group-item.bg-danger p, .list-group-item.bg-danger span:not(.badge) { color: #000 !important; } /* Preserve icon colors */ .option-item i.bi-check-circle-fill.text-success, .option-item svg.text-success, .list-group-item i.bi-check-circle-fill.text-success, .list-group-item svg.text-success { color: #198754 !important; /* green */ } .option-item i.bi-x-circle-fill.text-danger, .option-item svg.text-danger, .list-group-item i.bi-x-circle-fill.text-danger, .list-group-item svg.text-danger { color: #dc3545 !important; /* red */ } .option-item i.text-secondary, .option-item svg.text-secondary, .list-group-item i.text-secondary, .list-group-item svg.text-secondary { color: #6c757d !important; /* grey */ } /* Make sure option text is visible */ .option-item p, .option-item div, .option-item span, .list-group-item p, .list-group-item span, .list-group-item div { color: inherit !important; } .option-item { margin-top: 20px; margin-bottom: 8px; display: flex; padding: 12px; /* align-items: center; */ gap: 12px; align-self: stretch; border-radius: 8px !important; background: rgba(33, 42, 57, 0.04); } .option-text { display: flex; /* padding: 12px; */ align-items: center; gap: 12px; align-self: stretch; border-radius: 8px; font-family: 'Onest', sans-serif !important; /* background: rgba(33, 42, 57, 0.04); */ } /* Override any inline styles from rich text editor content in options */ .option-text *, .option-text p, .option-text span, .option-text div { font-family: 'Onest', sans-serif !important; } /* Improve feedback section visibility */ .option-feedback { display: flex; padding: 8px; gap: 10px; align-self: stretch; border-radius: 8px; background: rgba(4, 142, 108, 0.08) !important; } /* Ensure all text in feedback is black */ .option-feedback *, .option-feedback strong { color: #000 !important; } .exam-review-btn-div { margin-top: 32px; width: 100%; } .mock-exam-retake-btn { display: flex; padding: 16px; justify-content: center; align-items: center; gap: 8px; align-self: stretch; border-radius: 8px; background: #035642; color: #FFF; font-family: Onest; font-size: 16px; font-style: normal; font-weight: 700; line-height: 24px; width: 232px; height: 56px; margin-left: 24px; /* 150% */ } /* Increase contrast for correct/incorrect options */ .list-group-item.bg-success { background-color: rgba(25, 135, 84, 0.8) !important; } .list-group-item.bg-danger { background-color: rgba(220, 53, 69, 0.8) !important; } /* Fix tab navigation text visibility */ .nav-tabs .nav-link { color: rgba(0, 0, 0, 0.7) !important; font-weight: 500; } .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { color: #212A39 !important; } .nav-tabs .nav-link.active { display: flex; padding: 12px 8px; justify-content: center; align-items: center; gap: 10px; align-self: stretch; color: #212A39; font-family: Onest; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; background: transparent; border: 0px; box-shadow: none; border-radius: 8px 8px 0 0; border-bottom: 2px solid #212A39; /* 16px */ } /* Badge styling improvements */ .badge { font-weight: normal !important; padding: 0.4em 0.6em !important; border-radius: 4px !important; margin-left: 0.25rem !important; } /* Custom badge styles for level and difficulty */ .badge-level { background-color: #38a867 !important; /* Blue */ color: #ffffff !important; border: 1px solid #ffffff; } .badge-difficulty { background-color: #dc3545 !important; /* Red */ color: #ffffff !important; border: 1px solid #ffffff; } /* Card header text */ .card-header h6 { color: #fff !important; } .practice-exam-heading { color: #035642; font-family: Onest; font-size: 24px; font-style: normal; font-weight: 700; line-height: 24px; /* 100% */ } .time-remaining { color: #035642; font-family: Onest; font-size: 16px; font-style: normal; font-weight: 700; line-height: 24px; /* 150% */ } .timer-boxes { display: flex; gap: 8px; } .time-box { display: flex; padding: 8px 19px; flex-direction: column; justify-content: center; align-items: center; gap: 10px; flex: 1 0 0; border-radius: 4px; background: rgba(60, 72, 82, 0.08); color: #3C4852; text-align: center; font-family: 'Onest', sans-serif; font-size: 14px; font-style: normal; font-weight: 600; line-height: 20px; /* 142.857% */ } .timer-separator { font-weight: 700; font-size: 18px; color: #3C4852; padding: 0 4px; } .exam-attempt-question-display-main-div { display: flex; align-items: flex-start; gap: 24px; width: 100%; margin-left: 48px; margin-right: 48px; } .question-sequence-display { display: flex; padding: 16px; flex-direction: column; /* justify-content: center; */ align-items: flex-start; gap: 16px; align-self: stretch; border-radius: 8px; background: #FFF; } .question-sequence-heading { color: #035642; font-family: Onest; font-size: 16px; font-style: normal; font-weight: 700; line-height: 24px; /* 150% */ } .question-card-header { display: flex; padding: 24px 16px 16px 16px; flex-direction: column; align-items: flex-start; gap: 16px; flex: 1 0 0; border-radius: 8px; background: #FFF; } .question-card-headeing { display: flex; justify-content: space-between; width: 100%; } .question-card-num { color: rgba(60, 72, 82, 0.80); font-family: Onest; font-size: 12px; font-style: normal; font-weight: 600; line-height: 16px; /* 133.333% */ } .ques-heading { color: #035642; font-family: Onest; font-size: 18px; font-style: normal; font-weight: 700; line-height: 24px; /* 133.333% */ } .question-level { display: flex; padding: 8px 12px; align-items: center; gap: 4px; border-radius: 8px; background: linear-gradient(0deg, rgba(40, 167, 69, 0.08) 0%, rgba(40, 167, 69, 0.08) 100%), #FFF; color: #28A745; font-family: Onest; font-size: 14px; font-style: normal; font-weight: 600; line-height: 16px; /* 114.286% */ } .question-difficulty { color: #DC3545; font-family: Onest; font-size: 14px; font-style: normal; font-weight: 600; line-height: 16px; /* 114.286% */ display: flex; padding: 8px 12px; align-items: center; gap: 4px; border-radius: 8px; background: linear-gradient(0deg, rgba(220, 53, 69, 0.08) 0%, rgba(220, 53, 69, 0.08) 100%), #FFF; margin-left: 16px; } .previous-ques-btn { display: flex; width: 167px; padding: 8px 12px; justify-content: center; align-items: center; gap: 8px; align-self: stretch; border-radius: 4px; border: 1px solid #035642; color: #035642; font-family: Onest; font-size: 16px; font-style: normal; font-weight: 600; line-height: 16px; background-color: #fff; /* 100% */ } .submit-exam-btn { display: flex; padding: 16px 40px; justify-content: center; align-items: center; gap: 10px; border-radius: 8px; background: #035642; color: #FFF; font-family: Onest; font-size: 14px; font-style: normal; font-weight: 600; line-height: 16px; /* 114.286% */ } .option-btn { display: flex; width: 28px; height: 28px; padding: 10px 9px; flex-direction: column; justify-content: center; align-items: center; gap: 10px; aspect-ratio: 1/1; color: #212A39; font-family: Onest; font-size: 10px; font-style: normal; font-weight: 600; line-height: 100%; border-radius: 27px; background: rgba(60, 72, 82, 0.08); border: none; outline: none; background-clip: padding-box; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: default; /* 10px */ } .opt-selected { border-radius: 27px; background: #048E6C; display: flex; width: 28px; height: 28px; padding: 10px 9px; flex-direction: column; justify-content: center; align-items: center; gap: 10px; aspect-ratio: 1/1; color: #FFF; font-family: Onest; font-size: 10px; font-style: normal; font-weight: 600; line-height: 100%; /* 10px */ } /* Question status indicators */ .option-btn.btn-success { background: #28a745 !important; border-color: #28a745 !important; color: #FFF !important; } .option-btn.btn-warning { background: #ffc107 !important; border-color: #ffc107 !important; color: #000 !important; } .option-btn.btn-orange { background: #fd7e14 !important; border-color: #fd7e14 !important; color: #FFF !important; } .option-btn.opt-selected { background: #007bff !important; border-color: #007bff !important; color: #FFF !important; } .custom-exam-main-div { display: flex; padding: 0px 24px 0 24px; flex-direction: column; align-items: flex-start; gap: 10px; align-self: stretch; background: #FFF; } .custom-exam-div { display: flex; width: 100%; } .select-topic-label { color: #212A39; text-align: center; font-feature-settings: 'dlig' on; font-family: Onest; font-size: 19px; font-style: normal; font-weight: 600; line-height: 20px; /* 105.263% */ } .topic-accord { margin-top: 10px; } .custom-form-main { width: 100%; } .subject-header { border-radius: 8px; background: #FFF; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.12); display: flex; padding: 16px 16px 16px 24px; justify-content: space-between; align-items: center; align-self: stretch; display: flex; flex-direction: column; } .all-none-div { display: flex; justify-content: space-between; margin-top: 10px; } .instr-text { color: #666; text-align: center; font-feature-settings: 'dlig' on; font-family: Onest; font-size: 18px; font-style: normal; font-weight: 500; line-height: 20px; /* 111.111% */ } .select-all-btn { display: flex; width: 120px; padding: 12px 16px; justify-content: center; align-items: center; gap: 10px; color: #FFF; font-family: Onest; font-size: 14px; font-style: normal; font-weight: 600; line-height: 100%; border-radius: 8px; background: #035642; /* 14px */ margin-left: 8px; } .deselect-all-btn { display: flex; width: 120px; padding: 12px 16px; justify-content: center; align-items: center; gap: 10px; border-radius: 8px; border: 1px solid #035642; color: #035642; font-family: Onest; font-size: 14px; font-style: normal; font-weight: 600; line-height: 100%; background-color: #fff; /* 14px */ } .give-b-btm { padding-bottom: 24px; border-bottom: 1px solid rgba(60, 72, 82, 0.24); } .diff-lvl { color: #212A39; font-family: Onest; font-size: 16px; font-style: normal; font-weight: 500; line-height: 130%; /* 20.8px */ margin-bottom: 8px; } #difficulty_level.form-select { display: flex; padding: 16px; justify-content: space-between; align-items: center; align-self: stretch; border-radius: 8px; border: 1px solid rgba(102, 102, 102, 0.16); background: #fff; color: #212A39; font-family: 'Onest', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 130%; /* 20.8px */ /* remove default browser arrow */ appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; cursor: pointer; } #question_type.form-select { display: flex; padding: 16px; justify-content: space-between; align-items: center; align-self: stretch; border-radius: 8px; border: 1px solid rgba(102, 102, 102, 0.16); background: #fff; color: #212A39; font-family: 'Onest', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 130%; /* 20.8px */ /* remove default browser arrow */ appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; cursor: pointer; } .ques-count { color: #212A39; font-family: Onest; font-size: 16px; font-style: normal; font-weight: 500; line-height: 130%; /* 20.8px */ } .ques-num { /* display: flex; */ padding: 4px 8px; flex-direction: column; justify-content: center; align-items: center; gap: 10px; border-radius: 4px; background: rgba(4, 142, 108, 0.12); margin-left: 16px; width: 35px; color: #048E6C; font-family: Onest; font-size: 16px; font-style: normal; font-weight: 600; line-height: 120%; /* 19.2px */ } .help-text { color: rgba(33, 42, 57, 0.80); font-feature-settings: 'dlig' on; font-family: Onest; font-size: 16px; font-style: normal; font-weight: 500; line-height: 16px; /* 100% */ } .custom-range { width: 100%; height: 8px; border-radius: 4px; outline: none; appearance: none; background: linear-gradient(to right, #36A589 0%, #36A589 calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), #E6E8E9 calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), #E6E8E9 100%); } /* For WebKit browsers (Chrome, Edge, Safari) */ .custom-range::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; background: #36A589; border-radius: 50%; cursor: pointer; border: none; margin-top: -6px; /* centers thumb on the 8px track */ } /* For Firefox */ .custom-range::-moz-range-thumb { width: 20px; height: 20px; background: #36A589; border: none; border-radius: 50%; cursor: pointer; } /* Remove default background for Firefox track */ .custom-range::-moz-range-track { background: transparent; } .start-qz-btn { display: flex; padding: 16px 32px; justify-content: center; align-items: center; gap: 8px; border-radius: 8px; background: #035642; color: #FFF; font-family: Onest; font-size: 16px; font-style: normal; font-weight: 700; line-height: 24px; border: none; outline: none; background-clip: padding-box; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; /* 150% */ } .rt-div { display: flex; padding: 8px; justify-content: space-between; align-items: center; align-self: stretch; border-radius: 4px; background: rgba(33, 42, 57, 0.04); margin-top: 12px; } .dur-text { color: rgba(33, 42, 57, 0.80) !important; font-family: Onest; font-size: 14px; font-style: normal; font-weight: 500; line-height: 24px; /* 142.857% */ letter-spacing: 0.14px; } .req-mins { color: #048E6C; font-family: Onest; font-size: 14px; font-style: normal; font-weight: 600; line-height: 20px; letter-spacing: 0.14px; } .rcmnd-btn { display: flex; padding: 8px 16px; justify-content: center; align-items: center; gap: 10px; align-self: stretch; border-radius: 4px; border: 1px solid #048E6C; color: #048E6C; font-family: Onest; font-size: 14px; font-style: normal; font-weight: 600; line-height: 100%; background-color: #fff !important; /* 14px */ } .subj-topics { background-color: #fff !important; margin-top: 24px; width: 100%; } .topic-btn { border: none !important; outline: none !important; background: transparent !important; background-clip: padding-box !important; appearance: none !important; -webkit-appearance: none !important; box-shadow: none !important; } .modal-title { font-family: Onest; } /* ======================================== GLOBAL FONT CONSISTENCY - Onest ======================================== */ /* Ensure all modal content uses Onest font */ .modal, .modal-dialog, .modal-content, .modal-header, .modal-body, .modal-footer, .modal-title { font-family: 'Onest', sans-serif !important; } .modal p, .modal span, .modal div, .modal label, .modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6 { font-family: 'Onest', sans-serif !important; } .onb-step { font-family: 'Onest', sans-serif !important; } /* Alerts */ .alert, .alert-info, .alert-success, .alert-warning, .alert-danger { font-family: 'Onest', sans-serif !important; } /* Ensure all buttons use Onest */ .btn, button, .modal .btn { font-family: 'Onest', sans-serif !important; } /* Ensure form elements use Onest */ input, select, textarea, .form-control, .form-select, .form-label { font-family: 'Onest', sans-serif !important; } /* Tables */ table, th, td { font-family: 'Onest', sans-serif !important; } /* Lists */ ul, ol, li { font-family: 'Onest', sans-serif !important; } /* Tooltips and popovers */ .tooltip, .popover { font-family: 'Onest', sans-serif !important; } /* Dropdown menus */ .dropdown-menu, .dropdown-item { font-family: 'Onest', sans-serif !important; } /* ======================================== Results Page Animations ======================================== */ /* Animation for result badge (used in MCQ and Essay results) */ @keyframes flashyBounce { 0%, 100% { transform: translateY(0) scale(1); opacity: 1; } 25% { transform: translateY(-20px) scale(1.2); opacity: 0.7; } 50% { transform: translateY(0px) scale(0.9); opacity: 1; } 75% { transform: translateY(-10px) scale(1.1); opacity: 0.8; } } .animated-cue { display: inline-block; animation: flashyBounce 1.5s ease-out; } /* ======================================== Essay Results Page Styles ======================================== */ /* Essay Review Accordion Width Fixes */ #essayQuestionAccordion { width: 100% !important; } #essayQuestionAccordion .accordion-item { width: 100% !important; } #essayQuestionAccordion .accordion-header { width: 100% !important; } #essayQuestionAccordion .accordion-button { width: 100% !important; } /* Essay-specific overrides */ #essayQuestionAccordion .ques-review-info { max-width: 760px; color: #2684CB !important; font-size: 14px; } /* #essayQuestionAccordion .accordion-button * { font-size: 14px; } */ /* ======================================== Exam Instructions Modal Styles ======================================== */ #examInstructionsModal .modal-content { border: none; border-radius: 12px; box-shadow: 0 10px 40px rgba(1, 77, 64, 0.2); } #examInstructionsModal .modal-header { background-color: var(--imarticus-primary-green, #014D40); color: var(--imarticus-text-light, #FFFFFF); border-bottom: 3px solid var(--imarticus-secondary-green, #38A867); border-radius: 12px 12px 0 0; padding: 1rem 1.5rem; } #examInstructionsModal .modal-header .modal-title { font-weight: 600; font-size: 1.25rem; } #examInstructionsModal .modal-body { padding: 1.5rem; background-color: var(--imarticus-bg-light, #FFFFFF); } #examInstructionsModal .alert-warning { background-color: rgba(255, 140, 0, 0.1); border-color: var(--imarticus-accent-orange, #FF8C00); color: var(--imarticus-text-dark, #212529); border-radius: 8px; } #examInstructionsModal .instruction-item { padding: 12px 15px; border-radius: 8px; background-color: var(--imarticus-bg-grey, #F4F6F8); border-left: 3px solid var(--imarticus-secondary-green, #38A867); transition: all 0.2s ease; } #examInstructionsModal .instruction-item:hover { background-color: rgba(56, 168, 103, 0.08); transform: translateX(3px); } #examInstructionsModal .instruction-item h6 { color: var(--imarticus-primary-green, #014D40); margin-bottom: 0.25rem; } #examInstructionsModal .instruction-item p { color: var(--md-text-secondary, #757575); font-size: 0.9rem; line-height: 1.5; } #examInstructionsModal .instruction-icon i { color: var(--imarticus-primary-green, #014D40); } #examInstructionsModal .form-check { padding: 1rem; background-color: var(--imarticus-bg-grey, #F4F6F8); border-radius: 8px; border: 1px solid var(--md-divider, #BDBDBD); } #examInstructionsModal .form-check-input:checked { background-color: var(--imarticus-secondary-green, #38A867); border-color: var(--imarticus-secondary-green, #38A867); } #examInstructionsModal .form-check-label { cursor: pointer; color: var(--imarticus-text-dark, #212529); } #examInstructionsModal .modal-footer { background-color: var(--imarticus-bg-grey, #F4F6F8); border-top: 1px solid var(--md-divider, #BDBDBD); border-radius: 0 0 12px 12px; padding: 1rem 1.5rem; } #examInstructionsModal .btn-secondary { background-color: #6c757d; border-color: #6c757d; border-radius: 6px; padding: 0.5rem 1.25rem; } #examInstructionsModal .btn-primary { background-color: var(--imarticus-secondary-green, #38A867); border-color: var(--imarticus-secondary-green, #38A867); border-radius: 6px; padding: 0.5rem 1.25rem; font-weight: 600; } #examInstructionsModal .btn-primary:hover:not(:disabled) { background-color: var(--imarticus-primary-green, #014D40); border-color: var(--imarticus-primary-green, #014D40); } #examInstructionsModal .btn-primary:disabled { background-color: #a8d5ba; border-color: #a8d5ba; cursor: not-allowed; }