const Components = `

<vue-template>

  <h1 class="display-6">Components</h1>

  <p class="my-5">
    CSS grid, breakpoints and components are build by Bootstrap and documented at
    <a href="https://getbootstrap.com/docs/5.3" target="_blank">getbootstrap.com/docs/5.3</a>.
    The original CSS received fixes and enhancements in <code>src/css/05-components-bootstrap.css</code>.
  </p>

  <hr class="my-6">

  <p class="docs-name mt-6 mb-4">JavaScript</p>

  <div class="row gy-4 justify-content-between">
    <div class="col-12 col-lg-auto">
      <a data-bs-toggle="modal" data-bs-target="#modal-demo">Open Modal</a>
    </div>
    <div class="col-12 col-lg-auto">
      <a data-bs-toggle="offcanvas" href="#offcanvas-nav">Open Left Offcanvas</a>
    </div>
    <div class="col-12 col-lg-auto">
      <a data-bs-toggle="offcanvas" href="#offcanvas-demo-right">Open Right Offcanvas</a>
    </div>
    <div class="col-12 col-lg-auto">
      <a data-bs-toggle="offcanvas" href="#offcanvas-demo-bottom-medication-dtb">Open Bottom Offcanvas</a>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Header</p>

  <div class="row gy-4">
    <div class="col-12">
      <header class="os-header" style="position: static;">
        <div class="container">
          <a class="logo">
            <img src="dist/img/logo.svg">
          </a>
          <nav>
            <ul>
              <li><a class="active">Dashboard</a></li>
              <li><a>Patienten</a></li>
              <li>
                <a class="dropdown-toggle" data-bs-toggle="dropdown">
                  Datenverwaltung
                </a>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li><a class="dropdown-item">Admins</a></li>
                  <li><a class="dropdown-item">Pflegeunternehmen</a></li>
                  <li><a class="dropdown-item">Ärzte</a></li>
                  <li><a class="dropdown-item">Blisterzentren</a></li>
                  <li><a class="dropdown-item">Lieferungen</a></li>
                </ul>
              </li>
              <li class="ms-auto">
                <div class="dropdown-toggle" data-bs-toggle="dropdown">
                  <div class="icon"><svg><use xlink:href="#user-01"></use></svg></div>
                </div>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li><div class="dropdown-item disabled">Max Mustermann<small>Patient</small></div></li>
                  <li><div class="dropdown-divider"></div></li>
                  <li><a class="dropdown-item">Dokumente</a></li>
                  <li><a class="dropdown-item">Abonnement</a></li>
                  <li><a class="dropdown-item active">Einstellungen</a></li>
                  <li><div class="dropdown-divider"></div></li>
                  <li><a class="dropdown-item">Abmelden</a></li>
                </ul>
              </li>
              <li class="ms-auto offcanvas-nav-toggle" data-bs-toggle="offcanvas" href="#offcanvas-nav">
                <div class="hamburger"></div>
              </li>
            </ul>
          </nav>
        </div>
      </header>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Inputs</p>

  <div class="row gy-4">
    <div class="col-12 col-lg-3">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" ">
        <label>Label</label>
      </div>
    </div>
    <div class="col-12 col-lg-3">
      <div class="form-floating">
        <input type="text" class="form-control is-valid" placeholder=" " value="Value">
        <label>Label</label>
        <p class="valid-feedback">Valid</p>
      </div>
    </div>
    <div class="col-12 col-lg-3">
      <div class="form-floating">
        <input type="text" class="form-control is-invalid" placeholder=" ">
        <label>Label</label>
        <p class="invalid-feedback">Invalid</p>
      </div>
    </div>
    <div class="col-12 col-lg-3">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" " disabled>
        <label>Disabled</label>
      </div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Selects</p>

  <div class="row gy-4">
    <div class="col-12 col-lg-3">
      <div class="form-floating">
        <select class="form-select">
          <option selected>Please select</option>
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </select>
        <label>Label</label>
      </div>
    </div>
    <div class="col-12 col-lg-3">
      <div class="form-floating">
        <select class="form-select is-valid">
          <option>Please select</option>
          <option selected>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </select>
        <label>Label</label>
        <p class="valid-feedback">Valid</p>
      </div>
    </div>
    <div class="col-12 col-lg-3">
      <div class="form-floating">
        <select class="form-select is-invalid">
          <option selected>Please select</option>
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </select>
        <label>Label</label>
        <p class="invalid-feedback">Invalid</p>
      </div>
    </div>
    <div class="col-12 col-lg-3">
      <div class="form-floating">
        <select class="form-select" disabled>
          <option selected>Please select</option>
        </select>
        <label>Disabled</label>
      </div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Checkboxes</p>

  <div class="row gy-4">
    <div class="col-12 col-lg-3">
      <div class="form-check">
        <input class="form-check-input" id="test-1" type="checkbox">
        <label class="form-check-label" for="test-1">
          Default state, single line
        </label>
      </div>
    </div>
    <div class="col-12 col-lg-3">
      <div class="form-check">
        <input class="form-check-input" id="test-2" type="checkbox" checked>
        <label class="form-check-label" for="test-2">
          Checked state, multi line, lorem ipsum dolor.
        </label>
      </div>
    </div>
    <div class="col-12 col-lg-3">
      <div class="form-check">
        <input class="form-check-input is-invalid" id="test-3" type="checkbox">
        <label class="form-check-label" for="test-3">
          Invalid state
        </label>
        <p class="invalid-feedback">
          You must do something here.
        </p>
      </div>
    </div>
    <div class="col-12 col-lg-3">
      <div class="form-check">
        <input class="form-check-input" id="test-4" type="checkbox" checked disabled>
        <label class="form-check-label" for="test-4">
          Disabled state
        </label>
      </div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Radios</p>

  <div class="row gy-4">
    <div class="col-12 col-lg-3">
      <div class="form-check">
        <input class="form-check-input" id="test-5" type="radio">
        <label class="form-check-label" for="test-5">
          Default state, single line
        </label>
      </div>
    </div>
    <div class="col-12 col-lg-3">
      <div class="form-check">
        <input class="form-check-input" id="test-6" type="radio" checked>
        <label class="form-check-label" for="test-6">
          Checked state, multi line, lorem ipsum dolor.
        </label>
      </div>
    </div>
    <div class="col-12 col-lg-3">
      <div class="form-check">
        <input class="form-check-input is-invalid" id="test-7" type="radio">
        <label class="form-check-label" for="test-7">
          Invalid state
        </label>
        <p class="invalid-feedback">
          You must do something here.
        </p>
      </div>
    </div>
    <div class="col-12 col-lg-3">
      <div class="form-check">
        <input class="form-check-input" id="test-8" type="radio" checked disabled>
        <label class="form-check-label" for="test-8">
          Disabled state
        </label>
      </div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Toggles</p>

  <div class="row gy-4">
    <div class="col-12 col-lg-6">
      <div class="form-check form-switch">
        <input class="form-check-input" id="test-9" type="checkbox" checked>
        <label class="form-check-label" for="test-9">Lorem ipsum dolor sit amet consectetur adipisicing elit.</label>
      </div>
    </div>
    <div class="col-12 col-lg-6">
      <div class="form-check form-switch">
        <input class="form-check-input" id="test-10" type="checkbox">
        <label class="form-check-label" for="test-10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat facilis vitae eius dolores sapiente.</label>
      </div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Buttons</p>

  <div class="row gy-4">
    <div class="col-auto">
      <button class="btn btn-sm btn-primary">button</button>
    </div>
    <div class="col-auto">
      <a class="btn btn-sm btn-primary">a</a>
    </div>
    <div class="col-auto">
      <input class="btn btn-sm btn-primary" type="button" value="input">
    </div>
    <div class="col-auto">
      <label class="btn btn-sm btn-primary">label</label>
    </div>
    <div class="col-auto">
      <button class="btn btn-sm btn-primary" disabled>button</button>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Buttons</p>

  <div class="row gy-4">
    <div class="col-12 col-lg-auto">
      <button class="btn btn-lg btn-primary">button</button>
    </div>
    <div class="col-12 col-lg-auto">
      <a class="btn btn-lg btn-primary">a</a>
    </div>
    <div class="col-12 col-lg-auto">
      <input class="btn btn-lg btn-primary" type="button" value="input">
    </div>
    <div class="col-12 col-lg-auto">
      <label class="btn btn-lg btn-primary">label</label>
    </div>
    <div class="col-12 col-lg-auto">
      <button class="btn btn-lg btn-primary" disabled>button</button>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Icon Buttons</p>

  <div class="row gy-4">
    <div class="col-12 col-lg-3">
      <a class="d-flex align-items-center">
        <div class="icon me-2"><svg><use xlink:href="#arrow-narrow-left"></use></svg></div>
        <p>Zurück</p>
      </a>
    </div>
    <div class="col-12 col-lg-3">
      <button class="btn-icon d-flex align-items-center">
        <div class="icon me-2"><svg><use xlink:href="#arrow-narrow-left"></use></svg></div>
        <p>Zurück</p>
      </button>
    </div>
    <div class="col-12 col-lg-3">
      <a class="d-flex align-items-center">
        <p>Alles ansehen</p>
        <div class="icon ms-2"><svg><use xlink:href="#arrow-narrow-right"></use></svg></div>
      </a>
    </div>
    <div class="col-12 col-lg-3">
      <a class="d-flex align-items-center">
        <div class="icon me-2">
          <svg><use xlink:href="#upload-cloud-02"></use></svg>
        </div>
        <p>Folgerezept bis 31.07.2024</p>
      </a>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Tables</p>

  <div class="row gy-4">
    <div class="col-12">
      <div class="table-scroll">
        <table class="table">
          <thead>
            <tr>
              <th><input type="checkbox"></th>
              <th>
                Head
                <div class="icon"><svg><use xlink:href="#chevron-selector-vertical"></use></svg></div>
              </th>
              <th>
                Head
                <div class="icon"><svg><use xlink:href="#chevron-selector-vertical"></use></svg></div>
              </th>
              <th>
                Head
                <div class="icon"><svg><use xlink:href="#chevron-selector-vertical"></use></svg></div>
              </th>
              <th>
                Head
                <div class="icon"><svg><use xlink:href="#chevron-selector-vertical"></use></svg></div>
                <div class="icon">
                  <svg><use xlink:href="#help-circle"></use></svg>
                </div>
              </th>
              <th>
                Head
                <div class="icon"><svg><use xlink:href="#chevron-selector-vertical"></use></svg></div>
                <div class="icon">
                  <svg><use xlink:href="#help-circle"></use></svg>
                </div>
              </th>
              <th>
                Head
                <div class="icon"><svg><use xlink:href="#chevron-selector-vertical"></use></svg></div>
              </th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="checkbox"></td>
              <td>1000</td>
              <td>Max Mustermann</td>
              <td>
                <div class="d-flex align-items-center">
                  <div class="donut" style="--percent: 25;"></div>
                  <p>25%</p>
                </div>
              </td>
              <td>
                <div class="d-flex align-items-center">
                  <div class="progress"><div class="progress-bar bg-danger" style="width: 20%;"></div></div>
                  <p>20% 100/200</p>
                </div>
              </td>
              <td>
                <span class="badge rounded-pill text-bg-danger"><div class="icon"><svg><use xlink:href="#package-x"></use></svg></div><span>Gefährdet</span></span>
              </td>
              <td>
                <a class="d-flex align-items-center"><div class="icon me-2"><svg><use xlink:href="#upload-cloud-02"></use></svg></div><p>Upload Link</p></a>
              </td>
              <td>
                <div class="d-flex align-items-center justify-content-end">
                  <a class="icon"><svg><use xlink:href="#pill"></use></svg></a>
                  <a class="icon dropdown-toggle" data-bs-toggle="dropdown"><svg><use xlink:href="#dots-vertical"></use></svg></a>
                  <ul class="dropdown-menu dropdown-menu-end"><li><a class="dropdown-item">Action</a></li><li><a class="dropdown-item">Action</a></li><li><a class="dropdown-item">Action</a></li></ul>
                </div>
              </td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>1000</td>
              <td>Max Mustermann</td>
              <td>
                <div class="d-flex align-items-center">
                  <div class="donut" style="--percent: 40;"></div>
                  <p>40%</p>
                </div>
              </td>
              <td>
                <div class="d-flex align-items-center">
                  <div class="progress"><div class="progress-bar bg-danger" style="width: 35%;"></div></div>
                  <p>35% 100/200</p>
                </div>
              </td>
              <td>
                <span class="badge rounded-pill text-bg-success"><div class="icon"><svg><use xlink:href="#package-check"></use></svg></div><span>Geplant</span></span>
              </td>
              <td>
                <a class="d-flex align-items-center"><div class="icon me-2"><svg><use xlink:href="#upload-cloud-02"></use></svg></div><p>Upload Link</p></a>
              </td>
              <td>
                <div class="d-flex align-items-center justify-content-end">
                  <a class="icon"><svg><use xlink:href="#pill"></use></svg></a>
                  <a class="icon dropdown-toggle" data-bs-toggle="dropdown"><svg><use xlink:href="#dots-vertical"></use></svg></a>
                  <ul class="dropdown-menu dropdown-menu-end"><li><a class="dropdown-item">Action</a></li><li><a class="dropdown-item">Action</a></li><li><a class="dropdown-item">Action</a></li></ul>
                </div>
              </td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>1000</td>
              <td>Max Mustermann</td>
              <td>
                <div class="d-flex align-items-center">
                  <div class="donut" style="--percent: 50;"></div>
                  <p>50%</p>
                </div>
              </td>
              <td>
                <div class="d-flex align-items-center">
                  <div class="progress"><div class="progress-bar bg-success" style="width: 50%;"></div></div>
                  <p>50% 100/200</p>
                </div>
              </td>
              <td>
                <span class="badge rounded-pill text-bg-secondary text-secondary"><div class="icon"><svg><use xlink:href="#package-check"></use></svg></div><span>Blimus</span></span>
              </td>
              <td>
                <a class="d-flex align-items-center"><div class="icon me-2"><svg><use xlink:href="#upload-cloud-02"></use></svg></div><p>Upload Link</p></a>
              </td>
              <td>
                <div class="d-flex align-items-center justify-content-end">
                  <a class="icon"><svg><use xlink:href="#pill"></use></svg></a>
                  <a class="icon dropdown-toggle" data-bs-toggle="dropdown"><svg><use xlink:href="#dots-vertical"></use></svg></a>
                  <ul class="dropdown-menu dropdown-menu-end"><li><a class="dropdown-item">Action</a></li><li><a class="dropdown-item">Action</a></li><li><a class="dropdown-item">Action</a></li></ul>
                </div>
              </td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>1000</td>
              <td>Max Mustermann</td>
              <td>
                <div class="d-flex align-items-center">
                  <div class="donut" style="--percent: 55;"></div>
                  <p>55%</p>
                </div>
              </td>
              <td>
                <div class="d-flex align-items-center">
                  <div class="progress"><div class="progress-bar bg-success" style="width: 50%;"></div></div>
                  <p>50% 100/200</p>
                </div>
              </td>
              <td>
                <span class="badge rounded-pill text-bg-warning"><div class="icon"><svg><use xlink:href="#package-search"></use></svg></div><span>Unbekannt</span></span>
              </td>
              <td>
                <a class="d-flex align-items-center"><div class="icon me-2"><svg><use xlink:href="#upload-cloud-02"></use></svg></div><p>Upload Link</p></a>
              </td>
              <td>
                <div class="d-flex align-items-center justify-content-end">
                  <a class="icon"><svg><use xlink:href="#pill"></use></svg></a>
                  <a class="icon dropdown-toggle" data-bs-toggle="dropdown"><svg><use xlink:href="#dots-vertical"></use></svg></a>
                  <ul class="dropdown-menu dropdown-menu-end"><li><a class="dropdown-item">Action</a></li><li><a class="dropdown-item">Action</a></li><li><a class="dropdown-item">Action</a></li></ul>
                </div>
              </td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>1000</td>
              <td>Max Mustermann</td>
              <td>
                <div class="d-flex align-items-center">
                  <div class="donut" style="--percent: 75;"></div>
                  <p>75%</p>
                </div>
              </td>
              <td>
                <div class="d-flex align-items-center">
                  <div class="progress"><div class="progress-bar bg-success" style="width: 75%;"></div></div>
                  <p>75% 100/200</p>
                </div>
              </td>
              <td>
                <span class="badge rounded-pill text-bg-hellomed"><div class="icon"><img src="dist/img/favicon-badge.svg"></div><span>Rezept-Autopilot</span></span>
              </td>
              <td>
                <a class="d-flex align-items-center"><div class="icon me-2"><svg><use xlink:href="#upload-cloud-02"></use></svg></div><p>Upload Link</p></a>
              </td>
              <td>
                <div class="d-flex align-items-center justify-content-end">
                  <a class="icon"><svg><use xlink:href="#pill"></use></svg></a>
                  <a class="icon dropdown-toggle" data-bs-toggle="dropdown"><svg><use xlink:href="#dots-vertical"></use></svg></a>
                  <ul class="dropdown-menu dropdown-menu-end"><li><a class="dropdown-item">Action</a></li><li><a class="dropdown-item">Action</a></li><li><a class="dropdown-item">Action</a></li></ul>
                </div>
              </td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>1000</td>
              <td>Max Mustermann</td>
              <td>
                <div class="d-flex align-items-center">
                  <div class="donut" style="--percent: 90;"></div>
                  <p>90%</p>
                </div>
              </td>
              <td>
                <div class="d-flex align-items-center">
                  <div class="progress"><div class="progress-bar bg-success" style="width: 100%;"></div></div>
                  <p>99% 100/200</p>
                </div>
              </td>
              <td>
                <span class="empty">–</span>
              </td>
              <td>
                <span class="badge rounded-pill text-bg-secondary"><div class="icon"><svg><use xlink:href="#loading-01"></use></svg></div><span>wird geprüft</span></span>
              </td>
              <td>
                <div class="d-flex align-items-center justify-content-end">
                  <a class="icon"><svg><use xlink:href="#pill"></use></svg></a>
                  <a class="icon dropdown-toggle" data-bs-toggle="dropdown"><svg><use xlink:href="#dots-vertical"></use></svg></a>
                  <ul class="dropdown-menu dropdown-menu-end"><li><a class="dropdown-item">Action</a></li><li><a class="dropdown-item">Action</a></li><li><a class="dropdown-item">Action</a></li></ul>
                </div>
              </td>
            </tr>
            <tr class="table-secondary">
              <td><input type="checkbox" checked></td>
              <td>1000</td>
              <td>Max Mustermann</td>
              <td>
                <div class="d-flex align-items-center">
                  <div class="donut" style="--percent: 100;"></div>
                  <p>100%</p>
                </div>
              </td>
              <td>
                <div class="d-flex align-items-center">
                  <div class="progress"><div class="progress-bar bg-success" style="width: 100%;"></div></div>
                  <p>100%</p>
                </div>
              </td>
              <td></td>
              <td></td>
              <td>
                <div class="d-flex align-items-center justify-content-end">
                  <a class="icon"><svg><use xlink:href="#pill"></use></svg></a>
                  <a class="icon dropdown-toggle" data-bs-toggle="dropdown"><svg><use xlink:href="#dots-vertical"></use></svg></a>
                  <ul class="dropdown-menu dropdown-menu-end"><li><a class="dropdown-item">Action</a></li><li><a class="dropdown-item">Action</a></li><li><a class="dropdown-item">Action</a></li></ul>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Paginations</p>

  <div class="row gy-4">
    <div class="col-12">
      <ul class="pagination justify-content-center">
        <li class="page-item"><a class="page-link">&laquo;</a></li>
        <li class="page-item active"><a class="page-link">1</a></li>
        <li class="page-item"><a class="page-link">2</a></li>
        <li class="page-item"><a class="page-link">3</a></li>
        <li class="page-item"><a class="page-link">&raquo;</a></li>
      </ul>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Standard Badges</p>

  <div class="row gy-4">
    <div class="col-12">
      <div class="docs-badges">
        <span class="badge rounded-pill text-bg-primary"><div class="icon"><svg><use xlink:href="#check"></use></svg></div><span>Primary</span></span>
        <span class="badge rounded-pill text-bg-secondary"><div class="icon"><svg><use xlink:href="#check"></use></svg></div><span>Secondary</span></span>
        <span class="badge rounded-pill text-bg-success"><div class="icon"><svg><use xlink:href="#check"></use></svg></div><span>Success</span></span>
        <span class="badge rounded-pill text-bg-warning"><div class="icon"><svg><use xlink:href="#check"></use></svg></div><span>Warning</span></span>
        <span class="badge rounded-pill text-bg-warning-2"><div class="icon"><svg><use xlink:href="#check"></use></svg></div><span>Warning 2</span></span>
        <span class="badge rounded-pill text-bg-danger"><div class="icon"><svg><use xlink:href="#check"></use></svg></div><span>Danger</span></span>
        <span class="badge rounded-pill text-bg-info"><div class="icon"><svg><use xlink:href="#check"></use></svg></div><span>Info</span></span>
        <span class="badge rounded-pill text-bg-light"><div class="icon"><svg><use xlink:href="#check"></use></svg></div><span>Light</span></span>
      </div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Small Badges</p>

  <div class="row gy-4">
    <div class="col-12 col-lg-4">
      <div class="docs-badges">
        <span class="badge is-small rounded-pill text-bg-secondary"><div class="icon"><svg><use xlink:href="#repeat-01"></use></svg></div></span>
        <span class="badge is-small rounded-pill text-bg-success"><div class="icon"><svg><use xlink:href="#repeat-01"></use></svg></div></span>
        <span class="badge is-small rounded-pill text-bg-warning"><div class="icon"><svg><use xlink:href="#repeat-01"></use></svg></div></span>
        <span class="badge is-small rounded-pill text-bg-warning-2"><div class="icon"><svg><use xlink:href="#repeat-01"></use></svg></div></span>
        <span class="badge is-small rounded-pill text-bg-danger"><div class="icon"><svg><use xlink:href="#repeat-01"></use></svg></div></span>
      </div>
    </div>
    <div class="col-12 col-lg-4">
      <div class="docs-badges">
        <span class="badge is-small rounded-pill text-bg-warning"><div class="icon"><svg><use xlink:href="#download-cloud-01"></use></svg></div></span>
        <span class="badge is-small rounded-pill text-bg-warning-2"><div class="icon"><svg><use xlink:href="#download-cloud-01"></use></svg></div></span>
        <span class="badge is-small rounded-pill text-bg-danger"><div class="icon"><svg><use xlink:href="#download-cloud-01"></use></svg></div></span>
      </div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Progress Donuts</p>

  <div class="row gy-4">
    <div class="col-12 col-lg-3">
      <div class="d-flex align-items-center justify-content-between p-4 bg-white">
        <div class="donut" style="--percent: 0;"></div>
        <div class="donut" style="--percent: 25;"></div>
        <div class="donut" style="--percent: 50;"></div>
        <div class="donut" style="--percent: 75;"></div>
        <div class="donut" style="--percent: 100;"></div>
      </div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Progress Bars</p>

  <div class="row gy-4">
    <div class="col-12 col-lg-3">
      <div class="progress"><div class="progress-bar bg-success" style="width: 50%;"></div></div>
    </div>
    <div class="col-12 col-lg-3">
      <div class="progress"><div class="progress-bar bg-danger" style="width: 50%;"></div></div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Alerts</p>

  <div class="row gy-4">
    <div class="col-12 col-lg-4">
      <div class="alert alert-primary">A simple primary alert</div>
    </div>
    <div class="col-12 col-lg-4">
      <div class="alert alert-secondary">A simple secondary alert</div>
    </div>
    <div class="col-12 col-lg-4">
      <div class="alert alert-success">A simple success alert</div>
    </div>
    <div class="col-12 col-lg-4">
      <div class="alert alert-danger">A simple danger alert</div>
    </div>
    <div class="col-12 col-lg-4">
      <div class="alert alert-warning">A simple warning alert</div>
    </div>
    <div class="col-12 col-lg-4">
      <div class="alert alert-info">A simple info alert</div>
    </div>
    <div class="col-12 col-lg-4">
      <div class="alert alert-light">A simple light alert</div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Input Groups</p>

  <div class="row gy-4">
    <div class="col-12 col-lg-3">
      <div class="input-group">
        <span class="input-group-text">-</span>
        <input type="text" class="form-control text-center" value="10">
        <span class="input-group-text">+</span>
      </div>
    </div>
    <div class="col-12 col-lg-3">
      <div class="input-group">
        <span class="input-group-text disabled">-</span>
        <input type="text" class="form-control text-center" value="10">
        <span class="input-group-text">+</span>
      </div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Button Groups</p>

  <div class="row gy-4">
    <div class="col-12 col-lg-6">
      <div class="btn-group">
        <a class="btn btn-outline-primary active">Filter</a>
        <a class="btn btn-outline-primary">Filter</a>
        <a class="btn btn-outline-primary">Filter</a>
        <a class="btn btn-outline-primary">Filter</a>
        <a class="btn btn-outline-primary">Filter</a>
      </div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Dropdowns</p>

  <div class="row gy-4">
    <div class="col-12 col-lg-4">
      <ul class="dropdown-menu dropdown-menu-end" style="position: static; display: block;">
        <li><div class="dropdown-item disabled">Max Mustermann<small>Admin</small></div></li>
        <li><div class="dropdown-divider"></div></li>
        <li><a class="dropdown-item active">Lorem Ipsum</a></li>
        <li><a class="dropdown-item">Lorem Ipsum</a></li>
        <li><a class="dropdown-item">Lorem Ipsum</a></li>
        <li><div class="dropdown-divider"></div></li>
        <li><a class="dropdown-item">Lorem Ipsum</a></li>
        <li><a class="dropdown-item">Lorem Ipsum</a></li>
        <li><a class="dropdown-item">Lorem Ipsum</a></li>
      </ul>
    </div>
    <div class="col-12 col-lg-4">
      <ul class="dropdown-menu dropdown-menu-end" style="position: static; display: block;">
        <li><div class="dropdown-item disabled">Max Mustermann<small>Patient</small></div></li>
        <li><div class="dropdown-divider"></div></li>
        <li><a class="dropdown-item active">Lorem Ipsum</a></li>
        <li><a class="dropdown-item">Lorem Ipsum</a></li>
        <li><a class="dropdown-item">Lorem Ipsum</a></li>
        <li><div class="dropdown-divider"></div></li>
        <li><a class="dropdown-item">Abmelden</a></li>
      </ul>
    </div>
    <div class="col-12 col-lg-4">
      <ul class="dropdown-menu dropdown-menu-end" style="position: static; display: block;">
        <li><a class="dropdown-item">Lorem Ipsum</a></li>
        <li><a class="dropdown-item">Lorem Ipsum</a></li>
        <li><a class="dropdown-item">Lorem Ipsum</a></li>
      </ul>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Cards</p>

  <div class="row">
    <div class="col-12 col-lg-6">
      <div class="card">
        <div class="card-header">
          Card Header
        </div>
        <div class="card-body">
          Card Body
        </div>
      </div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Toasts</p>

  <div class="row gy-4">
    <div class="col-12 col-lg-4">
      <div class="toast show">
        <div class="toast-header">
          <strong class="me-auto">Toast</strong>
          <small>11 mins ago</small>
          <a class="btn-close"></a>
        </div>
        <div class="toast-body">
          Hello, world! This is a toast message.
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-4">
      <div class="toast show text-bg-success">
        <div class="toast-header text-bg-success">
          <strong class="me-auto">Toast</strong>
          <small>11 mins ago</small>
          <a class="btn-close"></a>
        </div>
        <div class="toast-body">
          Hello, world! This is a toast message.
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-4">
      <div class="toast show text-bg-danger">
        <div class="toast-header text-bg-danger">
          <strong class="me-auto">Toast</strong>
          <small>11 mins ago</small>
          <a class="btn-close"></a>
        </div>
        <div class="toast-body">
          Hello, world! This is a toast message.
        </div>
      </div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Carmode Accordion</p>

  <div class="row gy-4">
    <div class="col-12 col-lg-6">
      <div class="accordion accordion-flush accordion-carmode" id="accordion-carmode">
        <div class="accordion-item">
          <div class="accordion-header">
            <div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordion-carmode-1">
              <p>Lorem Ipsum</p>
            </div>
          </div>
          <div class="accordion-collapse collapse show" data-bs-parent="#accordion-carmode" id="accordion-carmode-1">
            <div class="accordion-body">
              <a class="btn-carmode">Lorem Ipsum</a>
              <a class="btn-carmode">Lorem Ipsum</a>
              <a class="btn-carmode">Lorem Ipsum</a>
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <div class="accordion-header">
            <div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordion-carmode-2">
              <p>Lorem Ipsum</p>
            </div>
          </div>
          <div class="accordion-collapse collapse" data-bs-parent="#accordion-carmode" id="accordion-carmode-2">
            <div class="accordion-body">
              <a class="btn-carmode">Lorem Ipsum</a>
              <a class="btn-carmode">Lorem Ipsum</a>
              <a class="btn-carmode">Lorem Ipsum</a>
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <div class="accordion-header">
            <div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordion-carmode-3">
              <p>Lorem Ipsum</p>
            </div>
          </div>
          <div class="accordion-collapse collapse" data-bs-parent="#accordion-carmode" id="accordion-carmode-3">
            <div class="accordion-body">
              <a class="btn-carmode">Lorem Ipsum</a>
              <a class="btn-carmode">Lorem Ipsum</a>
              <a class="btn-carmode">Lorem Ipsum</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Admin Filters</p>

  <br>

  <div class="os-pagetitle">
    <div class="h4">
      <div class="icon is-stylish">
        <svg><use xlink:href="#users-03"></use></svg>
      </div>
      Patientenverwaltung
    </div>
  </div>
  <div class="row g-4 mb-4">
    <div class="col-12 col-lg-2">
      <div class="form-floating">
        <select class="form-select">
          <option selected>Alle anzeigen</option><hr>
          <option>Onboarding</option>
          <option>Wartend</option>
          <option>Aktiv</option>
          <option>Pausiert</option>
          <option>Inaktiv</option>
          <option>Verstorben</option>
        </select>
        <label>Kontostatus</label>
      </div>
    </div>
    <div class="col-12 col-lg-2">
      <div class="form-floating">
        <select class="form-select">
          <option selected>Alle anzeigen</option><hr>
          <option>Geplant</option>
          <option>Gefährdet</option>
          <option>Unbekannt</option>
        </select>
        <label>Lieferstatus</label>
      </div>
    </div>
    <div class="col-12 col-lg-2">
      <div class="form-floating">
        <select class="form-select">
          <option selected>Alle anzeigen</option><hr>
          <option>kein Abo</option>
          <option>Club Basic</option>
          <option>Club</option>
          <option>Club+</option>
          <option>Club Basic (Pflege)</option>
          <option>Club+ (Pflege)</option>
        </select>
        <label>Abostatus</label>
      </div>
    </div>
    <div class="col-12 col-lg-2">
      <div class="form-floating">
        <select class="form-select">
          <option selected>Alle anzeigen</option><hr>
          <option>Pflegeunternehmen GmbH</option>
        </select>
        <label>Pflegeunternehmen</label>
      </div>
    </div>
    <div class="col-6 col-lg-2 ms-auto">
      <div class="os-results">
        20 von 150 angezeigt
      </div>
    </div>
    <div class="col-6 col-lg-2">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" ">
        <label>Suche</label>
      </div>
    </div>
  </div>

  <br>

  <div class="os-pagetitle">
    <div class="h4">
      <div class="icon is-stylish">
        <svg><use xlink:href="#inbox-01"></use></svg>
      </div>
      Kommunikation
    </div>
  </div>
  <div class="row g-4 mb-4">
    <div class="col-12 col-lg-2">
      <div class="form-floating">
        <select class="form-select">
          <option selected>Alle anzeigen</option><hr>
          <option>Neu</option>
          <option>Bearbeitet</option>
          <option>Erledigt</option>
        </select>
        <label>Bearbeitungsstatus</label>
      </div>
    </div>
    <div class="col-12 col-lg-2">
      <div class="form-floating">
        <select class="form-select">
          <option selected>Alle anzeigen</option><hr>
          <option>Aktivierungsanfrage</option>
          <option>Beschaffungsliste</option>
          <option>Betreuerausweis</option>
          <option>Einwilligung & Schweigepflicht</option>
          <option>Einwilligungserklärung</option>
          <option>Lieferung</option>
          <option>Medikationsänderung</option>
          <option>Medikationsbestellung</option>
          <option>Medikationsplan (Arzt)</option>
          <option>Medikationsplan (Verblisterung)</option>
          <option>Pausierungsanfrage</option>
          <option>Pflegehilfsmittelgenehmigung</option>
          <option>Rezept</option>
          <option>Schweigepflichtentbindung</option>
          <option>SEPA-Lastschriftmandat</option>
          <option>Zuzahlungsbefreiung</option>
        </select>
        <label>Kommunikationsart</label>
      </div>
    </div>
    <div class="col-12 col-lg-2">
      <div class="form-floating">
        <select class="form-select">
          <option selected>Alle anzeigen</option><hr>
          <option>Erhalten</option>
          <option>Warten auf Original</option>
          <option>Doppelt hochgeladen</option>
          <option>Bereits eingelöst</option>
          <option>Verarbeitet</option>
          <option>Nicht lesbar, bitte erneut</option>
        </select>
        <label>Kommunikationsstatus</label>
      </div>
    </div>
    <div class="col-12 col-lg-2">
      <div class="form-floating">
        <select class="form-select">
          <option selected>Alle anzeigen</option><hr>
          <option>Pflegeunternehmen GmbH</option>
        </select>
        <label>Pflegeunternehmen</label>
      </div>
    </div>
    <div class="col-6 col-lg-2 ms-auto">
      <div class="os-results">
        20 von 150 angezeigt
      </div>
    </div>
    <div class="col-6 col-lg-2">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" ">
        <label>Suche</label>
      </div>
    </div>
  </div>

  <br>

  <div class="os-pagetitle">
    <div class="h4">
      <div class="icon is-stylish">
        <svg><use xlink:href="#users-03"></use></svg>
      </div>
      Admins
    </div>
  </div>
  <div class="row g-4 mb-4">
    <div class="col-12 col-lg-2">
      <div class="form-floating">
        <select class="form-select">
          <option selected>Alle anzeigen</option><hr>
          <option>Pflege-Admin</option>
          <option>Pflege-Mitarbeiter (lesen)</option>
          <option>Admin</option>
          <option>WordPress-Admin</option>
        </select>
        <label>Rolle</label>
      </div>
    </div>
    <div class="col-12 col-lg-2">
      <div class="form-floating">
        <select class="form-select">
          <option selected>Alle anzeigen</option><hr>
          <option>Pflegeunternehmen GmbH</option>
        </select>
        <label>Pflegeunternehmen</label>
      </div>
    </div>
    <div class="col-6 col-lg-2 ms-auto">
      <div class="os-results">
        20 von 150 angezeigt
      </div>
    </div>
    <div class="col-6 col-lg-2">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" ">
        <label>Suche</label>
      </div>
    </div>
  </div>

  <br>

  <div class="os-pagetitle">
    <div class="h4">
      <div class="icon is-stylish">
        <svg><use xlink:href="#building-06"></use></svg>
      </div>
      Pflegeunternehmen
    </div>
  </div>
  <div class="row g-4 mb-4">
    <div class="col-6 col-lg-2 ms-auto">
      <div class="os-results">
        20 von 150 angezeigt
      </div>
    </div>
    <div class="col-6 col-lg-2">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" ">
        <label>Suche</label>
      </div>
    </div>
  </div>

  <br>

  <div class="os-pagetitle">
    <div class="h4">
      <div class="icon is-stylish">
        <svg><use xlink:href="#shopping-cart-01"></use></svg>
      </div>
      Beschaffungslisten
    </div>
  </div>
  <div class="row g-4 mb-4">
    <div class="col-6 col-lg-2 ms-auto">
      <div class="os-results">
        20 von 150 angezeigt
      </div>
    </div>
    <div class="col-6 col-lg-2">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" ">
        <label>Suche</label>
      </div>
    </div>
  </div>

  <br>

  <div class="os-pagetitle">
    <div class="h4">
      <div class="icon is-stylish">
        <svg><use xlink:href="#medical-cross"></use></svg>
      </div>
      Ärzte
    </div>
  </div>
  <div class="row g-4 mb-4">
    <div class="col-6 col-lg-2 ms-auto">
      <div class="os-results">
        20 von 150 angezeigt
      </div>
    </div>
    <div class="col-6 col-lg-2">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" ">
        <label>Suche</label>
      </div>
    </div>
  </div>

  <br>

  <div class="os-pagetitle">
    <div class="h4">
      <div class="icon is-stylish">
        <svg><use xlink:href="#building-03"></use></svg>
      </div>
      Blisterzentren
    </div>
  </div>
  <div class="row g-4 mb-4">
    <div class="col-6 col-lg-2 ms-auto">
      <div class="os-results">
        20 von 150 angezeigt
      </div>
    </div>
    <div class="col-6 col-lg-2">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" ">
        <label>Suche</label>
      </div>
    </div>
  </div>

  <br>

  <div class="os-pagetitle">
    <div class="h4">
      <div class="icon is-stylish">
        <svg><use xlink:href="#package"></use></svg>
      </div>
      Lieferungen
    </div>
  </div>
  <div class="row g-4 mb-4">
    <div class="col-6 col-lg-2 ms-auto">
      <div class="os-results">
        20 von 150 angezeigt
      </div>
    </div>
    <div class="col-6 col-lg-2">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" ">
        <label>Suche</label>
      </div>
    </div>
  </div>

  <br>

  <div class="os-pagetitle">
    <div class="h4">
      <div class="icon is-stylish">
        <svg><use xlink:href="#shopping-cart-01"></use></svg>
      </div>
      Beschaffungsliste anlegen
    </div>
  </div>
  <div class="row g-4 mb-4">
    <div class="col-12 col-lg-3 flag-required">
      <div class="form-floating">
        <select class="form-select">
          <option selected disabled>Bitte wählen</option>
          <option>Pflegeunternehmen GmbH</option>
        </select>
        <label>Pflegeunternehmen</label>
      </div>
    </div>
    <div class="col-12 col-lg-3 flag-required">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" ">
        <label>Name</label>
      </div>
    </div>
    <div class="col-12 col-lg-3 flag-required">
      <input type="file">
    </div>
  </div>

  <br>

  <div class="os-pagetitle">
    <div class="h4">
      <div class="icon is-stylish">
        <svg><use xlink:href="#pill"></use></svg>
      </div>
      Blisterproduktion
    </div>
  </div>
  <div class="row g-4 mb-4">
    <div class="col-12 col-lg-2">
      <div class="form-floating">
        <select class="form-select">
          <option selected>Alle anzeigen</option><hr>
          <option>Entwurf</option>
          <option>Gesendet</option>
          <option>Abgebucht</option>
        </select>
        <label>Status</label>
      </div>
    </div>
    <div class="col-12 col-lg-2">
      <div class="form-floating">
        <select class="form-select">
          <option selected>Alle anzeigen</option><hr>
          <option>Blisterzentrum Nord</option>
        </select>
        <label>Blisterzentrum</label>
      </div>
    </div>
    <div class="col-12 col-lg-2">
      <div class="form-floating">
        <select class="form-select">
          <option selected>Alle anzeigen</option><hr>
          <option>Pflegeunternehmen GmbH</option>
        </select>
        <label>Pflegeunternehmen</label>
      </div>
    </div>
    <div class="col-6 col-lg-2 ms-auto">
      <div class="os-results">
        20 von 150 angezeigt
      </div>
    </div>
    <div class="col-6 col-lg-2">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" ">
        <label>Suche</label>
      </div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Care-Admin Filters</p>

  <br>

  <div class="os-pagetitle">
    <div class="h4">
      <div class="icon is-stylish">
        <svg><use xlink:href="#users-03"></use></svg>
      </div>
      Patientenverwaltung
    </div>
  </div>
  <div class="row g-4 mb-4">
    <div class="col-12 col-lg-2">
      <div class="form-floating">
        <select class="form-select">
          <option selected>Alle anzeigen</option><hr>
          <option>Onboarding</option>
          <option>Aktiv</option>
          <option>Pausiert</option>
          <option>Inaktiv</option>
          <option>Verstorben</option>
        </select>
        <label>Kontostatus</label>
      </div>
    </div>
    <div class="col-12 col-lg-2">
      <div class="form-floating">
        <select class="form-select">
          <option selected>Alle anzeigen</option><hr>
          <option>Club Basic</option>
          <option>Club+</option>
        </select>
        <label>Abostatus</label>
      </div>
    </div>
    <div class="col-6 col-lg-2 ms-auto">
      <div class="os-results">
        20 von 150 angezeigt
      </div>
    </div>
    <div class="col-6 col-lg-2">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" ">
        <label>Suche</label>
      </div>
    </div>
  </div>

  <br>

  <div class="os-pagetitle">
    <div class="h4">
      <div class="icon is-stylish">
        <svg><use xlink:href="#inbox-01"></use></svg>
      </div>
      Kommunikation
    </div>
  </div>
  <div class="row g-4 mb-4">
    <div class="col-12 col-lg-2">
      <div class="form-floating">
        <select class="form-select">
          <option selected>Alle anzeigen</option><hr>
          <option>Aktivierungsanfrage</option>
          <option>Beschaffungsliste</option>
          <option>Betreuerausweis</option>
          <option>Einwilligung & Schweigepflicht</option>
          <option>Einwilligungserklärung</option>
          <option>Lieferung</option>
          <option>Medikationsänderung</option>
          <option>Medikationsbestellung</option>
          <option>Medikationsplan (Arzt)</option>
          <option>Medikationsplan (Verblisterung)</option>
          <option>Pausierungsanfrage</option>
          <option>Pflegehilfsmittelgenehmigung</option>
          <option>Rezept</option>
          <option>Schweigepflichtentbindung</option>
          <option>SEPA-Lastschriftmandat</option>
          <option>Zuzahlungsbefreiung</option>
        </select>
        <label>Kommunikationsart</label>
      </div>
    </div>
    <div class="col-12 col-lg-2">
      <div class="form-floating">
        <select class="form-select">
          <option selected>Alle anzeigen</option><hr>
          <option>Erhalten</option>
          <option>Warten auf Original</option>
          <option>Doppelt hochgeladen</option>
          <option>Bereits eingelöst</option>
          <option>Verarbeitet</option>
          <option>Nicht lesbar, bitte erneut</option>
        </select>
        <label>Kommunikationsstatus</label>
      </div>
    </div>
    <div class="col-6 col-lg-2 ms-auto">
      <div class="os-results">
        20 von 150 angezeigt
      </div>
    </div>
    <div class="col-6 col-lg-2">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" ">
        <label>Suche</label>
      </div>
    </div>
  </div>

  <br>

  <div class="os-pagetitle">
    <div class="h4">
      <div class="icon is-stylish">
        <svg><use xlink:href="#package"></use></svg>
      </div>
      Lieferungen
    </div>
  </div>
  <div class="row g-4 mb-4">
    <div class="col-6 col-lg-2 ms-auto">
      <div class="os-results">
        20 von 150 angezeigt
      </div>
    </div>
    <div class="col-6 col-lg-2">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" ">
        <label>Suche</label>
      </div>
    </div>
  </div>

  <br>

  <div class="os-pagetitle">
    <div class="h4">
      <div class="icon is-stylish">
        <svg><use xlink:href="#users-03"></use></svg>
      </div>
      Mitarbeiter
    </div>
  </div>
  <div class="row g-4 mb-4">
    <div class="col-6 col-lg-2 ms-auto">
      <div class="os-results">
        20 von 150 angezeigt
      </div>
    </div>
    <div class="col-6 col-lg-2">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" ">
        <label>Suche</label>
      </div>
    </div>
  </div>

  <br>

  <div class="os-pagetitle">
    <div class="h4">
      <div class="icon is-stylish">
        <svg><use xlink:href="#shopping-cart-01"></use></svg>
      </div>
      Bestellung mit Beschaffungsliste
    </div>
  </div>
  <div class="row g-4 mb-4">
    <div class="col-12 col-lg-3 flag-required">
      <div class="form-floating">
        <select class="form-select">
          <option selected disabled>Bitte wählen</option>
          <option>Beschaffungsliste Q1</option>
        </select>
        <label>Beschaffungsliste</label>
      </div>
    </div>
    <div class="col-12 col-lg-3 flag-optional">
      <div class="form-floating">
        <select class="form-select">
          <option selected>–</option>
          <option>Max Mustermann</option>
        </select>
        <label>Patient</label>
      </div>
    </div>
    <div class="col-6 col-lg-2 ms-auto">
      <div class="os-results">
        20 von 150 angezeigt
      </div>
    </div>
    <div class="col-6 col-lg-2">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" ">
        <label>Suche</label>
      </div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Patient Filters</p>

  <br>

  <div class="os-pagetitle">
    <div class="h4">
      <div class="icon is-stylish">
        <svg><use xlink:href="#file-search-02"></use></svg>
      </div>
      Medikationsverwaltung
    </div>
  </div>
  <div class="row g-4 mb-4">
    <div class="col-12 col-lg-2">
      <div class="form-floating">
        <select class="form-select">
          <option selected>Alle anzeigen</option><hr>
          <option>Geplant</option>
          <option>Gefährdet</option>
        </select>
        <label>Lieferstatus</label>
      </div>
    </div>
    <div class="col-6 col-lg-2 ms-auto">
      <div class="os-results">
        20 von 150 angezeigt
      </div>
    </div>
    <div class="col-6 col-lg-2">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" ">
        <label>Suche</label>
      </div>
    </div>
  </div>

  <br>

  <div class="os-pagetitle">
    <div class="h4">
      <div class="icon is-stylish">
        <svg><use xlink:href="#inbox-01"></use></svg>
      </div>
      Kommunikation
    </div>
  </div>
  <div class="row g-4 mb-4">
    <div class="col-12 col-lg-2">
      <div class="form-floating">
        <select class="form-select">
          <option selected>Alle anzeigen</option><hr>
          <option>Aktivierungsanfrage</option>
          <option>Beschaffungsliste</option>
          <option>Betreuerausweis</option>
          <option>Einwilligung & Schweigepflicht</option>
          <option>Einwilligungserklärung</option>
          <option>Lieferung</option>
          <option>Medikationsänderung</option>
          <option>Medikationsbestellung</option>
          <option>Medikationsplan (Arzt)</option>
          <option>Medikationsplan (Verblisterung)</option>
          <option>Pausierungsanfrage</option>
          <option>Pflegehilfsmittelgenehmigung</option>
          <option>Rezept</option>
          <option>Schweigepflichtentbindung</option>
          <option>SEPA-Lastschriftmandat</option>
          <option>Zuzahlungsbefreiung</option>
        </select>
        <label>Kommunikationsart</label>
      </div>
    </div>
    <div class="col-12 col-lg-2">
      <div class="form-floating">
        <select class="form-select">
          <option selected>Alle anzeigen</option><hr>
          <option>Erhalten</option>
          <option>Warten auf Original</option>
          <option>Doppelt hochgeladen</option>
          <option>Bereits eingelöst</option>
          <option>Verarbeitet</option>
          <option>Nicht lesbar, bitte erneut</option>
        </select>
        <label>Kommunikationsstatus</label>
      </div>
    </div>
    <div class="col-6 col-lg-2 ms-auto">
      <div class="os-results">
        20 von 150 angezeigt
      </div>
    </div>
    <div class="col-6 col-lg-2">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" ">
        <label>Suche</label>
      </div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Rings</p>

  <div class="docs-rings">
    <svg class="ring r-0"><use xlink:href="#purple"></use></svg>
    <svg class="ring r-90"><use xlink:href="#purple"></use></svg>
    <svg class="ring r-180"><use xlink:href="#purple"></use></svg>
    <svg class="ring r-270"><use xlink:href="#purple"></use></svg>
    <svg class="ring r-0"><use xlink:href="#green"></use></svg>
    <svg class="ring r-90"><use xlink:href="#green"></use></svg>
    <svg class="ring r-180"><use xlink:href="#green"></use></svg>
    <svg class="ring r-270"><use xlink:href="#green"></use></svg>
    <svg class="ring r-0"><use xlink:href="#white"></use></svg>
    <svg class="ring r-90"><use xlink:href="#white"></use></svg>
    <svg class="ring r-180"><use xlink:href="#white"></use></svg>
    <svg class="ring r-270"><use xlink:href="#white"></use></svg>
    <svg class="ring r-0"><use xlink:href="#transparent"></use></svg>
    <svg class="ring r-90"><use xlink:href="#transparent"></use></svg>
    <svg class="ring r-180"><use xlink:href="#transparent"></use></svg>
    <svg class="ring r-270"><use xlink:href="#transparent"></use></svg>
  </div>

  <p class="docs-name mt-6 mb-4">Club</p>

  <div class="os-club-banner">
    <div class="row gy-4 gx-5 align-items-center">
      <div class="col-12 col-xl-auto">
        <img src="dist/img/logo-club.svg">
      </div>
      <div class="col-12 col-xl">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim voluptatem aspernatur ullam corporis facilis necessitatibus.
        <div class="row gy-2 mt-1">
          <div class="col-12 col-xl d-flex align-items-center">
            <div class="icon me-2">
              <svg><use xlink:href="#check-verified-02"></use></svg>
            </div>
            <p>Feature</p>
          </div>
          <div class="col-12 col-xl d-flex align-items-center">
            <div class="icon me-2">
              <svg><use xlink:href="#check-verified-02"></use></svg>
            </div>
            <p>Feature</p>
          </div>
          <div class="col-12 col-xl d-flex align-items-center">
            <div class="icon me-2">
              <svg><use xlink:href="#check-verified-02"></use></svg>
            </div>
            <p>Feature</p>
          </div>
          <div class="col-12 col-xl d-flex align-items-center">
            <div class="icon me-2">
              <svg><use xlink:href="#check-verified-02"></use></svg>
            </div>
            <p>Feature</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-xl-auto">
        <a class="btn btn-light">mehr erfahren</a>
      </div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">KPIs</p>

  <div class="os-kpi-banner">
    <div class="row align-items-center">
      <div class="col-auto">
        <div class="icon is-stylish"><svg><use xlink:href="#rocket-02"></use></svg></div>
      </div>
      <div class="col">
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim voluptatem aspernatur ullam corporis facilis necessitatibus.
        </p>
      </div>
    </div>
    <a class="btn-dismiss"></a>
  </div>

  <p class="docs-name mt-6 mb-4">Demoplans</p>

  <div class="row">
    <div class="col-12 col-lg-6">
      <div class="os-demoplan">
        <img src="dist/img/placeholder/medplan.jpg">
        <a class="btn btn-sm btn-primary">Herunterladen</a>
      </div>
      <div class="os-demoplan-timestamp">
        Letzte Aktualisierung: 01.07.2024 12:30
      </div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Upload Accordion</p>

  <div class="row gy-4">
    <div class="col-12 col-lg-6">
      <div class="p-4 border bg-white">
        <div class="accordion accordion-flush accordion-upload" id="accordion-upload-1">
          <div class="accordion-item">
            <div class="accordion-header">
              <div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordion-upload-1-1">
                <div class="icon"><svg><use xlink:href="#file-plus-02"></use></svg></div>
                <p>Dokument</p>
              </div>
            </div>
            <div class="accordion-collapse collapse" data-bs-parent="#accordion-upload-1" id="accordion-upload-1-1">
              <div class="accordion-body">
                <div class="row gy-4">
                  <div class="col-12 flag-optional">
                    <img src="dist/img/placeholder/upload.jpg">
                  </div>
                  <div class="col-12 flag-optional">
                    <div class="form-floating">
                      <textarea class="form-control" placeholder=" "></textarea>
                      <label>Zusätzliche Hinweise</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-6">
      <div class="p-4 border bg-light">
        <div class="accordion accordion-flush accordion-upload" id="accordion-upload-1">
          <div class="accordion-item">
            <div class="accordion-header">
              <div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordion-upload-1-1">
                <div class="icon"><svg><use xlink:href="#file-plus-02"></use></svg></div>
                <p>Dokument</p>
              </div>
            </div>
            <div class="accordion-collapse collapse" data-bs-parent="#accordion-upload-1" id="accordion-upload-1-1">
              <div class="accordion-body">
                <div class="row gy-4">
                  <div class="col-12 flag-optional">
                    <img src="dist/img/placeholder/upload.jpg">
                  </div>
                  <div class="col-12 flag-optional">
                    <div class="form-floating">
                      <textarea class="form-control" placeholder=" "></textarea>
                      <label>Zusätzliche Hinweise</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Hints</p>

  <div class="row gy-4">
    <div class="col-12 col-lg-4 flag-optional">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" ">
        <label>Label</label>
        <div class="os-hint">
          <div class="icon"><svg><use xlink:href="#help-circle"></use></svg></div>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-4 flag-optional">
      <div class="form-floating">
        <select class="form-select">
          <option selected>Please select</option>
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </select>
        <label>Label</label>
        <div class="os-hint">
          <div class="icon"><svg><use xlink:href="#help-circle"></use></svg></div>
        </div>
      </div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">Autocomplete</p>

  <div class="row gy-4">
    <div class="col-12 col-lg-4">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" ">
        <label>Autocomplete Title</label>
        <div>
          <ul class="hm-autocomplete">
            <li class="hm-autocomplete-item li-search p-2">
              <div class="hm-autocomplete-img"><img src="https://hellomed.com/wp-content/themes/hellomed/assets/img/icons/insurance/barmer-logo.svg"></div>
              <div class="hm-autocomplete-name">Autocomplete Option</div>
            </li>
            <li class="hm-autocomplete-item li-search p-2">
              <div class="hm-autocomplete-img"><img src="https://hellomed.com/wp-content/themes/hellomed/assets/img/icons/insurance/barmer-logo.svg"></div>
              <div class="hm-autocomplete-name">Autocomplete Option</div>
            </li>
            <li class="hm-autocomplete-item li-search p-2">
              <div class="hm-autocomplete-img"><img src="https://hellomed.com/wp-content/themes/hellomed/assets/img/icons/insurance/barmer-logo.svg"></div>
              <div class="hm-autocomplete-name">Autocomplete Option</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-4">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" ">
        <label>Autocomplete Title</label>
        <div>
          <ul class="hm-autocomplete">
            <li class="hm-autocomplete-item li-search p-2">
              <div class="hm-autocomplete-name">Autocomplete Option</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-4">
      <div class="form-floating">
        <input type="text" class="form-control" placeholder=" ">
        <label>Autocomplete Title</label>
        <div>
          <ul class="hm-autocomplete">
            <li class="hm-autocomplete-item li-search p-2">
              <div class="hm-autocomplete-name">Autocomplete Option</div>
              <div class="os-mmi-meta">
                <span>12345678</span>
                <span>50 Stk.</span>
                <span class="rx-false">Rx</span>
                <span>19,99 €</span>
              </div>
            </li>
            <li class="hm-autocomplete-item li-search p-2">
              <div class="hm-autocomplete-name">Autocomplete Option</div>
              <div class="os-mmi-meta">
                <span>12345678</span>
                <span>50 Stk.</span>
                <span class="rx-false">Rx</span>
                <span>19,99 €</span>
              </div>
            </li>
            <li class="hm-autocomplete-item li-search p-2">
              <div class="hm-autocomplete-name">Autocomplete Option</div>
              <div class="os-mmi-meta">
                <span>12345678</span>
                <span>50 Stk.</span>
                <span class="rx-true">Rx</span>
                <span>19,99 €</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <br><br><br><br><br>

  <!-------------------------------- Storybook -------------------------------->

  <p class="docs-name mt-6 mb-4">Delivery Pricings</p>

  <p class="d-inline-flex m-0">
    <a class="d-flex align-items-center" target="_blank" href="https://frontend-storybook.hellomed.com/iframe.html?id=tools-deliveryoptions--all&viewMode=story">
      <p>Storybook Overview</p>
      <div class="icon ms-2"><svg><use xlink:href="#arrow-square-up-right"></use></svg></div>
    </a>
  </p>

  <p class="docs-name mt-6 mb-4">Document Status</p>

  <p class="d-inline-flex m-0">
    <a class="d-flex align-items-center" target="_blank" href="https://frontend-storybook.hellomed.com/iframe.html?args=&id=components-documentsstatusbadge--all-statuses&viewMode=story">
      <p>Storybook Overview</p>
      <div class="icon ms-2"><svg><use xlink:href="#arrow-square-up-right"></use></svg></div>
    </a>
  </p>

  <div class="row">
    <div class="col-12">
      <div class="table-scroll">
        <table class="table">
          <thead>
            <tr>
              <th>Type</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Aktivierungsanfrage</td>
              <td>
                <ul class="m-0 p-0">
                  <li class="text-secondary">Erhalten</li>
                  <li class="text-success">Patient aktiviert</li>
                </ul>
              </td>
            </tr>
            <tr>
              <td>Beschaffungsliste</td>
              <td>
                <ul class="m-0 p-0">
                  <li class="text-secondary">Erhalten</li>
                  <li class="text-warning">In Bearbeitung</li>
                  <li class="text-success">Geliefert</li>
                </ul>
              </td>
            </tr>
            <tr>
              <td>Betreuerausweis</td>
              <td>
                <ul class="m-0 p-0">
                  <li class="text-secondary">Erhalten</li>
                  <li class="text-success">Hinterlegt</li>
                  <li class="text-danger">Nicht lesbar, bitte erneut</li>
                </ul>
              </td>
            </tr>
            <tr>
              <td>Einwilligung & Schweigepflicht</td>
              <td>
                <ul class="m-0 p-0">
                  <li class="text-secondary">Erhalten</li>
                  <li class="text-success">Hinterlegt</li>
                  <li class="text-danger">Nicht lesbar, bitte erneut</li>
                </ul>
              </td>
            </tr>
            <tr>
              <td>Einwilligungserklärung</td>
              <td>
                <ul class="m-0 p-0">
                  <li class="text-secondary">Erhalten</li>
                  <li class="text-success">Hinterlegt</li>
                  <li class="text-danger">Nicht lesbar, bitte erneut</li>
                </ul>
              </td>
            </tr>
            <tr>
              <td>Lieferung</td>
              <td>
                <ul class="m-0 p-0">
                  <li class="text-secondary">Versendet</li>
                  <li class="text-success">Beliefert</li>
                </ul>
              </td>
            </tr>
            <tr>
              <td>Medikationsänderung</td>
              <td>
                <ul class="m-0 p-0">
                  <li class="text-secondary">Erhalten</li>
                  <li class="text-warning">In Bearbeitung</li>
                  <li class="text-success">Geändert</li>
                  <li class="text-danger">Nicht lesbar, bitte erneut</li>
                </ul>
              </td>
            </tr>
            <tr>
              <td>Medikationsbestellung</td>
              <td>
                <ul class="m-0 p-0">
                  <li class="text-secondary">Erhalten</li>
                  <li class="text-warning">In Bearbeitung</li>
                  <li class="text-success">Geliefert</li>
                </ul>
              </td>
            </tr>
            <tr>
              <td>Medikationsplan (Arzt)</td>
              <td>
                <ul class="m-0 p-0">
                  <li class="text-secondary">Erhalten</li>
                  <li class="text-success">Geändert</li>
                  <li class="text-danger">Nicht lesbar, bitte erneut</li>
                </ul>
              </td>
            </tr>
            <tr>
              <td>Medikationsplan (Verblisterung)</td>
              <td>
                <ul class="m-0 p-0">
                  <li class="text-secondary">Erhalten</li>
                  <li class="text-success">Geändert</li>
                  <li class="text-danger">Nicht lesbar, bitte erneut</li>
                </ul>
              </td>
            </tr>
            <tr>
              <td>Pausierungsanfrage</td>
              <td>
                <ul class="m-0 p-0">
                  <li class="text-secondary">Erhalten</li>
                  <li class="text-success">Patient pausiert</li>
                </ul>
              </td>
            </tr>
            <tr>
              <td>Pflegehilfsmittelgenehmigung</td>
              <td>
                <ul class="m-0 p-0">
                  <li class="text-secondary">Erhalten</li>
                  <li class="text-success">Hinterlegt</li>
                  <li class="text-danger">Nicht lesbar, bitte erneut</li>
                </ul>
              </td>
            </tr>
            <tr>
              <td>Rezept</td>
              <td>
                <ul class="m-0 p-0">
                  <li class="text-secondary">Erhalten</li>
                  <li class="text-warning">Warten auf Original</li>
                  <li class="text-success">Doppelt hochgeladen</li>
                  <li class="text-success">Bereits eingelöst</li>
                  <li class="text-success">Verarbeitet</li>
                  <li class="text-danger">Nicht lesbar, bitte erneut</li>
                </ul>
              </td>
            </tr>
            <tr>
              <td>Schweigepflichtentbindung</td>
              <td>
                <ul class="m-0 p-0">
                  <li class="text-secondary">Erhalten</li>
                  <li class="text-success">Hinterlegt</li>
                  <li class="text-danger">Nicht lesbar, bitte erneut</li>
                </ul>
              </td>
            </tr>
            <tr>
              <td>SEPA-Lastschriftmandat</td>
              <td>
                <ul class="m-0 p-0">
                  <li class="text-secondary">Erhalten</li>
                  <li class="text-success">Aktiviert</li>
                  <li class="text-danger">Nicht lesbar, bitte erneut</li>
                </ul>
              </td>
            </tr>
            <tr>
              <td>Zuzahlungsbefreiung</td>
              <td>
                <ul class="m-0 p-0">
                  <li class="text-secondary">Erhalten</li>
                  <li class="text-success">Hinterlegt</li>
                  <li class="text-danger">Nicht lesbar, bitte erneut</li>
                </ul>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-------------------------- JavaScript Components -------------------------->

  <div class="modal fade" id="modal-demo" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content p-5">
        <div class="modal-header p-0 border-0">
          <h3 class="m-0">Modal</h3>
          <a class="btn-close" data-bs-dismiss="modal"></a>
        </div>
        <div class="modal-body p-0 pt-4">
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim quas, tenetur veritatis architecto quia ea impedit voluptas nisi eos, neque minus accusamus nobis odio obcaecati voluptatum porro dolorum soluta iure.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="offcanvas offcanvas-end" id="offcanvas-demo-right">
    <a class="btn-close" data-bs-dismiss="offcanvas"></a>
  </div>

  <div class="offcanvas offcanvas-bottom" id="offcanvas-demo-bottom-medication-dtb">
    <a class="btn-close" data-bs-dismiss="offcanvas"></a>
  </div>

  <div class="carmode">
    <a>
      <div class="icon"><svg><use xlink:href="#car-01"></use></svg></div>
    </a>
  </div>

  <div class="dropdown dropstart floatingactionbutton">
    <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      <div class="icon"><svg><use xlink:href="#plus"></use></svg></div>
    </a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item">Action</a></li>
      <li><a class="dropdown-item">Action</a></li>
      <li><a class="dropdown-item">Action</a></li>
    </ul>
  </div>

  <div class="loading-indicator-container">
    <div class="icon is-loading"><svg><use xlink:href="#loading-02"></use></svg></div>
  </div>

</vue-template>

`;