:root { --a11y-panel-width: 340px; --a11y-accent: #0b7a75; --a11y-accent-dark: #075c58; --a11y-bg: #ffffff; --a11y-text: #1f2937; --a11y-border: #d9e1e7; --a11y-shadow: 0 12px 35px rgba(0, 0, 0, .20); --a11y-radius: 16px; } #a11y-widget, #a11y-widget * { box-sizing: border-box; } #a11y-toggle { position: fixed; right: 20px; bottom: 20px; z-index: 2147483000; width: 58px; height: 58px; border: 0; border-radius: 50%; background: var(--a11y-accent); color: #fff; cursor: pointer; box-shadow: var(--a11y-shadow); display: inline-flex; align-items: center; justify-content: center; transition: transform .18s ease, background .18s ease; } #a11y-toggle:hover, #a11y-toggle:focus-visible { background: var(--a11y-accent-dark); transform: scale(1.05); } #a11y-toggle svg { width: 31px; height: 31px; fill: currentColor; } #a11y-panel { position: fixed; right: 20px; bottom: 90px; z-index: 2147483001; width: min(var(--a11y-panel-width), calc(100vw - 24px)); max-height: min(720px, calc(100vh - 120px)); overflow: auto; background: var(--a11y-bg); color: var(--a11y-text); border: 1px solid var(--a11y-border); border-radius: var(--a11y-radius); box-shadow: var(--a11y-shadow); font-family: Arial, Helvetica, sans-serif; line-height: 1.35; } #a11y-panel[hidden] { display: none !important; } .a11y-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; color: #fff; background: var(--a11y-accent); border-radius: var(--a11y-radius) var(--a11y-radius) 0 0; } .a11y-header h2 { margin: 0; font-size: 18px; color: inherit; } .a11y-close { width: 38px; height: 38px; border: 0; border-radius: 10px; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; font-size: 24px; line-height: 1; } .a11y-body { padding: 14px; } .a11y-status { min-height: 22px; margin: 0 0 10px; padding: 8px 10px; border-radius: 9px; background: #eef7f6; color: #174b48; font-size: 13px; } .a11y-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .a11y-action { min-height: 68px; padding: 10px 8px; border: 1px solid var(--a11y-border); border-radius: 12px; background: #fff; color: #1f2937; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; text-align: center; transition: border-color .18s ease, background .18s ease, transform .18s ease; } .a11y-action:hover, .a11y-action:focus-visible { border-color: var(--a11y-accent); background: #f3fbfa; } .a11y-action:active { transform: scale(.98); } .a11y-action[aria-pressed="true"] { color: #fff; background: var(--a11y-accent); border-color: var(--a11y-accent); } .a11y-wide { grid-column: 1 / -1; } .a11y-reset { color: #8a1f1f; border-color: #efc4c4; background: #fff8f8; } .a11y-footer { margin-top: 12px; font-size: 12px; color: #667085; } .a11y-skip-link { position: fixed; left: 12px; top: 12px; z-index: 2147483647; transform: translateY(-140%); padding: 10px 14px; background: #000; color: #fff !important; border-radius: 8px; text-decoration: none !important; } .a11y-skip-link:focus { transform: translateY(0); } /* Accessibility modes applied to */ html.a11y-font-large { font-size: 112.5% !important; } html.a11y-font-xlarge { font-size: 125% !important; } html.a11y-readable-font body, html.a11y-readable-font body *:not(code):not(pre):not(kbd):not(samp):not(.fa):not([class*="icon"]) { font-family: Arial, Helvetica, sans-serif !important; } html.a11y-letter-spacing body, html.a11y-letter-spacing body * { letter-spacing: .08em !important; word-spacing: .12em !important; line-height: 1.65 !important; } html.a11y-underline-links a, html.a11y-underline-links a * { text-decoration: underline !important; text-underline-offset: .15em !important; } html.a11y-highlight-links a { background: #ffeb3b !important; color: #000 !important; outline: 2px solid #000 !important; text-decoration: underline !important; } html.a11y-highlight-headings h1, html.a11y-highlight-headings h2, html.a11y-highlight-headings h3, html.a11y-highlight-headings h4, html.a11y-highlight-headings h5, html.a11y-highlight-headings h6 { background: #ffeb3b !important; color: #000 !important; outline: 2px solid #000 !important; } html.a11y-grayscale { filter: grayscale(100%); } html.a11y-high-contrast body { background: #000 !important; color: #fff !important; } html.a11y-high-contrast body *:not(img):not(video):not(svg):not(path) { background-color: #000 !important; color: #fff !important; border-color: #fff !important; } html.a11y-high-contrast a { color: #00ffff !important; } html.a11y-negative { filter: invert(100%) hue-rotate(180deg); } html.a11y-negative img, html.a11y-negative video, html.a11y-negative iframe, html.a11y-negative svg { filter: invert(100%) hue-rotate(180deg); } html.a11y-light-background body, html.a11y-light-background body *:not(img):not(video):not(svg):not(path) { background-color: #fff !important; color: #111 !important; border-color: #444 !important; } html.a11y-big-cursor, html.a11y-big-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M4 2v30l8-8 5 12 6-3-5-11h12z' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 4 2, auto !important; } html.a11y-stop-animations *, html.a11y-stop-animations *::before, html.a11y-stop-animations *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } html.a11y-focus-outline *:focus { outline: 4px solid #ffbf00 !important; outline-offset: 3px !important; } @media (max-width: 480px) { #a11y-toggle { right: 12px; bottom: 12px; } #a11y-panel { right: 12px; bottom: 82px; width: calc(100vw - 24px); max-height: calc(100vh - 100px); } } @media print { #a11y-widget, .a11y-skip-link { display: none !important; } }