/* * Accessibility CSS Module * * This stylesheet provides comprehensive accessibility features for the web application. * It includes support for multiple accessibility modes: * - Font Scaling: Adjustable font sizes for improved readability * - Dyslexia Mode: Uses Open Dyslexic font family for users with dyslexia * - Contrast Mode: High contrast color scheme with dark background and bright text * - Invert Mode: Inverts colors for users with specific visual preferences * - Saturate Mode: Enhances color saturation for better visibility * Most of the styles are scopoed to make the contrast mode effective across the application, with minimal interference to existing styles. */ @font-face { font-family: 'Open Dyslexic'; src: url('../../../font/OpenDyslexic.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } :root { --accessibility-font-scale: 1; --contrast-bg: #000000; --contrast-surface: #111111; --contrast-surface-alt: #181818; --contrast-border: #ffd54f; --contrast-text: #ffffff; --contrast-muted: #d2d2d2; --contrast-link: #ffd54f; --contrast-link-hover: #ffe171; } html { font-size: 100%; transition: font-size 0.2s ease, filter 0.5s ease; } body { font-size: calc(1rem * var(--accessibility-font-scale)); line-height: 1.5; } h1 { font-size: calc(2.25rem * var(--accessibility-font-scale)); } h2 { font-size: calc(2rem * var(--accessibility-font-scale)); } h3 { font-size: calc(1.75rem * var(--accessibility-font-scale)); } h4 { font-size: calc(1.5rem * var(--accessibility-font-scale)); } h5 { font-size: calc(1.3rem * var(--accessibility-font-scale)); } h6 { font-size: calc(1.1rem * var(--accessibility-font-scale)); } p, span, a, li, label, button, .btn, td, th, .table, .table td, p-3 .card-title, .section-title, .subtitle, .title, .badge, .text-muted, .paragraph, .drag-token, .boxed-label, .option-text, .reading-block, .reading-title, .reading-body, .image-choice-prompt, .image-matching-instruction, .image-matching-helper-text, .matching-node, .dropped-word, .word-item, .drag-instruction, .question-prompt, small { font-size: calc(1rem * var(--accessibility-font-scale)); } /* Dyslexia Mode */ body.dyslexia-mode h1:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode h2:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode h3:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode h4:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode h5:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode h6:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode p:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode span:not(:has(i, svg, img, canvas)):not(#canvasPage):not(#canvasPage *), body.dyslexia-mode a:not(:has(i, svg, img, canvas)):not(#canvasPage):not(#canvasPage *), body.dyslexia-mode label:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode td:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode th:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode button:not(:has(i, svg)):not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .btn:not(:has(i, svg)):not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .card-title:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .section-title:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .subtitle:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .title:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .text-muted:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .paragraph:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .drag-token:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .boxed-label:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .option-text:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .reading-block:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .reading-title:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .reading-body:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .image-choice-prompt:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .image-matching-instruction:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .image-matching-helper-text:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .matching-node:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .dropped-word:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .word-item:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .drag-instruction:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .question-prompt:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .option-label:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .form-label:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .form-text:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode input[type="text"]::placeholder, body.dyslexia-mode input[type="email"]::placeholder, body.dyslexia-mode input[type="search"]::placeholder, body.dyslexia-mode textarea::placeholder, body.dyslexia-mode .select2-selection__rendered:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .choices__list--single:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .badge:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .title-container-activitiGraph:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode .choices__item:not(#canvasPage):not(#canvasPage *), body.dyslexia-mode small:not(#canvasPage):not(#canvasPage *) { font-family: 'Open Dyslexic', sans-serif !important; } /* Contrast Mode */ body.contrast-mode { background-color: var(--contrast-bg) !important; color: var(--contrast-text) !important; } body.contrast-mode .container-default-activitiGraph:not(#canvasPage):not(#canvasPage *) { background-color: #000000 !important; } body.contrast-mode .header-container:not(#canvasPage):not(#canvasPage *), body.contrast-mode .header:not(#canvasPage):not(#canvasPage *), body.contrast-mode header:not(#canvasPage):not(#canvasPage *), body.contrast-mode .navbar:not(#canvasPage):not(#canvasPage *), body.contrast-mode nav:not(#canvasPage):not(#canvasPage *), body.contrast-mode header .container:not(#canvasPage):not(#canvasPage *), body.contrast-mode header > div:not(#canvasPage):not(#canvasPage *), body.contrast-mode header > *:not(#canvasPage):not(#canvasPage *), body.contrast-mode nav > div:not(#canvasPage):not(#canvasPage *), body.contrast-mode nav > *:not(#canvasPage):not(#canvasPage *), body.contrast-mode .navbar-container:not(#canvasPage):not(#canvasPage *), body.contrast-mode .navbar-inner:not(#canvasPage):not(#canvasPage *), body.contrast-mode .navbar-brand:not(#canvasPage):not(#canvasPage *), body.contrast-mode .navbar-nav:not(#canvasPage):not(#canvasPage *), body.contrast-mode .nav-item:not(#canvasPage):not(#canvasPage *), body.contrast-mode .nav-link:not(#canvasPage):not(#canvasPage *), body.contrast-mode .navbar-collapse:not(#canvasPage):not(#canvasPage *), body.contrast-mode .sidebar:not(#canvasPage):not(#canvasPage *), body.contrast-mode .content-container:not(#canvasPage):not(#canvasPage *), body.contrast-mode .page-title:not(#canvasPage):not(#canvasPage *), body.contrast-mode .section-header:not(#canvasPage):not(#canvasPage *), body.contrast-mode .card:not(#canvasPage):not(#canvasPage *), body.contrast-mode .drag-token:not(#canvasPage):not(#canvasPage *), body.contrast-mode .boxed-label:not(#canvasPage):not(#canvasPage *), body.contrast-mode .reading-block:not(#canvasPage):not(#canvasPage *), body.contrast-mode .matching-node:not(#canvasPage):not(#canvasPage *), body.contrast-mode .word-item:not(#canvasPage):not(#canvasPage *), body.contrast-mode .dropped-word:not(#canvasPage):not(#canvasPage *), body.contrast-mode .drag-instruction:not(#canvasPage):not(#canvasPage *), body.contrast-mode .card-header:not(#canvasPage):not(#canvasPage *), body.contrast-mode .card-body:not(#canvasPage):not(#canvasPage *), body.contrast-mode .table:not(#canvasPage):not(#canvasPage *), body.contrast-mode .table th:not(#canvasPage):not(#canvasPage *), body.contrast-mode .table td:not(#canvasPage):not(#canvasPage *), body.contrast-mode .modal-content:not(#canvasPage):not(#canvasPage *), body.contrast-mode .dropdown-menu:not(#canvasPage):not(#canvasPage *), body.contrast-mode .list-group-item:not(#canvasPage):not(#canvasPage *), body.contrast-mode .offcanvas:not(#canvasPage):not(#canvasPage *), body.contrast-mode .reader-shell:not(#canvasPage):not(#canvasPage *), body.contrast-mode .reader-toolbar:not(#canvasPage):not(#canvasPage *), body.contrast-mode .accessibility-modal-content:not(#canvasPage):not(#canvasPage *), body.contrast-mode .accessibility-option:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; box-shadow: none !important; } body.contrast-mode thead:not(#canvasPage):not(#canvasPage *), body.contrast-mode thead th:not(#canvasPage):not(#canvasPage *), body.contrast-mode th:not(#canvasPage):not(#canvasPage *), body.contrast-mode td:not(#canvasPage):not(#canvasPage *), body.contrast-mode .columnheader:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; } body.contrast-mode header:not(#canvasPage):not(#canvasPage *), body.contrast-mode nav:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; border-bottom-color: var(--contrast-border) !important; } body.contrast-mode header *:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; } body.contrast-mode header .container:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; } body.contrast-mode .form-control:not(#canvasPage):not(#canvasPage *), body.contrast-mode .form-select:not(#canvasPage):not(#canvasPage *), body.contrast-mode textarea:not(#canvasPage):not(#canvasPage *), body.contrast-mode .input-group-text:not(#canvasPage):not(#canvasPage *), body.contrast-mode .select2-container--default .select2-selection--single:not(#canvasPage):not(#canvasPage *), body.contrast-mode .select2-container--default .select2-selection--multiple:not(#canvasPage):not(#canvasPage *), body.contrast-mode .select2-dropdown:not(#canvasPage):not(#canvasPage *), body.contrast-mode .choices__inner:not(#canvasPage):not(#canvasPage *), body.contrast-mode .choices__list--dropdown:not(#canvasPage):not(#canvasPage *), body.contrast-mode .choices__input:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface-alt) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; box-shadow: none !important; } body.contrast-mode .form-control::placeholder, body.contrast-mode .choices__placeholder:not(#canvasPage):not(#canvasPage *), body.contrast-mode .select2-selection__placeholder:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-muted) !important; } body.contrast-mode h1:not(.map-container *):not(#canvasPage):not(#canvasPage *), body.contrast-mode h2:not(.map-container *):not(#canvasPage):not(#canvasPage *), body.contrast-mode h3:not(.map-container *):not(#canvasPage):not(#canvasPage *), body.contrast-mode h4:not(.map-container *):not(#canvasPage):not(#canvasPage *), body.contrast-mode h5:not(.map-container *):not(#canvasPage):not(#canvasPage *), body.contrast-mode h6:not(.map-container *):not(#canvasPage):not(#canvasPage *), body.contrast-mode .title-container-activitiGraph:not(#canvasPage):not(#canvasPage *), body.contrast-mode #questionText:not(#canvasPage):not(#canvasPage *), body.contrast-mode .reading-title:not(#canvasPage):not(#canvasPage *), body.contrast-mode .reading-text:not(#canvasPage):not(#canvasPage *), body.contrast-mode .question-prompt:not(#canvasPage):not(#canvasPage *), body.contrast-mode .matching-helper-text:not(#canvasPage):not(#canvasPage *), body.contrast-mode .image-matching-helper-text:not(#canvasPage):not(#canvasPage *), body.contrast-mode .image-matching-instruction:not(#canvasPage):not(#canvasPage *), body.contrast-mode .drag-instruction:not(#canvasPage):not(#canvasPage *), body.contrast-mode .image-choice-prompt:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-border) !important; } body.contrast-mode p:not(.map-container *):not(#canvasPage):not(#canvasPage *), body.contrast-mode span:not(.map-container *):not(#canvasPage):not(#canvasPage *), body.contrast-mode li:not(.map-container *):not(#canvasPage):not(#canvasPage *), body.contrast-mode td:not(.map-container *):not(#canvasPage):not(#canvasPage *), body.contrast-mode th:not(.map-container *):not(#canvasPage):not(#canvasPage *), body.contrast-mode label:not(.map-container *):not(#canvasPage):not(#canvasPage *), body.contrast-mode a:not(.map-container *):not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; } body.contrast-mode .card:not(#canvasPage):not(#canvasPage *), body.contrast-mode .drag-token:not(#canvasPage):not(#canvasPage *), body.contrast-mode .boxed-label:not(#canvasPage):not(#canvasPage *), body.contrast-mode .reading-block:not(#canvasPage):not(#canvasPage *), body.contrast-mode .matching-node:not(#canvasPage):not(#canvasPage *), body.contrast-mode .word-item:not(#canvasPage):not(#canvasPage *), body.contrast-mode .dropped-word:not(#canvasPage):not(#canvasPage *), body.contrast-mode .drag-instruction:not(#canvasPage):not(#canvasPage *), body.contrast-mode .drag-token:not(#canvasPage):not(#canvasPage *), body.contrast-mode .boxed-label:not(#canvasPage):not(#canvasPage *), body.contrast-mode .reading-block:not(#canvasPage):not(#canvasPage *), body.contrast-mode .matching-node:not(#canvasPage):not(#canvasPage *), body.contrast-mode .word-item:not(#canvasPage):not(#canvasPage *), body.contrast-mode .dropped-word:not(#canvasPage):not(#canvasPage *), body.contrast-mode .drag-instruction:not(#canvasPage):not(#canvasPage *), body.contrast-mode .card-header:not(#canvasPage):not(#canvasPage *), body.contrast-mode .card-body:not(#canvasPage):not(#canvasPage *), body.contrast-mode .modal-content:not(#canvasPage):not(#canvasPage *), body.contrast-mode .table:not(#canvasPage):not(#canvasPage *), body.contrast-mode .dropdown-menu:not(#canvasPage):not(#canvasPage *), body.contrast-mode .list-group-item:not(#canvasPage):not(#canvasPage *), body.contrast-mode .form-control:not(#canvasPage):not(#canvasPage *), body.contrast-mode .form-select:not(#canvasPage):not(#canvasPage *), body.contrast-mode .offcanvas:not(#canvasPage):not(#canvasPage *), body.contrast-mode .border-gray-200:not(#canvasPage):not(#canvasPage *) { border-color: #ffd54f !important; border-width: 2px !important; border-style: solid !important; } body.contrast-mode .shadow:not(#canvasPage):not(#canvasPage *), body.contrast-mode .shadow-sm:not(#canvasPage):not(#canvasPage *), body.contrast-mode .shadow-md:not(#canvasPage):not(#canvasPage *), body.contrast-mode .shadow-lg:not(#canvasPage):not(#canvasPage *), body.contrast-mode .shadow-xl:not(#canvasPage):not(#canvasPage *), body.contrast-mode .shadow-2xl:not(#canvasPage):not(#canvasPage *) { box-shadow: none !important; border: 2px solid var(--contrast-border) !important; } body.contrast-mode .bg-white:not(#canvasPage):not(#canvasPage *), body.contrast-mode .bg-gray-50:not(#canvasPage):not(#canvasPage *), body.contrast-mode .bg-gray-100:not(#canvasPage):not(#canvasPage *), body.contrast-mode .bg-gray-200:not(#canvasPage):not(#canvasPage *), body.contrast-mode .bg-gray-300:not(#canvasPage):not(#canvasPage *), body.contrast-mode .bg-orange-50:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*="bg-orange"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .card__header:not(#canvasPage):not(#canvasPage *), body.contrast-mode .modal-header:not(#canvasPage):not(#canvasPage *), body.contrast-mode #continueReadingModal .modal-header:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; background: var(--contrast-surface) !important; } body.contrast-mode .card__header[style*="background: #FFF"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .card__header[style*="background:#FFF"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .card__header[style*="background: #ffffff"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .card__header[style*="background:#ffffff"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .card__header[style]:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; background: var(--contrast-surface) !important; } body.contrast-mode .text-gray-800:not(#canvasPage):not(#canvasPage *), body.contrast-mode .text-gray-700:not(#canvasPage):not(#canvasPage *), body.contrast-mode .text-gray-600:not(#canvasPage):not(#canvasPage *), body.contrast-mode .text-gray-500:not(#canvasPage):not(#canvasPage *), body.contrast-mode .text-gray-400:not(#canvasPage):not(#canvasPage *), body.contrast-mode .text-gray-300:not(#canvasPage):not(#canvasPage *), body.contrast-mode .text-gray-200:not(#canvasPage):not(#canvasPage *), body.contrast-mode .text-gray-100:not(#canvasPage):not(#canvasPage *), body.contrast-mode .text-black:not(#canvasPage):not(#canvasPage *), body.contrast-mode .text-dark:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; } body.contrast-mode .text-white:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; } /* Override Tailwind colors on contrast mode */ body.contrast-mode .bg-indigo-50:not(#canvasPage):not(#canvasPage *), body.contrast-mode .text-indigo-900:not(#canvasPage):not(#canvasPage *) { background-color: #000000 !important; color: #ffffff !important; } body.contrast-mode [class*="bg-indigo"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*="bg-purple"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*="bg-fuchsia"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*="bg-violet"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*="bg-blue"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*="bg-cyan"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*="bg-rose"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*="bg-pink"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*="bg-red"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*="bg-yellow"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*="bg-green"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*="text-indigo"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*="text-purple"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*="text-fuchsia"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*="text-violet"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*="text-blue"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*="text-cyan"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*="text-rose"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*="text-pink"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*="text-red"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*="text-yellow"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*="text-green"]:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; } body.contrast-mode button[style*="color: #EC4899"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode button[style*="color: rgb(236, 72, 153)"]:not(#canvasPage):not(#canvasPage *) { color: #ffd54f !important; } body.contrast-mode [class*="bg-gradient-"]:not(#canvasPage):not(#canvasPage *) { background-image: none !important; background-color: var(--contrast-surface) !important; } body.contrast-mode .calendar-component .card:not(#canvasPage):not(#canvasPage *), body.contrast-mode .calendar-component .card.bg-gradient-to-br:not(#canvasPage):not(#canvasPage *) { background: #111111 !important; border: 4px solid var(--contrast-border) !important; box-shadow: none !important; } body.contrast-mode .calendar-component h3:not(#canvasPage):not(#canvasPage *), body.contrast-mode .calendar-component h4:not(#canvasPage):not(#canvasPage *), body.contrast-mode .calendar-component button:not(#canvasPage):not(#canvasPage *), body.contrast-mode .calendar-component .text-rose-600:not(#canvasPage):not(#canvasPage *), body.contrast-mode .calendar-component .text-rose-700:not(#canvasPage):not(#canvasPage *), body.contrast-mode .calendar-component .text-rose-900:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; } body.contrast-mode .calendar-component .grid > div:not(#canvasPage):not(#canvasPage *) { border: 1px solid var(--contrast-border) !important; } body.contrast-mode .calendar-component .grid > div.bg-white:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; } body.contrast-mode .calendar-component .grid > div.bg-red-300:not(#canvasPage):not(#canvasPage *), body.contrast-mode .calendar-component .grid > div.bg-yellow-300:not(#canvasPage):not(#canvasPage *), body.contrast-mode .calendar-component .grid > div.bg-green-300:not(#canvasPage):not(#canvasPage *) { color: #000000 !important; border-color: #000000 !important; } body.contrast-mode .calendar-component .grid > div.bg-red-300:not(#canvasPage):not(#canvasPage *) { background-color: #ff5252 !important; } body.contrast-mode .calendar-component .grid > div.bg-yellow-300:not(#canvasPage):not(#canvasPage *) { background-color: #ffd740 !important; } body.contrast-mode .calendar-component .grid > div.bg-green-300:not(#canvasPage):not(#canvasPage *) { background-color: #69f0ae !important; } body.contrast-mode .navbar *:not(#canvasPage):not(#canvasPage *) { background-color: inherit !important; border-color: var(--contrast-border) !important; } body.contrast-mode .navbar a:not(#canvasPage):not(#canvasPage *), body.contrast-mode .navbar button:not(#canvasPage):not(#canvasPage *), body.contrast-mode .navbar span:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; } body.contrast-mode .navbar a:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode .navbar button:hover:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; background-color: var(--contrast-surface) !important; } body.contrast-mode a:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode button:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode .nav-link:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode .menu a:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode .table tbody tr:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode .list-group-item:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode .card:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode .dropdown-item:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode .btn:hover:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: #ffd54f !important; text-decoration: none !important; } body.contrast-mode table tbody tr:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode .table tbody tr:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode table tbody tr:hover td:not(#canvasPage):not(#canvasPage *), body.contrast-mode .table tbody tr:hover td:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; } body.contrast-mode a:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode button:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode .nav-link:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode .btn:hover:not(#canvasPage):not(#canvasPage *) { outline: 2px solid #ffd54f !important; outline-offset: 2px !important; } body.contrast-mode .nav-link:not(#canvasPage):not(#canvasPage *), body.contrast-mode .menu a:not(#canvasPage):not(#canvasPage *), body.contrast-mode .breadcrumb a:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-link) !important; } body.contrast-mode .btn:not(#canvasPage):not(#canvasPage *), body.contrast-mode .badge:not(#canvasPage):not(#canvasPage *), body.contrast-mode .pagination .page-link:not(#canvasPage):not(#canvasPage *), body.contrast-mode .accessibility-option[aria-pressed='true']:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-link) !important; color: #000000 !important; border-color: var(--contrast-link) !important; } body.contrast-mode .accessibility-option[aria-pressed='true']:not(#canvasPage):not(#canvasPage *), body.contrast-mode .accessibility-filter-option[aria-pressed='true']:not(#canvasPage):not(#canvasPage *), body.contrast-mode .accessibility-preset-option[aria-pressed='true']:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-link) !important; color: #000000 !important; border-color: #000000 !important; border-width: 3px !important; box-shadow: inset 0 0 0 2px #000000, 0 0 0 2px var(--contrast-link) !important; } body.contrast-mode .btn-outline:not(#canvasPage):not(#canvasPage *), body.contrast-mode [class*='btn-outline']:not(#canvasPage):not(#canvasPage *) { background-color: transparent !important; color: var(--contrast-link) !important; border-color: var(--contrast-link) !important; } body.contrast-mode .dropdown:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; border-color: #ffd54f !important; border-width: 2px !important; } body.contrast-mode .dropdown .option:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; background-color: var(--contrast-surface) !important; } body.contrast-mode .dropdown .option:hover:not(#canvasPage):not(#canvasPage *) { background-color: rgba(255, 213, 79, 0.2) !important; border-left: 3px solid #ffd54f !important; } body.contrast-mode .select-box:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; border-color: #ffd54f !important; color: var(--contrast-text) !important; } body.contrast-mode .select-box input:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: #ffd54f !important; } body.contrast-mode .custom-multi-select:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; border-color: #ffd54f !important; } body.contrast-mode .accessibility-modal-content:not(#canvasPage):not(#canvasPage *), body.contrast-mode .accessibility-modal-header:not(#canvasPage):not(#canvasPage *), body.contrast-mode .accessibility-modal-body:not(#canvasPage):not(#canvasPage *), body.contrast-mode .accessibility-option:not(#canvasPage):not(#canvasPage *), body.contrast-mode .accessibility-color-filters-submenu:not(#canvasPage):not(#canvasPage *), body.contrast-mode .accessibility-cursor-submenu:not(#canvasPage):not(#canvasPage *), body.contrast-mode .accessibility-saturate-submenu:not(#canvasPage):not(#canvasPage *), body.contrast-mode .accessibility-filter-option:not(#canvasPage):not(#canvasPage *), body.contrast-mode .accessibility-reset-section:not(#canvasPage):not(#canvasPage *), body.contrast-mode .accessibility-reset-btn:not(#canvasPage):not(#canvasPage *), body.contrast-mode .accessibility-presets-btn:not(#canvasPage):not(#canvasPage *), body.contrast-mode .accessibility-presets-submenu:not(#canvasPage):not(#canvasPage *), body.contrast-mode .accessibility-preset-option:not(#canvasPage):not(#canvasPage *), body.contrast-mode .colorFiltersMenu:not(#canvasPage):not(#canvasPage *), body.contrast-mode #colorFiltersMenu:not(#canvasPage):not(#canvasPage *), body.contrast-mode #cursorMenu:not(#canvasPage):not(#canvasPage *), body.contrast-mode #saturateMenu:not(#canvasPage):not(#canvasPage *), body.contrast-mode #presetsMenu:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: #ffd54f !important; } body.contrast-mode .accessibility-option:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode .accessibility-filter-option:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode .accessibility-preset-option:hover:not(#canvasPage):not(#canvasPage *) { background-color: rgba(255, 213, 79, 0.2) !important; border-color: #ffd54f !important; } body.contrast-mode .accessibility-presets-btn:hover:not(#canvasPage):not(#canvasPage *) { background-color: rgba(255, 213, 79, 0.2) !important; border-color: #ffd54f !important; } body.contrast-mode .accessibility-presets-btn[aria-expanded="true"]:not(#canvasPage):not(#canvasPage *) { background-color: #ffd54f !important; color: #000000 !important; border-color: #ffd54f !important; } body.contrast-mode .accessibility-option[aria-pressed='true']:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode .accessibility-filter-option[aria-pressed='true']:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode .accessibility-preset-option[aria-pressed='true']:hover:not(#canvasPage):not(#canvasPage *) { background-color: #ffeb3b !important; color: #000000 !important; border-color: #000000 !important; } body.contrast-mode tbody:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; } body.contrast-mode td:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; background-color: var(--contrast-surface) !important; } body.contrast-mode .download-menu:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; border-color: #ffd54f !important; } body.contrast-mode .download-menu button:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; background-color: var(--contrast-surface) !important; } body.contrast-mode .download-menu button:hover:not(#canvasPage):not(#canvasPage *) { background-color: rgba(255, 213, 79, 0.2) !important; color: var(--contrast-text) !important; } body.contrast-mode #paginationContainer .btn:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; border-color: #ffd54f !important; color: var(--contrast-text) !important; } body.contrast-mode #paginationContainer .btn.active:not(#canvasPage):not(#canvasPage *) { background-color: #ffd54f !important; color: #000000 !important; } body.contrast-mode #citySelect.form-control:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; border-color: #ffd54f !important; color: var(--contrast-text) !important; } body.contrast-mode #citySelect.form-control option:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; } body.contrast-mode .fixed-height-select:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; border-color: #ffd54f !important; color: var(--contrast-text) !important; } body.contrast-mode .pagination .page-item .page-link:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; border-color: #ffd54f !important; color: var(--contrast-text) !important; } body.contrast-mode .pagination .page-item.active .page-link:not(#canvasPage):not(#canvasPage *) { background-color: #ffd54f !important; border-color: #ffd54f !important; color: #000000 !important; } body.contrast-mode .dashboard-card:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; border-color: #ffd54f !important; } body.contrast-mode .report-shell:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; border-color: #ffd54f !important; color: var(--contrast-text) !important; } body.contrast-mode .title-reports:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-link) !important; } body.contrast-mode .subtitle-reports:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-muted) !important; } body.contrast-mode .table-striped tbody tr:nth-of-type(odd):not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface-alt) !important; } body.contrast-mode .table-striped tbody tr:nth-of-type(even):not(#canvasPage):not(#canvasPage *), body.contrast-mode .table-hover tbody tr:hover:not(#canvasPage):not(#canvasPage *) { background-color: #1f1f1f !important; } body.contrast-mode .text-muted:not(#canvasPage):not(#canvasPage *), body.contrast-mode .subtitle:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-muted) !important; } body.contrast-mode footer:not(#canvasPage):not(#canvasPage *), body.contrast-mode .app-footer:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-bg) !important; color: var(--contrast-text) !important; border-top: 2px solid var(--contrast-border) !important; } body.contrast-mode .badge:not(#canvasPage):not(#canvasPage *), body.contrast-mode .status:not(#canvasPage):not(#canvasPage *), body.contrast-mode .tag:not(#canvasPage):not(#canvasPage *) { border-color: var(--contrast-border) !important; } body.contrast-mode .page-title:not(#canvasPage):not(#canvasPage *), body.contrast-mode .section-title:not(#canvasPage):not(#canvasPage *), body.contrast-mode .card-title:not(#canvasPage):not(#canvasPage *), body.contrast-mode .text-dark:not(#canvasPage):not(#canvasPage *), body.contrast-mode h1:not(#canvasPage):not(#canvasPage *), body.contrast-mode h2:not(#canvasPage):not(#canvasPage *), body.contrast-mode h3:not(#canvasPage):not(#canvasPage *), body.contrast-mode h4:not(#canvasPage):not(#canvasPage *), body.contrast-mode h5:not(#canvasPage):not(#canvasPage *), body.contrast-mode h6:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-link) !important; } /* Invert Colors Mode */ html.invert-mode { filter: invert(1) hue-rotate(180deg); background-color: #000000; } html.invert-mode img, html.invert-mode video, html.invert-mode [style*="background-image"] { filter: invert(1) hue-rotate(180deg); } html.invert-mode iframe { filter: invert(1) hue-rotate(180deg); } html.invert-mode .accessibility-fab { filter: invert(1) hue-rotate(180deg); } html.invert-mode .accessibility-modal, html.invert-mode .accessibility-modal-backdrop, html.invert-mode .accessibility-modal-content { filter: invert(1) hue-rotate(180deg); } html.saturate-mode { filter: saturate(0); } html.saturate-mode img, html.saturate-mode video, html.saturate-mode [style*="background-image"] { filter: saturate(0); } html.saturate-mode iframe { filter: saturate(0); } html.saturate-mode .accessibility-fab { filter: saturate(0); } html.saturate-mode .accessibility-modal, html.saturate-mode .accessibility-modal-backdrop, html.saturate-mode .accessibility-modal-content { filter: saturate(0); } html.saturate2-mode { filter: saturate(1.5); } html.saturate2-mode img, html.saturate2-mode video, html.saturate2-mode [style*="background-image"] { filter: saturate(1.5); } html.saturate2-mode iframe { filter: saturate(1.5); } html.saturate2-mode .accessibility-fab { filter: saturate(1.5); } html.saturate2-mode .accessibility-modal, html.saturate2-mode .accessibility-modal-backdrop, html.saturate2-mode .accessibility-modal-content { filter: saturate(1.5); } .header-container { top: 0; width: 100%; z-index: 1000; } .content-container { padding-top: 80px; } .accessibility-option[aria-pressed="true"], .accessibility-filter-option[aria-pressed="true"], .accessibility-preset-option[aria-pressed="true"] { background: #7c3aed; color: #fff; border-color: #7c3aed; border-width: 3px !important; box-shadow: 0 0 0 2px #7c3aed, 0 2px 8px rgba(124, 58, 237, 0.5); font-weight: 600; } .accessibility-option[aria-pressed="true"]:hover, .accessibility-filter-option[aria-pressed="true"]:hover, .accessibility-preset-option[aria-pressed="true"]:hover { background: #6d28d9; border-color: #6d28d9; box-shadow: 0 0 0 2px #6d28d9, 0 4px 12px rgba(124, 58, 237, 0.6); } /* High Contrast Sidebar & Navbar Enhancements */ body.contrast-mode .sidebar:not(#canvasPage):not(#canvasPage *), body.contrast-mode .sidebar-menu:not(#canvasPage):not(#canvasPage *), body.contrast-mode .sidebar-menu .sub-menu:not(#canvasPage):not(#canvasPage *), body.contrast-mode .navbar:not(#canvasPage):not(#canvasPage *), body.contrast-mode .navbar-collapse:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; border-color: #ffd54f !important; } body.contrast-mode .sidebar-menu > li:not(#canvasPage):not(#canvasPage *), body.contrast-mode .sidebar-menu .sub-menu > li:not(#canvasPage):not(#canvasPage *) { border: 1px solid #ffd54f !important; border-radius: 8px; box-shadow: none !important; margin-bottom: 4px; background-color: var(--contrast-surface) !important; } body.contrast-mode .sidebar-menu li a:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; border: none !important; text-decoration: none !important; } body.contrast-mode .sidebar-menu li a:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode .sidebar-menu .sub-menu li a:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode .menu_has_children > a:hover:not(#canvasPage):not(#canvasPage *) { background-color: rgba(255, 213, 79, 0.15) !important; color: var(--contrast-link) !important; outline: 2px solid #ffd54f !important; outline-offset: 2px; } body.contrast-mode .menu_has_children + .sub-menu:not(#canvasPage):not(#canvasPage *), body.contrast-mode .menu_has_children .sub-menu:not(#canvasPage):not(#canvasPage *) { border-radius: 8px; padding: 4px 0; margin-top: 4px; background-color: var(--contrast-surface) !important; } body.contrast-mode .sidebar-menu .menu_has_children.active:not(#canvasPage):not(#canvasPage *), body.contrast-mode .sidebar-menu .menu_has_children.active > a:not(#canvasPage):not(#canvasPage *) { background-color: rgba(255, 213, 79, 0.2) !important; } body.contrast-mode .menu-toggle::before { background-color: #ffd54f !important; } body.contrast-mode .menu-toggle.active::before { background-color: #ffd54f !important; } body.contrast-mode .menu-toggle::after { background-color: #ffd54f !important; } body.contrast-mode .menu-toggle, body.contrast-mode .menu-toggle.active { background-color: transparent !important; } /* Map Legend Contrast Mode */ body.contrast-mode .legend:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; border: 2px solid var(--contrast-border) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; } body.contrast-mode .legend-title:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; border-bottom-color: var(--contrast-border) !important; font-weight: bold; } body.contrast-mode .legend-items:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; } body.contrast-mode .legend-item:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; padding: 6px; border-radius: 4px; } body.contrast-mode .legend-item:hover:not(#canvasPage):not(#canvasPage *) { background-color: rgba(255, 213, 79, 0.15) !important; } body.contrast-mode .legend-item p:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; } body.contrast-mode .legend-color:not(#canvasPage):not(#canvasPage *) { border: 2px solid var(--contrast-border) !important; } body.contrast-mode .legend-label:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; } body.contrast-mode .btn-base:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-link) !important; color: #000000 !important; border-color: var(--contrast-link) !important; border: 2px solid var(--contrast-link) !important; font-weight: 600; } body.contrast-mode .btn-base:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode .btn-base:focus:not(#canvasPage):not(#canvasPage *) { background-color: #ffeb3b !important; color: #000000 !important; border-color: #000000 !important; outline: 2px solid #000000 !important; outline-offset: 2px; } body.contrast-mode .btn-ghost:not(#canvasPage):not(#canvasPage *) { background-color: transparent !important; color: var(--contrast-link) !important; border: 2px solid var(--contrast-link) !important; font-weight: 600; } body.contrast-mode .btn-ghost:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode .btn-ghost:focus:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-link) !important; color: #000000 !important; border-color: var(--contrast-link) !important; outline: 2px solid #000000 !important; outline-offset: 2px; } body.contrast-mode .btn-group-responsive .btn-base:not(#canvasPage):not(#canvasPage *), body.contrast-mode .btn-group-responsive .btn-ghost:not(#canvasPage):not(#canvasPage *) { padding: 0.75rem 1.5rem; font-size: 1rem; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } /* ====== KID DATE (Student Activity) ====== */ body.contrast-mode .kid-date.item:not(#canvasPage):not(#canvasPage *) { background: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; } body.contrast-mode .kid-date .icon:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-link) !important; } body.contrast-mode .kid-subtitle:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; } body.contrast-mode .kid-bg:not(#canvasPage):not(#canvasPage *) { background: var(--contrast-surface) !important; border-radius: 16px; } /* ====== KID MODAL (Student Activity) ====== */ body.contrast-mode .kid-modal:not(#canvasPage):not(#canvasPage *) { background: var(--contrast-surface) !important; } body.contrast-mode .kid-modal .q-item:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; background-color: var(--contrast-surface) !important; } /* Q-Item styling for all contexts */ body.contrast-mode .q-item:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; } body.contrast-mode .q-item[style*="background"]:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; } body.contrast-mode .q-item *:not(#canvasPage):not(#canvasPage *) { background-color: transparent !important; color: var(--contrast-text) !important; } body.contrast-mode .kid-chip:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; background: var(--contrast-surface-alt) !important; } body.contrast-mode .nav.nav-tabs.kid-tabs.mb-4:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-link) !important; } body.contrast-mode .q-dot:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; } body.contrast-mode .q-dot.ok:not(#canvasPage):not(#canvasPage *), body.contrast-mode .q-dot.bad:not(#canvasPage):not(#canvasPage *) { background: var(--contrast-border) !important; color: #000000 !important; } body.contrast-mode [style*="background-color:#fff; border-radius"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [style*="background-color: #fff; border-radius"]:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; } /* Container with white background and border-radius */ body.contrast-mode .container[style*="background-color: #FFF"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .container[style*="background-color:#FFF"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .container[style*="background: #FFF"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .container[style*="background:#FFF"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .container[style*="background: #fff"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .container[style*="background:#fff"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .py-4[style*="background-color: #FFF"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .py-4[style*="background-color:#FFF"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .py-4[style*="background: #FFF"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .py-4[style*="background:#FFF"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .py-4[style*="background: #fff"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .py-4[style*="background:#fff"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .container.py-4[style*="background-color"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .container.py-4[style*="background:"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode div[style*="background-color: #FFF; border-radius"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode div[style*="background-color:#FFF; border-radius"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode div[style*="background: #FFF; border-radius"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode div[style*="background:#FFF; border-radius"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode div[style*="background: #fff; border-radius"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode div[style*="background:#fff; border-radius"]:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; } body.contrast-mode .modal-body:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; } body.contrast-mode .modal-body[style*="background-color"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .modal-body[style*="#fdfdfd"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .modal-body[style*="padding"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .modal[style] .modal-body:not(#canvasPage):not(#canvasPage *), body.contrast-mode .modal-dialog .modal-content .modal-body:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; } body.contrast-mode .modal-body.flex-wrapper:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; } body.contrast-mode [class*="modal"] .modal-body:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; } body.contrast-mode .modal-body[style]:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; } body.contrast-mode .city-card:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; } body.contrast-mode .city-card .city-name:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; } body.contrast-mode .city-card .city-details:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-muted) !important; } body.contrast-mode .city-card:hover:not(#canvasPage):not(#canvasPage *) { border-color: var(--contrast-link) !important; } body.contrast-mode .modal-header:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; } body.contrast-mode .modal-header .modal-title:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-link) !important; } body.contrast-mode .modal-header .btn-close:not(#canvasPage):not(#canvasPage *) { filter: invert(1) !important; } body.contrast-mode .email-card:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; box-shadow: none !important; } body.contrast-mode [style*="background: #fff; border-radius: 20px"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode [style*="background:#fff; border-radius: 20px"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode div[style*="background: #fff"][style*="border-radius: 20px"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .py-4[style*="background: #fff"]:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border: 2px solid var(--contrast-border) !important; } body.contrast-mode .py-4[style*="background-color: #fff"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .py-4[style*="background-color:#fff"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .py-4[style*="background: #fff"]:not(#canvasPage):not(#canvasPage *), body.contrast-mode .py-4[style*="background:#fff"]:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; } body.contrast-mode label:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; } body.contrast-mode .ticket-number:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; } body.contrast-mode .text-muted-small:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-muted) !important; } body.contrast-mode .report-shell:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; } body.contrast-mode tbody:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; } body.contrast-mode td:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; background-color: var(--contrast-surface) !important; } body.contrast-mode thead th:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface-alt) !important; color: var(--contrast-text) !important; } body.contrast-mode table th:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface-alt) !important; color: var(--contrast-link) !important; border-color: var(--contrast-border) !important; } body.contrast-mode table tbody tr td:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; } body.contrast-mode table tbody tr td div[style*="color:#000"]:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; } body.contrast-mode table:not(#canvasPage):not(#canvasPage *) { border-color: var(--contrast-border) !important; } body.contrast-mode .report-container:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border: 2px solid var(--contrast-border) !important; box-shadow: none !important; } body.contrast-mode .rounded-circle.d-flex.align-items-center.justify-content-center:not(#canvasPage):not(#canvasPage *) { background-color: transparent !important; } body.contrast-mode .dropdown-menu:not(#canvasPage):not(#canvasPage *), body.contrast-mode .dropdown-menu.show:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; } body.contrast-mode .dropdown-item:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; background-color: var(--contrast-surface) !important; } body.contrast-mode .dropdown-item:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode .dropdown-item:focus:not(#canvasPage):not(#canvasPage *), body.contrast-mode .dropdown-item.active:not(#canvasPage):not(#canvasPage *) { background-color: rgba(255, 213, 79, 0.2) !important; color: var(--contrast-text) !important; } body.contrast-mode .dropdown-divider:not(#canvasPage):not(#canvasPage *) { border-color: var(--contrast-border) !important; } body.contrast-mode .form-select:not(#canvasPage):not(#canvasPage *), body.contrast-mode select:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface-alt) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; } body.contrast-mode .form-select option:not(#canvasPage):not(#canvasPage *), body.contrast-mode select option:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; } body.contrast-mode .form-select option:checked:not(#canvasPage):not(#canvasPage *), body.contrast-mode select option:checked:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-link) !important; background-image: none !important; color: #000000 !important; } body.contrast-mode .form-select option:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode select option:hover:not(#canvasPage):not(#canvasPage *) { background-color: rgba(255, 213, 79, 0.2) !important; color: var(--contrast-text) !important; } body.contrast-mode #bottom-dock:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; border-top: 2px solid var(--contrast-border) !important; box-shadow: none !important; } body.contrast-mode #topbar:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; border-bottom: 2px solid var(--contrast-border) !important; box-shadow: none !important; } body.contrast-mode #bottom-dock *:not(#canvasPage):not(#canvasPage *), body.contrast-mode #topbar *:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; } body.contrast-mode .settings-card:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; box-shadow: none !important; } body.contrast-mode #reader-settings .btn-close:not(#canvasPage):not(#canvasPage *) { background-color: transparent !important; border-color: var(--contrast-border) !important; filter: invert(1) !important; } body.contrast-mode #reader-settings .btn-close:hover:not(#canvasPage):not(#canvasPage *), body.contrast-mode #reader-settings .btn-close:focus:not(#canvasPage):not(#canvasPage *) { background-color: rgba(255, 213, 79, 0.2) !important; } body.contrast-mode .sg-title:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-link) !important; } body.contrast-mode .sg-container:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; box-shadow: none !important; } body.contrast-mode .sg-container.bg-white:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; } body.contrast-mode [class*="border-purple"]:not(#canvasPage):not(#canvasPage *) { border-color: var(--contrast-border) !important; } body.contrast-mode .card-title-header:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; box-shadow: none !important; border-bottom: 2px solid var(--contrast-border) !important; } body.contrast-mode .card-body-dropdown .kid-dates:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border: 1px solid var(--contrast-border) !important; } body.contrast-mode #detailsModal h6:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-link) !important; } body.contrast-mode #detailsModal:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; } body.contrast-mode .bncc-chip:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-link) !important; color: #000000 !important; border-color: var(--contrast-link) !important; box-shadow: none !important; } body.contrast-mode .bncc-chip .bncc-chip-text:not(#canvasPage):not(#canvasPage *) { color: #000000 !important; } body.contrast-mode .bncc-chip:hover:not(#canvasPage):not(#canvasPage *) { background-color: #ffeb3b !important; box-shadow: none !important; } body.contrast-mode .slot.empty:not(#canvasPage):not(#canvasPage *) { background: repeating-linear-gradient(135deg, var(--contrast-link) 0 8px, #ffeb3b 8px 16px) !important; border-color: var(--contrast-border) !important; color: var(--contrast-text) !important; } body.contrast-mode .slot.empty .missing:not(#canvasPage):not(#canvasPage *) { color: #000000 !important; } body.contrast-mode .sidebar-menu li.active > a:not(#canvasPage):not(#canvasPage *), body.contrast-mode .navbar-nav li.active > a:not(#canvasPage):not(#canvasPage *), body.contrast-mode .navbar-nav li.menu_has_children.active > a:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-link) !important; } body.contrast-mode .coin-pill:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-link) !important; color: #000000 !important; border-color: var(--contrast-link) !important; } body.contrast-mode .quest-container:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border: 2px solid var(--contrast-border) !important; box-shadow: none !important; } body.contrast-mode .container.mt-5.quest-container:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; } body.contrast-mode .text-center.mb-4.quest-header:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; } body.contrast-mode .quest-header:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-link) !important; } body.contrast-mode .mt-4.parchment.p-3.border.rounded:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; } body.contrast-mode .parchment:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; } body.contrast-mode .note-item:not(#canvasPage):not(#canvasPage *), body.contrast-mode div.note-item:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; box-shadow: none !important; } body.contrast-mode .note-item *:not(#canvasPage):not(#canvasPage *), body.contrast-mode .note-item p:not(#canvasPage):not(#canvasPage *), body.contrast-mode .note-item span:not(#canvasPage):not(#canvasPage *), body.contrast-mode .note-item a:not(#canvasPage):not(#canvasPage *), body.contrast-mode .note-item .note-title:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; background: transparent !important; } body.contrast-mode .note-item[style]:not(#canvasPage):not(#canvasPage *), body.contrast-mode div.note-item[style]:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; } body.contrast-mode .choices__inner:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface-alt) !important; border-color: var(--contrast-border) !important; } body.contrast-mode .choices__item:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; background-color: var(--contrast-surface) !important; } body.contrast-mode .choices__item--choice:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; } body.contrast-mode .choices__item--choice.is-highlighted:not(#canvasPage):not(#canvasPage *), body.contrast-mode .choices__item--choice:hover:not(#canvasPage):not(#canvasPage *) { background-color: rgba(255, 213, 79, 0.2) !important; color: var(--contrast-text) !important; } body.contrast-mode .choices__item--choice.is-selected:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-link) !important; color: #000000 !important; } body.contrast-mode .choices__placeholder:not(#canvasPage):not(#canvasPage *) { color: var(--contrast-text) !important; } body.contrast-mode .choices__input:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface-alt) !important; color: var(--contrast-text) !important; border-color: var(--contrast-border) !important; } body.contrast-mode .choices__input::placeholder { color: var(--contrast-muted) !important; } body.contrast-mode .choices__list--dropdown:not(#canvasPage):not(#canvasPage *) { background-color: var(--contrast-surface) !important; border-color: var(--contrast-border) !important; }