<h3>Table key</h3>
<ul>
  <li>Green + star = no restrictions</li>
  <li>Yellow + caution sign = use with caution</li>
  <li>Red + hand = not recommended</li>
</ul>
<table id="results">
  <colgroup>
    <col />
    <col />
    <col />
    <col />
    <col />
    <col />
    <col />
    <col />
    <col />
    <col />
    <col />
    <col />
    <col />
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Testing Parameters</th>
      <th scope="col">Pattern 1<br>&lt;img&gt;</th>
      <th scope="col">Pattern 2<br>&lt;img&gt;</th>
      <th scope="col">Pattern 3<br>&lt;img&gt;</th>
      <th scope="col">Pattern 4<br>&lt;img&gt;</th>
      <th scope="col">Pattern 5<br>&lt;svg&gt;</th>
      <th scope="col">Pattern 6<br>&lt;svg&gt;</th>
      <th scope="col">Pattern 7<br>&lt;svg&gt;</th>
      <th scope="col">Pattern 8<br>&lt;svg&gt;</th>
      <th scope="col">Pattern 9<br>&lt;svg&gt;</th>
      <th scope="col">Pattern 10<br>&lt;svg&gt;</th>
      <th scope="col">Pattern 11<br>&lt;svg&gt;</th>
      <th scope="col">Pattern 12<br>&lt;svg&gt;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" class="odd-row">
        <h4>Desktop: <br>macOS + Safari + VoiceOver</h4><br><em>(macOS v10 + Safari v14)<br><br>*recommended combination for VO on desktop*</em>
      </th>
      <td class="stop" aria-label="not recommended">
        <em>not focusable</em><br><br><i class="fas fa-hand-paper">
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="stop" aria-label="not recommended">
        <em>image detected, but missing an alt description</em><br><br><i class="fas fa-hand-paper"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say?<br><br><em>&lt;text&gt; ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say?<br><br><em>&lt;desc&gt; ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say?<br><br><em>&lt;desc&gt; ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
    </tr>
    <tr>
      <th scope="row" class="even-row">
        <h4>Desktop: <br>macOS + Chrome + VoiceOver</h4><br><em>(macOS v10 + Chrome v90)</em>
      </th>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="stop" aria-label="not recommended">
        To get missing image descriptions, open the context menu<br><br><em>image detected, but missing alt description</em><br><br><i class="fas fa-hand-paper">
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say?<br><br><em>&lt;text&gt; ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say?<br><br><em>&lt;desc&gt; ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say?<br><br><em>&lt;desc&gt; ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
    </tr>
    <tr>
      <th scope="row" class="odd-row">
        <h4>Desktop: <br>macOS + Firefox + VoiceOver</h4><br><em>(macOS v10 + Firefox v88)</em>
      </th>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="stop" aria-label="not recommended">
        <em>image detected, but missing alt description</em><br><br><i class="fas fa-hand-paper">
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say?<br><br><em>&lt;text&gt; ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say?<br><br><em>&lt;desc&gt; ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say?<br><br><em>&lt;desc&gt; ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
    </tr>
    <tr>
      <th scope="row" class="even-row">
        <h4>Desktop: <br>macOS + Edge + VoiceOver</h4><br><em>(macOS v10 + Edge v90)</em>
      </th>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="stop" aria-label="not recommended">
        <em>image detected, but missing alt description</em><br><br><i class="fas fa-hand-paper">
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say?<br><br><em>&lt;text&gt; ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say?<br><br><em>&lt;desc&gt; ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say?<br><br><em>&lt;desc&gt; ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
    </tr>
    <tr>
      <th scope="row" class="odd-row">
        <h4>Desktop: <br>Windows + Chrome + NVDA</h4><br><em>(Windows 10 + Chrome v71 + NVDA v2019)<br><br>*recommended combination for NVDA on desktop*</em>
      </th>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="stop" aria-label="not recommended">
        To get missing image descriptions, open the context menu.<br><br><em>image detected, but missing alt description</em><br><br><i class="fas fa-hand-paper">
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say? What does the fox say?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say?<br><br><em>&lt;text&gt; ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say?<br><br><em>&lt;desc&gt; ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say? What does the fox say? Will we ever know?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
    </tr>
    <tr>
      <th scope="row" class="even-row">
        <h4>Desktop: <br>Windows + Firefox + NVDA</h4><br><em>(Windows 10 + Firefox v63 + NVDA v2019)<br><br>*recommended combination for NVDA on desktop*</em>
      </th>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="stop" aria-label="not recommended">
        <em>not focusable</em><br><br><i class="fas fa-hand-paper">
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say?<br><br><em>&lt;text&gt; ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say? Will we ever know? Will we ever know?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say? What does the fox say? Will we ever know?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
    </tr>
    <tr>
      <th scope="row" class="odd-row">
        <h4>Desktop: <br>Windows + Edge + NVDA</h4><br><em>(Windows 10 + Edge v90 + NVDA v2019)</em>
      </th>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="stop" aria-label="not recommended">
        <em>not focusable</em><br><br><i class="fas fa-hand-paper">
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say? What does the fox say?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say?<br><br><em>&lt;text&gt; ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say?<br><br><em>&lt;desc&gt; ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say? What does the fox say? Will we ever know?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
    </tr>
    <tr>
      <th scope="row" class="even-row">
        <h4>Mobile: <br>iOS + Safari + VoiceOver</h4><br><em>(iOS v14 + Safari v14 + VoiceOver on an iPhone XR)<br><br>*recommended combination for VO on mobile*</em>
      </th>
      <td class="stop" aria-label="not recommended">
        <em>not focusable</em><br><br><i class="fas fa-hand-paper">
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say? What does the fox say?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="stop" aria-label="not recommended">
        <em>image detected, but missing alt description</em><br><br><i class="fas fa-hand-paper">
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say?<br><br><em>&lt;text&gt; ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say? Will we ever know? Will we ever know?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say? What does the fox say? Will we ever know?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
    </tr>
    <tr>
      <th scope="row" class="odd-row">
        <h4>Mobile: <br>iOS + Chrome + VoiceOver</h4><br><em>(iOS v14 + Chrome v87 + VoiceOver on an iPhone XR)</em>
      </th>
      <td class="stop" aria-label="not recommended">
        <em>not focusable</em><br><br><i class="fas fa-hand-paper">
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say? What does the fox say?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="stop" aria-label="not recommended">
        <em>image detected, but missing alt description</em><br><br><i class="fas fa-hand-paper">
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say?<br><br><em>&lt;text&gt; ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say? Will we ever know? Will we ever know?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say? What does the fox say? Will we ever know?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
    </tr>
    <tr>
      <th scope="row" class="even-row">
        <h4>Mobile: <br>Android + Chrome + Talkback</h4><br><em>(Android v12 + Chrome v90 + TalkBack v9 on a Samsung Galaxy S9 and Google Pixel 10)<br><br>*recommended combination for TalkBack on mobile*</em>
      </th>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say? What does the fox say?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="stop" aria-label="not recommended">
        <em>image detected, but missing an alt description</em><br><br><i class="fas fa-hand-paper">
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say? What does the fox say?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say?<br><br><em>&lt;text&gt; ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say?<br><br><em>&lt;desc&gt; ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say? What does the fox say? Will we ever know?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
    </tr>
    <tr>
      <th scope="row" class="odd-row">
        <h4>Mobile: <br>Android + Firefox + Talkback</h4><br><em>(Android v12 + Firefox v88 + TalkBack v9 on a Samsung Galaxy S9 and Google Pixel 10)</em>
      </th>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say? What does the fox say?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say?<br><br><em>image not fully discoverable</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="go" aria-label="no restrictions">
        What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say? Will we ever know? Will we ever know?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
      <td class="caution" aria-label="use with caution">
        What does the fox say? What does the fox say? Will we ever know?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
      </td>
    </tr>
  </tbody>
</table>
</div>
</div>

body {
  font-family: "Open Sans", sans-serif;
  margin: 2rem;
}

h4 {
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  color: red;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  max-width: 90%;
  margin: 0 auto;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 2rem;
  text-align: center;
}

code {
  background-color: #444444;
  color: #ffffff;
  border-radius: 0.3rem;
  padding: 4px 5px 5px;
  white-space: nowrap;
  line-height: 2;
}

.fas {
  text-align: center;
  width: 100%;
  font-size: 30px;
}

p {
  clear: both;
}

table {
  border-collapse: collapse;
  margin: 1rem;
}

col {
  border: 1px solid #444444;
}

tr {
  border-bottom: 1px solid #444444;
}

thead th {
  padding: 1rem;
  background-color: #444444;
  border-right: 1px solid #ffffff;
  color: #ffffff;
  min-width: 80px;
}

thead th:last-child {
  border-right: none;
}

td,
tbody th {
  padding: 1rem;
  text-align: left;
  vertical-align: top;
}

.odd-row {
  background: #c1c1c1;
}

.even-row {
  background: #eeeeee;
}

.go {
  background: #008000;
  color: #ffffff;
}

.caution {
  background: #f6d100;
}

.stop {
  background: #d40000;
  color: #ffffff;
}

/* Lightbulb colors */
.fox {
  width: 100%;
}

.lightblue {
  fill: CornflowerBlue;
}

.darkblue {
  fill: RoyalBlue;
}

.lightgreen {
  fill: LightGreen;
}

.darkgreen {
  fill: MediumSeaGreen;
}

.lightpurple {
  fill: MediumSlateBlue;
}

.darkpurple {
  fill: DarkSlateBlue;
}

.lightpink {
  fill: LightPink;
}

.darkpink {
  fill: PaleVioletRed;
}

.lightturq {
  fill: PaleTurquoise;
}

.darkturq {
  fill: MediumTurquoise;
}

.lightorchid {
  fill: Orchid;
}

.darkorchid {
  fill: MediumOrchid;
}

.lightorange {
  fill: LightSalmon;
}

.darkorange {
  fill: Tomato;
}

.lightred {
  fill: Crimson;
}

.darkred {
  fill: DarkRed;
}