/* ============================================================ DAC Training — Global Tutor LMS Styles Applies DAC brand to all Tutor-rendered pages: course catalog, single course, lesson, quiz, enrollment. Loaded conditionally — see dashboard-styles.php. ============================================================ */ /* ============================================================ TYPOGRAPHY & BASE RESETS ============================================================ */ .tutor-wrap, .tutor-page, [class*="tutor-"] { font-family: var(--dac-font) !important; } /* 2026-07-02: Page canvas tint for Tutor-rendered pages only (dashboard, lesson, quiz, course single/archive) — NOT sitewide. Tutor 4.0's native sidebar/cards render white-on-white with only 1px borders for separation, which reads as flat/washed-out. `.tutor-frontend` is a body class Tutor itself adds only on its own rendered templates, so this can't leak onto Bricks marketing pages (confirmed absent from /courses-list/, /start/, etc). Scoped to [data-tutor-theme="light"] on purpose: Tutor 4.0 ships its own native light/dark theme switcher (Account, Preferences), stored per-user in wp_usermeta and applied as a data-tutor-theme attribute on that swaps a full set of Tutor custom properties (surface, text, icon colors, etc). Dark theme already has its own well-designed, high-contrast surfaces — confirmed live 2026-07-02 — so this tint must not fight it. Without this scope, dark-theme users would get dark sidebar/cards floating on our canvas. 2026-07-02: tried --dac-blue-light, then an invented --dac-grey-surface (#E5E5E5) — Tyler found both too present. Landed on --dac-bg (barely-there separation, same token as "page background" elsewhere). 2026-07-06: --dac-bg alone read as too subtle once he'd lived with it — bumped one step darker to the dedicated --dac-canvas token (#F0F2F4, style.css) instead of darkening --dac-bg itself, since that token is shared with several other components that shouldn't change. */ html[data-tutor-theme="light"] body.tutor-frontend { background: var(--dac-canvas); } /* Tutor's own core CSS paints an opaque #fafafa background on these two wrapper divs (.tutor-dashboard-layout on /dashboard/, .tutor-learning-area on lesson/quiz pages) — they sit directly between body and the visible content, so the tint above was being fully covered and never showed. Not a DAC bug, just Tutor core owning that background; strip it here so body's tint is the single source of truth for the page canvas color. Same light-theme scope as above — leave dark theme's own surface-base background alone entirely. */ html[data-tutor-theme="light"] .tutor-dashboard-layout, html[data-tutor-theme="light"] .tutor-learning-area { background: transparent !important; } /* ============================================================ COURSE CATALOG — /courses/ ============================================================ */ /* Top gap between sticky header and the course archive */ /* Bottom padding prevents the last course card from butting against the footer. 80px desktop → 56px mobile keeps the spacing comfortable on all screens. */ .tutor-courses-wrap.course-archive-page { padding-top: var(--dac-page-top-gap, 48px); padding-bottom: 80px; } @media (max-width: 640px) { .tutor-courses-wrap.course-archive-page { padding-bottom: 56px; } } /* Grid layout */ .tutor-course-list { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 28px !important; } @media (max-width: 1024px) { .tutor-course-list { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 640px) { .tutor-course-list { grid-template-columns: 1fr !important; } } /* Catalog card */ .tutor-course-list .tutor-card, .tutor-loop-course .tutor-card { border: 1px solid var(--dac-border) !important; border-radius: var(--dac-radius-md) !important; box-shadow: var(--dac-shadow) !important; overflow: hidden !important; transition: box-shadow 0.2s ease, transform 0.2s ease !important; background: var(--dac-white) !important; display: flex !important; flex-direction: column !important; } .tutor-course-list .tutor-card:hover, .tutor-loop-course .tutor-card:hover { box-shadow: var(--dac-shadow-md) !important; transform: translateY(-3px) !important; } /* Thumbnail */ .tutor-course-list .tutor-card .tutor-course-thumbnail, .tutor-course-list .tutor-course-thumbnail { height: 180px !important; overflow: hidden !important; flex-shrink: 0 !important; } .tutor-course-list .tutor-card .tutor-course-thumbnail img, .tutor-course-list .tutor-course-thumbnail img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* Card body */ .tutor-course-list .tutor-card .tutor-card-body { padding: 20px !important; display: flex !important; flex-direction: column !important; flex: 1 !important; gap: 10px !important; } /* Course title */ .tutor-course-list .tutor-card .tutor-card-title, .tutor-course-list .tutor-card .tutor-card-title a { font-size: 1.0625rem !important; font-weight: 700 !important; color: var(--dac-dark) !important; line-height: 1.3 !important; text-decoration: none !important; } .tutor-course-list .tutor-card .tutor-card-title a:hover { color: var(--dac-blue) !important; } /* Course meta (instructor, rating, lessons) */ .tutor-course-list .tutor-meta, .tutor-course-list .tutor-course-meta { font-size: 0.875rem !important; color: var(--dac-muted) !important; display: flex !important; flex-wrap: wrap !important; gap: 12px !important; align-items: center !important; } /* Ratings stars */ .tutor-ratings-stars .tutor-icon-star-full { color: #f59e0b !important; } /* Enroll / View button on catalog cards */ .tutor-course-list .tutor-btn, .tutor-course-list button.tutor-btn, .tutor-course-list a.tutor-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 10px 22px !important; background: var(--dac-blue) !important; color: #ffffff !important; border: none !important; border-radius: var(--dac-radius-pill) !important; font-family: var(--dac-font) !important; font-size: 0.9375rem !important; font-weight: 600 !important; cursor: pointer !important; transition: background 0.2s, transform 0.1s !important; text-decoration: none !important; min-height: 44px !important; margin-top: auto !important; } .tutor-course-list .tutor-btn:hover, .tutor-course-list a.tutor-btn:hover { background: var(--dac-blue-hover) !important; color: #ffffff !important; transform: translateY(-1px) !important; } /* Price badge */ .tutor-course-list .tutor-course-price { font-size: 1.0625rem !important; font-weight: 800 !important; color: var(--dac-blue) !important; } .tutor-course-list .tutor-course-price .tutor-price-free { color: #10b981 !important; } /* ============================================================ SINGLE COURSE PAGE ============================================================ */ /* Page wrapper */ .tutor-single-course-wrapper, .tutor-course-details-page { max-width: 1200px !important; margin: 0 auto !important; padding: 40px 24px !important; } /* Two-column layout: content | sidebar */ .tutor-course-details-content { display: grid !important; grid-template-columns: 1fr 360px !important; gap: 40px !important; align-items: start !important; } @media (max-width: 900px) { .tutor-course-details-content { grid-template-columns: 1fr !important; } } /* Course title */ .tutor-course-details-title, .tutor-single-course-wrapper h1 { font-size: clamp(1.75rem, 3vw, 2.5rem) !important; font-weight: 800 !important; color: var(--dac-dark) !important; letter-spacing: -0.02em !important; line-height: 1.15 !important; margin-bottom: 16px !important; } /* Description body text */ .tutor-course-description, .tutor-course-details-desc { font-size: 1rem !important; line-height: 1.75 !important; color: var(--dac-text) !important; } /* Sidebar card */ .tutor-course-single-sidebar, .tutor-course-preview-card { background: var(--dac-white) !important; border: 1px solid var(--dac-border) !important; border-radius: var(--dac-radius-md) !important; box-shadow: var(--dac-shadow-md) !important; overflow: hidden !important; position: sticky !important; top: 88px !important; } /* Sidebar thumbnail */ .tutor-course-single-sidebar .tutor-course-thumbnail, .tutor-course-preview-card .tutor-course-thumbnail { width: 100% !important; height: 200px !important; overflow: hidden !important; } .tutor-course-single-sidebar .tutor-course-thumbnail img, .tutor-course-preview-card .tutor-course-thumbnail img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* Sidebar body */ .tutor-course-single-sidebar .tutor-card-body { padding: 24px !important; } /* Enroll button — primary CTA */ .tutor-course-purchase-box .tutor-btn, .tutor-course-enroll-btn, .tutor-enroll-course-btn, a.tutor-btn.tutor-btn-primary { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 14px 24px !important; background: var(--dac-blue) !important; color: #ffffff !important; border: none !important; border-radius: var(--dac-radius-pill) !important; font-family: var(--dac-font) !important; font-size: 1rem !important; font-weight: 700 !important; cursor: pointer !important; transition: background 0.2s, box-shadow 0.2s, transform 0.1s !important; text-decoration: none !important; margin-bottom: 12px !important; min-height: 52px !important; box-shadow: 0 4px 16px rgba(0, 72, 184, 0.32) !important; } .tutor-course-purchase-box .tutor-btn:hover, .tutor-course-enroll-btn:hover, a.tutor-btn.tutor-btn-primary:hover { background: var(--dac-blue-hover) !important; box-shadow: 0 6px 20px rgba(0, 72, 184, 0.4) !important; transform: translateY(-1px) !important; color: #ffffff !important; } .tutor-course-purchase-box .tutor-btn:active, .tutor-course-enroll-btn:active, a.tutor-btn.tutor-btn-primary:active { transform: translateY(0) !important; } .tutor-course-purchase-box .tutor-btn:focus-visible, .tutor-course-enroll-btn:focus-visible, a.tutor-btn.tutor-btn-primary:focus-visible { outline: 2px solid var(--dac-blue) !important; outline-offset: 3px !important; } /* Course includes meta (lessons, quizzes, level, duration) */ .tutor-course-details-meta li, .tutor-course-includes li { font-size: 0.9375rem !important; color: var(--dac-text) !important; padding: 6px 0 !important; display: flex !important; align-items: center !important; gap: 10px !important; border-bottom: 1px solid var(--dac-border) !important; } .tutor-course-details-meta li:last-child, .tutor-course-includes li:last-child { border-bottom: none !important; } /* Curriculum / syllabus accordion */ .tutor-course-topics-list .tutor-accordion-item { border: 1px solid var(--dac-border) !important; border-radius: var(--dac-radius-sm) !important; margin-bottom: 8px !important; overflow: hidden !important; } .tutor-course-topics-list .tutor-accordion-item-header { background: var(--dac-bg) !important; padding: 14px 20px !important; font-size: 0.9375rem !important; font-weight: 600 !important; color: var(--dac-dark) !important; cursor: pointer !important; } .tutor-course-topics-list .tutor-accordion-item-header:hover { background: var(--dac-blue-light) !important; color: var(--dac-blue) !important; } .tutor-course-topics-list .tutor-lesson-item, .tutor-course-topics-list .tutor-topic-content-item { padding: 10px 20px !important; font-size: 0.9375rem !important; color: var(--dac-text) !important; border-top: 1px solid var(--dac-border) !important; display: flex !important; align-items: center !important; gap: 10px !important; } .tutor-course-topics-list .tutor-lesson-item a { color: var(--dac-text) !important; text-decoration: none !important; } .tutor-course-topics-list .tutor-lesson-item a:hover { color: var(--dac-blue) !important; } /* === DAC-DISABLED (v1.4.21, 2026-07-02) — course-progress review, see change_log.md === Lesson completion checkmark color override. .tutor-lesson-item.tutor-is-completed .tutor-icon-mark { color: #10b981 !important; } === END DAC-DISABLED === */ /* ============================================================ LESSON / QUIZ SCREEN — OUTER CARD WRAPPER ============================================================ */ /* Wrap the entire two-column lesson/quiz screen (sidebar + content) in a card so the content sits lifted inside the page. Using only visual properties — NO padding/margin on children — to avoid breaking the internal flex layout. */ .tutor-course-single-content-wrapper { border: 1px solid var(--dac-border, #e5e7eb) !important; border-radius: var(--dac-radius-md, 12px) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 32px rgba(0, 0, 0, 0.04) !important; overflow: hidden !important; margin: 16px !important; } @media (max-width: 768px) { .tutor-course-single-content-wrapper { margin: 0 !important; border-radius: 0 !important; } } /* ============================================================ LESSON PAGE ============================================================ */ /* Constrain the lesson canvas — prevents edge-to-edge stretch on wide viewports */ .tutor-lesson-wrap, #tutor-lesson-sidebar-content, .tutor-lesson-sidebar-body { max-width: 860px !important; margin-left: auto !important; margin-right: auto !important; } .tutor-lesson-wrap { padding: 32px 24px 48px !important; } @media (max-width: 640px) { .tutor-lesson-wrap { padding: 16px 16px 40px !important; } } /* === DAC-DISABLED (v1.4.21, 2026-07-02) — course-progress review, see change_log.md === Oval-icon fix + sidebar checkmark (green) / retake (orange) circle styling. [ Fix oval icons — any Tutor LMS element styled as a circle must stay square ] .tutor-icon-circle, .tutor-icon-round, .tutor-legend-color, .tutor-sidebar .tutor-icon, .tutor-sidebar-course-content .tutor-icon-wrap, .tutor-course-single-curriculum .tutor-icon, .tutor-lesson-item-icon, .tutor-course-single-info .tutor-icon-wrap, .tutor-lessons-sidebar-list .tutor-icon, [class*="tutor-icon"][style*="border-radius"] { aspect-ratio: 1 / 1 !important; flex-shrink: 0 !important; width: auto !important; } [ Oval fix — two-part approach: 1. Prevent flex-stretch by centering items in the sidebar row containers. Using the full Tutor selector chain to guarantee specificity. 2. Force appearance:none so the browser stops rendering a native checkbox widget (Tutor never sets this, so macOS renders its own pill/oval shape ignoring our border-radius). With appearance:none we get a pure CSS box that actually respects all our sizing and border-radius rules. ] .tutor-course-single-sidebar-wrapper .tutor-course-topic-item a, .tutor-course-single-sidebar-wrapper .tutor-course-topic-item .tutor-d-flex { align-items: center !important; } .tutor-course-single-content-wrapper .tutor-course-topic-item input.tutor-form-check-input.tutor-form-check-circle { -webkit-appearance: none !important; appearance: none !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; flex-shrink: 0 !important; flex-grow: 0 !important; align-self: center !important; border: 1.5px solid #c0c3cb !important; background-color: transparent !important; box-sizing: border-box !important; cursor: default !important; display: block !important; padding: 0 !important; } [ Unstarted/incomplete lessons: hide the empty gray circle so the lesson list reads clean. Only the green checkmark (completed) and orange fail icon show. ] .tutor-course-single-content-wrapper .tutor-course-topic-item input.tutor-form-check-input.tutor-form-check-circle:not([checked]):not(.tutor-check-fail), .tutor-course-single-sidebar-wrapper .tutor-course-topic-item .tutor-form-check-circle:not([checked]):not(.tutor-check-fail) { opacity: 0 !important; pointer-events: none !important; } [ Checked state — green fill with a checkmark ] .tutor-course-single-content-wrapper .tutor-course-topic-item input.tutor-form-check-input.tutor-form-check-circle[checked], .tutor-course-single-sidebar-wrapper .tutor-course-topic-item .tutor-form-check-circle[checked] { background-color: var(--tutor-color-success, #24a148) !important; border-color: var(--tutor-color-success, #24a148) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important; background-size: 70% 70% !important; background-repeat: no-repeat !important; background-position: center !important; } [ Failed quiz state — orange with a retry/refresh arrow. Full sizing included here (not inherited) because Tutor may have its own .tutor-check-fail rules that override inherited dimensions. ] .tutor-course-single-content-wrapper .tutor-course-topic-item input.tutor-form-check-input.tutor-form-check-circle.tutor-check-fail, .tutor-course-single-sidebar-wrapper .tutor-course-topic-item .tutor-check-fail { -webkit-appearance: none !important; appearance: none !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; flex-shrink: 0 !important; flex-grow: 0 !important; align-self: center !important; box-sizing: border-box !important; display: block !important; padding: 0 !important; background-color: #f97316 !important; border-color: #f97316 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E") !important; background-size: 80% 80% !important; background-repeat: no-repeat !important; background-position: center !important; } === END DAC-DISABLED === */ /* Lesson title */ .tutor-lesson-content h1, .tutor-lesson-wrap h1 { font-size: clamp(1.5rem, 2.5vw, 2rem) !important; font-weight: 800 !important; color: var(--dac-dark) !important; letter-spacing: -0.02em !important; margin-bottom: 24px !important; line-height: 1.2 !important; } /* Lesson body text */ .tutor-lesson-content p, .tutor-lesson-wrap .entry-content p { font-size: 1rem !important; line-height: 1.8 !important; color: var(--dac-text) !important; margin-bottom: 1.25em !important; } .tutor-lesson-content h2, .tutor-lesson-wrap .entry-content h2 { font-size: 1.375rem !important; font-weight: 700 !important; color: var(--dac-dark) !important; margin: 2em 0 0.75em !important; } .tutor-lesson-content h3, .tutor-lesson-wrap .entry-content h3 { font-size: 1.125rem !important; font-weight: 700 !important; color: var(--dac-dark) !important; margin: 1.5em 0 0.5em !important; } /* Video embed container */ .tutor-lesson-video, .tutor-video-player-wrap { border-radius: var(--dac-radius-md) !important; overflow: hidden !important; margin-bottom: 32px !important; box-shadow: var(--dac-shadow-md) !important; aspect-ratio: 16/9 !important; } .tutor-lesson-video iframe, .tutor-video-player-wrap iframe { width: 100% !important; height: 100% !important; display: block !important; } /* Complete lesson button */ .tutor-complete-lesson-btn, .tutor-lesson-btn-complete { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 13px 28px !important; background: var(--dac-blue) !important; color: #ffffff !important; border: none !important; border-radius: var(--dac-radius-pill) !important; font-family: var(--dac-font) !important; font-size: 1rem !important; font-weight: 600 !important; cursor: pointer !important; transition: background 0.2s, transform 0.1s !important; min-height: 48px !important; text-decoration: none !important; } .tutor-complete-lesson-btn:hover, .tutor-lesson-btn-complete:hover { background: var(--dac-blue-hover) !important; color: #ffffff !important; transform: translateY(-1px) !important; } /* Lesson prev/next navigation */ .tutor-lesson-navigation, .tutor-lesson-nav { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-top: 40px !important; padding-top: 24px !important; border-top: 1px solid var(--dac-border) !important; gap: 12px !important; } .tutor-lesson-navigation a, .tutor-lesson-nav a { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 11px 22px !important; background: var(--dac-bg) !important; border: 1px solid var(--dac-border) !important; border-radius: var(--dac-radius-pill) !important; font-size: 0.9375rem !important; font-weight: 500 !important; color: var(--dac-text) !important; text-decoration: none !important; transition: background 0.15s, border-color 0.15s, color 0.15s !important; min-height: 44px !important; } .tutor-lesson-navigation a:hover, .tutor-lesson-nav a:hover { background: var(--dac-blue-light) !important; border-color: var(--dac-blue) !important; color: var(--dac-blue) !important; } /* ============================================================ QUIZ ATTEMPT TABLE (previous attempts / results) ============================================================ */ /* ============================================================ QUIZ PAGE ============================================================ */ /* No max-width here; Tutor constrains inner .tutor-quiz-wrap to 980px already. */ .tutor-quiz-wrapper { padding: 40px 24px !important; } /* Quiz title */ .tutor-quiz-title, .tutor-quiz-wrapper h2 { font-size: 1.5rem !important; font-weight: 800 !important; color: var(--dac-dark) !important; margin-bottom: 24px !important; } /* Question text */ .tutor-quiz-question, .tutor-quiz-question-text { font-size: 1.0625rem !important; font-weight: 600 !important; color: var(--dac-dark) !important; line-height: 1.5 !important; margin-bottom: 20px !important; } /* Answer grid — override Tutor's bootstrap negative-margin row with CSS Grid so all columns are exactly equal width and no gutter math is needed. */ .quiz-question-ans-choice-area .tutor-row { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; margin-left: 0 !important; margin-right: 0 !important; } @media (max-width: 640px) { .quiz-question-ans-choice-area .tutor-row { grid-template-columns: 1fr !important; } } /* Each answer cell — fill its grid slot and pass height to children */ .tutor-quiz-answer-single { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 0 !important; display: flex !important; flex-direction: column !important; } /* The label fills the full cell height */ .tutor-quiz-question-item { display: flex !important; flex-direction: column !important; flex: 1 !important; cursor: pointer !important; height: 100% !important; } /* The visible answer card */ .quiz-question-ans-choice-area .tutor-card { display: flex !important; align-items: center !important; flex: 1 !important; padding: 14px 18px !important; border: 1.5px solid var(--dac-border) !important; border-radius: var(--dac-radius-sm) !important; background: var(--dac-white) !important; box-shadow: none !important; transition: border-color 0.15s, background 0.15s !important; min-height: 52px !important; font-size: 0.9375rem !important; color: var(--dac-text) !important; cursor: pointer !important; } /* Hover */ .tutor-quiz-question-item:hover .tutor-card { border-color: var(--dac-blue) !important; background: var(--dac-blue-light) !important; } /* Selected — :has() is widely supported (Chrome 105+, Firefox 121+, Safari 15.4+) */ .tutor-quiz-question-item:has(input:checked) .tutor-card { border-color: var(--dac-blue) !important; background: var(--dac-blue-light) !important; box-shadow: 0 0 0 3px rgba(0, 72, 184, 0.12) !important; } /* Post-submit correct answer */ .tutor-quiz-answer-single.tutor-quiz-correct-answer .tutor-card, .tutor-quiz-question-item.tutor-quiz-correct-answer .tutor-card { border-color: #10b981 !important; background: #ecfdf5 !important; color: #065f46 !important; } /* Post-submit incorrect answer */ .tutor-quiz-answer-single.tutor-quiz-wrong-answer .tutor-card, .tutor-quiz-question-item.tutor-quiz-wrong-answer .tutor-card { border-color: #ef4444 !important; background: #fef2f2 !important; color: #991b1b !important; } /* Inner flex row (input + label text) */ .quiz-question-ans-choice-area .tutor-d-flex.tutor-align-center { gap: 12px !important; width: 100% !important; align-items: center !important; } /* Radio / checkbox inside the card — full appearance reset required. Without appearance:none macOS renders its native pill/oval widget that ignores all CSS sizing and border-radius rules (same issue as sidebar). */ .quiz-question-ans-choice-area input.tutor-form-check-input { -webkit-appearance: none !important; appearance: none !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; flex-shrink: 0 !important; flex-grow: 0 !important; align-self: center !important; border: 1.5px solid #c0c3cb !important; background-color: #fff !important; box-sizing: border-box !important; display: block !important; padding: 0 !important; cursor: pointer !important; } /* Checked state — blue fill with a dot */ .quiz-question-ans-choice-area input[type="radio"].tutor-form-check-input:checked { border-color: var(--dac-blue) !important; background-color: var(--dac-blue) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='2.5' fill='white'/%3E%3C/svg%3E") !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; background-position: center !important; } /* Checked state for multiple_choice checkboxes — blue fill with a checkmark */ .quiz-question-ans-choice-area input[type="checkbox"].tutor-form-check-input { border-radius: 4px !important; } .quiz-question-ans-choice-area input[type="checkbox"].tutor-form-check-input:checked { border-color: var(--dac-blue) !important; background-color: var(--dac-blue) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important; background-size: 70% 70% !important; background-repeat: no-repeat !important; background-position: center !important; } /* Quiz submit button */ .tutor-quiz-btn-wrap .tutor-btn, .tutor-quiz-submit, button.tutor-quiz-submit-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 14px 32px !important; background: var(--dac-blue) !important; color: #ffffff !important; border: none !important; border-radius: var(--dac-radius-pill) !important; font-family: var(--dac-font) !important; font-size: 1rem !important; font-weight: 700 !important; cursor: pointer !important; transition: background 0.2s, transform 0.1s !important; min-height: 52px !important; box-shadow: 0 4px 16px rgba(0, 72, 184, 0.28) !important; } .tutor-quiz-btn-wrap .tutor-btn:hover, .tutor-quiz-submit:hover { background: var(--dac-blue-hover) !important; color: #ffffff !important; transform: translateY(-1px) !important; } .tutor-quiz-btn-wrap .tutor-btn:active, .tutor-quiz-submit:active { transform: translateY(0) !important; } .tutor-quiz-btn-wrap .tutor-btn:focus-visible, .tutor-quiz-submit:focus-visible { outline: 2px solid var(--dac-blue) !important; outline-offset: 3px !important; } /* Quiz score / result card */ .tutor-quiz-attempt-result { background: var(--dac-white) !important; border: 1px solid var(--dac-border) !important; border-radius: var(--dac-radius-md) !important; padding: 32px !important; text-align: center !important; box-shadow: var(--dac-shadow) !important; } .tutor-quiz-attempt-result .tutor-quiz-score { font-size: 3rem !important; font-weight: 800 !important; color: var(--dac-green) !important; line-height: 1 !important; margin-bottom: 8px !important; } .tutor-quiz-attempt-result.tutor-quiz-passed .tutor-quiz-score { color: #10b981 !important; } .tutor-quiz-attempt-result.tutor-quiz-failed .tutor-quiz-score { color: #ef4444 !important; } /* === DAC-DISABLED (v1.4.21, 2026-07-02) — course-progress review, see change_log.md === SIDEBAR — FAILED QUIZ "RETAKE" BADGE Uses :has() to target quiz items whose checkbox carries .tutor-check-fail. Supported: Chrome 105+, Firefox 121+, Safari 15.4+. The ::after pseudo-element on the title span appends an inline orange pill. .tutor-course-topic-item-quiz:has( .tutor-check-fail ) .tutor-course-topic-item-title::after { content: 'Retake' !important; display: inline-flex !important; align-items: center !important; padding: 1px 6px !important; margin-left: 6px !important; background: #fff3e8 !important; color: #c2410c !important; border: 1px solid #fed7aa !important; border-radius: 4px !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.03em !important; line-height: 1.6 !important; vertical-align: middle !important; white-space: nowrap !important; } QUIZ PAGE — RETAKE NOTICE (injected by quiz-retake.php JS) Shown above the "Retake Quiz" button when prior attempts exist. .dac-retake-notice { display: flex !important; align-items: flex-start !important; gap: 12px !important; padding: 18px 22px !important; margin-top: 24px !important; margin-bottom: 24px !important; background: #fff7ed !important; border: 1px solid #fed7aa !important; border-left: 4px solid #f97316 !important; border-radius: 8px !important; font-size: 0.9375rem !important; line-height: 1.55 !important; color: #7c2d12 !important; font-family: var(--dac-font) !important; } .dac-retake-notice__icon { display: flex !important; align-items: center !important; flex-shrink: 0 !important; color: #f97316 !important; margin-top: 1px !important; } === END DAC-DISABLED === */ /* ============================================================ GLOBAL PROGRESS BARS ============================================================ */ .tutor-progress-bar, .tutor-course-progress-bar, [class*="tutor-progress"] .tutor-progress-bar { height: 6px !important; border-radius: var(--dac-radius-xs) !important; background: var(--dac-border) !important; overflow: hidden !important; } /* Fixed 2026-07-02: this read var(--tutor-progress-value) but Tutor 4.0's actual markup sets the inline custom property as --tutor-progress-width (confirmed live: .tutor-progress-bar-fill style="--tutor-progress-width: 3%;"). The old name never matched anything, so this rule silently fell back to its 0% default forever -- invisible until course progress moved off 0% for the first time. Split 2026-07-06 (v1.12.3): Tutor 4.0 ships TWO progress-bar patterns side by side. New pattern: div.tutor-progress-bar-fill carries the inline --tutor-progress-width property (dashboard cards, learning-area sidebar). Legacy pattern, still live in 4.0 core templates (single course entry box, reviews, enrolled-course loop): div.tutor-progress-bar carries the inline --tutor-progress-value property and an empty span.tutor-progress-value is the fill. The 07-02 fix pointed BOTH patterns at --tutor-progress-width, which is never defined on legacy markup, locking those bars to the 0% fallback. Each pattern now reads its own variable. Shared visuals first, then per-pattern width. */ .tutor-progress-bar .tutor-progress-value, .tutor-progress-bar .tutor-progress-bar-fill, .tutor-progress-bar > div, [class*="tutor-progress"] .tutor-progress-bar-fill { height: 100% !important; background: linear-gradient(90deg, var(--dac-green) 0%, var(--dac-green-light) 100%) !important; border-radius: var(--dac-radius-xs) !important; display: block !important; transition: width 0.4s ease !important; } .tutor-progress-bar .tutor-progress-bar-fill, .tutor-progress-bar > div, [class*="tutor-progress"] .tutor-progress-bar-fill { width: var(--tutor-progress-width, 0%) !important; } /* Legacy fill span reads its own variable. Declared last so it wins if any markup ever matches both selector lists. */ .tutor-progress-bar .tutor-progress-value { width: var(--tutor-progress-value, 0%) !important; } /* ============================================================ GLOBAL TUTOR BUTTONS (catch-all) ============================================================ */ .tutor-btn.tutor-btn-primary:not([class*="tutor-course-enroll"]) { background: var(--dac-blue) !important; border: none !important; border-radius: var(--dac-radius-pill) !important; font-family: var(--dac-font) !important; font-weight: 600 !important; min-height: 44px !important; transition: background 0.2s !important; } .tutor-btn.tutor-btn-primary:not([class*="tutor-course-enroll"]):hover { background: var(--dac-blue-hover) !important; } .tutor-btn.tutor-btn-outline-primary { border: 2px solid var(--dac-blue) !important; color: var(--dac-blue) !important; border-radius: var(--dac-radius-pill) !important; font-family: var(--dac-font) !important; font-weight: 600 !important; min-height: 44px !important; transition: background 0.2s, color 0.2s !important; } .tutor-btn.tutor-btn-outline-primary:hover { background: var(--dac-blue-light) !important; } /* ============================================================ BREADCRUMBS ============================================================ */ .tutor-breadcrumb, .tutor-breadcrumbs { font-size: 0.875rem !important; color: var(--dac-muted) !important; margin-bottom: 20px !important; display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; } .tutor-breadcrumb a, .tutor-breadcrumbs a { color: var(--dac-muted) !important; text-decoration: none !important; } .tutor-breadcrumb a:hover, .tutor-breadcrumbs a:hover { color: var(--dac-blue) !important; } /* ============================================================ NOTICES & ALERTS ============================================================ */ .tutor-alert, .tutor-notice { padding: 14px 18px !important; border-radius: var(--dac-radius-sm) !important; font-size: 0.9375rem !important; margin-bottom: 20px !important; border-left: 4px solid !important; } .tutor-alert-info, .tutor-notice-info { background: var(--dac-blue-light) !important; border-left-color: var(--dac-blue) !important; color: #1e3a8a !important; } .tutor-alert-success, .tutor-notice-success { background: #ecfdf5 !important; border-left-color: #10b981 !important; color: #065f46 !important; } .tutor-alert-warning, .tutor-notice-warning { background: #fffbeb !important; border-left-color: #f59e0b !important; color: #78350f !important; } .tutor-alert-danger, .tutor-notice-error { background: #fef2f2 !important; border-left-color: #ef4444 !important; color: #991b1b !important; } /* === DAC-DISABLED (v1.4.21, 2026-07-02) — course-progress review, see change_log.md === LESSON PROGRESS BADGE — "In Progress" Injected by lesson-progress.js into the Tutor sidebar (JS enqueue also gated off via DAC_LESSON_PROGRESS_BADGE_ENABLED, so this class is unused either way). .dac-lesson-progress-badge { display: inline-flex; align-items: center; font-family: var(--dac-font); font-size: 0.6875rem; [ 11px — stays compact next to lesson title ] font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; background: var(--dac-blue, #1254A0); border-radius: 50px; padding: 2px 9px; line-height: 1.6; white-space: nowrap; flex-shrink: 0; margin-right: 6px; } === END DAC-DISABLED === */ /* ============================================================ CERT RETAKE / RECERTIFY CONFIRMATION MODAL ============================================================ */ /* Moved here from dashboard.css (v1.6.0) so the same modal renders identically on the dashboard, the single Broker Certification course page, and the course catalog — this stylesheet is the one enqueued on all three (dac_enqueue_tutor_global_styles()), where dashboard.css is dashboard-only. See includes/cert-retake-modal.php for the JS/PHP that opens this markup outside the dashboard. */ .dac-modal { display: none; position: fixed; inset: 0; z-index: 99999; align-items: center; justify-content: center; } .dac-modal.is-visible { display: flex; } .dac-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); } .dac-modal__dialog { position: relative; background: var(--dac-white); border-radius: var(--dac-radius-md); box-shadow: 0 20px 60px rgba(0,0,0,0.2); padding: 36px 32px 32px; max-width: 440px; width: calc(100% - 32px); text-align: center; } .dac-modal__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--dac-warning-bg); color: var(--dac-warning); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .dac-modal__title { font-size: 1.25rem !important; font-weight: 700 !important; color: var(--dac-dark) !important; margin: 0 0 12px !important; line-height: 1.3 !important; } .dac-modal__subtitle { font-size: 1.0625rem !important; font-weight: 600 !important; color: var(--dac-dark) !important; margin: 0 0 12px !important; line-height: 1.4 !important; } .dac-modal__body { font-size: 0.9375rem !important; color: var(--dac-text) !important; line-height: 1.6 !important; margin: 0 0 28px !important; } .dac-modal__actions { display: flex; gap: 12px; justify-content: center; } .dac-modal-btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 24px; border-radius: var(--dac-radius-pill); font-family: var(--dac-font); font-size: 0.9375rem; font-weight: 600; cursor: pointer; min-height: 44px; border: none; transition: background 0.2s ease, color 0.2s ease; flex: 1; } .dac-modal-btn--cancel { background: var(--dac-border); color: var(--dac-text); } .dac-modal-btn--cancel:hover { background: #d1d5db; } .dac-modal-btn--confirm { background: var(--dac-error); color: var(--dac-white); } .dac-modal-btn--confirm:hover { background: var(--dac-error-text); } .dac-modal-btn:disabled { opacity: 0.6; cursor: not-allowed; } @media (max-width: 768px) { .dac-modal__actions { flex-direction: column; } } /* ============================================================ TUTOR 4.0 LEARNING AREA — FAILED QUIZ CLARITY Two pieces added at Tyler's request (2026-07-02, v1.7.2): 1. "Retake Needed" badge next to the sidebar's red-X failed-quiz icon. 2. Extra emphasis on the "Retake Quiz" button rendered by dac-custom/includes/quiz-result-buttons.php (dac_render_quiz_actions()). Both target Tutor 4.0's native markup directly — no old/legacy selectors. ============================================================ */ /* Sidebar: failed quiz nav items already carry Tutor's own `.fail` class (see \TUTOR\Quiz::render_sidebar_nav()) — pure CSS, no template override needed. `.tutor-learning-nav-item` is itself a flex row, so `margin-left: auto` pushes the badge to the end after the icon + title/subtitle block. Tutor 4.0.2 removed the `tutor-truncate` class from nav-item titles (full names now wrap), which crushed pill-bearing failed items into a one-word-per-line column. Restore single-line truncation ONLY on .fail items so the pill and title coexist like they did pre-4.0.2; the full name is still available via the anchor's title attribute on hover. */ .tutor-learning-nav-item.fail .tutor-overflow-hidden { flex: 1 1 auto; min-width: 0; } .tutor-learning-nav-item.fail .tutor-overflow-hidden > div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tutor-learning-nav-item.fail::after { content: 'Retake Needed'; display: inline-flex; align-items: center; flex-shrink: 0; margin-left: auto; align-self: center; font-family: var(--dac-font); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 50px; padding: 3px 9px; line-height: 1.4; } @media (max-width: 480px) { .tutor-learning-nav-item.fail::after { content: 'Retake'; padding: 2px 7px; } } /* Yellow "not passed yet" notice — now rendered under the quiz title (bricks-child/tutor/learning-area/quiz/content.php), not above the buttons. Generous padding so it doesn't read as squished. */ .dac-quiz-not-passed-notice { display: flex; align-items: flex-start; gap: 14px; padding: 20px 24px; margin: 20px 0 28px; background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid #f59e0b; border-radius: 8px; font-family: var(--dac-font); font-size: 0.9375rem; line-height: 1.6; color: #78350f; } .dac-quiz-not-passed-notice__icon { display: flex; align-items: center; flex-shrink: 0; color: #f59e0b; margin-top: 1px; } /* Retake Quiz button — sized up via Size::LARGE + ->block(true) in PHP; size alone (not a colored glow) is what makes it read as unmissable. */ .dac-quiz-retake-btn-lg { flex: 1 1 auto !important; min-height: 56px !important; font-size: 1.0625rem !important; font-weight: 700 !important; } @media (max-width: 640px) { .tutor-learning-area-footer { flex-wrap: wrap !important; } .dac-quiz-retake-btn-lg { min-height: 52px !important; flex-basis: 100% !important; } } /* ============================================================ TUTOR 4.0 DARK THEME — CUSTOM UI ADAPTATIONS (v1.17.1) Tutor's native dark theme (Account -> Preferences) sets data-tutor-theme="dark" on . Every custom rule above was styled against the light theme only, so its hardcoded light colors leaked into dark mode unchanged (Tyler's screenshot, 2026-07-08: glaring yellow notice, white "Retake Needed" pill, light-theme brand blue on the Retake Quiz button). These overrides re-map those pieces onto Tutor's own dark palette; fallback hex values are Tutor 4.0's shipped dark tokens. ============================================================ */ /* Primary buttons (incl. the big Retake Quiz button): the catch-all above forces --dac-blue (#0048B8), a brand blue tuned for white backgrounds -- it reads muddy against dark surfaces. Use Tutor's own dark-mode primary instead. */ html[data-tutor-theme="dark"] .tutor-btn.tutor-btn-primary:not([class*="tutor-course-enroll"]) { background: var(--tutor-button-primary, #3e64de) !important; } html[data-tutor-theme="dark"] .tutor-btn.tutor-btn-primary:not([class*="tutor-course-enroll"]):hover { background: var(--tutor-button-primary-hover, #2b49ca) !important; } /* Outline buttons: the light-theme hover flashes near-white (--dac-blue-light #EEF3FC) -- swap for Tutor's dark soft fill. */ html[data-tutor-theme="dark"] .tutor-btn.tutor-btn-outline-primary { border-color: var(--tutor-border-brand, #3e64de) !important; color: var(--tutor-text-brand-secondary, #a4bcf4) !important; } html[data-tutor-theme="dark"] .tutor-btn.tutor-btn-outline-primary:hover { background: var(--tutor-button-primary-soft, #333741) !important; } /* Sidebar "Retake Needed" pill: the light red chip (#fef2f2) reads as a bright white blob against the dark sidebar -- translucent red tint instead. */ html[data-tutor-theme="dark"] .tutor-learning-nav-item.fail::after { color: #f97066; background: rgba(240, 68, 56, 0.12); border-color: rgba(240, 68, 56, 0.4); } /* Yellow "not passed yet" notice: solid light-amber slab becomes a translucent amber tint with light amber text. */ html[data-tutor-theme="dark"] .dac-quiz-not-passed-notice { background: rgba(245, 158, 11, 0.09); border-color: rgba(245, 158, 11, 0.3); border-left-color: #f59e0b; color: #fde68a; } html[data-tutor-theme="dark"] .dac-quiz-not-passed-notice__icon { color: #fbbf24; } /* Progress bar track: forced to --dac-border (#E5E7EB) above -- a light grey strip in the dark sidebar. Tutor's dark idle border. */ html[data-tutor-theme="dark"] .tutor-progress-bar, html[data-tutor-theme="dark"] .tutor-course-progress-bar, html[data-tutor-theme="dark"] [class*="tutor-progress"] .tutor-progress-bar { background: var(--tutor-border-idle, #2d3039) !important; } /* Tutor notices/alerts: same hardcoded light palette problem as the notice above -- translucent tints keep the semantic color while sitting naturally on dark surfaces. Border-left accents already read fine on dark, left unchanged. */ html[data-tutor-theme="dark"] .tutor-alert-info, html[data-tutor-theme="dark"] .tutor-notice-info { background: rgba(62, 100, 222, 0.14) !important; color: #a4bcf4 !important; } html[data-tutor-theme="dark"] .tutor-alert-success, html[data-tutor-theme="dark"] .tutor-notice-success { background: rgba(40, 167, 69, 0.12) !important; color: #9cd7a9 !important; } html[data-tutor-theme="dark"] .tutor-alert-warning, html[data-tutor-theme="dark"] .tutor-notice-warning { background: rgba(245, 158, 11, 0.1) !important; color: #fde68a !important; } html[data-tutor-theme="dark"] .tutor-alert-danger, html[data-tutor-theme="dark"] .tutor-notice-error { background: rgba(240, 68, 56, 0.12) !important; color: #fda29b !important; } /* Cert retake/recertify modal: white dialog + light buttons -- match Tutor's own dark modal surfaces. Confirm (red) button unchanged. */ html[data-tutor-theme="dark"] .dac-modal__dialog { background: var(--tutor-surface-l1, #1f242f); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } html[data-tutor-theme="dark"] .dac-modal__icon { background: rgba(245, 158, 11, 0.14); color: #fbbf24; } html[data-tutor-theme="dark"] .dac-modal__title, html[data-tutor-theme="dark"] .dac-modal__subtitle { color: var(--tutor-text-primary, #f0f1f1) !important; } html[data-tutor-theme="dark"] .dac-modal__body { color: var(--tutor-text-secondary, #cecfd2) !important; } html[data-tutor-theme="dark"] .dac-modal-btn--cancel { background: var(--tutor-button-secondary, #333741); color: var(--tutor-text-primary, #f0f1f1); } html[data-tutor-theme="dark"] .dac-modal-btn--cancel:hover { background: var(--tutor-button-secondary-hover, #3d414d); } /* ============================================================ TUTOR 4.0 LEARNING AREA — INLINE "FAILED" ON ATTEMPT ROW Added at Tyler's request (2026-07-08, v1.18.3). Tutor 4.0 renders the pass/fail Badge (Badge::ERROR variant = .tutor-badge-error) in the far-right "Result" column of each attempt row (.tutor-quiz-item-result). In that column it: - sits on a grey surface capsule (var(--tutor-surface-l1-hover)), - is swapped out for the "Details" button on row hover (Tutor's :hover:has(.tutor-quiz-item-result-more) hides .tutor-badge), so the status vanishes when you mouse over it, - renders as an odd shape inside that grey capsule on mobile. For FAILED attempts only, pull the status out of the Result column and show it inline right after the "Attempt N" title, matching the sidebar "Retake Needed" pill above. Pass/Pending are left on Tutor's default behavior (Tyler asked for failed only). Scoped to [data-learning-area="true"] so the dashboard "My Quiz Attempts" list is untouched. Failed detection uses :has() — same browser support baseline as the rest of this file (Chrome 105+, Firefox 121+, Safari 15.4+). ============================================================ */ /* 1. Inline "Failed" pill, appended after the "Attempt N" title. */ .tutor-quiz-attempts-item[data-learning-area="true"]:has( .tutor-quiz-item-result .tutor-badge-error ) .tutor-quiz-item-info-title::after { content: 'Failed'; display: inline-flex; align-items: center; vertical-align: middle; margin-left: 8px; font-family: var(--dac-font); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.4; white-space: nowrap; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 50px; padding: 2px 9px; } /* 2. Hide the original failed badge in the Result column (now shown inline). */ .tutor-quiz-attempts-item[data-learning-area="true"]:has( .tutor-quiz-item-result .tutor-badge-error ) .tutor-quiz-item-result .tutor-badge-error { display: none !important; } /* 3. With the badge gone, keep the Result column stable: always show the "Details" button rather than only revealing it on hover. Fixes the "disappears on hover" confusion and the no-hover gap on touch devices. Failed rows only. */ .tutor-quiz-attempts-item[data-learning-area="true"]:has( .tutor-quiz-item-result .tutor-badge-error ) .tutor-quiz-item-result .tutor-quiz-item-result-more { display: flex !important; } /* Dark theme: soften the pill so it reads on Tutor's dark surfaces. */ html[data-tutor-theme="dark"] .tutor-quiz-attempts-item[data-learning-area="true"]:has( .tutor-quiz-item-result .tutor-badge-error ) .tutor-quiz-item-info-title::after { color: #fca5a5; background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.35); } /* Mobile (<=576px): Tutor sr-only-clips the "Attempt N" title (it shows the date as the primary line instead), which would also hide our inline pill. For failed rows, restore the title to normal flow so "Attempt N Failed" reads as the first line of the stacked info block — same as desktop, and it replaces the odd grey-capsule badge that used to sit in the Result cell on mobile. Scoped to failed rows so Tutor's default is otherwise untouched. */ @media (max-width: 576px) { /* Specificity intentionally raised above Tutor's own !important clip rule (.tutor-quiz-attempts .tutor-quiz-attempts-item-wrapper .tutor-quiz-attempts-item [data-learning-area=true] ... :first-of-type) so this wins regardless of stylesheet load order. */ .tutor-quiz-attempts .tutor-quiz-attempts-item-wrapper .tutor-quiz-attempts-item[data-learning-area="true"]:has( .tutor-quiz-item-result .tutor-badge-error ) .tutor-quiz-item-info > div:first-of-type { clip: auto !important; position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; white-space: normal !important; border: 0 !important; } } @media (max-width: 480px) { .tutor-quiz-attempts-item[data-learning-area="true"]:has( .tutor-quiz-item-result .tutor-badge-error ) .tutor-quiz-item-info-title::after { margin-left: 6px; padding: 2px 7px; } }