/*
 * GENERATED by tools/extract-legacy-jsp-css.mjs — do not edit by hand.
 *
 * The <style> blocks of the parent application's src/main/webapp/classess/student/studentcourse.jsp
 * (revision 96f26220f, 2026-09-23), every rule prefixed with body.page-course so it styles the
 * ported page and nothing else. Regenerate when the JSP changes:
 *   node tools/extract-legacy-jsp-css.mjs student/studentcourse.jsp public/legacy/student-course-page.css page-course
 */
body.page-course router-outlet + * * { margin: 0px; padding: 0px; box-sizing: border-box; }
body.page-course router-outlet + * .back-button { background: white; border: 1px solid rgb(221, 221, 221); border-radius: 50%; padding: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 10px; color: rgb(51, 51, 51); transition: 0.2s; position: absolute; top: 20px; left: 20px; z-index: 100; }
body.page-course router-outlet + * .back-button:hover { background: rgb(245, 245, 245); }
body.page-course router-outlet + * .container { max-width: 1100px; margin: 0px auto; padding: 32px 24px; }
body.page-course router-outlet + * .header { margin-bottom: 20px; }
body.page-course router-outlet + * .course-flow { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
body.page-course router-outlet + * .course-title { font-size: 1.5rem; font-weight: 400; color: rgb(31, 41, 55); }
body.page-course router-outlet + * .subject-selector { display: flex; flex-direction: column; gap: 8px; }
body.page-course router-outlet + * .control-label { font-size: 0.85rem; font-weight: 400; color: rgb(107, 114, 128); text-transform: uppercase; letter-spacing: 0.5px; }
body.page-course router-outlet + * .dropdown { position: relative; min-width: 160px; }
body.page-course router-outlet + * .dropdown-btn { background: rgba(168, 85, 247, 0.15); border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 3px; padding: 10px 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: rgb(124, 58, 237); font-weight: 400; font-size: 0.9rem; transition: 0.2s; width: 100%; }
body.page-course router-outlet + * .dropdown-btn:hover { background: rgba(168, 85, 247, 0.25); }
body.page-course router-outlet + * .dropdown-menu { position: absolute; top: 100%; left: 0px; right: 0px; background: white; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; z-index: 100; max-height: 0px; overflow: scroll; transition: max-height 0.3s; scrollbar-width: none; }
body.page-course router-outlet + * .dropdown-menu.show { max-height: 200px; }
body.page-course router-outlet + * .dropdown-item { padding: 10px 16px; cursor: pointer; transition: background-color 0.2s; border-bottom: 1px solid rgb(241, 243, 244); }
body.page-course router-outlet + * .dropdown-item:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
body.page-course router-outlet + * .dropdown-item:hover { background-color: rgb(248, 249, 250); }
body.page-course router-outlet + * .dropdown-item.active { background-color: rgba(168, 85, 247, 0.1); color: rgb(124, 58, 237); }
body.page-course router-outlet + * .term-section { margin-bottom: 28px; background: rgba(255, 255, 255, 0.4); border-radius: 5px; padding: 24px; border: 1px solid rgba(249, 115, 22, 0.3); position: relative; }
body.page-course router-outlet + * .term-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-radius: 5px; margin-bottom: 10px; box-shadow: rgba(249, 115, 22, 0.15) 0px 2px 8px; }
body.page-course router-outlet + * .term-title { font-size: 1.3rem; font-weight: 400; color: rgb(31, 41, 55); }
body.page-course router-outlet + * .term-buttons { display: flex; gap: 10px; }
body.page-course router-outlet + * .mock-btn, body.page-course router-outlet + * .planner-btn { padding: 8px 18px; background: white; border: 1px solid rgb(229, 231, 235); border-radius: 3px; color: rgb(75, 85, 99); font-size: 0.85rem; font-weight: 400; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 6px; }
body.page-course router-outlet + * .mock-btn:hover, body.page-course router-outlet + * .planner-btn:hover { background: rgb(249, 250, 251); border-color: rgb(209, 213, 219); transform: translateY(-1px); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px; }
body.page-course router-outlet + * .mock-btn::before { content: "📝"; font-size: 0.9rem; }
body.page-course router-outlet + * .planner-btn::before { content: "📅"; font-size: 0.9rem; }
body.page-course router-outlet + * .formative-section { margin-bottom: 10px; background: rgba(255, 255, 255, 0.44); border-radius: 3px; padding: 10px; }
body.page-course router-outlet + * .formative-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: 10px; margin-bottom: 10px; box-shadow: rgba(59, 130, 246, 0.1) 0px 2px 6px; }
body.page-course router-outlet + * .formative-section.fa2 .formative-header { box-shadow: rgba(16, 185, 129, 0.1) 0px 2px 6px; }
body.page-course router-outlet + * .formative-title { font-size: 1.1rem; font-weight: 400; color: rgb(31, 41, 55); }
body.page-course router-outlet + * .formative-buttons { display: flex; gap: 8px; }
body.page-course router-outlet + * .formative-content { display: flex; flex-direction: column; gap: 16px; }
body.page-course router-outlet + * .unit-container { border-radius: 12px; border: 1px solid rgb(210, 213, 218); overflow: hidden; position: relative; }
body.page-course router-outlet + * .unit-lock { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 16px; color: rgb(107, 114, 128); pointer-events: none; z-index: 3; }
body.page-course router-outlet + * .unit-container.locked .unit-header { opacity: 0.9; cursor: default; }
body.page-course router-outlet + * .unit-container.locked .unit-header:hover { background-color: transparent; }
body.page-course router-outlet + * .mock-btn.disabled, body.page-course router-outlet + * .planner-btn.disabled { opacity: 0.5; pointer-events: auto; cursor: not-allowed; }
body.page-course router-outlet + * .unit-container::before { content: ""; position: absolute; left: 32px; top: 50px; bottom: 0px; width: 2px; background: linear-gradient(rgb(249, 115, 22)); opacity: 0.2; z-index: 1; }
body.page-course router-outlet + * .unit-container.expanded::before { opacity: 0.5; }
body.page-course router-outlet + * .unit-header { padding: 18px 22px; cursor: pointer; display: flex; align-items: center; gap: 14px; transition: background-color 0.2s; position: relative; }
body.page-course router-outlet + * .unit-header:hover { background-color: rgb(250, 250, 250); }
body.page-course router-outlet + * .unit-toggle { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; transition: 0.2s; flex-shrink: 0; color: rgb(107, 114, 128); font-size: 0.8rem; }
body.page-course router-outlet + * .unit-toggle.expanded { transform: rotate(90deg); }
body.page-course router-outlet + * .unit-icon { width: 44px; height: 44px; border-radius: 8px; background: rgba(240, 75, 20, 0.87); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.1rem; flex-shrink: 0; position: relative; z-index: 2; box-shadow: rgb(255, 255, 255) 0px 0px 0px 4px; }
body.page-course router-outlet + * .unit-info { flex: 1 1 0%; }
body.page-course router-outlet + * .unit-title { font-size: 1rem; font-weight: 400; color: rgb(31, 41, 55); margin-bottom: 2px; }
body.page-course router-outlet + * .unit-duration { font-size: 0.75rem; color: rgb(107, 114, 128); }
body.page-course router-outlet + * .unit-progress { font-size: 0.85rem; font-weight: 400; color: rgb(22, 163, 74); padding: 6px 12px; background: rgba(34, 197, 94, 0.1); border-radius: 6px; }
body.page-course router-outlet + * .unit-content { max-height: 0px; overflow: hidden; transition: max-height 0.3s; }
body.page-course router-outlet + * .unit-content.expanded { max-height: 10000px; }
body.page-course router-outlet + * .day-container { border-bottom: 1px solid rgb(241, 243, 244); position: relative; }
body.page-course router-outlet + * .day-container::before { content: ""; position: absolute; left: 32px; top: 0px; bottom: 0px; width: 2px; background: linear-gradient(rgba(59, 130, 246, 0.4), rgba(34, 197, 94, 0.4)); z-index: 1; }
body.page-course router-outlet + * .day-container:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
body.page-course router-outlet + * .day-container:last-child::before { bottom: 50%; }
body.page-course router-outlet + * .day-header { padding: 15px; cursor: pointer; display: flex; align-items: center; gap: 12px; transition: background-color 0.2s; border-top: 1px solid rgb(229, 231, 235); position: relative; z-index: 2; }
body.page-course router-outlet + * .day-header::before { content: ""; position: absolute; left: 26px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: white; border: 2px solid rgb(59, 130, 246); box-shadow: rgba(59, 130, 246, 0.2) 0px 0px 0px 3px; z-index: 3; transition: 0.3s; }
body.page-course router-outlet + * .day-header:hover::before { border-color: rgb(37, 99, 235); box-shadow: rgba(59, 130, 246, 0.3) 0px 0px 0px 5px; transform: translateY(-50%) scale(1.2); }
body.page-course router-outlet + * .day-header:hover { background: rgba(52, 211, 153, 0.1); }
body.page-course router-outlet + * .day-toggle { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; transition: 0.2s; flex-shrink: 0; color: rgb(107, 114, 128); font-size: 0.7rem; margin-left: 26px; }
body.page-course router-outlet + * .day-toggle.expanded { transform: rotate(90deg); }
body.page-course router-outlet + * .day-title { font-size: 0.95rem; font-weight: 400; flex: 1 1 0%; }
body.page-course router-outlet + * .day-content { max-height: 0px; overflow: hidden; transition: max-height 0.3s; }
body.page-course router-outlet + * .day-content.expanded { max-height: 2000px; }
body.page-course router-outlet + * .learning-items-list { display: flex; flex-direction: column; position: relative; }
body.page-course router-outlet + * .learning-items-list::before { content: ""; position: absolute; left: 32px; top: 0px; bottom: 0px; width: 2px; background: linear-gradient(rgba(168, 85, 247, 0.3), rgba(59, 130, 246, 0.3), rgba(34, 197, 94, 0.3)); z-index: 1; }
body.page-course router-outlet + * .learning-item { padding: 14px 44px 14px 78px; display: flex; align-items: center; gap: 12px; transition: 0.3s; border-top: 1px solid rgb(229, 231, 235); cursor: pointer; width: 100%; position: relative; background: linear-gradient(90deg, transparent 64px, rgba(255, 255, 255, 0.5) 64px); z-index: 2; }
body.page-course router-outlet + * .learning-item::before { content: ""; position: absolute; left: 28px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background: white; border: 1px solid rgb(168, 85, 247); z-index: 3; transition: 0.3s; }
body.page-course router-outlet + * .learning-item:hover::before { border-width: 2px; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 3px; }
body.page-course router-outlet + * .learning-item::after { content: ""; position: absolute; bottom: 0px; width: 2px; background: linear-gradient(rgba(168, 85, 247, 0.2), rgba(59, 130, 246, 0.2), rgba(34, 197, 94, 0.2)); opacity: 0.4; z-index: 1; }
body.page-course router-outlet + * .learning-item:hover { background: linear-gradient(90deg, transparent 64px, rgba(248, 249, 250, 0.9) 64px); transform: translateX(4px); box-shadow: rgba(0, 0, 0, 0.08) 64px 0px 12px -8px; border-top-color: rgb(209, 213, 219); }
body.page-course router-outlet + * .learning-item:hover::after { width: 3px; opacity: 1; }
body.page-course router-outlet + * .learning-item:active { transform: translateX(2px); }
body.page-course router-outlet + * .item-icon { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 0.7rem; flex-shrink: 0; transition: 0.3s; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px; }
body.page-course router-outlet + * .learning-item:has(.teacher-material):hover::before { box-shadow: rgba(168, 85, 247, 0.2) 0px 0px 0px 3px; }
body.page-course router-outlet + * .learning-item:has(.learn-module):hover::before { box-shadow: rgba(59, 130, 246, 0.2) 0px 0px 0px 3px; }
body.page-course router-outlet + * .learning-item:has(.practice-module):hover::before { box-shadow: rgba(34, 197, 94, 0.2) 0px 0px 0px 3px; }
body.page-course router-outlet + * .learning-item:hover .item-icon { transform: scale(1.15); box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px; }
body.page-course router-outlet + * .teacher-material { background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(168, 85, 247, 0.15)); color: rgb(124, 58, 237); border: 1.5px solid rgba(168, 85, 247, 0.4); }
body.page-course router-outlet + * .learning-item:hover .teacher-material { background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(168, 85, 247, 0.25)); border-color: rgb(168, 85, 247); }
body.page-course router-outlet + * .learn-module { background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.15)); color: rgb(37, 99, 235); border: 1.5px solid rgba(59, 130, 246, 0.4); }
body.page-course router-outlet + * .learning-item:hover .learn-module { background: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(59, 130, 246, 0.25)); border-color: rgb(59, 130, 246); }
body.page-course router-outlet + * .practice-module { background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(34, 197, 94, 0.15)); color: rgb(22, 163, 74); border: 1.5px solid rgba(34, 197, 94, 0.4); }
body.page-course router-outlet + * .learning-item:hover .practice-module { background: linear-gradient(135deg, rgba(34, 197, 94, 0.35), rgba(34, 197, 94, 0.25)); border-color: rgb(34, 197, 94); }
body.page-course router-outlet + * .item-content { flex: 1 1 0%; transition: 0.3s; }
body.page-course router-outlet + * .learning-item:hover .item-content { transform: translateX(2px); }
body.page-course router-outlet + * .item-title { font-size: 0.85rem; font-weight: 450; color: rgb(75, 85, 99); margin-bottom: 2px; transition: 0.3s; }
body.page-course router-outlet + * .learning-item:hover .item-title { color: rgb(31, 41, 55); font-weight: 600; }
body.page-course router-outlet + * .item-type { font-size: 0.7rem; color: rgb(107, 114, 128); font-weight: 400; transition: color 0.3s; }
body.page-course router-outlet + * .learning-item:hover .item-type { color: rgb(75, 85, 99); }
body.page-course router-outlet + * .performance-container { display: flex; align-items: center; gap: 12px; margin-left: 500px; }
body.page-course router-outlet + * .performance-percentage { font-size: 0.8rem; font-weight: 400; color: rgb(22, 163, 74); min-width: 40px; }
body.page-course router-outlet + * .performance-bar-container { width: 300px; height: 3px; background: rgba(0, 0, 0, 0.1); border-radius: 2px; overflow: hidden; }
body.page-course router-outlet + * .performance-bar { height: 100%; background: linear-gradient(90deg, rgb(34, 197, 94), rgb(22, 163, 74)); border-radius: 2px; transition: width 0.3s; }
@media (max-width: 768px) {
  body.page-course router-outlet + * .container { padding: 80px 16px 20px; }
  body.page-course router-outlet + * .course-flow { flex-direction: row; align-items: flex-start; gap: 16px; }
  body.page-course router-outlet + * .subject-selector { align-self: stretch; }
  body.page-course router-outlet + * .term-section { padding: 16px; }
  body.page-course router-outlet + * .term-header, body.page-course router-outlet + * .formative-header { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 16px; }
  body.page-course router-outlet + * .term-buttons, body.page-course router-outlet + * .formative-buttons { width: 100%; }
  body.page-course router-outlet + * .mock-btn, body.page-course router-outlet + * .planner-btn { flex: 1 1 0%; justify-content: center; }
  body.page-course router-outlet + * .formative-section { padding: 14px; }
  body.page-course router-outlet + * .unit-header { padding: 14px 16px; }
  body.page-course router-outlet + * .day-header { padding: 12px 36px; }
  body.page-course router-outlet + * .learning-item { padding: 12px 36px 12px 60px; flex-wrap: wrap; }
  body.page-course router-outlet + * .performance-container { width: 100%; margin-left: 0px; margin-top: 8px; }
  body.page-course router-outlet + * .performance-bar-container { flex: 1 1 0%; }
  body.page-course router-outlet + * .unit-container::before { left: 24px; }
  body.page-course router-outlet + * .day-container::before { left: 24px; }
  body.page-course router-outlet + * .day-header::before { left: 18px; }
  body.page-course router-outlet + * .learning-items-list::before { left: 24px; }
  body.page-course router-outlet + * .learning-item::before { left: 20px; }
  body.page-course router-outlet + * .day-toggle { margin-left: 18px; }
}
body.page-course router-outlet + * .item-icon.material-module { background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(168, 85, 247, 0.15)); color: rgb(124, 58, 237); border: 1.5px solid rgba(168, 85, 247, 0.4); }
body.page-course router-outlet + * .skeleton { background: linear-gradient(90deg, rgb(224, 224, 224) 25%, rgb(244, 244, 244) 50%, rgb(224, 224, 224) 75%) 0% 0% / 200% 100%; animation: 1.5s ease 0s infinite normal none running lp-course-shimmer; border-radius: 6px; display: inline-block; }
@keyframes lp-course-shimmer { 
  0% { background-position: -200% 0px; }
  100% { background-position: 200% 0px; }
}
body.page-course router-outlet + * .skeleton-block { border: 1px solid rgb(238, 238, 238); border-radius: 10px; padding: 16px; margin-bottom: 20px; }
body.page-course router-outlet + * .learning-item.locked { position: relative; opacity: 0.95; }
body.page-course router-outlet + * .learning-item .item-lock { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 16px; color: rgb(107, 114, 128); pointer-events: none; z-index: 4; }
body.page-course router-outlet + * .no-chapters-card { text-align: center; background: rgb(255, 255, 255); border-radius: 10px; padding: 40px; color: rgb(68, 68, 68); font-size: 15px; box-shadow: rgba(0, 0, 0, 0.05) 0px 3px 12px; max-width: 800px; margin: 80px auto; }
body.page-course router-outlet + * .no-chapters-card h2 { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: rgb(51, 51, 51); }
body.page-course router-outlet + * .no-chapters-card p { font-size: 14px; color: rgb(102, 102, 102); }
body.page-course router-outlet + * .modal { display: none; position: fixed; z-index: 9999; left: 0px; top: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); overflow-y: auto; backdrop-filter: blur(4px); }
body.page-course router-outlet + * .modal-content { background: rgb(255, 255, 255); margin: 5% auto; padding: 24px; border-radius: 10px; width: 60%; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; animation: 0.3s ease-out 0s 1 normal none running lp-course-slideIn; }
body.page-course router-outlet + * .close { float: right; font-size: 22px; cursor: pointer; color: rgb(85, 85, 85); }
body.page-course router-outlet + * .close:hover { color: rgb(0, 0, 0); }
@keyframes lp-course-slideIn { 
  0% { transform: translateY(-20px); opacity: 0; }
  100% { transform: translateY(0px); opacity: 1; }
}
body.page-course router-outlet + * .modal-body p { margin-bottom: 10px; padding-left: 10px; }
body.page-course router-outlet + * .unit-header1 { border-left: 3px solid rgb(41, 128, 185); }
body.page-course router-outlet + * .modal { display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; }
body.page-course router-outlet + * .modal-content { background: white; border-radius: 16px; padding: 32px; max-width: 60%; width: 90%; max-height: 90%; position: relative; overflow: auto; scrollbar-width: none; }
body.page-course router-outlet + * h2 { padding-bottom: 5px; }
body.page-course router-outlet + * .close-btn { position: absolute; top: 10px; right: 20px; font-size: 22px; cursor: pointer; }
body.page-course router-outlet + * .modal-content h2, body.page-course router-outlet + * .modal-content h3 { margin-top: 15px; font-weight: 400; }
body.page-course router-outlet + * .resource-link { color: rgb(41, 128, 185); text-decoration: none; transition: color 0.2s, text-decoration 0.2s; }
body.page-course router-outlet + * .resource-link:hover { text-decoration: underline; color: rgb(41, 128, 185); }
body.page-course router-outlet + * h3#modalsubtitle { border-left: 4px solid rgb(41, 128, 185); margin-bottom: 10px; padding-left: 10px; }
body.page-course router-outlet + * h2#modalTitle { margin-bottom: 24px; padding-bottom: 16px; font-weight: 600; }
body.page-course router-outlet + * .material { font-size: 15px; }
body.page-course router-outlet + * h3 { font-weight: 500; margin-bottom: 15px; }
body.page-course router-outlet + * li { margin-bottom: 6px; }
body.page-course router-outlet + * ul { padding-left: 20px; list-style-type: disc; margin-top: 24px; }
body.page-course router-outlet + * h1 { font-weight: 400; font-size: 30px; }
body.page-course router-outlet + * .shared-resource-dropdown { position: absolute; width: 320px; background: white; border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 24px; z-index: 9999; animation: 0.2s ease-out 0s 1 normal none running lp-course-slideDown; }
@keyframes lp-course-slideDown { 
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0px); }
}
body.page-course router-outlet + * .tab-dropdown { background: white; border-radius: 12px; overflow: hidden; }
body.page-course router-outlet + * .tab-header { padding: 12px 16px; background: rgb(248, 249, 250); border-bottom: 1px solid rgb(233, 236, 239); display: flex; justify-content: space-between; align-items: center; }
body.page-course router-outlet + * .tab-title { font-size: 14px; font-weight: 600; color: rgb(73, 80, 87); }
body.page-course router-outlet + * .close-dropdown { font-size: 20px; cursor: pointer; color: rgb(134, 142, 150); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: 0.2s; }
body.page-course router-outlet + * .close-dropdown:hover { background: rgb(233, 236, 239); color: rgb(73, 80, 87); }
body.page-course router-outlet + * .tab-container { padding: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
body.page-course router-outlet + * .tab-item { flex: 1 1 auto; min-width: 80px; cursor: pointer; transition: 0.2s; }
body.page-course router-outlet + * .oval-tab { padding: 10px 16px; border-radius: 40px; background: rgb(241, 243, 245); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: rgb(73, 80, 87); border: 1px solid transparent; }
body.page-course router-outlet + * .unit-container, body.page-course router-outlet + * .day-container, body.page-course router-outlet + * .learning-item { position: relative; z-index: 1; }
body.page-course router-outlet + * .learning-item { cursor: pointer; position: relative; z-index: 2; }
body.page-course router-outlet + * .oval-tab:hover { background: rgb(233, 236, 239); transform: translateY(-1px); }
body.page-course router-outlet + * .oval-tab:active { transform: translateY(0px); }
body.page-course router-outlet + * .content-tab { background: rgb(231, 245, 255); color: rgb(25, 113, 194); }
body.page-course router-outlet + * .content-tab:hover { background: rgb(208, 235, 255); }
body.page-course router-outlet + * .videos-tab { background: rgb(255, 243, 191); color: rgb(230, 119, 0); }
body.page-course router-outlet + * .videos-tab:hover { background: rgb(255, 236, 153); }
body.page-course router-outlet + * .pdfs-tab { background: rgb(255, 227, 227); color: rgb(201, 42, 42); }
body.page-course router-outlet + * .pdfs-tab:hover { background: rgb(255, 201, 201); }
body.page-course router-outlet + * .images-tab { background: rgb(211, 249, 216); color: rgb(43, 138, 62); }
body.page-course router-outlet + * .images-tab:hover { background: rgb(178, 242, 187); }
body.page-course router-outlet + * .tab-icon { font-size: 16px; }
body.page-course router-outlet + * .tab-label { font-weight: 500; }
body.page-course router-outlet + * .list-dropdown { background: white; border-radius: 12px; overflow: hidden; }
body.page-course router-outlet + * .list-header { padding: 12px 16px; background: rgb(248, 249, 250); border-bottom: 1px solid rgb(233, 236, 239); display: flex; align-items: center; gap: 12px; }
body.page-course router-outlet + * .back-to-tabs { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; font-size: 14px; color: rgb(25, 113, 194); cursor: pointer; padding: 4px 8px; border-radius: 4px; display: flex; align-items: center; gap: 4px; }
body.page-course router-outlet + * .back-to-tabs:hover { background: rgb(233, 236, 239); }
body.page-course router-outlet + * .list-title { flex: 1 1 0%; font-size: 14px; font-weight: 600; color: rgb(73, 80, 87); }
body.page-course router-outlet + * .list-container { max-height: 300px; overflow-y: auto; padding: 8px; }
body.page-course router-outlet + * .list-item { padding: 12px; display: flex; align-items: center; gap: 12px; cursor: pointer; border-radius: 8px; transition: 0.2s; border-bottom: 1px solid rgb(241, 243, 245); }
body.page-course router-outlet + * .list-item:hover { background: rgb(248, 249, 250); transform: translateX(4px); }
body.page-course router-outlet + * .list-item:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
body.page-course router-outlet + * .item-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgb(241, 243, 245); border-radius: 8px; }
body.page-course router-outlet + * .item-name { flex: 1 1 0%; font-size: 13px; color: rgb(73, 80, 87); word-break: break-word; }
body.page-course router-outlet + * .play-icon, body.page-course router-outlet + * .view-icon { font-size: 16px; color: rgb(134, 142, 150); opacity: 0; transition: opacity 0.2s; }
body.page-course router-outlet + * .list-item:hover .play-icon, body.page-course router-outlet + * .list-item:hover .view-icon { opacity: 1; }
body.page-course router-outlet + * .image-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 8px; }
body.page-course router-outlet + * .image-grid-item { cursor: pointer; border-radius: 8px; overflow: hidden; border: 1px solid rgb(233, 236, 239); transition: 0.2s; }
body.page-course router-outlet + * .image-grid-item:hover { transform: scale(1.02); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; }
body.page-course router-outlet + * .image-grid-item img { width: 100%; height: 100px; object-fit: cover; }
body.page-course router-outlet + * .image-name { display: block; padding: 6px; font-size: 11px; text-align: center; color: rgb(73, 80, 87); background: rgb(248, 249, 250); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.page-course router-outlet + * .no-items { padding: 24px; text-align: center; color: rgb(134, 142, 150); font-size: 13px; }
body.page-course router-outlet + * .media-modal .modal-content { width: 80%; max-width: 900px; padding: 0px; overflow: hidden; }
body.page-course router-outlet + * .video-modal-content, body.page-course router-outlet + * .pdf-modal-content, body.page-course router-outlet + * .image-modal-content { background: rgb(26, 26, 26); color: white; }
body.page-course router-outlet + * .modal-header { padding: 16px 20px; background: rgb(42, 42, 42); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgb(64, 64, 64); }
body.page-course router-outlet + * .modal-header h3 { margin: 0px; font-size: 16px; font-weight: 500; color: white; }
body.page-course router-outlet + * .modal-header .close { color: rgb(170, 170, 170); font-size: 24px; transition: color 0.2s; }
body.page-course router-outlet + * .modal-header .close:hover { color: white; }
body.page-course router-outlet + * .video-container, body.page-course router-outlet + * .pdf-container, body.page-course router-outlet + * .image-container { width: 100%; height: 500px; background: rgb(0, 0, 0); }
body.page-course router-outlet + * .video-container iframe, body.page-course router-outlet + * .pdf-container iframe { width: 100%; height: 100%; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; }
body.page-course router-outlet + * .image-container { display: flex; align-items: center; justify-content: center; background: rgb(248, 249, 250); padding: 20px; }
body.page-course router-outlet + * .modal-image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
body.page-course router-outlet + * .dropdown-loader { padding: 20px; background: white; border-radius: 12px; }
@media (max-width: 768px) {
  body.page-course router-outlet + * .shared-resource-dropdown { width: 280px; }
  body.page-course router-outlet + * .tab-container { gap: 6px; }
  body.page-course router-outlet + * .oval-tab { padding: 8px 12px; font-size: 12px; }
  body.page-course router-outlet + * .media-modal .modal-content { width: 95%; }
  body.page-course router-outlet + * .video-container, body.page-course router-outlet + * .pdf-container, body.page-course router-outlet + * .image-container { height: 300px; }
  body.page-course router-outlet + * .image-grid { grid-template-columns: 1fr; }
}
body.page-course router-outlet + * #courseTitle { font-size: 1.4rem; }
@media (max-width: 768px) {
  body.page-course router-outlet + * #courseTitle { font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(-120px + 100vw); }
}
@media (max-width: 480px) {
  body.page-course router-outlet + * #courseTitle { font-size: 0.95rem; max-width: calc(-100px + 100vw); }
}
@media (max-width: 360px) {
  body.page-course router-outlet + * #courseTitle { font-size: 0.85rem; max-width: calc(-90px + 100vw); }
}
body.page-course router-outlet + * #course-title { font-size: 1.6rem; }
@media (max-width: 1920px) {
  body.page-course router-outlet + * .course-title { font-size: 1.55rem; }
}
@media (max-width: 1600px) {
  body.page-course router-outlet + * .course-title { font-size: 1.5rem; margin-left: 20px; }
}
@media (max-width: 1440px) {
  body.page-course router-outlet + * .course-title { font-size: 1.4rem; margin-left: 31px; }
}
@media (max-width: 1280px) {
  body.page-course router-outlet + * .course-title { font-size: 1.3rem; margin-left: 40px; }
}
@media (max-width: 1024px) {
  body.page-course router-outlet + * .course-title { font-size: 1.2rem; margin-left: 65px; margin-top: -23px; }
}
@media (max-width: 900px) {
  body.page-course router-outlet + * .course-title { font-size: 1.15rem; }
}
@media (max-width: 768px) {
  body.page-course router-outlet + * .course-title { font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(-120px + 100vw); }
}
@media (max-width: 600px) {
  body.page-course router-outlet + * .course-title { font-size: 1rem; max-width: calc(-110px + 100vw); }
}
@media (max-width: 480px) {
  body.page-course router-outlet + * .course-title { font-size: 0.95rem; max-width: calc(-100px + 100vw); }
}
@media (max-width: 400px) {
  body.page-course router-outlet + * #course-title { font-size: 0.9rem; max-width: calc(-95px + 100vw); }
}
@media (max-width: 360px) {
  body.page-course router-outlet + * #course-title { font-size: 0.85rem; max-width: calc(-90px + 100vw); }
}
@media (max-width: 320px) {
  body.page-course router-outlet + * #course-title { font-size: 0.8rem; max-width: calc(-85px + 100vw); }
}
body.page-course router-outlet + * .material-options-expanded { margin: 5px 0px 5px 75px; background: rgb(245, 245, 245); border-radius: 8px; font-size: 13px; }
body.page-course router-outlet + * .material-options-expanded > div[style*="display: flex"] > div { transition: 0.2s; }
body.page-course router-outlet + * .material-option-btn-active { font-weight: 500; background: rgb(227, 242, 253) !important; border-color: rgb(0, 123, 255) !important; color: rgb(0, 123, 255) !important; }
body.page-course router-outlet + * .dynamic-content-container { width: 100%; transition: 0.3s; }
body.page-course router-outlet + * .material-options-expanded > div[style*="display: flex"] > div:nth-child(1) { background: rgb(231, 245, 255) !important; color: rgb(25, 118, 210) !important; }
body.page-course router-outlet + * .material-options-expanded > div[style*="display: flex"] > div:nth-child(2) { background: rgb(255, 243, 191) !important; color: rgb(245, 124, 0) !important; }
body.page-course router-outlet + * .material-options-expanded > div[style*="display: flex"] > div:nth-child(3) { background: rgb(255, 227, 227) !important; color: rgb(201, 42, 42) !important; }
body.page-course router-outlet + * .material-options-expanded > div[style*="display: flex"] > div:nth-child(4) { background: rgb(211, 249, 216) !important; color: rgb(43, 138, 62) !important; }
body.page-course router-outlet + * .material-options-expanded > div[style*="display: flex"] > div:hover { filter: brightness(0.95); transform: translateY(-1px); }
body.page-course router-outlet + * .material-option-btn-active { filter: brightness(0.9) !important; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px !important; }
@keyframes lp-course-bounce { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
body.page-course router-outlet + * .baseline-option-label:hover { border-color: rgb(203, 213, 225) !important; background: rgb(241, 245, 249) !important; color: rgb(30, 41, 59) !important; }
body.page-course router-outlet + * .baseline-option-label.selected { box-shadow: rgba(124, 58, 237, 0.08) 0px 4px 12px; border-color: rgb(124, 58, 237) !important; background: rgb(245, 243, 255) !important; color: rgb(124, 58, 237) !important; }
body.page-course router-outlet + * .baseline-q-card { animation: 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running lp-course-cardSlideIn; }
@keyframes lp-course-cardSlideIn { 
  0% { opacity: 0; transform: translateX(24px); }
  100% { opacity: 1; transform: translateX(0px); }
}