| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>ISO 10993 Part 17 — E&L RA</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| </head> |
| <body class="bg-slate-50 text-slate-800"> |
| <header class="max-w-6xl mx-auto px-4 py-6 flex items-center justify-between"> |
| <h1 class="text-2xl font-bold">ISO 10993 Part 17</h1> |
| <nav class="space-x-4 text-sm"> |
| <a href="/elra/" class="underline hover:no-underline">← Back to E&L RA</a> |
| <a href="/" class="underline hover:no-underline">Home</a> |
| </nav> |
| </header> |
|
|
| <main class="max-w-6xl mx-auto px-4 pb-16"> |
| |
| <section class="rounded-xl border border-slate-200 bg-white p-4 md:p-6 shadow-sm"> |
| |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ISO 10993-17:2023 | Interactive Technical Guide</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| html { |
| scroll-behavior: smooth; |
| } |
| body { |
| font-family: 'Inter', sans-serif; |
| } |
| .section-card { |
| background-color: white; |
| border-radius: 1rem; |
| padding: 2rem; |
| margin-bottom: 2rem; |
| box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); |
| border: 1px solid #e5e7eb; |
| } |
| .calculator-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| gap: 1.5rem; |
| } |
| .form-input { |
| width: 100%; |
| padding: 0.5rem 0.75rem; |
| border: 1px solid #d1d5db; |
| border-radius: 0.5rem; |
| transition: border-color 0.2s, box-shadow 0.2s; |
| } |
| .form-input:focus { |
| outline: none; |
| border-color: #3b82f6; |
| box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4); |
| } |
| .result-box { |
| background-color: #f3f4f6; |
| padding: 1rem; |
| border-radius: 0.75rem; |
| margin-top: 1rem; |
| font-weight: 600; |
| border: 1px solid #e5e7eb; |
| } |
| |
| .flowchart-step { |
| position: relative; |
| padding: 1.5rem; |
| border: 2px solid #e5e7eb; |
| border-radius: 0.75rem; |
| text-align: center; |
| background-color: #fafafa; |
| transition: all 0.2s ease-in-out; |
| } |
| .flowchart-arrow { |
| font-size: 2rem; |
| color: #9ca3af; |
| } |
| </style> |
|
|
| <div class="bg-slate-50 text-slate-800"> |
| </div> |
|
|
| <div class="w-full max-w-5xl mx-auto p-4 sm:p-6 lg:p-8"> |
| |
| <header class="text-center mb-10"> |
| <h1 class="text-3xl sm:text-4xl font-bold text-sky-800">ISO 10993-17:2023 Technical Guide</h1> |
| <p class="text-slate-500 mt-2 text-lg">An interactive tool for exploring the toxicological risk assessment framework.</p> |
| </header> |
|
|
| |
| <main> |
| |
| <section id="tra-process" class="section-card"> |
| <h2 class="text-2xl font-bold text-slate-700 mb-6">The 3-Step Toxicological Risk Assessment (TRA) Process</h2> |
| <div class="flex flex-col md:flex-row items-center justify-between gap-4"> |
| |
| <div class="flowchart-step flex-1 w-full"> |
| <span class="absolute -top-3 bg-sky-600 text-white text-sm font-bold px-3 py-1 rounded-full">Step 1</span> |
| <h3 class="text-lg font-semibold mb-2">Hazard Identification</h3> |
| <p class="text-sm text-slate-600">Identify all chemical constituents from ISO 10993-18 and apply the TSL to screen out low-risk substances.</p> |
| </div> |
| <div class="flowchart-arrow transform md:rotate-0 rotate-90">→</div> |
| |
| <div class="flowchart-step flex-1 w-full"> |
| <span class="absolute -top-3 bg-sky-600 text-white text-sm font-bold px-3 py-1 rounded-full">Step 2</span> |
| <h3 class="text-lg font-semibold mb-2">Risk Assessment</h3> |
| <p class="text-sm text-slate-600">For remaining constituents, derive a safety threshold (TI/TCL) and calculate the worst-case patient exposure (EED).</p> |
| </div> |
| <div class="flowchart-arrow transform md:rotate-0 rotate-90">→</div> |
| |
| <div class="flowchart-step flex-1 w-full"> |
| <span class="absolute -top-3 bg-sky-600 text-white text-sm font-bold px-3 py-1 rounded-full">Step 3</span> |
| <h3 class="text-lg font-semibold mb-2">Risk Evaluation</h3> |
| <p class="text-sm text-slate-600">Compare the exposure (EED) to the safety threshold (TI) by calculating the Margin of Safety (MoS).</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="calculators" class="section-card"> |
| <h2 class="text-2xl font-bold text-slate-700 mb-6">The Toxicologist's Toolbox: Interactive Calculators</h2> |
| <div class="calculator-grid"> |
| |
| |
| <div class="section-card p-6"> |
| <h3 class="text-xl font-bold text-sky-700 mb-4">Toxicological Screening Limit (TSL)</h3> |
| <p class="text-sm text-slate-500 mb-4">Use the TSL to quickly screen out constituents that pose negligible risk. Enter the total quantity found in your chemical analysis.</p> |
| <div> |
| <label for="tsl-tq" class="block text-sm font-medium text-slate-700 mb-1">Total Quantity (TQ) (µg)</label> |
| <input type="number" id="tsl-tq" class="form-input" placeholder="e.g., 500"> |
| </div> |
| <div class="mt-4"> |
| <label for="tsl-duration" class="block text-sm font-medium text-slate-700 mb-1">Contact Duration</label> |
| <select id="tsl-duration" class="form-input"> |
| <option value="120">Limited / Prolonged (≤ 30 days)</option> |
| <option value="600">Long-term (> 30 days)</option> |
| </select> |
| </div> |
| <div id="tsl-result" class="result-box text-center">Enter a TQ value to see the result.</div> |
| </div> |
|
|
| |
| <div class="section-card p-6"> |
| <h3 class="text-xl font-bold text-sky-700 mb-4">Tolerable Intake (TI)</h3> |
| <p class="text-sm text-slate-500 mb-4">Derive the TI by applying Uncertainty Factors (UFs) to a Point of Departure (POD), such as a NOAEL.</p> |
| <div> |
| <label for="ti-pod" class="block text-sm font-medium text-slate-700 mb-1">Point of Departure (POD) (mg/kg/day)</label> |
| <input type="number" id="ti-pod" class="form-input" placeholder="e.g., 10"> |
| </div> |
| <div class="mt-4"> |
| <label class="block text-sm font-medium text-slate-700 mb-2">Select Uncertainty Factors (UFs):</label> |
| <div class="space-y-2"> |
| <label class="flex items-center"><input type="checkbox" data-uf="10" class="ti-uf h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"> <span class="ml-2">Interspecies (10x)</span></label> |
| <label class="flex items-center"><input type="checkbox" data-uf="10" class="ti-uf h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"> <span class="ml-2">Intraspecies (10x)</span></label> |
| <label class="flex items-center"><input type="checkbox" data-uf="3" class="ti-uf h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"> <span class="ml-2">Sensitive Pediatric (3x)</span></label> |
| <label class="flex items-center"><input type="checkbox" data-uf="10" class="ti-uf h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"> <span class="ml-2">Data Quality / Other (10x)</span></label> |
| </div> |
| </div> |
| <div id="ti-result" class="result-box text-center">Enter POD and select UFs.</div> |
| </div> |
| |
| |
| <div class="section-card p-6"> |
| <h3 class="text-xl font-bold text-sky-700 mb-4">Worst-Case Est. Exposure Dose (EED)</h3> |
| <p class="text-sm text-slate-500 mb-4">Calculate the max patient exposure dose based on analytical data, assuming 100% release.</p> |
| <div> |
| <label for="eed-tq" class="block text-sm font-medium text-slate-700 mb-1">Total Quantity (TQ) (µg)</label> |
| <input type="number" id="eed-tq" class="form-input" placeholder="e.g., 2000"> |
| </div> |
| <div class="mt-4"> |
| <label for="eed-bw" class="block text-sm font-medium text-slate-700 mb-1">Patient Body Weight (kg)</label> |
| <input type="number" id="eed-bw" class="form-input" value="60"> |
| </div> |
| <div class="mt-4"> |
| <label for="eed-dr" class="block text-sm font-medium text-slate-700 mb-1">Assumed Release Duration (days)</label> |
| <input type="number" id="eed-dr" class="form-input" value="1" placeholder="e.g., 1 for worst-case"> |
| </div> |
| <div id="eed-result" class="result-box text-center">Enter required values.</div> |
| </div> |
|
|
| |
| <div class="section-card p-6 bg-sky-50 border-sky-200"> |
| <h3 class="text-xl font-bold text-sky-700 mb-4">Margin of Safety (MoS)</h3> |
| <p class="text-sm text-slate-500 mb-4">The final risk evaluation step. An MoS ≥ 1 indicates the toxicological risk is acceptable.</p> |
| <div> |
| <label for="mos-ti" class="block text-sm font-medium text-slate-700 mb-1">Tolerable Intake (TI) (µg/kg/day)</label> |
| <input type="number" id="mos-ti" class="form-input" placeholder="From TI calculation"> |
| </div> |
| <div class="mt-4"> |
| <label for="mos-eed" class="block text-sm font-medium text-slate-700 mb-1">Exposure Dose (EED) (µg/kg/day)</label> |
| <input type="number" id="mos-eed" class="form-input" placeholder="From EED calculation"> |
| </div> |
| <div id="mos-result" class="result-box text-center">Enter TI and EED.</div> |
| </div> |
| </div> |
| </section> |
| </main> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| |
| const tslTqInput = document.getElementById('tsl-tq'); |
| const tslDurationSelect = document.getElementById('tsl-duration'); |
| const tslResultEl = document.getElementById('tsl-result'); |
| |
| function calculateTsl() { |
| const tq = parseFloat(tslTqInput.value); |
| const limit = parseFloat(tslDurationSelect.value); |
| if (isNaN(tq)) { |
| tslResultEl.textContent = 'Enter a TQ value to see the result.'; |
| tslResultEl.className = 'result-box text-center'; |
| return; |
| } |
| |
| if (tq < limit) { |
| tslResultEl.textContent = `PASS: TQ (${tq} µg) is below the TSL of ${limit} µg. Risk is negligible.`; |
| tslResultEl.className = 'result-box text-center bg-green-100 text-green-800'; |
| } else { |
| tslResultEl.textContent = `FAIL: TQ (${tq} µg) exceeds the TSL of ${limit} µg. Full TRA required.`; |
| tslResultEl.className = 'result-box text-center bg-red-100 text-red-800'; |
| } |
| } |
| tslTqInput.addEventListener('input', calculateTsl); |
| tslDurationSelect.addEventListener('change', calculateTsl); |
| |
| |
| const tiPodInput = document.getElementById('ti-pod'); |
| const tiUfCheckboxes = document.querySelectorAll('.ti-uf'); |
| const tiResultEl = document.getElementById('ti-result'); |
| |
| function calculateTi() { |
| const pod = parseFloat(tiPodInput.value); |
| if (isNaN(pod)) { |
| tiResultEl.textContent = 'Enter POD and select UFs.'; |
| return; |
| } |
| |
| let totalUf = 1; |
| tiUfCheckboxes.forEach(box => { |
| if (box.checked) { |
| totalUf *= parseFloat(box.dataset.uf); |
| } |
| }); |
| |
| if (totalUf === 1) { |
| tiResultEl.textContent = 'Select at least one UF.'; |
| return; |
| } |
| |
| const ti = (pod * 1000) / totalUf; |
| tiResultEl.textContent = `TI = ${ti.toFixed(4)} µg/kg/day`; |
| document.getElementById('mos-ti').value = ti.toFixed(4); |
| calculateMos(); |
| } |
| tiPodInput.addEventListener('input', calculateTi); |
| tiUfCheckboxes.forEach(box => box.addEventListener('change', calculateTi)); |
| |
| |
| const eedTqInput = document.getElementById('eed-tq'); |
| const eedBwInput = document.getElementById('eed-bw'); |
| const eedDrInput = document.getElementById('eed-dr'); |
| const eedResultEl = document.getElementById('eed-result'); |
| |
| function calculateEed() { |
| const tq = parseFloat(eedTqInput.value); |
| const bw = parseFloat(eedBwInput.value); |
| const dr = parseFloat(eedDrInput.value); |
| |
| if (isNaN(tq) || isNaN(bw) || isNaN(dr) || bw <= 0 || dr <= 0) { |
| eedResultEl.textContent = 'Enter valid, positive values.'; |
| return; |
| } |
| |
| const eed = tq / (bw * dr); |
| eedResultEl.textContent = `EED = ${eed.toFixed(4)} µg/kg/day`; |
| document.getElementById('mos-eed').value = eed.toFixed(4); |
| calculateMos(); |
| } |
| [eedTqInput, eedBwInput, eedDrInput].forEach(el => el.addEventListener('input', calculateEed)); |
| |
| |
| const mosTiInput = document.getElementById('mos-ti'); |
| const mosEedInput = document.getElementById('mos-eed'); |
| const mosResultEl = document.getElementById('mos-result'); |
| |
| function calculateMos() { |
| const ti = parseFloat(mosTiInput.value); |
| const eed = parseFloat(mosEedInput.value); |
| |
| if (isNaN(ti) || isNaN(eed)) { |
| mosResultEl.textContent = 'Enter TI and EED.'; |
| mosResultEl.className = 'result-box text-center'; |
| return; |
| } |
| if (eed <= 0) { |
| mosResultEl.textContent = 'EED must be greater than zero.'; |
| mosResultEl.className = 'result-box text-center bg-yellow-100 text-yellow-800'; |
| return; |
| } |
| |
| const mos = ti / eed; |
| mosResultEl.textContent = `MoS = ${mos.toFixed(2)}`; |
| if (mos >= 1) { |
| mosResultEl.className = 'result-box text-center bg-green-100 text-green-800'; |
| } else { |
| mosResultEl.className = 'result-box text-center bg-red-100 text-red-800'; |
| } |
| } |
| [mosTiInput, mosEedInput].forEach(el => el.addEventListener('input', calculateMos)); |
| }); |
| </script> |
| |
| </section> |
| </main> |
| </body> |
| </html> |
