Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header class="topheader">
  <h1 class="text-white py-2 px-2 text-center">Logo</h1>
</header>
<div class="container bg-section py-5 px-5 mt-5 mb-5">
  <div class="row">
    <div class="col-sm-12 col-md-12">

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-light-success">
          <!--begin::Svg Icon | path: icons/duotune/ecommerce/ecm002.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-success">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M21 10H13V11C13 11.6 12.6 12 12 12C11.4 12 11 11.6 11 11V10H3C2.4 10 2 10.4 2 11V13H22V11C22 10.4 21.6 10 21 10Z" fill="black"></path>
              <path opacity="0.3" d="M12 12C11.4 12 11 11.6 11 11V3C11 2.4 11.4 2 12 2C12.6 2 13 2.4 13 3V11C13 11.6 12.6 12 12 12Z" fill="black"></path>
              <path opacity="0.3" d="M18.1 21H5.9C5.4 21 4.9 20.6 4.8 20.1L3 13H21L19.2 20.1C19.1 20.6 18.6 21 18.1 21ZM13 18V15C13 14.4 12.6 14 12 14C11.4 14 11 14.4 11 15V18C11 18.6 11.4 19 12 19C12.6 19 13 18.6 13 18ZM17 18V15C17 14.4 16.6 14 16 14C15.4 14 15 14.4 15 15V18C15 18.6 15.4 19 16 19C16.6 19 17 18.6 17 18ZM9 18V15C9 14.4 8.6 14 8 14C7.4 14 7 14.4 7 15V18C7 18.6 7.4 19 8 19C8.6 19 9 18.6 9 18Z" fill="black"></path>
            </svg>
          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-light-danger">
          <!--begin::Svg Icon | path: icons/duotune/general/gen025.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-danger">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <rect x="2" y="2" width="9" height="9" rx="2" fill="black"></rect>
              <rect opacity="0.3" x="13" y="2" width="9" height="9" rx="2" fill="black"></rect>
              <rect opacity="0.3" x="13" y="13" width="9" height="9" rx="2" fill="black"></rect>
              <rect opacity="0.3" x="2" y="13" width="9" height="9" rx="2" fill="black"></rect>
            </svg>
          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-light-info">
          <!--begin::Svg Icon | path: icons/duotune/finance/fin006.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-info">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M20 15H4C2.9 15 2 14.1 2 13V7C2 6.4 2.4 6 3 6H21C21.6 6 22 6.4 22 7V13C22 14.1 21.1 15 20 15ZM13 12H11C10.5 12 10 12.4 10 13V16C10 16.5 10.4 17 11 17H13C13.6 17 14 16.6 14 16V13C14 12.4 13.6 12 13 12Z" fill="black"></path>
              <path d="M14 6V5H10V6H8V5C8 3.9 8.9 3 10 3H14C15.1 3 16 3.9 16 5V6H14ZM20 15H14V16C14 16.6 13.5 17 13 17H11C10.5 17 10 16.6 10 16V15H4C3.6 15 3.3 14.9 3 14.7V18C3 19.1 3.9 20 5 20H19C20.1 20 21 19.1 21 18V14.7C20.7 14.9 20.4 15 20 15Z" fill="black"></path>
            </svg>
          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-light-warning">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs027.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-warning">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M21.25 18.525L13.05 21.825C12.35 22.125 11.65 22.125 10.95 21.825L2.75 18.525C1.75 18.125 1.75 16.725 2.75 16.325L4.04999 15.825L10.25 18.325C10.85 18.525 11.45 18.625 12.05 18.625C12.65 18.625 13.25 18.525 13.85 18.325L20.05 15.825L21.35 16.325C22.35 16.725 22.35 18.125 21.25 18.525ZM13.05 16.425L21.25 13.125C22.25 12.725 22.25 11.325 21.25 10.925L13.05 7.62502C12.35 7.32502 11.65 7.32502 10.95 7.62502L2.75 10.925C1.75 11.325 1.75 12.725 2.75 13.125L10.95 16.425C11.65 16.725 12.45 16.725 13.05 16.425Z" fill="black"></path>
              <path d="M11.05 11.025L2.84998 7.725C1.84998 7.325 1.84998 5.925 2.84998 5.525L11.05 2.225C11.75 1.925 12.45 1.925 13.15 2.225L21.35 5.525C22.35 5.925 22.35 7.325 21.35 7.725L13.05 11.025C12.45 11.325 11.65 11.325 11.05 11.025Z" fill="black"></path>
            </svg>
          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-light-primary">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-primary">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M18 21.6C16.6 20.4 9.1 20.3 6.3 21.2C5.7 21.4 5.1 21.2 4.7 20.8L2 18C4.2 15.8 10.8 15.1 15.8 15.8C16.2 18.3 17 20.5 18 21.6ZM18.8 2.8C18.4 2.4 17.8 2.20001 17.2 2.40001C14.4 3.30001 6.9 3.2 5.5 2C6.8 3.3 7.4 5.5 7.7 7.7C9 7.9 10.3 8 11.7 8C15.8 8 19.8 7.2 21.5 5.5L18.8 2.8Z" fill="black"></path>
              <path opacity="0.3" d="M21.2 17.3C21.4 17.9 21.2 18.5 20.8 18.9L18 21.6C15.8 19.4 15.1 12.8 15.8 7.8C18.3 7.4 20.4 6.70001 21.5 5.60001C20.4 7.00001 20.2 14.5 21.2 17.3ZM8 11.7C8 9 7.7 4.2 5.5 2L2.8 4.8C2.4 5.2 2.2 5.80001 2.4 6.40001C2.7 7.40001 3.00001 9.2 3.10001 11.7C3.10001 15.5 2.40001 17.6 2.10001 18C3.20001 16.9 5.3 16.2 7.8 15.8C8 14.2 8 12.7 8 11.7Z" fill="black"></path>
            </svg>
          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary yellow-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-yellow">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <rect x="8" y="9" width="3" height="10" rx="1.5" fill="black"></rect>
              <rect opacity="0.5" x="13" y="5" width="3" height="14" rx="1.5" fill="black"></rect>
              <rect x="18" y="11" width="3" height="8" rx="1.5" fill="black"></rect>
              <rect x="3" y="13" width="3" height="6" rx="1.5" fill="black"></rect>
            </svg>
          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-light-warning">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs027.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-warning">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M11.2929 2.70711C11.6834 2.31658 12.3166 2.31658 12.7071 2.70711L15.2929 5.29289C15.6834 5.68342 15.6834 6.31658 15.2929 6.70711L12.7071 9.29289C12.3166 9.68342 11.6834 9.68342 11.2929 9.29289L8.70711 6.70711C8.31658 6.31658 8.31658 5.68342 8.70711 5.29289L11.2929 2.70711Z" fill="black"></path>
              <path d="M11.2929 14.7071C11.6834 14.3166 12.3166 14.3166 12.7071 14.7071L15.2929 17.2929C15.6834 17.6834 15.6834 18.3166 15.2929 18.7071L12.7071 21.2929C12.3166 21.6834 11.6834 21.6834 11.2929 21.2929L8.70711 18.7071C8.31658 18.3166 8.31658 17.6834 8.70711 17.2929L11.2929 14.7071Z" fill="black"></path>
              <path opacity="0.3" d="M5.29289 8.70711C5.68342 8.31658 6.31658 8.31658 6.70711 8.70711L9.29289 11.2929C9.68342 11.6834 9.68342 12.3166 9.29289 12.7071L6.70711 15.2929C6.31658 15.6834 5.68342 15.6834 5.29289 15.2929L2.70711 12.7071C2.31658 12.3166 2.31658 11.6834 2.70711 11.2929L5.29289 8.70711Z" fill="black"></path>
              <path opacity="0.3" d="M17.2929 8.70711C17.6834 8.31658 18.3166 8.31658 18.7071 8.70711L21.2929 11.2929C21.6834 11.6834 21.6834 12.3166 21.2929 12.7071L18.7071 15.2929C18.3166 15.6834 17.6834 15.6834 17.2929 15.2929L14.7071 12.7071C14.3166 12.3166 14.3166 11.6834 14.7071 11.2929L17.2929 8.70711Z" fill="black"></path>
            </svg>
          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-light-success">
          <!--begin::Svg Icon | path: icons/duotune/ecommerce/ecm002.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-success">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M20 3H4C2.89543 3 2 3.89543 2 5V16C2 17.1046 2.89543 18 4 18H4.5C5.05228 18 5.5 18.4477 5.5 19V21.5052C5.5 22.1441 6.21212 22.5253 6.74376 22.1708L11.4885 19.0077C12.4741 18.3506 13.6321 18 14.8167 18H20C21.1046 18 22 17.1046 22 16V5C22 3.89543 21.1046 3 20 3Z" fill="black"></path>
              <rect x="6" y="12" width="7" height="2" rx="1" fill="black"></rect>
              <rect x="6" y="7" width="12" height="2" rx="1" fill="black"></rect>
            </svg>
          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary yellow-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-yellow">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M20.859 12.596L17.736 13.596L10.388 20.944C10.2915 21.0406 10.1769 21.1172 10.0508 21.1695C9.9247 21.2218 9.78953 21.2486 9.65302 21.2486C9.5165 21.2486 9.3813 21.2218 9.25519 21.1695C9.12907 21.1172 9.01449 21.0406 8.918 20.944L2.29999 14.3229C2.10543 14.1278 1.99619 13.8635 1.99619 13.588C1.99619 13.3124 2.10543 13.0481 2.29999 12.853L11.853 3.29999C11.9495 3.20341 12.0641 3.12679 12.1902 3.07452C12.3163 3.02225 12.4515 2.9953 12.588 2.9953C12.7245 2.9953 12.8597 3.02225 12.9858 3.07452C13.1119 3.12679 13.2265 3.20341 13.323 3.29999L21.199 11.176C21.3036 11.2791 21.3797 11.4075 21.4201 11.5486C21.4605 11.6898 21.4637 11.8391 21.4295 11.9819C21.3953 12.1247 21.3249 12.2562 21.2249 12.3638C21.125 12.4714 20.9989 12.5514 20.859 12.596Z" fill="black"></path>
              <path d="M14.8 10.184C14.7447 10.1843 14.6895 10.1796 14.635 10.1699L5.816 8.69997C5.55436 8.65634 5.32077 8.51055 5.16661 8.29469C5.01246 8.07884 4.95035 7.8106 4.99397 7.54897C5.0376 7.28733 5.18339 7.05371 5.39925 6.89955C5.6151 6.7454 5.88334 6.68332 6.14498 6.72694L14.963 8.19692C15.2112 8.23733 15.435 8.36982 15.59 8.56789C15.7449 8.76596 15.8195 9.01502 15.7989 9.26564C15.7784 9.51626 15.6642 9.75001 15.479 9.92018C15.2939 10.0904 15.0514 10.1846 14.8 10.184ZM17 18.6229C17 19.0281 17.0985 19.4272 17.287 19.7859C17.4755 20.1446 17.7484 20.4521 18.0821 20.6819C18.4158 20.9117 18.8004 21.0571 19.2027 21.1052C19.605 21.1534 20.0131 21.103 20.3916 20.9585C20.7702 20.814 21.1079 20.5797 21.3758 20.2757C21.6437 19.9716 21.8336 19.607 21.9293 19.2133C22.025 18.8195 22.0235 18.4085 21.925 18.0154C21.8266 17.6223 21.634 17.259 21.364 16.9569L19.843 15.257C19.7999 15.2085 19.7471 15.1697 19.688 15.1432C19.6289 15.1167 19.5648 15.1029 19.5 15.1029C19.4352 15.1029 19.3711 15.1167 19.312 15.1432C19.2529 15.1697 19.2001 15.2085 19.157 15.257L17.636 16.9569C17.2254 17.4146 16.9988 18.0081 17 18.6229ZM10.388 20.9409L17.736 13.5929H1.99999C1.99921 13.7291 2.02532 13.8643 2.0768 13.9904C2.12828 14.1165 2.2041 14.2311 2.29997 14.3279L8.91399 20.9409C9.01055 21.0381 9.12539 21.1152 9.25188 21.1679C9.37836 21.2205 9.51399 21.2476 9.65099 21.2476C9.78798 21.2476 9.92361 21.2205 10.0501 21.1679C10.1766 21.1152 10.2914 21.0381 10.388 20.9409Z" fill="black"></path>
            </svg>
          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary yellow-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-yellow">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M21.25 18.525L13.05 21.825C12.35 22.125 11.65 22.125 10.95 21.825L2.75 18.525C1.75 18.125 1.75 16.725 2.75 16.325L4.04999 15.825L10.25 18.325C10.85 18.525 11.45 18.625 12.05 18.625C12.65 18.625 13.25 18.525 13.85 18.325L20.05 15.825L21.35 16.325C22.35 16.725 22.35 18.125 21.25 18.525ZM13.05 16.425L21.25 13.125C22.25 12.725 22.25 11.325 21.25 10.925L13.05 7.62502C12.35 7.32502 11.65 7.32502 10.95 7.62502L2.75 10.925C1.75 11.325 1.75 12.725 2.75 13.125L10.95 16.425C11.65 16.725 12.45 16.725 13.05 16.425Z" fill="black"></path>
              <path d="M11.05 11.025L2.84998 7.725C1.84998 7.325 1.84998 5.925 2.84998 5.525L11.05 2.225C11.75 1.925 12.45 1.925 13.15 2.225L21.35 5.525C22.35 5.925 22.35 7.325 21.35 7.725L13.05 11.025C12.45 11.325 11.65 11.325 11.05 11.025Z" fill="black"></path>
            </svg>
          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary yellow-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-yellow">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M3 6C2.4 6 2 5.6 2 5V3C2 2.4 2.4 2 3 2H5C5.6 2 6 2.4 6 3C6 3.6 5.6 4 5 4H4V5C4 5.6 3.6 6 3 6ZM22 5V3C22 2.4 21.6 2 21 2H19C18.4 2 18 2.4 18 3C18 3.6 18.4 4 19 4H20V5C20 5.6 20.4 6 21 6C21.6 6 22 5.6 22 5ZM6 21C6 20.4 5.6 20 5 20H4V19C4 18.4 3.6 18 3 18C2.4 18 2 18.4 2 19V21C2 21.6 2.4 22 3 22H5C5.6 22 6 21.6 6 21ZM22 21V19C22 18.4 21.6 18 21 18C20.4 18 20 18.4 20 19V20H19C18.4 20 18 20.4 18 21C18 21.6 18.4 22 19 22H21C21.6 22 22 21.6 22 21Z" fill="black"></path>
              <path d="M3 16C2.4 16 2 15.6 2 15V9C2 8.4 2.4 8 3 8C3.6 8 4 8.4 4 9V15C4 15.6 3.6 16 3 16ZM13 15V9C13 8.4 12.6 8 12 8C11.4 8 11 8.4 11 9V15C11 15.6 11.4 16 12 16C12.6 16 13 15.6 13 15ZM17 15V9C17 8.4 16.6 8 16 8C15.4 8 15 8.4 15 9V15C15 15.6 15.4 16 16 16C16.6 16 17 15.6 17 15ZM9 15V9C9 8.4 8.6 8 8 8H7C6.4 8 6 8.4 6 9V15C6 15.6 6.4 16 7 16H8C8.6 16 9 15.6 9 15ZM22 15V9C22 8.4 21.6 8 21 8H20C19.4 8 19 8.4 19 9V15C19 15.6 19.4 16 20 16H21C21.6 16 22 15.6 22 15Z" fill="black"></path>
            </svg>
          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary yellow-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-yellow">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M22.1 11.5V12.6C22.1 13.2 21.7 13.6 21.2 13.7L19.9 13.9C19.7 14.7 19.4 15.5 18.9 16.2L19.7 17.2999C20 17.6999 20 18.3999 19.6 18.7999L18.8 19.6C18.4 20 17.8 20 17.3 19.7L16.2 18.9C15.5 19.3 14.7 19.7 13.9 19.9L13.7 21.2C13.6 21.7 13.1 22.1 12.6 22.1H11.5C10.9 22.1 10.5 21.7 10.4 21.2L10.2 19.9C9.4 19.7 8.6 19.4 7.9 18.9L6.8 19.7C6.4 20 5.7 20 5.3 19.6L4.5 18.7999C4.1 18.3999 4.1 17.7999 4.4 17.2999L5.2 16.2C4.8 15.5 4.4 14.7 4.2 13.9L2.9 13.7C2.4 13.6 2 13.1 2 12.6V11.5C2 10.9 2.4 10.5 2.9 10.4L4.2 10.2C4.4 9.39995 4.7 8.60002 5.2 7.90002L4.4 6.79993C4.1 6.39993 4.1 5.69993 4.5 5.29993L5.3 4.5C5.7 4.1 6.3 4.10002 6.8 4.40002L7.9 5.19995C8.6 4.79995 9.4 4.39995 10.2 4.19995L10.4 2.90002C10.5 2.40002 11 2 11.5 2H12.6C13.2 2 13.6 2.40002 13.7 2.90002L13.9 4.19995C14.7 4.39995 15.5 4.69995 16.2 5.19995L17.3 4.40002C17.7 4.10002 18.4 4.1 18.8 4.5L19.6 5.29993C20 5.69993 20 6.29993 19.7 6.79993L18.9 7.90002C19.3 8.60002 19.7 9.39995 19.9 10.2L21.2 10.4C21.7 10.5 22.1 11 22.1 11.5ZM12.1 8.59998C10.2 8.59998 8.6 10.2 8.6 12.1C8.6 14 10.2 15.6 12.1 15.6C14 15.6 15.6 14 15.6 12.1C15.6 10.2 14 8.59998 12.1 8.59998Z" fill="black"></path>
              <path d="M17.1 12.1C17.1 14.9 14.9 17.1 12.1 17.1C9.30001 17.1 7.10001 14.9 7.10001 12.1C7.10001 9.29998 9.30001 7.09998 12.1 7.09998C14.9 7.09998 17.1 9.29998 17.1 12.1ZM12.1 10.1C11 10.1 10.1 11 10.1 12.1C10.1 13.2 11 14.1 12.1 14.1C13.2 14.1 14.1 13.2 14.1 12.1C14.1 11 13.2 10.1 12.1 10.1Z" fill="black"></path>
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary yellow-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-yellow">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M2 16C2 16.6 2.4 17 3 17H21C21.6 17 22 16.6 22 16V15H2V16Z" fill="black"></path>
              <path opacity="0.3" d="M21 3H3C2.4 3 2 3.4 2 4V15H22V4C22 3.4 21.6 3 21 3Z" fill="black"></path>
              <path opacity="0.3" d="M15 17H9V20H15V17Z" fill="black"></path>
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary yellow-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-yellow">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M14 3V21H10V3C10 2.4 10.4 2 11 2H13C13.6 2 14 2.4 14 3ZM7 14H5C4.4 14 4 14.4 4 15V21H8V15C8 14.4 7.6 14 7 14Z" fill="black"></path>
              <path d="M21 20H20V8C20 7.4 19.6 7 19 7H17C16.4 7 16 7.4 16 8V20H3C2.4 20 2 20.4 2 21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21C22 20.4 21.6 20 21 20Z" fill="black"></path>
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary yellow-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-yellow">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M13 5.91517C15.8 6.41517 18 8.81519 18 11.8152C18 12.5152 17.9 13.2152 17.6 13.9152L20.1 15.3152C20.6 15.6152 21.4 15.4152 21.6 14.8152C21.9 13.9152 22.1 12.9152 22.1 11.8152C22.1 7.01519 18.8 3.11521 14.3 2.01521C13.7 1.91521 13.1 2.31521 13.1 3.01521V5.91517H13Z" fill="black"></path>
              <path opacity="0.3" d="M19.1 17.0152C19.7 17.3152 19.8 18.1152 19.3 18.5152C17.5 20.5152 14.9 21.7152 12 21.7152C9.1 21.7152 6.50001 20.5152 4.70001 18.5152C4.30001 18.0152 4.39999 17.3152 4.89999 17.0152L7.39999 15.6152C8.49999 16.9152 10.2 17.8152 12 17.8152C13.8 17.8152 15.5 17.0152 16.6 15.6152L19.1 17.0152ZM6.39999 13.9151C6.19999 13.2151 6 12.5152 6 11.8152C6 8.81517 8.2 6.41515 11 5.91515V3.01519C11 2.41519 10.4 1.91519 9.79999 2.01519C5.29999 3.01519 2 7.01517 2 11.8152C2 12.8152 2.2 13.8152 2.5 14.8152C2.7 15.4152 3.4 15.7152 4 15.3152L6.39999 13.9151Z" fill="black"></path>
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary yellow-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-yellow">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M20 8L12.5 5L5 14V19H20V8Z" fill="black"></path>
              <path d="M21 18H6V3C6 2.4 5.6 2 5 2C4.4 2 4 2.4 4 3V18H3C2.4 18 2 18.4 2 19C2 19.6 2.4 20 3 20H4V21C4 21.6 4.4 22 5 22C5.6 22 6 21.6 6 21V20H21C21.6 20 22 19.6 22 19C22 18.4 21.6 18 21 18Z" fill="black"></path>
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary yellow-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-yellow">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M6 8.725C6 8.125 6.4 7.725 7 7.725H14L18 11.725V12.925L22 9.725L12.6 2.225C12.2 1.925 11.7 1.925 11.4 2.225L2 9.725L6 12.925V8.725Z" fill="black"></path>
              <path opacity="0.3" d="M22 9.72498V20.725C22 21.325 21.6 21.725 21 21.725H3C2.4 21.725 2 21.325 2 20.725V9.72498L11.4 17.225C11.8 17.525 12.3 17.525 12.6 17.225L22 9.72498ZM15 11.725H18L14 7.72498V10.725C14 11.325 14.4 11.725 15 11.725Z" fill="black"></path>
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary yellow-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-yellow">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M20 19.725V18.725C20 18.125 19.6 17.725 19 17.725H5C4.4 17.725 4 18.125 4 18.725V19.725H3C2.4 19.725 2 20.125 2 20.725V21.725H22V20.725C22 20.125 21.6 19.725 21 19.725H20Z" fill="black"></path>
              <path opacity="0.3" d="M22 6.725V7.725C22 8.325 21.6 8.725 21 8.725H18C18.6 8.725 19 9.125 19 9.725C19 10.325 18.6 10.725 18 10.725V15.725C18.6 15.725 19 16.125 19 16.725V17.725H15V16.725C15 16.125 15.4 15.725 16 15.725V10.725C15.4 10.725 15 10.325 15 9.725C15 9.125 15.4 8.725 16 8.725H13C13.6 8.725 14 9.125 14 9.725C14 10.325 13.6 10.725 13 10.725V15.725C13.6 15.725 14 16.125 14 16.725V17.725H10V16.725C10 16.125 10.4 15.725 11 15.725V10.725C10.4 10.725 10 10.325 10 9.725C10 9.125 10.4 8.725 11 8.725H8C8.6 8.725 9 9.125 9 9.725C9 10.325 8.6 10.725 8 10.725V15.725C8.6 15.725 9 16.125 9 16.725V17.725H5V16.725C5 16.125 5.4 15.725 6 15.725V10.725C5.4 10.725 5 10.325 5 9.725C5 9.125 5.4 8.725 6 8.725H3C2.4 8.725 2 8.325 2 7.725V6.725L11 2.225C11.6 1.925 12.4 1.925 13.1 2.225L22 6.725ZM12 3.725C11.2 3.725 10.5 4.425 10.5 5.225C10.5 6.025 11.2 6.725 12 6.725C12.8 6.725 13.5 6.025 13.5 5.225C13.5 4.425 12.8 3.725 12 3.725Z" fill="black"></path>
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary yellow-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-yellow">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M10.9607 12.9128H18.8607C19.4607 12.9128 19.9607 13.4128 19.8607 14.0128C19.2607 19.0128 14.4607 22.7128 9.26068 21.7128C5.66068 21.0128 2.86071 18.2128 2.16071 14.6128C1.16071 9.31284 4.96069 4.61281 9.86069 4.01281C10.4607 3.91281 10.9607 4.41281 10.9607 5.01281V12.9128Z" fill="black"></path>
              <path d="M12.9607 10.9128V3.01281C12.9607 2.41281 13.4607 1.91281 14.0607 2.01281C16.0607 2.21281 17.8607 3.11284 19.2607 4.61284C20.6607 6.01284 21.5607 7.91285 21.8607 9.81285C21.9607 10.4129 21.4607 10.9128 20.8607 10.9128H12.9607Z" fill="black"></path>
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary yellow-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-yellow">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M21.4 8.35303L19.241 10.511L13.485 4.755L15.643 2.59595C16.0248 2.21423 16.5426 1.99988 17.0825 1.99988C17.6224 1.99988 18.1402 2.21423 18.522 2.59595L21.4 5.474C21.7817 5.85581 21.9962 6.37355 21.9962 6.91345C21.9962 7.45335 21.7817 7.97122 21.4 8.35303ZM3.68699 21.932L9.88699 19.865L4.13099 14.109L2.06399 20.309C1.98815 20.5354 1.97703 20.7787 2.03189 21.0111C2.08674 21.2436 2.2054 21.4561 2.37449 21.6248C2.54359 21.7934 2.75641 21.9115 2.989 21.9658C3.22158 22.0201 3.4647 22.0084 3.69099 21.932H3.68699Z" fill="black"></path>
              <path d="M5.574 21.3L3.692 21.928C3.46591 22.0032 3.22334 22.0141 2.99144 21.9594C2.75954 21.9046 2.54744 21.7864 2.3789 21.6179C2.21036 21.4495 2.09202 21.2375 2.03711 21.0056C1.9822 20.7737 1.99289 20.5312 2.06799 20.3051L2.696 18.422L5.574 21.3ZM4.13499 14.105L9.891 19.861L19.245 10.507L13.489 4.75098L4.13499 14.105Z" fill="black"></path>
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary yellow-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-yellow">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M20 3H4C2.89543 3 2 3.89543 2 5V16C2 17.1046 2.89543 18 4 18H4.5C5.05228 18 5.5 18.4477 5.5 19V21.5052C5.5 22.1441 6.21212 22.5253 6.74376 22.1708L11.4885 19.0077C12.4741 18.3506 13.6321 18 14.8167 18H20C21.1046 18 22 17.1046 22 16V5C22 3.89543 21.1046 3 20 3Z" fill="black"></path>
              <rect x="6" y="12" width="7" height="2" rx="1" fill="black"></rect>
              <rect x="6" y="7" width="12" height="2" rx="1" fill="black"></rect>
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary yellow-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-yellow">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M11.2166 8.50002L10.5166 7.80007C10.1166 7.40007 10.1166 6.80005 10.5166 6.40005L13.4166 3.50002C15.5166 1.40002 18.9166 1.50005 20.8166 3.90005C22.5166 5.90005 22.2166 8.90007 20.3166 10.8001L17.5166 13.6C17.1166 14 16.5166 14 16.1166 13.6L15.4166 12.9C15.0166 12.5 15.0166 11.9 15.4166 11.5L18.3166 8.6C19.2166 7.7 19.1166 6.30002 18.0166 5.50002C17.2166 4.90002 16.0166 5.10007 15.3166 5.80007L12.4166 8.69997C12.2166 8.89997 11.6166 8.90002 11.2166 8.50002ZM11.2166 15.6L8.51659 18.3001C7.81659 19.0001 6.71658 19.2 5.81658 18.6C4.81658 17.9 4.71659 16.4 5.51659 15.5L8.31658 12.7C8.71658 12.3 8.71658 11.7001 8.31658 11.3001L7.6166 10.6C7.2166 10.2 6.6166 10.2 6.2166 10.6L3.6166 13.2C1.7166 15.1 1.4166 18.1 3.1166 20.1C5.0166 22.4 8.51659 22.5 10.5166 20.5L13.3166 17.7C13.7166 17.3 13.7166 16.7001 13.3166 16.3001L12.6166 15.6C12.3166 15.2 11.6166 15.2 11.2166 15.6Z" fill="black"></path>
              <path opacity="0.3" d="M5.0166 9L2.81659 8.40002C2.31659 8.30002 2.0166 7.79995 2.1166 7.19995L2.31659 5.90002C2.41659 5.20002 3.21659 4.89995 3.81659 5.19995L6.0166 6.40002C6.4166 6.60002 6.6166 7.09998 6.5166 7.59998L6.31659 8.30005C6.11659 8.80005 5.5166 9.1 5.0166 9ZM8.41659 5.69995H8.6166C9.1166 5.69995 9.5166 5.30005 9.5166 4.80005L9.6166 3.09998C9.6166 2.49998 9.2166 2 8.5166 2H7.81659C7.21659 2 6.71659 2.59995 6.91659 3.19995L7.31659 4.90002C7.41659 5.40002 7.91659 5.69995 8.41659 5.69995ZM14.6166 18.2L15.1166 21.3C15.2166 21.8 15.7166 22.2 16.2166 22L17.6166 21.6C18.1166 21.4 18.4166 20.8 18.1166 20.3L16.7166 17.5C16.5166 17.1 16.1166 16.9 15.7166 17L15.2166 17.1C14.8166 17.3 14.5166 17.7 14.6166 18.2ZM18.4166 16.3L19.8166 17.2C20.2166 17.5 20.8166 17.3 21.0166 16.8L21.3166 15.9C21.5166 15.4 21.1166 14.8 20.5166 14.8H18.8166C18.0166 14.8 17.7166 15.9 18.4166 16.3Z" fill="black"></path>
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary yellow-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-yellow">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M11.425 7.325C12.925 5.825 15.225 5.825 16.725 7.325C18.225 8.825 18.225 11.125 16.725 12.625C15.225 14.125 12.925 14.125 11.425 12.625C9.92501 11.225 9.92501 8.825 11.425 7.325ZM8.42501 4.325C5.32501 7.425 5.32501 12.525 8.42501 15.625C11.525 18.725 16.625 18.725 19.725 15.625C22.825 12.525 22.825 7.425 19.725 4.325C16.525 1.225 11.525 1.225 8.42501 4.325Z" fill="black"></path>
              <path d="M11.325 17.525C10.025 18.025 8.425 17.725 7.325 16.725C5.825 15.225 5.825 12.925 7.325 11.425C8.825 9.92498 11.125 9.92498 12.625 11.425C13.225 12.025 13.625 12.925 13.725 13.725C14.825 13.825 15.925 13.525 16.725 12.625C17.125 12.225 17.425 11.825 17.525 11.325C17.125 10.225 16.525 9.22498 15.625 8.42498C12.525 5.32498 7.425 5.32498 4.325 8.42498C1.225 11.525 1.225 16.625 4.325 19.725C7.425 22.825 12.525 22.825 15.625 19.725C16.325 19.025 16.925 18.225 17.225 17.325C15.425 18.125 13.225 18.225 11.325 17.525Z" fill="black"></path>
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary yellow-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-yellow">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M20.5543 4.37824L12.1798 2.02473C12.0626 1.99176 11.9376 1.99176 11.8203 2.02473L3.44572 4.37824C3.18118 4.45258 3 4.6807 3 4.93945V13.569C3 14.6914 3.48509 15.8404 4.4417 16.984C5.17231 17.8575 6.18314 18.7345 7.446 19.5909C9.56752 21.0295 11.6566 21.912 11.7445 21.9488C11.8258 21.9829 11.9129 22 12.0001 22C12.0872 22 12.1744 21.983 12.2557 21.9488C12.3435 21.912 14.4326 21.0295 16.5541 19.5909C17.8169 18.7345 18.8277 17.8575 19.5584 16.984C20.515 15.8404 21 14.6914 21 13.569V4.93945C21 4.6807 20.8189 4.45258 20.5543 4.37824Z" fill="black"></path>
              <path d="M12.0006 11.1542C13.1434 11.1542 14.0777 10.22 14.0777 9.0771C14.0777 7.93424 13.1434 7 12.0006 7C10.8577 7 9.92348 7.93424 9.92348 9.0771C9.92348 10.22 10.8577 11.1542 12.0006 11.1542Z" fill="black"></path>
              <path d="M15.5652 13.814C15.5108 13.6779 15.4382 13.551 15.3566 13.4331C14.9393 12.8163 14.2954 12.4081 13.5697 12.3083C13.479 12.2993 13.3793 12.3174 13.3067 12.3718C12.9257 12.653 12.4722 12.7981 12.0006 12.7981C11.5289 12.7981 11.0754 12.653 10.6944 12.3718C10.6219 12.3174 10.5221 12.2902 10.4314 12.3083C9.70578 12.4081 9.05272 12.8163 8.64456 13.4331C8.56293 13.551 8.49036 13.687 8.43595 13.814C8.40875 13.8684 8.41781 13.9319 8.44502 13.9864C8.51759 14.1133 8.60828 14.2403 8.68991 14.3492C8.81689 14.5215 8.95295 14.6757 9.10715 14.8208C9.23413 14.9478 9.37925 15.0657 9.52439 15.1836C10.2409 15.7188 11.1026 15.9999 11.9915 15.9999C12.8804 15.9999 13.7421 15.7188 14.4586 15.1836C14.6038 15.0748 14.7489 14.9478 14.8759 14.8208C15.021 14.6757 15.1661 14.5215 15.2931 14.3492C15.3838 14.2312 15.4655 14.1133 15.538 13.9864C15.5833 13.9319 15.5924 13.8684 15.5652 13.814Z" fill="black"></path>
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary green-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-green">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M17.302 11.35L12.002 20.55H21.202C21.802 20.55 22.202 19.85 21.902 19.35L17.302 11.35Z" fill="black"></path>
              <path opacity="0.3" d="M12.002 20.55H2.802C2.202 20.55 1.80202 19.85 2.10202 19.35L6.70203 11.45L12.002 20.55ZM11.302 3.45L6.70203 11.35H17.302L12.702 3.45C12.402 2.85 11.602 2.85 11.302 3.45Z" fill="black"></path>
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary green-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-green">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <rect opacity="0.3" x="12.75" y="4.25" width="12" height="2" rx="1" transform="rotate(90 12.75 4.25)" fill="black"></rect>
              <path d="M12.0573 6.11875L13.5203 7.87435C13.9121 8.34457 14.6232 8.37683 15.056 7.94401C15.4457 7.5543 15.4641 6.92836 15.0979 6.51643L12.4974 3.59084C12.0996 3.14332 11.4004 3.14332 11.0026 3.59084L8.40206 6.51643C8.0359 6.92836 8.0543 7.5543 8.44401 7.94401C8.87683 8.37683 9.58785 8.34458 9.9797 7.87435L11.4427 6.11875C11.6026 5.92684 11.8974 5.92684 12.0573 6.11875Z" fill="black"></path>
              <path d="M18.75 8.25H17.75C17.1977 8.25 16.75 8.69772 16.75 9.25C16.75 9.80228 17.1977 10.25 17.75 10.25C18.3023 10.25 18.75 10.6977 18.75 11.25V18.25C18.75 18.8023 18.3023 19.25 17.75 19.25H5.75C5.19772 19.25 4.75 18.8023 4.75 18.25V11.25C4.75 10.6977 5.19771 10.25 5.75 10.25C6.30229 10.25 6.75 9.80228 6.75 9.25C6.75 8.69772 6.30229 8.25 5.75 8.25H4.75C3.64543 8.25 2.75 9.14543 2.75 10.25V19.25C2.75 20.3546 3.64543 21.25 4.75 21.25H18.75C19.8546 21.25 20.75 20.3546 20.75 19.25V10.25C20.75 9.14543 19.8546 8.25 18.75 8.25Z" fill="#C4C4C4"></path>
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary green-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-green">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M22 5V19C22 19.6 21.6 20 21 20H19.5L11.9 12.4C11.5 12 10.9 12 10.5 12.4L3 20C2.5 20 2 19.5 2 19V5C2 4.4 2.4 4 3 4H21C21.6 4 22 4.4 22 5ZM7.5 7C6.7 7 6 7.7 6 8.5C6 9.3 6.7 10 7.5 10C8.3 10 9 9.3 9 8.5C9 7.7 8.3 7 7.5 7Z" fill="black"></path>
              <path d="M19.1 10C18.7 9.60001 18.1 9.60001 17.7 10L10.7 17H2V19C2 19.6 2.4 20 3 20H21C21.6 20 22 19.6 22 19V12.9L19.1 10Z" fill="black"></path>
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary green-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-green">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M8.39961 20.5073C7.29961 20.5073 6.39961 19.6073 6.39961 18.5073C6.39961 17.4073 7.29961 16.5073 8.39961 16.5073H9.89961C11.7996 16.5073 13.3996 14.9073 13.3996 13.0073C13.3996 11.1073 11.7996 9.50732 9.89961 9.50732H8.09961L6.59961 11.2073C6.49961 11.3073 6.29961 11.4073 6.09961 11.5073C6.19961 11.5073 6.19961 11.5073 6.29961 11.5073H9.79961C10.5996 11.5073 11.2996 12.2073 11.2996 13.0073C11.2996 13.8073 10.5996 14.5073 9.79961 14.5073H8.39961C6.19961 14.5073 4.39961 16.3073 4.39961 18.5073C4.39961 20.7073 6.19961 22.5073 8.39961 22.5073H15.3996V20.5073H8.39961Z" fill="black" />
              <path opacity="0.3" d="M8.89961 8.7073L6.69961 11.2073C6.29961 11.6073 5.59961 11.6073 5.19961 11.2073L2.99961 8.7073C2.19961 7.8073 1.7996 6.50732 2.0996 5.10732C2.3996 3.60732 3.5996 2.40732 5.0996 2.10732C7.6996 1.50732 9.99961 3.50734 9.99961 6.00734C9.89961 7.00734 9.49961 8.0073 8.89961 8.7073Z" fill="black" />
              <path d="M5.89961 7.50732C6.72804 7.50732 7.39961 6.83575 7.39961 6.00732C7.39961 5.1789 6.72804 4.50732 5.89961 4.50732C5.07119 4.50732 4.39961 5.1789 4.39961 6.00732C4.39961 6.83575 5.07119 7.50732 5.89961 7.50732Z" fill="black" />
              <path opacity="0.3" d="M17.3996 22.5073H15.3996V13.5073C15.3996 12.9073 15.7996 12.5073 16.3996 12.5073C16.9996 12.5073 17.3996 12.9073 17.3996 13.5073V22.5073Z" fill="black" />
              <path d="M21.3996 18.5073H15.3996V13.5073H21.3996C22.1996 13.5073 22.5996 14.4073 22.0996 15.0073L21.2996 16.0073L22.0996 17.0073C22.6996 17.6073 22.1996 18.5073 21.3996 18.5073Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary green-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-green">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M20.5543 4.37824L12.1798 2.02473C12.0626 1.99176 11.9376 1.99176 11.8203 2.02473L3.44572 4.37824C3.18118 4.45258 3 4.6807 3 4.93945V13.569C3 14.6914 3.48509 15.8404 4.4417 16.984C5.17231 17.8575 6.18314 18.7345 7.446 19.5909C9.56752 21.0295 11.6566 21.912 11.7445 21.9488C11.8258 21.9829 11.9129 22 12.0001 22C12.0872 22 12.1744 21.983 12.2557 21.9488C12.3435 21.912 14.4326 21.0295 16.5541 19.5909C17.8169 18.7345 18.8277 17.8575 19.5584 16.984C20.515 15.8404 21 14.6914 21 13.569V4.93945C21 4.6807 20.8189 4.45258 20.5543 4.37824Z" fill="black"></path>
              <path d="M10.5606 11.3042L9.57283 10.3018C9.28174 10.0065 8.80522 10.0065 8.51412 10.3018C8.22897 10.5912 8.22897 11.0559 8.51412 11.3452L10.4182 13.2773C10.8099 13.6747 11.451 13.6747 11.8427 13.2773L15.4859 9.58051C15.771 9.29117 15.771 8.82648 15.4859 8.53714C15.1948 8.24176 14.7183 8.24176 14.4272 8.53714L11.7002 11.3042C11.3869 11.6221 10.874 11.6221 10.5606 11.3042Z" fill="black"></path>
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary green-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-green">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M14 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8L14 2Z" fill="black"></path>
              <path d="M20 8L14 2V6C14 7.10457 14.8954 8 16 8H20Z" fill="black"></path>
              <rect x="13.6993" y="13.6656" width="4.42828" height="1.73089" rx="0.865447" transform="rotate(45 13.6993 13.6656)" fill="black"></rect>
              <path d="M15 12C15 14.2 13.2 16 11 16C8.8 16 7 14.2 7 12C7 9.8 8.8 8 11 8C13.2 8 15 9.8 15 12ZM11 9.6C9.68 9.6 8.6 10.68 8.6 12C8.6 13.32 9.68 14.4 11 14.4C12.32 14.4 13.4 13.32 13.4 12C13.4 10.68 12.32 9.6 11 9.6Z" fill="black"></path>
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary green-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-green">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M12 22C13.6569 22 15 20.6569 15 19C15 17.3431 13.6569 16 12 16C10.3431 16 9 17.3431 9 19C9 20.6569 10.3431 22 12 22Z" fill="black"></path>
              <path d="M19 15V18C19 18.6 18.6 19 18 19H6C5.4 19 5 18.6 5 18V15C6.1 15 7 14.1 7 13V10C7 7.6 8.7 5.6 11 5.1V3C11 2.4 11.4 2 12 2C12.6 2 13 2.4 13 3V5.1C15.3 5.6 17 7.6 17 10V13C17 14.1 17.9 15 19 15ZM11 10C11 9.4 11.4 9 12 9C12.6 9 13 8.6 13 8C13 7.4 12.6 7 12 7C10.3 7 9 8.3 9 10C9 10.6 9.4 11 10 11C10.6 11 11 10.6 11 10Z" fill="black"></path>
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary green-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-green">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M6 21C6 21.6 6.4 22 7 22H17C17.6 22 18 21.6 18 21V20H6V21Z" fill="black" />
              <path d="M12 4C11.4 4 11 3.6 11 3V2H13V3C13 3.6 12.6 4 12 4Z" fill="black" />
              <path opacity="0.3" d="M18 3V20H6V3C6 2.4 6.4 2 7 2H17C17.6 2 18 2.4 18 3ZM16 11C16 8.5 13.7 6.49998 11.1 7.09998C9.60001 7.39998 8.50001 8.6001 8.10001 10.1001C7.80001 11.5001 8.2 12.7 9 13.7L11.2 16.2C11.6 16.6 12.3 16.6 12.7 16.2L14.9 13.7C15.6 13 16 12 16 11Z" fill="black" />
              <path d="M12 12.5C12.8284 12.5 13.5 11.8284 13.5 11C13.5 10.1716 12.8284 9.5 12 9.5C11.1716 9.5 10.5 10.1716 10.5 11C10.5 11.8284 11.1716 12.5 12 12.5Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary green-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-green">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M18.0624 15.3454L13.1624 20.7453C12.5624 21.4453 11.5624 21.4453 10.9624 20.7453L6.06242 15.3454C4.56242 13.6454 3.76242 11.4452 4.06242 8.94525C4.56242 5.34525 7.46242 2.44534 11.0624 2.04534C15.8624 1.54534 19.9624 5.24525 19.9624 9.94525C20.0624 12.0452 19.2624 13.9454 18.0624 15.3454ZM13.0624 10.0453C13.0624 9.44534 12.6624 9.04534 12.0624 9.04534C11.4624 9.04534 11.0624 9.44534 11.0624 10.0453V13.0453H13.0624V10.0453Z" fill="black" />
              <path d="M12.6624 5.54531C12.2624 5.24531 11.7624 5.24531 11.4624 5.54531L8.06241 8.04531V12.0453C8.06241 12.6453 8.46241 13.0453 9.06241 13.0453H11.0624V10.0453C11.0624 9.44531 11.4624 9.04531 12.0624 9.04531C12.6624 9.04531 13.0624 9.44531 13.0624 10.0453V13.0453H15.0624C15.6624 13.0453 16.0624 12.6453 16.0624 12.0453V8.04531L12.6624 5.54531Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary green-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-green">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M20 15H4C2.9 15 2 14.1 2 13V7C2 6.4 2.4 6 3 6H21C21.6 6 22 6.4 22 7V13C22 14.1 21.1 15 20 15ZM13 12H11C10.5 12 10 12.4 10 13V16C10 16.5 10.4 17 11 17H13C13.6 17 14 16.6 14 16V13C14 12.4 13.6 12 13 12Z" fill="black" />
              <path d="M14 6V5H10V6H8V5C8 3.9 8.9 3 10 3H14C15.1 3 16 3.9 16 5V6H14ZM20 15H14V16C14 16.6 13.5 17 13 17H11C10.5 17 10 16.6 10 16V15H4C3.6 15 3.3 14.9 3 14.7V18C3 19.1 3.9 20 5 20H19C20.1 20 21 19.1 21 18V14.7C20.7 14.9 20.4 15 20 15Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary green-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-green">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M12.6 7C12 7 11.6 6.6 11.6 6V3C11.6 2.4 12 2 12.6 2C13.2 2 13.6 2.4 13.6 3V6C13.6 6.6 13.2 7 12.6 7ZM10 7.59998C10.5 7.29998 10.6 6.69995 10.4 6.19995L9 3.80005C8.7 3.30005 8.10001 3.20002 7.60001 3.40002C7.10001 3.70002 7.00001 4.30005 7.20001 4.80005L8.60001 7.19995C8.80001 7.49995 9.1 7.69995 9.5 7.69995C9.7 7.69995 9.9 7.69998 10 7.59998ZM8 9.30005C8.3 8.80005 8.10001 8.20002 7.60001 7.90002L5.5 6.69995C5 6.39995 4.40001 6.59998 4.10001 7.09998C3.80001 7.59998 4 8.2 4.5 8.5L6.60001 9.69995C6.80001 9.79995 6.90001 9.80005 7.10001 9.80005C7.50001 9.80005 7.9 9.70005 8 9.30005ZM7.20001 12C7.20001 11.4 6.80001 11 6.20001 11H4C3.4 11 3 11.4 3 12C3 12.6 3.4 13 4 13H6.20001C6.70001 13 7.20001 12.6 7.20001 12Z" fill="black" />
              <path opacity="0.3" d="M17.4 5.5C17.4 6.1 17 6.5 16.4 6.5C15.8 6.5 15.4 6.1 15.4 5.5C15.4 4.9 15.8 4.5 16.4 4.5C17 4.5 17.4 5 17.4 5.5ZM5.80001 17.1L7.40001 16.1C7.90001 15.8 8.00001 15.2 7.80001 14.7C7.50001 14.2 6.90001 14.1 6.40001 14.3L4.80001 15.3C4.30001 15.6 4.20001 16.2 4.40001 16.7C4.60001 17 4.90001 17.2 5.30001 17.2C5.50001 17.3 5.60001 17.2 5.80001 17.1ZM8.40001 20.2C8.20001 20.2 8.10001 20.2 7.90001 20.1C7.40001 19.8 7.3 19.2 7.5 18.7L8.30001 17.3C8.60001 16.8 9.20002 16.7 9.70002 16.9C10.2 17.2 10.3 17.8 10.1 18.3L9.30001 19.7C9.10001 20 8.70001 20.2 8.40001 20.2ZM12.6 21.2C12 21.2 11.6 20.8 11.6 20.2V18.8C11.6 18.2 12 17.8 12.6 17.8C13.2 17.8 13.6 18.2 13.6 18.8V20.2C13.6 20.7 13.2 21.2 12.6 21.2ZM16.7 19.9C16.4 19.9 16 19.7 15.8 19.4L15.2 18.5C14.9 18 15.1 17.4 15.6 17.1C16.1 16.8 16.7 17 17 17.5L17.6 18.4C17.9 18.9 17.7 19.5 17.2 19.8C17 19.9 16.8 19.9 16.7 19.9ZM19.4 17C19.2 17 19.1 17 18.9 16.9L18.2 16.5C17.7 16.2 17.6 15.6 17.8 15.1C18.1 14.6 18.7 14.5 19.2 14.7L19.9 15.1C20.4 15.4 20.5 16 20.3 16.5C20.1 16.8 19.8 17 19.4 17ZM20.4 13H19.9C19.3 13 18.9 12.6 18.9 12C18.9 11.4 19.3 11 19.9 11H20.4C21 11 21.4 11.4 21.4 12C21.4 12.6 20.9 13 20.4 13ZM18.9 9.30005C18.6 9.30005 18.2 9.10005 18 8.80005C17.7 8.30005 17.9 7.70002 18.4 7.40002L18.6 7.30005C19.1 7.00005 19.7 7.19995 20 7.69995C20.3 8.19995 20.1 8.79998 19.6 9.09998L19.4 9.19995C19.3 9.19995 19.1 9.30005 18.9 9.30005Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary green-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-green">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M18 22C19.7 22 21 20.7 21 19C21 18.5 20.9 18.1 20.7 17.7L15.3 6.30005C15.1 5.90005 15 5.5 15 5C15 3.3 16.3 2 18 2H6C4.3 2 3 3.3 3 5C3 5.5 3.1 5.90005 3.3 6.30005L8.7 17.7C8.9 18.1 9 18.5 9 19C9 20.7 7.7 22 6 22H18Z" fill="black" />
              <path d="M18 2C19.7 2 21 3.3 21 5H9C9 3.3 7.7 2 6 2H18Z" fill="black" />
              <path d="M9 19C9 20.7 7.7 22 6 22C4.3 22 3 20.7 3 19H9Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary orange-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-orange">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M19 22H5C4.4 22 4 21.6 4 21V3C4 2.4 4.4 2 5 2H14L20 8V21C20 21.6 19.6 22 19 22ZM12 17.8C11 17.8 10.2 17.4 9.5 16.8C8.8 16.1 8.5 15.3 8.5 14.3C8.5 13.8 8.6 13.3 8.8 12.9L10 14.1V11.1C10 10.5 9.6 10.1 9 10.1H6L7.3 11.4C6.8 12.3 6.5 13.2 6.5 14.3C6.5 15.8 7.1 17.2 8.1 18.2C9.1 19.2 10.5 19.8 12 19.8C12.6 19.8 13 19.3 13 18.8C13 18.2 12.6 17.8 12 17.8ZM16.7 17.2C17.2 16.3 17.5 15.4 17.5 14.3C17.5 12.8 16.9 11.4 15.9 10.4C14.9 9.39999 13.5 8.79999 12 8.79999C11.4 8.79999 11 9.19999 11 9.79999C11 10.4 11.4 10.8 12 10.8C12.9 10.8 13.8 11.2 14.5 11.8C15.2 12.5 15.5 13.3 15.5 14.3C15.5 14.8 15.4 15.3 15.2 15.7L14 14.5V17.5C14 18.1 14.4 18.5 15 18.5H18L16.7 17.2Z" fill="black" />
              <path d="M15 8H20L14 2V7C14 7.6 14.4 8 15 8Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary orange-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-orange">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M4.5 7C5.88071 7 7 5.88071 7 4.5C7 3.11929 5.88071 2 4.5 2C3.11929 2 2 3.11929 2 4.5C2 5.88071 3.11929 7 4.5 7Z" fill="black" />
              <path opacity="0.3" d="M14 4.5C14 5.9 12.9 7 11.5 7C10.1 7 9 5.9 9 4.5C9 3.1 10.1 2 11.5 2C12.9 2 14 3.1 14 4.5ZM18.5 2C17.1 2 16 3.1 16 4.5C16 5.9 17.1 7 18.5 7C19.9 7 21 5.9 21 4.5C21 3.1 19.9 2 18.5 2ZM4.5 9C3.1 9 2 10.1 2 11.5C2 12.9 3.1 14 4.5 14C5.9 14 7 12.9 7 11.5C7 10.1 5.9 9 4.5 9ZM11.5 9C10.1 9 9 10.1 9 11.5C9 12.9 10.1 14 11.5 14C12.9 14 14 12.9 14 11.5C14 10.1 12.9 9 11.5 9ZM18.5 9C17.1 9 16 10.1 16 11.5C16 12.9 17.1 14 18.5 14C19.9 14 21 12.9 21 11.5C21 10.1 19.9 9 18.5 9ZM4.5 16C3.1 16 2 17.1 2 18.5C2 19.9 3.1 21 4.5 21C5.9 21 7 19.9 7 18.5C7 17.1 5.9 16 4.5 16ZM11.5 16C10.1 16 9 17.1 9 18.5C9 19.9 10.1 21 11.5 21C12.9 21 14 19.9 14 18.5C14 17.1 12.9 16 11.5 16ZM18.5 16C17.1 16 16 17.1 16 18.5C16 19.9 17.1 21 18.5 21C19.9 21 21 19.9 21 18.5C21 17.1 19.9 16 18.5 16Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary orange-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-orange">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M6.7 19.4L5.3 18C4.9 17.6 4.9 17 5.3 16.6L16.6 5.3C17 4.9 17.6 4.9 18 5.3L19.4 6.7C19.8 7.1 19.8 7.7 19.4 8.1L8.1 19.4C7.8 19.8 7.1 19.8 6.7 19.4Z" fill="black" />
              <path d="M19.5 18L18.1 19.4C17.7 19.8 17.1 19.8 16.7 19.4L5.40001 8.1C5.00001 7.7 5.00001 7.1 5.40001 6.7L6.80001 5.3C7.20001 4.9 7.80001 4.9 8.20001 5.3L19.5 16.6C19.9 16.9 19.9 17.6 19.5 18Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary orange-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-orange">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M12.9 10.7L3 5V19L12.9 13.3C13.9 12.7 13.9 11.3 12.9 10.7Z" fill="black" />
              <path d="M21 10.7L11.1 5V19L21 13.3C22 12.7 22 11.3 21 10.7Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary orange-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-orange">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M11.85 10.7L21.75 5V19L11.85 13.3C10.85 12.7 10.85 11.3 11.85 10.7Z" fill="black" />
              <path d="M3.75 10.7L13.65 5V19L3.75 13.3C2.75 12.7 2.75 11.3 3.75 10.7Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary orange-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-orange">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <rect opacity="0.3" width="12" height="2" rx="1" transform="matrix(0 -1 -1 0 12.75 19.75)" fill="black" />
              <path d="M12.0573 17.8813L13.5203 16.1256C13.9121 15.6554 14.6232 15.6232 15.056 16.056C15.4457 16.4457 15.4641 17.0716 15.0979 17.4836L12.4974 20.4092C12.0996 20.8567 11.4004 20.8567 11.0026 20.4092L8.40206 17.4836C8.0359 17.0716 8.0543 16.4457 8.44401 16.056C8.87683 15.6232 9.58785 15.6554 9.9797 16.1256L11.4427 17.8813C11.6026 18.0732 11.8974 18.0732 12.0573 17.8813Z" fill="black" />
              <path d="M18.75 15.75H17.75C17.1977 15.75 16.75 15.3023 16.75 14.75C16.75 14.1977 17.1977 13.75 17.75 13.75C18.3023 13.75 18.75 13.3023 18.75 12.75V5.75C18.75 5.19771 18.3023 4.75 17.75 4.75L5.75 4.75C5.19772 4.75 4.75 5.19771 4.75 5.75V12.75C4.75 13.3023 5.19771 13.75 5.75 13.75C6.30229 13.75 6.75 14.1977 6.75 14.75C6.75 15.3023 6.30229 15.75 5.75 15.75H4.75C3.64543 15.75 2.75 14.8546 2.75 13.75V4.75C2.75 3.64543 3.64543 2.75 4.75 2.75L18.75 2.75C19.8546 2.75 20.75 3.64543 20.75 4.75V13.75C20.75 14.8546 19.8546 15.75 18.75 15.75Z" fill="#C4C4C4" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary orange-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-orange">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M11 13H7C6.4 13 6 12.6 6 12C6 11.4 6.4 11 7 11H11V13ZM17 11H13V13H17C17.6 13 18 12.6 18 12C18 11.4 17.6 11 17 11Z" fill="black" />
              <path d="M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12ZM17 11H13V7C13 6.4 12.6 6 12 6C11.4 6 11 6.4 11 7V11H7C6.4 11 6 11.4 6 12C6 12.6 6.4 13 7 13H11V17C11 17.6 11.4 18 12 18C12.6 18 13 17.6 13 17V13H17C17.6 13 18 12.6 18 12C18 11.4 17.6 11 17 11Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary orange-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-orange">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.5" d="M9.63433 11.4343L5.45001 7.25C5.0358 6.83579 5.0358 6.16421 5.45001 5.75C5.86423 5.33579 6.5358 5.33579 6.95001 5.75L12.4929 11.2929C12.8834 11.6834 12.8834 12.3166 12.4929 12.7071L6.95001 18.25C6.5358 18.6642 5.86423 18.6642 5.45001 18.25C5.0358 17.8358 5.0358 17.1642 5.45001 16.75L9.63433 12.5657C9.94675 12.2533 9.94675 11.7467 9.63433 11.4343Z" fill="black" />
              <path d="M15.6343 11.4343L11.45 7.25C11.0358 6.83579 11.0358 6.16421 11.45 5.75C11.8642 5.33579 12.5358 5.33579 12.95 5.75L18.4929 11.2929C18.8834 11.6834 18.8834 12.3166 18.4929 12.7071L12.95 18.25C12.5358 18.6642 11.8642 18.6642 11.45 18.25C11.0358 17.8358 11.0358 17.1642 11.45 16.75L15.6343 12.5657C15.9467 12.2533 15.9467 11.7467 15.6343 11.4343Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary orange-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-orange">

            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
              <path opacity="0.3" d="M19 3.40002C18.4 3.40002 18 3.80002 18 4.40002V8.40002H14V4.40002C14 3.80002 13.6 3.40002 13 3.40002C12.4 3.40002 12 3.80002 12 4.40002V8.40002H8V4.40002C8 3.80002 7.6 3.40002 7 3.40002C6.4 3.40002 6 3.80002 6 4.40002V8.40002H2V4.40002C2 3.80002 1.6 3.40002 1 3.40002C0.4 3.40002 0 3.80002 0 4.40002V19.4C0 20 0.4 20.4 1 20.4H19C19.6 20.4 20 20 20 19.4V4.40002C20 3.80002 19.6 3.40002 19 3.40002ZM18 10.4V13.4H14V10.4H18ZM12 10.4V13.4H8V10.4H12ZM12 15.4V18.4H8V15.4H12ZM6 10.4V13.4H2V10.4H6ZM2 15.4H6V18.4H2V15.4ZM14 18.4V15.4H18V18.4H14Z" fill="black" />
              <path d="M19 0.400024H1C0.4 0.400024 0 0.800024 0 1.40002V4.40002C0 5.00002 0.4 5.40002 1 5.40002H19C19.6 5.40002 20 5.00002 20 4.40002V1.40002C20 0.800024 19.6 0.400024 19 0.400024Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary orange-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-orange">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M19 15C20.7 15 22 13.7 22 12C22 10.3 20.7 9 19 9C18.9 9 18.9 9 18.8 9C18.9 8.7 19 8.3 19 8C19 6.3 17.7 5 16 5C15.4 5 14.8 5.2 14.3 5.5C13.4 4 11.8 3 10 3C7.2 3 5 5.2 5 8C5 8.3 5 8.7 5.1 9H5C3.3 9 2 10.3 2 12C2 13.7 3.3 15 5 15H19Z" fill="black" />
              <path d="M13 17.4V12C13 11.4 12.6 11 12 11C11.4 11 11 11.4 11 12V17.4H13Z" fill="black" />
              <path opacity="0.3" d="M8 17.4H16L12.7 20.7C12.3 21.1 11.7 21.1 11.3 20.7L8 17.4Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary orange-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-orange">

            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="19" viewBox="0 0 16 19" fill="none">
              <path d="M12 0.400024H1C0.4 0.400024 0 0.800024 0 1.40002V2.40002C0 3.00002 0.4 3.40002 1 3.40002H12C12.6 3.40002 13 3.00002 13 2.40002V1.40002C13 0.800024 12.6 0.400024 12 0.400024Z" fill="black" />
              <path opacity="0.3" d="M15 8.40002H1C0.4 8.40002 0 8.00002 0 7.40002C0 6.80002 0.4 6.40002 1 6.40002H15C15.6 6.40002 16 6.80002 16 7.40002C16 8.00002 15.6 8.40002 15 8.40002ZM16 12.4C16 11.8 15.6 11.4 15 11.4H1C0.4 11.4 0 11.8 0 12.4C0 13 0.4 13.4 1 13.4H15C15.6 13.4 16 13 16 12.4ZM12 17.4C12 16.8 11.6 16.4 11 16.4H1C0.4 16.4 0 16.8 0 17.4C0 18 0.4 18.4 1 18.4H11C11.6 18.4 12 18 12 17.4Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary orange-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-orange">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M10 4H21C21.6 4 22 4.4 22 5V7H10V4Z" fill="black" />
              <path opacity="0.3" d="M10.3 15.3L11 14.6L8.70002 12.3C8.30002 11.9 7.7 11.9 7.3 12.3C6.9 12.7 6.9 13.3 7.3 13.7L10.3 16.7C9.9 16.3 9.9 15.7 10.3 15.3Z" fill="black" />
              <path d="M10.4 3.60001L12 6H21C21.6 6 22 6.4 22 7V19C22 19.6 21.6 20 21 20H3C2.4 20 2 19.6 2 19V4C2 3.4 2.4 3 3 3H9.20001C9.70001 3 10.2 3.20001 10.4 3.60001ZM11.7 16.7L16.7 11.7C17.1 11.3 17.1 10.7 16.7 10.3C16.3 9.89999 15.7 9.89999 15.3 10.3L11 14.6L8.70001 12.3C8.30001 11.9 7.69999 11.9 7.29999 12.3C6.89999 12.7 6.89999 13.3 7.29999 13.7L10.3 16.7C10.5 16.9 10.8 17 11 17C11.2 17 11.5 16.9 11.7 16.7Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color1-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color1">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M11 15.9C9.5 13 6.5 11 3 11C3 15.6 6.5 19.4 11 19.9V15.9Z" fill="black" />
              <path opacity="0.3" d="M21 11C17.5 11 14.5 13 13 15.9V11C13 10.4 12.6 10 12 10C11.4 10 11 10.4 11 11V21C11 21.6 11.4 22 12 22C12.6 22 13 21.6 13 21V19.9C17.5 19.4 21 15.6 21 11Z" fill="black" />
              <path opacity="0.3" d="M12 9C13.933 9 15.5 7.433 15.5 5.5C15.5 3.567 13.933 2 12 2C10.067 2 8.5 3.567 8.5 5.5C8.5 7.433 10.067 9 12 9Z" fill="black" />
              <path d="M14 11L12 12L10 11V8.40002H14V11Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color1-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color1">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M3 6C2.4 6 2 5.6 2 5V3C2 2.4 2.4 2 3 2H5C5.6 2 6 2.4 6 3C6 3.6 5.6 4 5 4H4V5C4 5.6 3.6 6 3 6ZM22 5V3C22 2.4 21.6 2 21 2H19C18.4 2 18 2.4 18 3C18 3.6 18.4 4 19 4H20V5C20 5.6 20.4 6 21 6C21.6 6 22 5.6 22 5ZM6 21C6 20.4 5.6 20 5 20H4V19C4 18.4 3.6 18 3 18C2.4 18 2 18.4 2 19V21C2 21.6 2.4 22 3 22H5C5.6 22 6 21.6 6 21ZM22 21V19C22 18.4 21.6 18 21 18C20.4 18 20 18.4 20 19V20H19C18.4 20 18 20.4 18 21C18 21.6 18.4 22 19 22H21C21.6 22 22 21.6 22 21ZM16 11V9C16 6.8 14.2 5 12 5C9.8 5 8 6.8 8 9V11C7.2 11 6.5 11.7 6.5 12.5C6.5 13.3 7.2 14 8 14V15C8 17.2 9.8 19 12 19C14.2 19 16 17.2 16 15V14C16.8 14 17.5 13.3 17.5 12.5C17.5 11.7 16.8 11 16 11ZM13.4 15C13.7 15 14 15.3 13.9 15.6C13.6 16.4 12.9 17 12 17C11.1 17 10.4 16.5 10.1 15.7C10 15.4 10.2 15 10.6 15H13.4Z" fill="black" />
              <path d="M9.2 12.9C9.1 12.8 9.10001 12.7 9.10001 12.6C9.00001 12.2 9.3 11.7 9.7 11.6C10.1 11.5 10.6 11.8 10.7 12.2C10.7 12.3 10.7 12.4 10.7 12.5L9.2 12.9ZM14.8 12.9C14.9 12.8 14.9 12.7 14.9 12.6C15 12.2 14.7 11.7 14.3 11.6C13.9 11.5 13.4 11.8 13.3 12.2C13.3 12.3 13.3 12.4 13.3 12.5L14.8 12.9ZM16 7.29998C16.3 6.99998 16.5 6.69998 16.7 6.29998C16.3 6.29998 15.8 6.30001 15.4 6.20001C15 6.10001 14.7 5.90001 14.4 5.70001C13.8 5.20001 13 5.00002 12.2 4.90002C9.9 4.80002 8.10001 6.79997 8.10001 9.09997V11.4C8.90001 10.7 9.40001 9.8 9.60001 9C11 9.1 13.4 8.69998 14.5 8.29998C14.7 9.39998 15.3 10.5 16.1 11.4V9C16.1 8.5 16 8 15.8 7.5C15.8 7.5 15.9 7.39998 16 7.29998Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color1-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color1">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M5 9C5 8.44772 5.44772 8 6 8H18C18.5523 8 19 8.44772 19 9V18C19 19.6569 17.6569 21 16 21H8C6.34315 21 5 19.6569 5 18V9Z" fill="black" />
              <path opacity="0.5" d="M5 5C5 4.44772 5.44772 4 6 4H18C18.5523 4 19 4.44772 19 5V5C19 5.55228 18.5523 6 18 6H6C5.44772 6 5 5.55228 5 5V5Z" fill="black" />
              <path opacity="0.5" d="M9 4C9 3.44772 9.44772 3 10 3H14C14.5523 3 15 3.44772 15 4V4H9V4Z" fill="black" />
            </svg>
          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color1-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color1">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
              <path d="M10.4343 12.4343L8.75 10.75C8.33579 10.3358 7.66421 10.3358 7.25 10.75C6.83579 11.1642 6.83579 11.8358 7.25 12.25L10.2929 15.2929C10.6834 15.6834 11.3166 15.6834 11.7071 15.2929L17.25 9.75C17.6642 9.33579 17.6642 8.66421 17.25 8.25C16.8358 7.83579 16.1642 7.83579 15.75 8.25L11.5657 12.4343C11.2533 12.7467 10.7467 12.7467 10.4343 12.4343Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color1-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color1">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M4.05424 15.1982C8.34524 7.76818 13.5782 3.26318 20.9282 2.01418C21.0729 1.98837 21.2216 1.99789 21.3618 2.04193C21.502 2.08597 21.6294 2.16323 21.7333 2.26712C21.8372 2.37101 21.9144 2.49846 21.9585 2.63863C22.0025 2.7788 22.012 2.92754 21.9862 3.07218C20.7372 10.4222 16.2322 15.6552 8.80224 19.9462L4.05424 15.1982ZM3.81924 17.3372L2.63324 20.4482C2.58427 20.5765 2.5735 20.7163 2.6022 20.8507C2.63091 20.9851 2.69788 21.1082 2.79503 21.2054C2.89218 21.3025 3.01536 21.3695 3.14972 21.3982C3.28408 21.4269 3.42387 21.4161 3.55224 21.3672L6.66524 20.1802L3.81924 17.3372ZM16.5002 5.99818C16.2036 5.99818 15.9136 6.08615 15.6669 6.25097C15.4202 6.41579 15.228 6.65006 15.1144 6.92415C15.0009 7.19824 14.9712 7.49984 15.0291 7.79081C15.0869 8.08178 15.2298 8.34906 15.4396 8.55884C15.6494 8.76862 15.9166 8.91148 16.2076 8.96935C16.4986 9.02723 16.8002 8.99753 17.0743 8.884C17.3484 8.77046 17.5826 8.5782 17.7474 8.33153C17.9123 8.08486 18.0002 7.79485 18.0002 7.49818C18.0002 7.10035 17.8422 6.71882 17.5609 6.43752C17.2796 6.15621 16.8981 5.99818 16.5002 5.99818Z" fill="black" />
              <path d="M4.05423 15.1982L2.24723 13.3912C2.15505 13.299 2.08547 13.1867 2.04395 13.0632C2.00243 12.9396 1.9901 12.8081 2.00793 12.679C2.02575 12.5498 2.07325 12.4266 2.14669 12.3189C2.22013 12.2112 2.31752 12.1219 2.43123 12.0582L9.15323 8.28918C7.17353 10.3717 5.4607 12.6926 4.05423 15.1982ZM8.80023 19.9442L10.6072 21.7512C10.6994 21.8434 10.8117 21.9129 10.9352 21.9545C11.0588 21.996 11.1903 22.0083 11.3195 21.9905C11.4486 21.9727 11.5718 21.9252 11.6795 21.8517C11.7872 21.7783 11.8765 21.6809 11.9402 21.5672L15.7092 14.8442C13.6269 16.8245 11.3061 18.5377 8.80023 19.9442ZM7.04023 18.1832L12.5832 12.6402C12.7381 12.4759 12.8228 12.2577 12.8195 12.032C12.8161 11.8063 12.725 11.5907 12.5653 11.4311C12.4057 11.2714 12.1901 11.1803 11.9644 11.1769C11.7387 11.1736 11.5205 11.2583 11.3562 11.4132L5.81323 16.9562L7.04023 18.1832Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color1-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color1">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="black" />
              <path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color1-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color1">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="5" fill="black" />
              <path d="M11.9343 12.5657L9.53696 14.963C9.22669 15.2733 9.18488 15.7619 9.43792 16.1204C9.7616 16.5789 10.4211 16.6334 10.8156 16.2342L14.3054 12.7029C14.6903 12.3134 14.6903 11.6866 14.3054 11.2971L10.8156 7.76582C10.4211 7.3666 9.7616 7.42107 9.43792 7.87962C9.18488 8.23809 9.22669 8.72669 9.53696 9.03696L11.9343 11.4343C12.2467 11.7467 12.2467 12.2533 11.9343 12.5657Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color1-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color1">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.5" d="M18 2H9C7.34315 2 6 3.34315 6 5H8C8 4.44772 8.44772 4 9 4H18C18.5523 4 19 4.44772 19 5V16C19 16.5523 18.5523 17 18 17V19C19.6569 19 21 17.6569 21 16V5C21 3.34315 19.6569 2 18 2Z" fill="black" />
              <path fill-rule="evenodd" clip-rule="evenodd" d="M14.7857 7.125H6.21429C5.62255 7.125 5.14286 7.6007 5.14286 8.1875V18.8125C5.14286 19.3993 5.62255 19.875 6.21429 19.875H14.7857C15.3774 19.875 15.8571 19.3993 15.8571 18.8125V8.1875C15.8571 7.6007 15.3774 7.125 14.7857 7.125ZM6.21429 5C4.43908 5 3 6.42709 3 8.1875V18.8125C3 20.5729 4.43909 22 6.21429 22H14.7857C16.5609 22 18 20.5729 18 18.8125V8.1875C18 6.42709 16.5609 5 14.7857 5H6.21429Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color1-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color1">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
              <rect x="7" y="15.3137" width="12" height="2" rx="1" transform="rotate(-45 7 15.3137)" fill="black" />
              <rect x="8.41422" y="7" width="12" height="2" rx="1" transform="rotate(45 8.41422 7)" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color1-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color1">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="5" fill="black" />
              <rect x="11" y="11" width="2" height="2" rx="1" fill="black" />
              <rect x="11" y="15" width="2" height="2" rx="1" fill="black" />
              <rect x="11" y="7" width="2" height="2" rx="1" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color1-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color1">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M17.5 11H6.5C4 11 2 9 2 6.5C2 4 4 2 6.5 2H17.5C20 2 22 4 22 6.5C22 9 20 11 17.5 11ZM15 6.5C15 7.9 16.1 9 17.5 9C18.9 9 20 7.9 20 6.5C20 5.1 18.9 4 17.5 4C16.1 4 15 5.1 15 6.5Z" fill="black" />
              <path opacity="0.3" d="M17.5 22H6.5C4 22 2 20 2 17.5C2 15 4 13 6.5 13H17.5C20 13 22 15 22 17.5C22 20 20 22 17.5 22ZM4 17.5C4 18.9 5.1 20 6.5 20C7.9 20 9 18.9 9 17.5C9 16.1 7.9 15 6.5 15C5.1 15 4 16.1 4 17.5Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color1-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color1">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
              <rect x="11" y="11" width="2" height="2" rx="1" fill="black" />
              <rect x="15" y="11" width="2" height="2" rx="1" fill="black" />
              <rect x="7" y="11" width="2" height="2" rx="1" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color2-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color2">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M18.0624 15.3453L13.1624 20.7453C12.5624 21.4453 11.5624 21.4453 10.9624 20.7453L6.06242 15.3453C4.56242 13.6453 3.76242 11.4453 4.06242 8.94534C4.56242 5.34534 7.46242 2.44534 11.0624 2.04534C15.8624 1.54534 19.9624 5.24534 19.9624 9.94534C20.0624 12.0453 19.2624 13.9453 18.0624 15.3453Z" fill="black" />
              <path d="M12.0624 13.0453C13.7193 13.0453 15.0624 11.7022 15.0624 10.0453C15.0624 8.38849 13.7193 7.04535 12.0624 7.04535C10.4056 7.04535 9.06241 8.38849 9.06241 10.0453C9.06241 11.7022 10.4056 13.0453 12.0624 13.0453Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color2-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color2">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M14 10V20C14 20.6 13.6 21 13 21H10C9.4 21 9 20.6 9 20V10C9 9.4 9.4 9 10 9H13C13.6 9 14 9.4 14 10ZM20 9H17C16.4 9 16 9.4 16 10V20C16 20.6 16.4 21 17 21H20C20.6 21 21 20.6 21 20V10C21 9.4 20.6 9 20 9Z" fill="black" />
              <path d="M7 10V20C7 20.6 6.6 21 6 21H3C2.4 21 2 20.6 2 20V10C2 9.4 2.4 9 3 9H6C6.6 9 7 9.4 7 10ZM21 6V3C21 2.4 20.6 2 20 2H3C2.4 2 2 2.4 2 3V6C2 6.6 2.4 7 3 7H20C20.6 7 21 6.6 21 6Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color2-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color2">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M20 22H4C3.4 22 3 21.6 3 21V2H21V21C21 21.6 20.6 22 20 22Z" fill="black" />
              <path d="M12 14C9.2 14 7 11.8 7 9V5C7 4.4 7.4 4 8 4C8.6 4 9 4.4 9 5V9C9 10.7 10.3 12 12 12C13.7 12 15 10.7 15 9V5C15 4.4 15.4 4 16 4C16.6 4 17 4.4 17 5V9C17 11.8 14.8 14 12 14Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color2-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color2">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M20 8H16C15.4 8 15 8.4 15 9V16H10V17C10 17.6 10.4 18 11 18H16C16 16.9 16.9 16 18 16C19.1 16 20 16.9 20 18H21C21.6 18 22 17.6 22 17V13L20 8Z" fill="black" />
              <path opacity="0.3" d="M20 18C20 19.1 19.1 20 18 20C16.9 20 16 19.1 16 18C16 16.9 16.9 16 18 16C19.1 16 20 16.9 20 18ZM15 4C15 3.4 14.6 3 14 3H3C2.4 3 2 3.4 2 4V13C2 13.6 2.4 14 3 14H15V4ZM6 16C4.9 16 4 16.9 4 18C4 19.1 4.9 20 6 20C7.1 20 8 19.1 8 18C8 16.9 7.1 16 6 16Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color2-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color2">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M6 7H3C2.4 7 2 6.6 2 6V3C2 2.4 2.4 2 3 2H6C6.6 2 7 2.4 7 3V6C7 6.6 6.6 7 6 7Z" fill="black" />
              <path opacity="0.3" d="M13 7H10C9.4 7 9 6.6 9 6V3C9 2.4 9.4 2 10 2H13C13.6 2 14 2.4 14 3V6C14 6.6 13.6 7 13 7ZM21 6V3C21 2.4 20.6 2 20 2H17C16.4 2 16 2.4 16 3V6C16 6.6 16.4 7 17 7H20C20.6 7 21 6.6 21 6ZM7 13V10C7 9.4 6.6 9 6 9H3C2.4 9 2 9.4 2 10V13C2 13.6 2.4 14 3 14H6C6.6 14 7 13.6 7 13ZM14 13V10C14 9.4 13.6 9 13 9H10C9.4 9 9 9.4 9 10V13C9 13.6 9.4 14 10 14H13C13.6 14 14 13.6 14 13ZM21 13V10C21 9.4 20.6 9 20 9H17C16.4 9 16 9.4 16 10V13C16 13.6 16.4 14 17 14H20C20.6 14 21 13.6 21 13ZM7 20V17C7 16.4 6.6 16 6 16H3C2.4 16 2 16.4 2 17V20C2 20.6 2.4 21 3 21H6C6.6 21 7 20.6 7 20ZM14 20V17C14 16.4 13.6 16 13 16H10C9.4 16 9 16.4 9 17V20C9 20.6 9.4 21 10 21H13C13.6 21 14 20.6 14 20ZM21 20V17C21 16.4 20.6 16 20 16H17C16.4 16 16 16.4 16 17V20C16 20.6 16.4 21 17 21H20C20.6 21 21 20.6 21 20Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color2-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color2">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path opacity="0.3" d="M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10ZM6.39999 9.89999C6.99999 8.19999 8.40001 6.9 10.1 6.4C10.6 6.2 10.9 5.7 10.7 5.1C10.5 4.6 9.99999 4.3 9.39999 4.5C7.09999 5.3 5.29999 7 4.39999 9.2C4.19999 9.7 4.5 10.3 5 10.5C5.1 10.5 5.19999 10.6 5.39999 10.6C5.89999 10.5 6.19999 10.2 6.39999 9.89999ZM14.8 19.5C17 18.7 18.8 16.9 19.6 14.7C19.8 14.2 19.5 13.6 19 13.4C18.5 13.2 17.9 13.5 17.7 14C17.1 15.7 15.8 17 14.1 17.6C13.6 17.8 13.3 18.4 13.5 18.9C13.6 19.3 14 19.6 14.4 19.6C14.5 19.6 14.6 19.6 14.8 19.5Z" fill="black"/>
<path d="M16 12C16 14.2 14.2 16 12 16C9.8 16 8 14.2 8 12C8 9.8 9.8 8 12 8C14.2 8 16 9.8 16 12ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z" fill="black"/>
</svg>
          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color2-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color2">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M6.28548 15.0861C7.34369 13.1814 9.35142 12 11.5304 12H12.4696C14.6486 12 16.6563 13.1814 17.7145 15.0861L19.3493 18.0287C20.0899 19.3618 19.1259 21 17.601 21H6.39903C4.87406 21 3.91012 19.3618 4.65071 18.0287L6.28548 15.0861Z" fill="black" />
              <rect opacity="0.3" x="8" y="3" width="8" height="8" rx="4" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color2-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color2">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M16.0173 9H15.3945C14.2833 9 13.263 9.61425 12.7431 10.5963L12.154 11.7091C12.0645 11.8781 12.1072 12.0868 12.2559 12.2071L12.6402 12.5183C13.2631 13.0225 13.7556 13.6691 14.0764 14.4035L14.2321 14.7601C14.2957 14.9058 14.4396 15 14.5987 15H18.6747C19.7297 15 20.4057 13.8774 19.912 12.945L18.6686 10.5963C18.1487 9.61425 17.1285 9 16.0173 9Z" fill="black" />
              <rect opacity="0.3" x="14" y="4" width="4" height="4" rx="2" fill="black" />
              <path d="M4.65486 14.8559C5.40389 13.1224 7.11161 12 9 12C10.8884 12 12.5961 13.1224 13.3451 14.8559L14.793 18.2067C15.3636 19.5271 14.3955 21 12.9571 21H5.04292C3.60453 21 2.63644 19.5271 3.20698 18.2067L4.65486 14.8559Z" fill="black" />
              <rect opacity="0.3" x="6" y="5" width="6" height="6" rx="3" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color2-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color2">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path opacity="0.3" d="M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12ZM12 7C10.3 7 9 8.3 9 10C9 11.7 10.3 13 12 13C13.7 13 15 11.7 15 10C15 8.3 13.7 7 12 7Z" fill="black" />
              <path d="M12 22C14.6 22 17 21 18.7 19.4C17.9 16.9 15.2 15 12 15C8.8 15 6.09999 16.9 5.29999 19.4C6.99999 21 9.4 22 12 22Z" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color2-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color2">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <rect x="10" y="10" width="4" height="4" rx="2" fill="black" />
              <rect x="10" y="3" width="4" height="4" rx="2" fill="black" />
              <rect x="10" y="17" width="4" height="4" rx="2" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color2-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color2">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <rect opacity="0.5" x="7" y="2" width="14" height="16" rx="3" fill="black" />
              <rect x="3" y="6" width="14" height="16" rx="3" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

      <div class="symbol symbol-50px me-2 my-2">
        <span class="symbol-label bg-active-primary color2-bg">
          <!--begin::Svg Icon | path: icons/duotune/abstract/abs042.svg-->
          <span class="svg-icon svg-icon-2x svg-icon-color2">

            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none">
              <rect y="6" width="16" height="3" rx="1.5" fill="black" />
              <rect opacity="0.3" y="12" width="8" height="3" rx="1.5" fill="black" />
              <rect opacity="0.3" width="12" height="3" rx="1.5" fill="black" />
            </svg>

          </span>
          <!--end::Svg Icon-->
        </span>
      </div>

    </div>
  </div>
</div>
              
            
!

CSS

              
                body {
  background-color: #151521;
}

.topheader:before{
      position: absolute;
    content: '';
    left: 0;
    top: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, #fd004c, #fe9000, #fff020, #3edf4b, #3363ff, #b102b7, #fd004c );
    animation: rainbow-move 6s infinite linear alternate;
}

@keyframes rainbow-move {
  100% {
    background-position-x: 4000px;
  }
}


.bg-red {
  background-color: red !important;
}

.bg-green {
  background-color: green !important;
}

.bg-purple {
  background-color: purple !important;
}

.bg-black {
  background-color: black !important;
}

.bg-cholet {
  background-color: chocolate !important;
}

.bg-blueviolet {
  background-color: blueviolet !important;
}

.bg-cadetblue {
  background-color: cadetblue !important;
}

.bg-crimson {
  background-color: crimson !important;
}

.bg-darkblue {
  background-color: darkblue !important;
}

.bg-tamato {
  background-color: tomato !important;
}

.bg-navy {
  background-color: navy !important;
}

.bg-section {
  margin: auto;
  width: 900px;
  height: 900px;
  background: #1e1e2d;
  mix-blend-mode: normal;
  backdrop-filter: blur(250px);
  /* Note: backdrop-filter has minimal browser support */
  border-radius: 5px;
}

.symbol {
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  border-radius: 0.475rem;
}

.symbol.symbol-50px .symbol-label {
  width: 50px;
  height: 50px;
}

.symbol .symbol-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #cdcdde;
  background-color: #1b1b29;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 0.475rem;
}

.yellow-bg
{
  cursor:pointer;
   transition: 0.5s;
}
.yellow-bg:hover
{
  background-color: #383928 !important;
    transition: 0.5s;
}

.green-bg
{
  cursor:pointer;
   transition: 0.5s;
}

.green-bg:hover
{
  background-color: #28392a !important;
    transition: 0.5s;
}

.svg-icon.svg-icon-green svg [fill]:not(.permanent):not(g) {
    transition: fill .3s ease;
    fill: #23ff00;
}

.orange-bg
{
  cursor:pointer;
   transition: 0.5s;
}
.orange-bg:hover
{
  background-color: #392828 !important;
    transition: 0.5s;
}


.color1-bg
{
  cursor:pointer;
   transition: 0.5s;
}
.color1-bg:hover
{
  background-color: #283839 !important;
    transition: 0.5s;
}

.color2-bg
{
  cursor:pointer;
   transition: 0.5s;
}
.color2-bg:hover
{
    background-color: rgb(26 30 76 / 57%) !important;
    transition: 0.5s;
}

.svg-icon.svg-icon-color2 svg [fill]:not(.permanent):not(g) {
    transition: fill .3s ease;
    fill: #323eff;
}


.color2-bg:hover .svg-icon.svg-icon-color2 svg [fill]:not(.permanent):not(g) {
  transition: fill .3s ease;
    fill: #7f86ff;
}

.svg-icon.svg-icon-orange svg [fill]:not(.permanent):not(g) {
    transition: fill .3s ease;
    fill: #ff1e1e;
}


.svg-icon.svg-icon-color1 svg [fill]:not(.permanent):not(g) {
    transition: fill .3s ease;
    fill: #1ec7ff;
}

.svg-icon {
    line-height: 1;
}

.svg-icon.svg-icon-2x svg {
    height: 2rem!important;
    width: 2rem!important;
}

.svg-icon.svg-icon-yellow svg [fill]:not(.permanent):not(g)
{
      transition: fill .3s ease;
    fill: #fffc36;
}

.svg-icon.svg-icon-success svg [fill]:not(.permanent):not(g) {
    transition: fill .3s ease;
    fill: #0bb783;
}

.svg-icon.svg-icon-danger svg [fill]:not(.permanent):not(g) {
    transition: fill .3s ease;
    fill: #f64e60;
}

.svg-icon.svg-icon-info svg [fill]:not(.permanent):not(g) {
    transition: fill .3s ease;
    fill: #8950fc;
}


.svg-icon.svg-icon-warning svg [fill]:not(.permanent):not(g) {
    transition: fill .3s ease;
    fill: #ffa800;
}

.svg-icon.svg-icon-primary svg [fill]:not(.permanent):not(g) {
    transition: fill .3s ease;
    fill: #3699ff;
}

.bg-light-primary {
    background-color: #212e48!important;
}




/**************************/

.bg-primary.hoverable:hover {
  background-color: #187de4 !important;
}
.bg-hover-light-primary {
  cursor: pointer;
}
.bg-hover-light-primary:hover {
  background-color: #212e48 !important;
}
.bg-state-light-primary {
  cursor: pointer;
}
.bg-state-light-primary.active,
.bg-state-light-primary:hover {
  background-color: #212e48 !important;
}
.bg-hover-primary {
  cursor: pointer;
}
.bg-hover-primary:hover {
  --bg-color: 54, 153, 255;
  background-color: #3699ff !important;
}
.bg-active-primary.active {
  --bg-color: 54, 153, 255;
  background-color: #3699ff !important;
}
.bg-state-primary {
  cursor: pointer;
}
.bg-state-primary.active,
.bg-state-primary:hover {
  --bg-color: 54, 153, 255;
  background-color: #3699ff !important;
}
.bg-secondary {
  --bg-color: 50, 50, 72;
}
.bg-secondary.hoverable:hover {
  background-color: #474761 !important;
}
.bg-hover-secondary {
  cursor: pointer;
}
.bg-hover-secondary:hover {
  --bg-color: 50, 50, 72;
  background-color: #323248 !important;
}
.bg-active-secondary.active {
  --bg-color: 50, 50, 72;
  background-color: #323248 !important;
}
.bg-state-secondary {
  cursor: pointer;
}
.bg-state-secondary.active,
.bg-state-secondary:hover {
  --bg-color: 50, 50, 72;
  background-color: #323248 !important;
}
.bg-light-success {
  background-color: #1c3238 !important;
}
.bg-light-success.hoverable:hover {
  background-color: #122024 !important;
}
.bg-success {
  --bg-color: 11, 183, 131;
}
.bg-success.hoverable:hover {
  background-color: #04aa77 !important;
}
.bg-hover-light-success {
  cursor: pointer;
}
.bg-hover-light-success:hover {
  background-color: #1c3238 !important;
}
.bg-state-light-success {
  cursor: pointer;
}
.bg-state-light-success.active,
.bg-state-light-success:hover {
  background-color: #1c3238 !important;
}
.bg-hover-success {
  cursor: pointer;
}
.bg-hover-success:hover {
  --bg-color: 11, 183, 131;
  background-color: #0bb783 !important;
}
.bg-active-success.active {
  --bg-color: 11, 183, 131;
  background-color: #0bb783 !important;
}
.bg-state-success {
  cursor: pointer;
}
.bg-state-success.active,
.bg-state-success:hover {
  --bg-color: 11, 183, 131;
  background-color: #0bb783 !important;
}
.bg-light-info {
  background-color: #2f264f !important;
}
.bg-light-info.hoverable:hover {
  background-color: #231c3a !important;
}
.bg-info {
  --bg-color: 137, 80, 252;
}
.bg-info.hoverable:hover {
  background-color: #7337ee !important;
}
.bg-hover-light-info {
  cursor: pointer;
}
.bg-hover-light-info:hover {
  background-color: #2f264f !important;
}
.bg-state-light-info {
  cursor: pointer;
}
.bg-state-light-info.active,
.bg-state-light-info:hover {
  background-color: #2f264f !important;
}
.bg-hover-info {
  cursor: pointer;
}
.bg-hover-info:hover {
  --bg-color: 137, 80, 252;
  background-color: #8950fc !important;
}
.bg-active-info.active {
  --bg-color: 137, 80, 252;
  background-color: #8950fc !important;
}
.bg-state-info {
  cursor: pointer;
}
.bg-state-info.active,
.bg-state-info:hover {
  --bg-color: 137, 80, 252;
  background-color: #8950fc !important;
}
.bg-light-warning {
  background-color: #392f28 !important;
}
.bg-light-warning.hoverable:hover {
  background-color: #27201b !important;
}
.bg-warning {
  --bg-color: 255, 168, 0;
}
.bg-warning.hoverable:hover {
  background-color: #ee9d01 !important;
}
.bg-hover-light-warning {
  cursor: pointer;
}
.bg-hover-light-warning:hover {
  background-color: #392f28 !important;
}
.bg-state-light-warning {
  cursor: pointer;
}
.bg-state-light-warning.active,
.bg-state-light-warning:hover {
  background-color: #392f28 !important;
}
.bg-hover-warning {
  cursor: pointer;
}
.bg-hover-warning:hover {
  --bg-color: 255, 168, 0;
  background-color: #ffa800 !important;
}
.bg-active-warning.active {
  --bg-color: 255, 168, 0;
  background-color: #ffa800 !important;
}
.bg-state-warning {
  cursor: pointer;
}
.bg-state-warning.active,
.bg-state-warning:hover {
  --bg-color: 255, 168, 0;
  background-color: #ffa800 !important;
}
.bg-light-danger {
  background-color: #3a2434 !important;
}
.bg-light-danger.hoverable:hover {
  background-color: #271823 !important;
}
.bg-danger {
  --bg-color: 246, 78, 96;
}
.bg-danger.hoverable:hover {
  background-color: #ee2d41 !important;
}
.bg-hover-light-danger {
  cursor: pointer;
}
.bg-hover-light-danger:hover {
  background-color: #3a2434 !important;
}
.bg-state-light-danger {
  cursor: pointer;
}
.bg-state-light-danger.active,
.bg-state-light-danger:hover {
  background-color: #3a2434 !important;
}
.bg-hover-danger {
  cursor: pointer;
}
.bg-hover-danger:hover {
  --bg-color: 246, 78, 96;
  background-color: #f64e60 !important;
}
.bg-active-danger.active {
  --bg-color: 246, 78, 96;
  background-color: #f64e60 !important;
}
.bg-state-danger {
  cursor: pointer;
}
.bg-state-danger.active,
.bg-state-danger:hover {
  --bg-color: 246, 78, 96;
  background-color: #f64e60 !important;
}
.bg-light-dark {
  background-color: #2b2b40 !important;
}
.bg-light-dark.hoverable:hover {
  background-color: #1f1f2e !important;
}
.bg-dark {
  --bg-color: 255, 255, 255;
}
.bg-dark.hoverable:hover {
  background-color: #e8e8e8 !important;
}
.bg-hover-light-dark {
  cursor: pointer;
}
.bg-hover-light-dark:hover {
  background-color: #2b2b40 !important;
}
.bg-state-light-dark {
  cursor: pointer;
}
.bg-state-light-dark.active,
.bg-state-light-dark:hover {
  background-color: #2b2b40 !important;
}

              
            
!

JS

              
                
              
            
!
999px

Console