UI Components – Sirius Library

<section class="py-6">
  <div class="container">
    <div class="position-relative p-8 border rounded-2"><a class="position-absolute top-0 end-0 mt-4 me-4" href="#">
        <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M13.5 11.5C14.3284 11.5 15 10.8284 15 10C15 9.17157 14.3284 8.5 13.5 8.5C12.6716 8.5 12 9.17157 12 10C12 10.8284 12.6716 11.5 13.5 11.5Z" fill="#7A899B"></path>
          <path d="M6.5 11.5C7.32843 11.5 8 10.8284 8 10C8 9.17157 7.32843 8.5 6.5 8.5C5.67157 8.5 5 9.17157 5 10C5 10.8284 5.67157 11.5 6.5 11.5Z" fill="#7A899B"></path>
        </svg></a>
      <h6 class="mb-4">Photos (200)</h6>
      <div class="row mb-6">
        <div class="col-6 mb-6"><img class="img-fluid w-100 mx-auto rounded-2" src="sirius-assets/images/photos/brands.png" alt=""/></div>
        <div class="col-6 mb-6"><img class="img-fluid w-100 mx-auto rounded-2" src="sirius-assets/images/photos/facebook2.png" alt=""/></div>
        <div class="col-6"><img class="img-fluid w-100 mx-auto rounded-2" src="sirius-assets/images/photos/instagram-pink.png" alt=""/></div>
        <div class="col-6"><img class="img-fluid w-100 mx-auto rounded-2" src="sirius-assets/images/photos/discord.png" alt=""/></div>
      </div><a class="btn w-100 btn-outline-dark border-light" href="#">See all</a>
    </div>
  </div>
</section>

<section class="py-6">
  <div class="container">
    <div class="position-relative mb-6 p-8 border rounded-2"><a class="position-absolute top-0 end-0 mt-4 me-4" href="#">
        <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M13.5 11.5C14.3284 11.5 15 10.8284 15 10C15 9.17157 14.3284 8.5 13.5 8.5C12.6716 8.5 12 9.17157 12 10C12 10.8284 12.6716 11.5 13.5 11.5Z" fill="#7A899B"></path>
          <path d="M6.5 11.5C7.32843 11.5 8 10.8284 8 10C8 9.17157 7.32843 8.5 6.5 8.5C5.67157 8.5 5 9.17157 5 10C5 10.8284 5.67157 11.5 6.5 11.5Z" fill="#7A899B"></path>
        </svg></a>
      <div class="d-flex mb-8 align-items-center">
        <h6 class="mb-0">Profit</h6><span class="badge ms-2 bg-success-light text-success">+7%</span>
      </div>
      <h1 class="mb-8">$60.00</h1>
      <div class="position-relative mb-4 bg-light rounded" style="height: 4px;">
        <div class="position-absolute top-0 bottom-0 start-0 bg-primary rounded" style="width: 35%;">
          <svg class="position-absolute top-50 end-0 translate-middle-y" width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="8" cy="8" r="8" fill="#2796CE"></circle>
            <g filter="url(#filter0_d)">
              <circle cx="8" cy="8" r="3" fill="white"></circle>
            </g>
            <defs>
              <filter id="filter0_d" x="5" y="5" width="6" height="7" filterunits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feflood flood-opacity="0" result="BackgroundImageFix"></feflood>
                <fecolormatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></fecolormatrix>
                <feoffset dy="1"></feoffset>
                <fecolormatrix type="matrix" values="0 0 0 0 0.02 0 0 0 0 0.14 0 0 0 0 0.38 0 0 0 0.4 0"></fecolormatrix>

<section>
  <nav class="navbar navbar-expand-lg navbar-light bg-white">
    <div class="container-fluid">
      <button class="navbar-burger navbar-toggler" type="button"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse">
        <form class="d-inline-flex me-2">
          <div class="input-group">
            <input class="form-control" type="search" placeholder="Type to search..." aria-label="Type to serach" aria-describedby="basic-addon"/><span class="input-group-text bg-transparent px-4" id="basic-addon2">
              <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5.4375 9.375C7.61212 9.375 9.375 7.61212 9.375 5.4375C9.375 3.26288 7.61212 1.5 5.4375 1.5C3.26288 1.5 1.5 3.26288 1.5 5.4375C1.5 7.61212 3.26288 9.375 5.4375 9.375Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8.22156 8.22192L10.4997 10.5001" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></span>
          </div>
        </form>
        <div class="ms-auto"><a class="btn btn-outline-light d-inline-flex align-items-center justify-content-center p-0 me-2 shadow rounded-2" href="#" style="width: 40px; height: 40px;">
            <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 7.5C6.82843 7.5 7.5 6.82843 7.5 6C7.5 5.17157 6.82843 4.5 6 4.5C5.17157 4.5 4.5 5.17157 4.5 6C4.5 6.82843 5.17157 7.5 6 7.5Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M5.74257 1.79108L4.79535 1.08088C4.74453 1.04264 4.68535 1.01704 4.62269 1.00617C4.56003 0.995295 4.49568 0.99947 4.43495 1.01835C4.14159 1.11021 3.85698 1.22797 3.58447 1.37023C3.52805 1.39982 3.47949 1.4424 3.44277 1.49446C3.40606 1.54652 3.38226 1.60656 3.37332 1.66963L3.20588 2.84181C3.14205 2.89838 3.07956 2.95723 3.01841 3.01834C2.95728 3.07947 2.89842 3.14198 2.84183 3.20585L2.84181 3.20588L1.66984 3.37347C1.60687 3.38237 1.54692 3.40611 1.49492 3.44273C1.44293 3.47935 1.40038 3.52781 1.37078 3.5841C1.22831 3.85649 1.11032 4.14101 1.01822 4.4343C0.999252 4.49511 0.99502 4.55957 1.00587 4.62234C1.01672 4.68511 1.04235 4.7444 1.08063 4.79531L1.79108 5.74257C1.78595 5.8277 1.78337 5.9135 1.78335 5.99995C1.78335 6.0864 1.78593 6.17222 1.79108 6.2574L1.79108 6.25743L1.08088 7.20465C1.04265 7.25547 1.01704 7.31465 1.00617 7.37731C0.995298 7.43997 0.999474 7.50432 1.01835 7.56505C1.11022 7.85841 1.22797 8.14302 1.37023 8.41553C1.39982 8.47195 1.4424 8.52051 1.49446 8.55723C1.54652 8.59394 1.60656 8.61774 1.66964 8.62668L2.84181 8.79412C2.89839 8.85795 2.95723 8.92044 3.01834 8.98159C3.07947 9.04272 3.14198 9.10158 3.20586 9.15817L3.20588 9.15819L3.37347 10.3302C3.38237 10.3931 3.40611 10.4531 3.44273 10.5051C3.47936 10.5571 3.52781 10.5996 3.5841 10.6292C3.8565 10.7717 4.14102 10.8897 4.4343 10.9818C4.49512 11.0007 4.55957 11.005 4.62234 10.9941C4.68511 10.9833 4.7444 10.9577 4.79531 10.9194L5.74257 10.2089C5.82771 10.2141 5.9135 10.2166 5.99995 10.2167C6.0864 10.2167 6.17222 10.2141 6.2574 10.2089L6.25744 10.2089L7.20465 10.9191C7.25547 10.9574 7.31465 10.983 7.37731 10.9938C7.43997 11.0047 7.50432 11.0005 7.56505 10.9817C7.85841 10.8898 8.14302 10.772 8.41553 10.6298C8.47195 10.6002 8.52051 10.5576 8.55723 10.5055C8.59394 10.4535 8.61774 10.3934 8.62668 10.3304L8.79412 9.15819C8.85795 9.10162 8.92044 9.04277 8.98159 8.98166C9.04272 8.92053 9.10158 8.85803 9.15817 8.79415L9.15819 8.79413L10.3302 8.62653C10.3931 8.61763 10.4531 8.59389 10.5051 8.55727C10.5571 8.52065 10.5996 8.47219 10.6292 8.4159C10.7717 8.14351 10.8897 7.85899 10.9818 7.5657C11.0007 7.50489 11.005 7.44044 10.9941 7.37767C10.9833 7.3149 10.9577 7.25561 10.9194 7.20469L10.2089 6.25743C10.214 6.1723 10.2166 6.0865 10.2166 6.00005C10.2166 5.9136 10.2141 5.82778 10.2089 5.7426L10.2089 5.74257L10.9191 4.79535C10.9574 4.74453 10.983 4.68535 10.9938 4.62269C11.0047 4.56003 11.0005 4.49568 10.9816 4.43495C10.8898 4.14159 10.772 3.85698 10.6298 3.58446C10.6002 3.52805 10.5576 3.47949 10.5055 3.44277C10.4535 3.40606 10.3934 3.38226 10.3304 3.37332L9.15819 3.20588C9.10161 3.14205 9.04277 3.07956 8.98166 3.01841C8.92053 2.95728 8.85802 2.89842 8.79414 2.84183L8.79412 2.84181L8.62653 1.66984C8.61763 1.60687 8.59389 1.54692 8.55727 1.49492C8.52065 1.44293 8.47219 1.40038 8.4159 1.37078C8.14351 1.22831 7.85898 1.11032 7.5657 1.01822C7.50489 0.999252 7.44043 0.99502 7.37766 1.00587C7.31489 1.01672 7.2556 1.04235 7.20469 1.08063L6.25743 1.79108C6.1723 1.78595 6.0865 1.78337 6.00005 1.78335C5.9136 1.78335 5.82778 1.78593 5.7426 1.79108L5.74257 1.79108Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a><a class="btn btn-outline-light d-inline-flex align-items-center justify-content-center p-0 me-2 shadow rounded-2" href="#" style="width: 40px; height: 40px;">
            <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.12974 8.29964C1.57041 7.35675 1.37453 6.2421 1.57887 5.165C1.78322 4.0879 2.37374 3.12245 3.23955 2.44994C4.10535 1.77742 5.18688 1.4441 6.28105 1.51257C7.37522 1.58104 8.40676 2.04659 9.18197 2.8218C9.95718 3.597 10.4227 4.62854 10.4912 5.72271C10.5597 6.81688 10.2264 7.89841 9.55386 8.76422C8.88135 9.63003 7.9159 10.2206 6.8388 10.4249C5.76171 10.6293 4.64706 10.4334 3.70416 9.87406L3.70417 9.87401L2.14931 10.3183C2.08498 10.3366 2.01691 10.3375 1.95214 10.3207C1.88738 10.3039 1.82828 10.2701 1.78097 10.2228C1.73366 10.1755 1.69986 10.1164 1.68308 10.0516C1.6663 9.98687 1.66714 9.9188 1.68552 9.85447L2.12977 8.29961L2.12974 8.29964Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a><a class="btn btn-outline-light d-inline-flex align-items-center justify-content-center p-0 me-2 shadow rounded-2" href="#" style="width: 40px; height: 40px;">
            <svg width="10" height="12" viewbox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4 11H6" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

<section>
  <nav class="navbar navbar-expand-lg navbar-light bg-white">
    <div class="container-fluid">
      <button class="navbar-burger navbar-toggler" type="button"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item" aria-current="page"><a class="d-flex align-items-center" href="#">
                <svg class="text-primary me-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.8737 16.875V9.02647C16.8737 8.93939 16.8555 8.85327 16.8202 8.77363C16.785 8.694 16.7335 8.6226 16.6691 8.56402L10.4187 2.88159C10.3036 2.77699 10.1537 2.71904 9.99821 2.71904C9.84272 2.71905 9.69281 2.77701 9.57777 2.88162L3.3282 8.56402C3.26377 8.6226 3.2123 8.69399 3.17707 8.77363C3.14185 8.85326 3.12366 8.93937 3.12366 9.02645V16.875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M1.24866 16.875H18.7487" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M11.8732 16.8743V12.4993C11.8732 12.3336 11.8073 12.1746 11.6901 12.0574C11.5729 11.9402 11.4139 11.8743 11.2482 11.8743H8.74817C8.58241 11.8743 8.42344 11.9402 8.30623 12.0574C8.18902 12.1746 8.12317 12.3336 8.12317 12.4993V16.8743" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg><span>Homepage</span></a></li>
            <li class="breadcrumb-item active" aria-current="page"><a class="d-flex align-items-center" href="#">
                <svg class="text-primary me-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17.8125 16.25H2.1875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M7.8125 16.25V6.875H12.1875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M16.5625 3.125H12.1875V16.25H16.5625V3.125Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M3.4375 16.25V10.625H7.8125" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg><span>Statistics</span></a></li>
          </ol>
        </nav>
        <div class="ms-auto">
          <form class="d-inline-flex me-2">

<section class="py-6">
  <div class="container">
    <div class="px-8 pt-8 pb-4 border rounded-2">
      <div class="mb-8">
        <h6 class="mb-4">Audience</h6>
        <p class="mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
      </div>
      <div class="position-relative mb-6 bg-success rounded-1 overflow-hidden" style="height: 24px;">
        <div class="position-absolute start-0 top-0 bottom-0 bg-primary" style="width: 35%"></div>
        <div class="position-absolute end-0 top-0 bottom-0 bg-danger" style="width: 5%;"></div>
      </div>
      <div>
        <div class="d-flex align-items-center py-4 border-bottom"><span class="d-inline-block me-3 bg-primary" style="width: 16px; height: 16px;"></span>
          <p class="mb-0 text-dark">Junior developers</p>
          <p class="mb-0 ms-auto text-dark">$65.450</p>
        </div>
        <div class="d-flex align-items-center py-4 border-bottom"><span class="d-inline-block me-3 bg-success" style="width: 16px; height: 16px;"></span>
          <p class="mb-0 text-dark">Senior developers</p>
          <p class="mb-0 ms-auto text-dark">$26.950</p>
        </div>
        <div class="d-flex align-items-center py-4"><span class="d-inline-block me-3 bg-danger" style="width: 16px; height: 16px;"></span>
          <p class="mb-0 text-dark">Designers</p>
          <p class="mb-0 ms-auto text-dark">$5.350</p>
        </div>

<section>
  <nav class="navbar navbar-expand-lg navbar-light bg-white">
    <div class="container-fluid">
      <button class="navbar-burger navbar-toggler" type="button"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item" aria-current="page"><a class="d-flex align-items-center" href="#">
                <svg class="text-primary me-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.8737 16.875V9.02647C16.8737 8.93939 16.8555 8.85327 16.8202 8.77363C16.785 8.694 16.7335 8.6226 16.6691 8.56402L10.4187 2.88159C10.3036 2.77699 10.1537 2.71904 9.99821 2.71904C9.84272 2.71905 9.69281 2.77701 9.57777 2.88162L3.3282 8.56402C3.26377 8.6226 3.2123 8.69399 3.17707 8.77363C3.14185 8.85326 3.12366 8.93937 3.12366 9.02645V16.875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M1.24866 16.875H18.7487" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M11.8732 16.8743V12.4993C11.8732 12.3336 11.8073 12.1746 11.6901 12.0574C11.5729 11.9402 11.4139 11.8743 11.2482 11.8743H8.74817C8.58241 11.8743 8.42344 11.9402 8.30623 12.0574C8.18902 12.1746 8.12317 12.3336 8.12317 12.4993V16.8743" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg><span>Homepage</span></a></li>
            <li class="breadcrumb-item active" aria-current="page"><a class="d-flex align-items-center" href="#">
                <svg class="text-primary me-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17.8125 16.25H2.1875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M7.8125 16.25V6.875H12.1875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M16.5625 3.125H12.1875V16.25H16.5625V3.125Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M3.4375 16.25V10.625H7.8125" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg><span>Statistics</span></a></li>
          </ol>
        </nav>
        <div class="ms-auto"><a class="me-2 btn btn-primary" href="#" type="button"><span class="me-3">
              <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="py-6">
  <div class="container">
    <div class="px-8 pt-8 pb-4 border rounded-2">
      <div class="mb-8">
        <h6 class="mb-4">Audience</h6>
        <p class="mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
      </div>
      <div>
        <div class="d-flex align-items-center py-4 border-bottom"><span class="d-inline-block me-3 bg-primary" style="width: 16px; height: 16px;"></span>
          <p class="mb-0 text-dark">Junior developers</p>
          <p class="mb-0 ms-auto text-dark">$65.450</p>
        </div>
        <div class="d-flex align-items-center py-4 border-bottom"><span class="d-inline-block me-3 bg-success" style="width: 16px; height: 16px;"></span>
          <p class="mb-0 text-dark">Senior developers</p>
          <p class="mb-0 ms-auto text-dark">$26.950</p>
        </div>
        <div class="d-flex align-items-center py-4"><span class="d-inline-block me-3 bg-danger" style="width: 16px; height: 16px;"></span>
          <p class="mb-0 text-dark">Designers</p>
          <p class="mb-0 ms-auto text-dark">$5.350</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <nav class="navbar navbar-expand-lg navbar-light bg-white">
    <div class="container-fluid">
      <button class="navbar-burger navbar-toggler" type="button"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse">
        <div class="d-flex align-items-center">
          <div class="d-flex align-items-center justify-content-center me-4 border rounded-2" style="width: 40px; height: 40px;"><img src="sirius-assets/images/logos/sirius-sign-blue.svg" alt=""/></div>
          <div class="me-4">
            <p class="mb-0 fw-bold text-dark">Sirius Library</p>
          </div><a href="#">
            <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 5.99998V1.33331" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M10.6666 3.99998L7.99992 1.33331L5.33325 3.99998" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8 10V14.3333" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M5.33325 12L7.99992 14.6667L10.6666 12" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a>
        </div>
        <form class="position-absolute top-50 start-50 translate-middle d-flex me-auto">
          <div class="input-group">
            <input class="form-control" type="search" placeholder="Type to search..." aria-label="Type to serach" aria-describedby="basic-addon"/><span class="input-group-text bg-transparent px-4" id="basic-addon2">
              <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5.4375 9.375C7.61212 9.375 9.375 7.61212 9.375 5.4375C9.375 3.26288 7.61212 1.5 5.4375 1.5C3.26288 1.5 1.5 3.26288 1.5 5.4375C1.5 7.61212 3.26288 9.375 5.4375 9.375Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8.22156 8.22192L10.4997 10.5001" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></span>

<section>
  <nav class="navbar navbar-expand-lg navbar-light bg-white">
    <div class="container-fluid">
      <button class="navbar-burger navbar-toggler" type="button"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item" aria-current="page"><a class="d-flex align-items-center" href="#">
                <svg class="text-primary me-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.8737 16.875V9.02647C16.8737 8.93939 16.8555 8.85327 16.8202 8.77363C16.785 8.694 16.7335 8.6226 16.6691 8.56402L10.4187 2.88159C10.3036 2.77699 10.1537 2.71904 9.99821 2.71904C9.84272 2.71905 9.69281 2.77701 9.57777 2.88162L3.3282 8.56402C3.26377 8.6226 3.2123 8.69399 3.17707 8.77363C3.14185 8.85326 3.12366 8.93937 3.12366 9.02645V16.875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M1.24866 16.875H18.7487" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M11.8732 16.8743V12.4993C11.8732 12.3336 11.8073 12.1746 11.6901 12.0574C11.5729 11.9402 11.4139 11.8743 11.2482 11.8743H8.74817C8.58241 11.8743 8.42344 11.9402 8.30623 12.0574C8.18902 12.1746 8.12317 12.3336 8.12317 12.4993V16.8743" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg><span>Homepage</span></a></li>
            <li class="breadcrumb-item active" aria-current="page"><a class="d-flex align-items-center" href="#">
                <svg class="text-primary me-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17.8125 16.25H2.1875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M7.8125 16.25V6.875H12.1875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M16.5625 3.125H12.1875V16.25H16.5625V3.125Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M3.4375 16.25V10.625H7.8125" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg><span>Statistics</span></a></li>
          </ol>
        </nav>
        <form class="position-absolute top-50 start-50 translate-middle d-flex me-auto">
          <div class="input-group">

<section>
  <nav class="navbar navbar-expand-lg navbar-light bg-white">
    <div class="container-fluid">
      <button class="navbar-burger navbar-toggler" type="button"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse">
        <div class="d-flex align-items-center">
          <div class="d-flex align-items-center justify-content-center me-4 border rounded-2" style="width: 40px; height: 40px;"><img src="sirius-assets/images/logos/sirius-sign-blue.svg" alt=""/></div>
          <div class="me-4">
            <p class="mb-0 fw-bold text-dark">Sirius Library</p>
          </div><a href="#">
            <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 5.99998V1.33331" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M10.6666 3.99998L7.99992 1.33331L5.33325 3.99998" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8 10V14.3333" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M5.33325 12L7.99992 14.6667L10.6666 12" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a>
        </div>
        <div class="ms-auto"><a class="btn btn-outline-light d-inline-flex align-items-center justify-content-center p-0 me-2 shadow rounded-2" href="#" style="width: 40px; height: 40px;">
            <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.4375 9.375C7.61212 9.375 9.375 7.61212 9.375 5.4375C9.375 3.26288 7.61212 1.5 5.4375 1.5C3.26288 1.5 1.5 3.26288 1.5 5.4375C1.5 7.61212 3.26288 9.375 5.4375 9.375Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8.22156 8.22192L10.4997 10.5001" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a><a class="btn btn-outline-light d-inline-flex align-items-center justify-content-center p-0 me-2 shadow rounded-2" href="#" style="width: 40px; height: 40px;">
            <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.12974 8.29964C1.57041 7.35675 1.37453 6.2421 1.57887 5.165C1.78322 4.0879 2.37374 3.12245 3.23955 2.44994C4.10535 1.77742 5.18688 1.4441 6.28105 1.51257C7.37522 1.58104 8.40676 2.04659 9.18197 2.8218C9.95718 3.597 10.4227 4.62854 10.4912 5.72271C10.5597 6.81688 10.2264 7.89841 9.55386 8.76422C8.88135 9.63003 7.9159 10.2206 6.8388 10.4249C5.76171 10.6293 4.64706 10.4334 3.70416 9.87406L3.70417 9.87401L2.14931 10.3183C2.08498 10.3366 2.01691 10.3375 1.95214 10.3207C1.88738 10.3039 1.82828 10.2701 1.78097 10.2228C1.73366 10.1755 1.69986 10.1164 1.68308 10.0516C1.6663 9.98687 1.66714 9.9188 1.68552 9.85447L2.12977 8.29961L2.12974 8.29964Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

<section>
  <nav class="navbar navbar-expand-lg navbar-light bg-white">
    <div class="container-fluid">
      <button class="navbar-burger navbar-toggler" type="button"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item me-2"><a class="nav-link py-2 px-4 text-primary bg-light rounded-2" aria-current="page" href="#">Active Tab</a></li>
          <li class="nav-item me-2"><a class="nav-link py-2 px-4 text-muted" href="#">Inactive Tab</a></li>
          <li class="nav-item me-2"><a class="nav-link py-2 px-4 text-muted" href="#">Inactive Tab</a></li>
          <li class="nav-item me-2"><a class="nav-link py-2 px-4 text-muted" href="#">Inactive Tab</a></li>
          <li class="nav-item"><a class="nav-link py-2 px-4 text-muted" href="#">Inactive Tab</a></li>
        </ul>
        <div class="ms-auto"><a class="btn btn-outline-light d-inline-flex align-items-center justify-content-center p-0 me-2 shadow rounded-2" href="#" style="width: 40px; height: 40px;">
            <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.12974 8.29964C1.57041 7.35675 1.37453 6.2421 1.57887 5.165C1.78322 4.0879 2.37374 3.12245 3.23955 2.44994C4.10535 1.77742 5.18688 1.4441 6.28105 1.51257C7.37522 1.58104 8.40676 2.04659 9.18197 2.8218C9.95718 3.597 10.4227 4.62854 10.4912 5.72271C10.5597 6.81688 10.2264 7.89841 9.55386 8.76422C8.88135 9.63003 7.9159 10.2206 6.8388 10.4249C5.76171 10.6293 4.64706 10.4334 3.70416 9.87406L3.70417 9.87401L2.14931 10.3183C2.08498 10.3366 2.01691 10.3375 1.95214 10.3207C1.88738 10.3039 1.82828 10.2701 1.78097 10.2228C1.73366 10.1755 1.69986 10.1164 1.68308 10.0516C1.6663 9.98687 1.66714 9.9188 1.68552 9.85447L2.12977 8.29961L2.12974 8.29964Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a><a class="btn btn-outline-light d-inline-flex align-items-center justify-content-center p-0 me-2 shadow rounded-2" href="#" style="width: 40px; height: 40px;">
            <svg width="10" height="12" viewbox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4 11H6" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M1.6988 4.14999C1.69819 3.73489 1.78393 3.32378 1.95108 2.94036C2.11823 2.55694 2.36348 2.20879 2.6727 1.91598C2.98192 1.62317 3.34899 1.39148 3.75275 1.23429C4.15651 1.07709 4.58897 0.997483 5.02522 1.00006C6.84554 1.01294 8.30157 2.45262 8.30157 4.18953V4.49999C8.30157 6.06693 8.64611 6.9762 8.94956 7.47317C8.98225 7.52627 8.99965 7.58663 8.99999 7.64817C9.00034 7.70971 8.98362 7.77025 8.95153 7.82368C8.91944 7.87711 8.87311 7.92155 8.81721 7.9525C8.76131 7.98346 8.69783 7.99984 8.63315 8H1.36685C1.30217 7.99984 1.23867 7.98345 1.18277 7.95249C1.12686 7.92153 1.08053 7.87708 1.04844 7.82364C1.01636 7.7702 0.999648 7.70965 1.00001 7.64811C1.00036 7.58656 1.01777 7.52619 1.05048 7.47309C1.3541 6.97611 1.69879 6.06685 1.69879 4.49999L1.6988 4.14999Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a><a class="me-2" href="#"><img class="img-fluid rounded-1" style="width: 40px; height: 40px;" src="https://images.unsplash.com/photo-1593789382576-54f489574d26?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=128&amp;w=128" alt=""/></a></div>
      </div>
    </div>
  </nav>
</section>

<section>
  <nav class="navbar pb-8 px-8 navbar-expand-lg navbar-light bg-white">
    <div class="container-fluid">
      <button class="navbar-burger navbar-toggler" type="button"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item"><a class="nav-link pt-8 px-4 active border-top border-2 border-primary" aria-current="page" href="#">Active Tab</a></li>
          <li class="nav-item"><a class="nav-link pt-8 px-4 text-muted" href="#">Inactive Tab</a></li>
          <li class="nav-item"><a class="nav-link pt-8 px-4 text-muted" href="#">Inactive Tab</a></li>
          <li class="nav-item"><a class="nav-link pt-8 px-4 text-muted" href="#">Inactive Tab</a></li>
          <li class="nav-item"><a class="nav-link pt-8 px-4 text-muted" href="#">Inactive Tab</a></li>
        </ul>
        <div class="ms-auto"><a class="btn btn-outline-light d-inline-flex align-items-center justify-content-center p-0 me-2 shadow rounded-2" href="#" style="width: 40px; height: 40px;">
            <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.12974 8.29964C1.57041 7.35675 1.37453 6.2421 1.57887 5.165C1.78322 4.0879 2.37374 3.12245 3.23955 2.44994C4.10535 1.77742 5.18688 1.4441 6.28105 1.51257C7.37522 1.58104 8.40676 2.04659 9.18197 2.8218C9.95718 3.597 10.4227 4.62854 10.4912 5.72271C10.5597 6.81688 10.2264 7.89841 9.55386 8.76422C8.88135 9.63003 7.9159 10.2206 6.8388 10.4249C5.76171 10.6293 4.64706 10.4334 3.70416 9.87406L3.70417 9.87401L2.14931 10.3183C2.08498 10.3366 2.01691 10.3375 1.95214 10.3207C1.88738 10.3039 1.82828 10.2701 1.78097 10.2228C1.73366 10.1755 1.69986 10.1164 1.68308 10.0516C1.6663 9.98687 1.66714 9.9188 1.68552 9.85447L2.12977 8.29961L2.12974 8.29964Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a><a class="btn btn-outline-light d-inline-flex align-items-center justify-content-center p-0 me-2 shadow rounded-2" href="#" style="width: 40px; height: 40px;">
            <svg width="10" height="12" viewbox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4 11H6" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M1.6988 4.14999C1.69819 3.73489 1.78393 3.32378 1.95108 2.94036C2.11823 2.55694 2.36348 2.20879 2.6727 1.91598C2.98192 1.62317 3.34899 1.39148 3.75275 1.23429C4.15651 1.07709 4.58897 0.997483 5.02522 1.00006C6.84554 1.01294 8.30157 2.45262 8.30157 4.18953V4.49999C8.30157 6.06693 8.64611 6.9762 8.94956 7.47317C8.98225 7.52627 8.99965 7.58663 8.99999 7.64817C9.00034 7.70971 8.98362 7.77025 8.95153 7.82368C8.91944 7.87711 8.87311 7.92155 8.81721 7.9525C8.76131 7.98346 8.69783 7.99984 8.63315 8H1.36685C1.30217 7.99984 1.23867 7.98345 1.18277 7.95249C1.12686 7.92153 1.08053 7.87708 1.04844 7.82364C1.01636 7.7702 0.999648 7.70965 1.00001 7.64811C1.00036 7.58656 1.01777 7.52619 1.05048 7.47309C1.3541 6.97611 1.69879 6.06685 1.69879 4.49999L1.6988 4.14999Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a><a class="me-2" href="#"><img class="img-fluid rounded-1" style="width: 40px; height: 40px;" src="https://images.unsplash.com/photo-1593789382576-54f489574d26?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=128&amp;w=128" alt=""/></a></div>
      </div>
    </div>
  </nav>
</section>

<section>
  <nav class="navbar pb-8 navbar-expand-lg navbar-light bg-white">
    <div class="container-fluid">
      <button class="navbar-burger navbar-toggler" type="button"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item"><a class="nav-link pb-8 px-4 active border-bottom border-2 border-primary" aria-current="page" href="#">Active Tab</a></li>
          <li class="nav-item"><a class="nav-link pb-8 px-4 text-muted" href="#">Inactive Tab</a></li>
          <li class="nav-item"><a class="nav-link pb-8 px-4 text-muted" href="#">Inactive Tab</a></li>
          <li class="nav-item"><a class="nav-link pb-8 px-4 text-muted" href="#">Inactive Tab</a></li>
          <li class="nav-item"><a class="nav-link pb-8 px-4 text-muted" href="#">Inactive Tab</a></li>
        </ul>
        <div class="ms-auto pb-8"><a class="btn btn-outline-light d-inline-flex align-items-center justify-content-center p-0 me-2 shadow rounded-2" href="#" style="width: 40px; height: 40px;">
            <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.12974 8.29964C1.57041 7.35675 1.37453 6.2421 1.57887 5.165C1.78322 4.0879 2.37374 3.12245 3.23955 2.44994C4.10535 1.77742 5.18688 1.4441 6.28105 1.51257C7.37522 1.58104 8.40676 2.04659 9.18197 2.8218C9.95718 3.597 10.4227 4.62854 10.4912 5.72271C10.5597 6.81688 10.2264 7.89841 9.55386 8.76422C8.88135 9.63003 7.9159 10.2206 6.8388 10.4249C5.76171 10.6293 4.64706 10.4334 3.70416 9.87406L3.70417 9.87401L2.14931 10.3183C2.08498 10.3366 2.01691 10.3375 1.95214 10.3207C1.88738 10.3039 1.82828 10.2701 1.78097 10.2228C1.73366 10.1755 1.69986 10.1164 1.68308 10.0516C1.6663 9.98687 1.66714 9.9188 1.68552 9.85447L2.12977 8.29961L2.12974 8.29964Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a><a class="btn btn-outline-light d-inline-flex align-items-center justify-content-center p-0 me-2 shadow rounded-2" href="#" style="width: 40px; height: 40px;">
            <svg width="10" height="12" viewbox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4 11H6" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M1.6988 4.14999C1.69819 3.73489 1.78393 3.32378 1.95108 2.94036C2.11823 2.55694 2.36348 2.20879 2.6727 1.91598C2.98192 1.62317 3.34899 1.39148 3.75275 1.23429C4.15651 1.07709 4.58897 0.997483 5.02522 1.00006C6.84554 1.01294 8.30157 2.45262 8.30157 4.18953V4.49999C8.30157 6.06693 8.64611 6.9762 8.94956 7.47317C8.98225 7.52627 8.99965 7.58663 8.99999 7.64817C9.00034 7.70971 8.98362 7.77025 8.95153 7.82368C8.91944 7.87711 8.87311 7.92155 8.81721 7.9525C8.76131 7.98346 8.69783 7.99984 8.63315 8H1.36685C1.30217 7.99984 1.23867 7.98345 1.18277 7.95249C1.12686 7.92153 1.08053 7.87708 1.04844 7.82364C1.01636 7.7702 0.999648 7.70965 1.00001 7.64811C1.00036 7.58656 1.01777 7.52619 1.05048 7.47309C1.3541 6.97611 1.69879 6.06685 1.69879 4.49999L1.6988 4.14999Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a><a class="me-2" href="#"><img class="img-fluid rounded-1" style="width: 40px; height: 40px;" src="https://images.unsplash.com/photo-1593789382576-54f489574d26?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=128&amp;w=128" alt=""/></a></div>
      </div>
    </div>
  </nav>
</section>

<section>
  <nav class="navbar navbar-light bg-white">
    <div class="container-fluid">
      <button class="navbar-toggler border-0 p-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
        <div class="btn d-inline-flex align-items-center justify-content-center p-0 btn-outline-light shadow rounded-2" style="width: 40px; height: 40px;">
          <svg width="10" height="8" viewbox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1 4H9" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M1 1H9" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M1 7H9" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </div>
      </button>
      <div class="d-flex align-items-center"><img class="img-fluid rounded-2 me-4" style="width: 40px; height: 40px;" src="https://images.unsplash.com/photo-1593789382576-54f489574d26?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=128&amp;w=128" alt=""/>
        <div class="pe-4">
          <p class="fw-bold text-dark mb-0">Super Mario</p>
          <p class="mb-0">Admin</p>
        </div><a class="text-decoration-none" href="#">
          <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 1V10.3333" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M1 7L6 11L11 7" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a>
      </div>
    </div>
  </nav>

<section>
  <nav class="navbar navbar-expand-lg navbar-light bg-white">
    <div class="container-fluid">
      <button class="navbar-toggler border-0 p-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
        <div class="btn d-inline-flex align-items-center justify-content-center p-0 btn-outline-light shadow rounded-2" style="width: 40px; height: 40px;">
          <svg width="10" height="8" viewbox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1 4H9" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M1 1H9" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M1 7H9" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </div>
      </button>
      <div class="collapse navbar-collapse" id="navbarToggler">
        <button class="btn d-inline-flex align-items-center justify-content-center p-0 btn-outline-light shadow rounded-2" type="button" style="width: 40px; height: 40px;">
          <svg width="10" height="8" viewbox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1 4H9" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M1 1H9" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M1 7H9" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="w-100 mw-sm mx-auto d-flex align-items-center">
          <p class="mb-0 fw-bold text-dark">Projects</p>
          <div class="position-relative mx-4 w-100 bg-light" style="height: 4px;">
            <div class="position-absolute top-0 bottom-0 start-0 bg-primary" style="width: 30%;"></div>

<section>
  <div class="p-8 bg-white">
    <button class="d-lg-none navbar-burger navbar-toggler" type="button"><span class="navbar-toggler-icon"></span></button>
    <div class="d-none d-lg-flex align-items-center justify-content-between">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
          <li class="breadcrumb-item" aria-current="page"><a class="d-flex align-items-center" href="#">
              <svg class="text-primary me-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.8737 16.875V9.02647C16.8737 8.93939 16.8555 8.85327 16.8202 8.77363C16.785 8.694 16.7335 8.6226 16.6691 8.56402L10.4187 2.88159C10.3036 2.77699 10.1537 2.71904 9.99821 2.71904C9.84272 2.71905 9.69281 2.77701 9.57777 2.88162L3.3282 8.56402C3.26377 8.6226 3.2123 8.69399 3.17707 8.77363C3.14185 8.85326 3.12366 8.93937 3.12366 9.02645V16.875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M1.24866 16.875H18.7487" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M11.8732 16.8743V12.4993C11.8732 12.3336 11.8073 12.1746 11.6901 12.0574C11.5729 11.9402 11.4139 11.8743 11.2482 11.8743H8.74817C8.58241 11.8743 8.42344 11.9402 8.30623 12.0574C8.18902 12.1746 8.12317 12.3336 8.12317 12.4993V16.8743" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg><span>Homepage</span></a></li>
          <li class="breadcrumb-item active" aria-current="page"><a class="d-flex align-items-center" href="#">
              <svg class="text-primary me-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.8125 16.25H2.1875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M7.8125 16.25V6.875H12.1875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M16.5625 3.125H12.1875V16.25H16.5625V3.125Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M3.4375 16.25V10.625H7.8125" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg><span>Statistics</span></a></li>
        </ol>
      </nav>
      <div class="d-flex align-items-center"><a class="btn btn-outline-light d-inline-flex align-items-center justify-content-center p-0 me-2 shadow rounded-2" href="#" style="width: 40px; height: 40px;">
          <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M2.12974 8.29964C1.57041 7.35675 1.37453 6.2421 1.57887 5.165C1.78322 4.0879 2.37374 3.12245 3.23955 2.44994C4.10535 1.77742 5.18688 1.4441 6.28105 1.51257C7.37522 1.58104 8.40676 2.04659 9.18197 2.8218C9.95718 3.597 10.4227 4.62854 10.4912 5.72271C10.5597 6.81688 10.2264 7.89841 9.55386 8.76422C8.88135 9.63003 7.9159 10.2206 6.8388 10.4249C5.76171 10.6293 4.64706 10.4334 3.70416 9.87406L3.70417 9.87401L2.14931 10.3183C2.08498 10.3366 2.01691 10.3375 1.95214 10.3207C1.88738 10.3039 1.82828 10.2701 1.78097 10.2228C1.73366 10.1755 1.69986 10.1164 1.68308 10.0516C1.6663 9.98687 1.66714 9.9188 1.68552 9.85447L2.12977 8.29961L2.12974 8.29964Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

<section>
  <nav class="navbar navbar-expand-lg navbar-light bg-white">
    <div class="container-fluid">
      <button class="navbar-burger navbar-toggler" type="button"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse">
        <form class="d-flex me-auto">
          <div class="input-group">
            <input class="form-control" type="search" placeholder="Type to search..." aria-label="Type to serach" aria-describedby="basic-addon"/><span class="input-group-text bg-transparent px-4" id="basic-addon2">
              <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5.4375 9.375C7.61212 9.375 9.375 7.61212 9.375 5.4375C9.375 3.26288 7.61212 1.5 5.4375 1.5C3.26288 1.5 1.5 3.26288 1.5 5.4375C1.5 7.61212 3.26288 9.375 5.4375 9.375Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8.22156 8.22192L10.4997 10.5001" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></span>
          </div>
        </form>
        <div class="d-flex align-items-center"><a class="btn btn-outline-light d-inline-flex align-items-center justify-content-center p-0 me-2 shadow rounded-2" href="#" style="width: 40px; height: 40px;">
            <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.12974 8.29964C1.57041 7.35675 1.37453 6.2421 1.57887 5.165C1.78322 4.0879 2.37374 3.12245 3.23955 2.44994C4.10535 1.77742 5.18688 1.4441 6.28105 1.51257C7.37522 1.58104 8.40676 2.04659 9.18197 2.8218C9.95718 3.597 10.4227 4.62854 10.4912 5.72271C10.5597 6.81688 10.2264 7.89841 9.55386 8.76422C8.88135 9.63003 7.9159 10.2206 6.8388 10.4249C5.76171 10.6293 4.64706 10.4334 3.70416 9.87406L3.70417 9.87401L2.14931 10.3183C2.08498 10.3366 2.01691 10.3375 1.95214 10.3207C1.88738 10.3039 1.82828 10.2701 1.78097 10.2228C1.73366 10.1755 1.69986 10.1164 1.68308 10.0516C1.6663 9.98687 1.66714 9.9188 1.68552 9.85447L2.12977 8.29961L2.12974 8.29964Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a><a class="btn btn-outline-light d-inline-flex align-items-center justify-content-center p-0 me-2 shadow rounded-2" href="#" style="width: 40px; height: 40px;">
            <svg width="10" height="12" viewbox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4 11H6" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M1.6988 4.14999C1.69819 3.73489 1.78393 3.32378 1.95108 2.94036C2.11823 2.55694 2.36348 2.20879 2.6727 1.91598C2.98192 1.62317 3.34899 1.39148 3.75275 1.23429C4.15651 1.07709 4.58897 0.997483 5.02522 1.00006C6.84554 1.01294 8.30157 2.45262 8.30157 4.18953V4.49999C8.30157 6.06693 8.64611 6.9762 8.94956 7.47317C8.98225 7.52627 8.99965 7.58663 8.99999 7.64817C9.00034 7.70971 8.98362 7.77025 8.95153 7.82368C8.91944 7.87711 8.87311 7.92155 8.81721 7.9525C8.76131 7.98346 8.69783 7.99984 8.63315 8H1.36685C1.30217 7.99984 1.23867 7.98345 1.18277 7.95249C1.12686 7.92153 1.08053 7.87708 1.04844 7.82364C1.01636 7.7702 0.999648 7.70965 1.00001 7.64811C1.00036 7.58656 1.01777 7.52619 1.05048 7.47309C1.3541 6.97611 1.69879 6.06685 1.69879 4.49999L1.6988 4.14999Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a>
          <div class="d-inline-flex align-items-center"><img class="img-fluid rounded-2 me-4" style="width: 40px; height: 40px;" src="https://images.unsplash.com/photo-1593789382576-54f489574d26?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=128&amp;w=128" alt=""/>
            <div class="pe-4">

<section>
  <nav class="position-relative navbar navbar-expand-lg navbar-light bg-white">
    <div class="container-fluid">
      <button class="navbar-burger navbar-toggler" type="button"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse">
        <form class="position-absolute top-50 start-50 translate-middle d-flex me-auto">
          <div class="input-group">
            <input class="form-control" type="search" placeholder="Type to search..." aria-label="Type to serach" aria-describedby="basic-addon"/><span class="input-group-text bg-transparent px-4" id="basic-addon2">
              <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5.4375 9.375C7.61212 9.375 9.375 7.61212 9.375 5.4375C9.375 3.26288 7.61212 1.5 5.4375 1.5C3.26288 1.5 1.5 3.26288 1.5 5.4375C1.5 7.61212 3.26288 9.375 5.4375 9.375Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8.22156 8.22192L10.4997 10.5001" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></span>
          </div>
        </form>
        <div class="ms-auto d-flex align-items-center"><a class="btn btn-outline-light d-inline-flex align-items-center justify-content-center p-0 me-2 shadow rounded-2" href="#" style="width: 40px; height: 40px;">
            <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.12974 8.29964C1.57041 7.35675 1.37453 6.2421 1.57887 5.165C1.78322 4.0879 2.37374 3.12245 3.23955 2.44994C4.10535 1.77742 5.18688 1.4441 6.28105 1.51257C7.37522 1.58104 8.40676 2.04659 9.18197 2.8218C9.95718 3.597 10.4227 4.62854 10.4912 5.72271C10.5597 6.81688 10.2264 7.89841 9.55386 8.76422C8.88135 9.63003 7.9159 10.2206 6.8388 10.4249C5.76171 10.6293 4.64706 10.4334 3.70416 9.87406L3.70417 9.87401L2.14931 10.3183C2.08498 10.3366 2.01691 10.3375 1.95214 10.3207C1.88738 10.3039 1.82828 10.2701 1.78097 10.2228C1.73366 10.1755 1.69986 10.1164 1.68308 10.0516C1.6663 9.98687 1.66714 9.9188 1.68552 9.85447L2.12977 8.29961L2.12974 8.29964Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a><a class="btn btn-outline-light d-inline-flex align-items-center justify-content-center p-0 me-2 shadow rounded-2" href="#" style="width: 40px; height: 40px;">
            <svg width="10" height="12" viewbox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4 11H6" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M1.6988 4.14999C1.69819 3.73489 1.78393 3.32378 1.95108 2.94036C2.11823 2.55694 2.36348 2.20879 2.6727 1.91598C2.98192 1.62317 3.34899 1.39148 3.75275 1.23429C4.15651 1.07709 4.58897 0.997483 5.02522 1.00006C6.84554 1.01294 8.30157 2.45262 8.30157 4.18953V4.49999C8.30157 6.06693 8.64611 6.9762 8.94956 7.47317C8.98225 7.52627 8.99965 7.58663 8.99999 7.64817C9.00034 7.70971 8.98362 7.77025 8.95153 7.82368C8.91944 7.87711 8.87311 7.92155 8.81721 7.9525C8.76131 7.98346 8.69783 7.99984 8.63315 8H1.36685C1.30217 7.99984 1.23867 7.98345 1.18277 7.95249C1.12686 7.92153 1.08053 7.87708 1.04844 7.82364C1.01636 7.7702 0.999648 7.70965 1.00001 7.64811C1.00036 7.58656 1.01777 7.52619 1.05048 7.47309C1.3541 6.97611 1.69879 6.06685 1.69879 4.49999L1.6988 4.14999Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a>
          <div class="d-inline-flex align-items-center"><img class="img-fluid rounded-2 me-4" style="width: 40px; height: 40px;" src="https://images.unsplash.com/photo-1593789382576-54f489574d26?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=128&amp;w=128" alt=""/>
            <div class="pe-4">

<section>
  <div class="p-8 bg-white">
    <button class="d-lg-none navbar-burger navbar-toggler" type="button"><span class="navbar-toggler-icon"></span></button>
    <div class="d-none d-lg-flex align-items-center justify-content-between">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
          <li class="breadcrumb-item" aria-current="page"><a class="d-flex align-items-center" href="#">
              <svg class="text-primary me-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.8737 16.875V9.02647C16.8737 8.93939 16.8555 8.85327 16.8202 8.77363C16.785 8.694 16.7335 8.6226 16.6691 8.56402L10.4187 2.88159C10.3036 2.77699 10.1537 2.71904 9.99821 2.71904C9.84272 2.71905 9.69281 2.77701 9.57777 2.88162L3.3282 8.56402C3.26377 8.6226 3.2123 8.69399 3.17707 8.77363C3.14185 8.85326 3.12366 8.93937 3.12366 9.02645V16.875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M1.24866 16.875H18.7487" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M11.8732 16.8743V12.4993C11.8732 12.3336 11.8073 12.1746 11.6901 12.0574C11.5729 11.9402 11.4139 11.8743 11.2482 11.8743H8.74817C8.58241 11.8743 8.42344 11.9402 8.30623 12.0574C8.18902 12.1746 8.12317 12.3336 8.12317 12.4993V16.8743" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg><span>Homepage</span></a></li>
          <li class="breadcrumb-item active" aria-current="page"><a class="d-flex align-items-center" href="#">
              <svg class="text-primary me-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.8125 16.25H2.1875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M7.8125 16.25V6.875H12.1875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M16.5625 3.125H12.1875V16.25H16.5625V3.125Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M3.4375 16.25V10.625H7.8125" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg><span>Statistics</span></a></li>
        </ol>
      </nav>
      <div class="d-flex align-items-center"><a class="me-2 btn btn-primary" href="#" type="button"><span class="me-3">
            <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.5 8H13.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

<section>
  <nav class="navbar navbar-expand-lg navbar-light bg-white flex-wrap">
    <div class="container-fluid pb-8 border-bottom">
      <div class="position-relative collapse navbar-collapse">
        <div class="d-flex align-items-center">
          <div class="d-flex align-items-center justify-content-center me-4 border rounded-2" style="width: 40px; height: 40px;"><img src="sirius-assets/images/logos/sirius-sign-blue.svg" alt=""/></div>
          <div class="me-4">
            <p class="mb-0 fw-bold text-dark">Sirius Library</p>
          </div><a href="#">
            <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 5.99998V1.33331" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M10.6666 3.99998L7.99992 1.33331L5.33325 3.99998" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8 10V14.3333" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M5.33325 12L7.99992 14.6667L10.6666 12" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a>
        </div>
        <form class="position-absolute top-50 start-50 translate-middle d-flex mx-auto">
          <div class="input-group">
            <input class="form-control" type="search" placeholder="Type to search..." aria-label="Type to serach" aria-describedby="basic-addon"/><span class="input-group-text bg-transparent px-4" id="basic-addon2">
              <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5.4375 9.375C7.61212 9.375 9.375 7.61212 9.375 5.4375C9.375 3.26288 7.61212 1.5 5.4375 1.5C3.26288 1.5 1.5 3.26288 1.5 5.4375C1.5 7.61212 3.26288 9.375 5.4375 9.375Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8.22156 8.22192L10.4997 10.5001" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></span>
          </div>