Troubleshoot Metrics Backup

index.html

<div class="relative h-screen flex overflow-y-auto lg:overflow-hidden bg-gradient-to-r from-white via-blue-50 to-gray-50">
  <!-- Not in use: Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->

  <div class="fixed inset-0 flex z-40 lg:hidden" role="dialog" aria-modal="true" style="display: none;">
    <!--
      Off-canvas menu overlay, show/hide based on off-canvas menu state.

      Entering: "transition-opacity ease-linear duration-300"
        From: "opacity-0"
        To: "opacity-100"
      Leaving: "transition-opacity ease-linear duration-300"
        From: "opacity-100"
        To: "opacity-0"
    -->
    <div class="fixed inset-0 bg-gray-600 bg-opacity-75" aria-hidden="true"></div>

    <!--
      Off-canvas menu, show/hide based on off-canvas menu state.

      Entering: "transition ease-in-out duration-300 transform"
        From: "-translate-x-full"
        To: "translate-x-0"
      Leaving: "transition ease-in-out duration-300 transform"
        From: "translate-x-0"
        To: "-translate-x-full"
    -->
    <div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-gray-800">
      <!--
        Close button, show/hide based on off-canvas menu state.

        Entering: "ease-in-out duration-300"
          From: "opacity-0"
          To: "opacity-100"
        Leaving: "ease-in-out duration-300"
          From: "opacity-100"
          To: "opacity-0"
      -->
      <div class="absolute top-0 right-0 -mr-12 pt-2">
        <button type="button" class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
          <span class="sr-only">Close sidebar</span>
          <!-- Heroicon name: outline/x -->
          <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>

      <div class="flex-shrink-0 flex items-center px-4">
        <img class="h-8 w-auto" src="https://app.rollbar.com//images/common/rollbar-icon-white.svg" alt="Workflow">
      </div>
      <div class="mt-5 flex-1 h-0 overflow-y-auto">
        <nav class="px-2">
          <div class="space-y-1 text-base font-normal tracking-wide text-gray-200">

            <a href="#" class="hover:bg-gray-700 hover:text-gray-200 group py-2 px-3 rounded-md flex items-center">
              <!--Heroicon name: outline/chart square-->
              <svg class="text-gray-300 group-hover:text-gray-100 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
              </svg>
              <span>Dashboard</span>
            </a>

            <a href="#" class="hover:bg-gray-700 hover:text-gray-200 group py-2 px-3 rounded-md flex items-center">
              <!-- Heroicon name: outline/view list -->
              <svg class="text-gray-300 group-hover:text-gray-100 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
              </svg>

              <span>Items</span>
            </a>

            <a href="#" class="hover:bg-gray-700 hover:text-gray-200 group py-2 px-3 rounded-md flex items-center">
              <!-- Heroicon name: outline/view list -->
              <svg class="text-gray-300 group-hover:text-gray-100 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="currentColor" aria-hidden="true">
                <g fill-rule="evenodd">
                  <path d="M6 20a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm0-2a3 3 0 1 1 0 6 3 3 0 0 1 0-6zM6 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm0-2a3 3 0 1 1 0 6 3 3 0 0 1 0-6zM18 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm0-2a3 3 0 1 1 0 6 3 3 0 0 1 0-6z" fill-rule="nonzero"></path>
                  <path d="M5 8h2v12H5z"></path>
                  <path d="M7 18H5a6 6 0 0 1 6-6v2a4 4 0 0 0-4 4zM17 8h2a6 6 0 0 1-6 6v-2a4 4 0 0 0 4-4z"></path>
                  <path d="m15.061 8.99 3.004-3.004 3.003 3.003zM11 12h2v2h-2zM3.061 8.99l3.004-3.004 3.003 3.003z"></path>
                </g>
              </svg>

              <span>Versions</span>
            </a><a href="#" class="fill-current hover:bg-gray-700 hover:text-gray-200 group py-2 px-3 rounded-md flex items-center" aria-current="page">
              <!-- Heroicon name: outline/photograph -->
              <svg class="text-gray-300 group-hover:text-gray-100 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" aria-hidden="true">
                <g fill-rule="evenodd">
                  <path d="m7.862 18.962.024.024a1 1 0 0 1 0 1.414l-.707.707a1 1 0 0 1-1.414 0l-.024-.024a1 1 0 0 1 0-1.414l.707-.707a1 1 0 0 1 1.414 0zm-2.876-2.877.024.024a1 1 0 0 1 0 1.415l-.707.707a1 1 0 0 1-1.415 0l-.024-.024a1 1 0 0 1 0-1.415l.707-.707a1 1 0 0 1 1.415 0zm-.683 3.56.024.024a1 1 0 0 1 0 1.414l-.708.707a1 1 0 0 1-1.414 0l-.024-.024a1 1 0 0 1 0-1.414l.707-.707a1 1 0 0 1 1.415 0z"></path>
                  <path d="M10.624 16.424c.95-.512 1.615-.844 2.031-1.01.666-.268 1.226-.168 1.733.08.201.097.369.211.536.346.194.156.39.345.616.584.302.32.587.646 1.176 1.34l.03.035.087.102c.3-.497.545-1.011.658-1.374.026-.08.016-.256-.067-.567-.034-.126-.323-1.003-.389-1.292-.203-.896-.138-1.707.613-2.433.466-.45.91-.948 1.335-1.493 1.69-2.17 2.366-4.603 2.04-7.406-2.555-.4-4.945.29-7.292 2.117A16.95 16.95 0 0 0 12.2 6.795c-.752.747-1.569.798-2.494.578-.268-.064-1.095-.332-1.226-.366-.314-.084-.491-.095-.573-.07-.379.115-.907.361-1.417.66l.073.061.03.025c.697.589 1.02.868 1.339 1.166.239.224.427.417.583.607.135.165.248.329.347.526.257.511.364 1.074.091 1.753-.165.413-.493 1.075-.997 2.02l2.669 2.669zM5.462 14.09c.884-1.608 1.423-2.652 1.617-3.134.145-.36-3.708-3.143-3.558-3.473C3.88 6.7 5.947 5.415 7.29 5.007c1.46-.445 3.01.808 3.476.345a18.913 18.913 0 0 1 1.71-1.498c3.211-2.5 6.647-3.228 10.307-2.183.84 3.92.108 7.362-2.2 10.326a16.21 16.21 0 0 1-1.519 1.699c-.449.434.811 1.996.355 3.46-.406 1.303-1.696 3.327-2.485 3.681-.337.152-3.13-3.699-3.5-3.55-.482.193-1.528.738-3.14 1.635l-4.83-4.831z" fill-rule="nonzero"></path>
                </g>
              </svg>
              <span>Deploys</span>
            </a>

            <a href="#" class="fill-current hover:bg-gray-700 hover:text-gray-200 group py-2 px-3 rounded-md flex items-center" aria-current="page">
              <!-- Heroicon name: outline/photograph -->
              <svg class="text-gray-300 group-hover:text-gray-100 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" fill="currentColor" aria-hidden="true">
                <g fill-rule="evenodd">
                  <path d="M10.125 10.977a7.022 7.022 0 0 0-1.374 1.865c-1.579-.23-2.905-.694-3.751-1.296v3c.71.505 1.756.913 3.006 1.166a7.122 7.122 0 0 0 .216 2.042C6.876 17.504 5.75 17.08 5 16.546v3.163c.207.167.565.36 1.045.54 1.049.393 2.469.655 4.034.73a6.986 6.986 0 0 0 3.455 1.867c-.796.1-1.648.154-2.534.154-4.418 0-8-1.343-8-3V4c0-1.657 3.582-3 8-3s8 1.343 8 3v6.255a6.972 6.972 0 0 0-2-.965V6.546C15.775 7.417 13.546 8 11 8s-4.775-.583-6-1.454v3c1.082.77 2.948 1.314 5.125 1.43zM5 4.547C6.225 5.416 8.454 6 11 6s4.775-.583 6-1.454v-.255c-.207-.167-.565-.36-1.045-.54C14.705 3.282 12.924 3 11 3s-3.704.282-4.955.751c-.48.18-.838.373-1.045.54v.255z" fill-rule="nonzero"></path>
                  <path d="M15 21a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path>
                  <rect transform="rotate(45 19.768 20.768)" x="17.268" y="19.893" width="5" height="1.75" rx=".875"></rect>
                </g>
              </svg>

              <span>RQL</span>
            </a><a href="#" class="fill-current hover:bg-gray-700 hover:text-gray-200 group py-2 px-3 rounded-md flex items-center" aria-current="page">
              <!-- Heroicon name: outline/user-group -->
              <svg class="text-gray-300 group-hover:text-gray-100 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 26 26" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
              </svg>
              <span>People</span>
            </a>

            <a href="#" class="fill-current hover:bg-gray-700 hover:text-gray-200 group py-2 px-3 rounded-md flex items-center">
              <!-- Heroicon name: outline/collection -->
              <svg class="text-gray-300 group-hover:text-gray-100 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" aria-hidden="true">
                <path d="M18.707 18.706a1.352 1.352 0 0 0 0-1.893 1.352 1.352 0 0 0-1.894 0 1.354 1.354 0 0 0 0 1.894 1.353 1.353 0 0 0 1.894 0zM21 16.76c.547 0 1 .453 1 1 0 .546-.453 1-1 1h-.053c-.067.187-.133.373-.227.533l.04.04c.387.4.387 1.027 0 1.427a1.01 1.01 0 0 1-1.426-.013l-.027-.027c-.173.08-.36.16-.547.227V21c0 .546-.453 1-1 1-.546 0-1-.454-1-1v-.053a6.688 6.688 0 0 1-.546-.227l-.027.027c-.4.4-1.027.4-1.426.013a.621.621 0 0 1-.12-.16 1.01 1.01 0 0 1 .12-1.267l.04-.04a3.186 3.186 0 0 1-.227-.533h-.054c-.546 0-1-.454-1-1 0-.547.454-1 1-1h.053c.067-.2.147-.374.227-.547l-.04-.04a1.006 1.006 0 0 1 0-1.413 1.022 1.022 0 0 1 1.426 0l.04.04c.174-.094.347-.16.534-.227v-.053c0-.547.453-1 1-1 .546 0 1 .453 1 1v.053c.187.067.36.133.533.227l.04-.04a.99.99 0 0 1 .707-.294c.267 0 .52.094.72.294.387.4.387 1.026 0 1.413l-.04.04c.08.173.16.347.227.547H21z"></path>
                <path d="M20 7.427V6.64a1.6 1.6 0 0 0-1.587-1.587H9.467a.999.999 0 0 1-.707-.293.947.947 0 0 1-.293-.707v-.466C8.467 2.72 7.76 2 6.867 2H3.6C2.706 2 2 2.72 2 3.587v3.84a3.576 3.576 0 0 1 1.6-.374h14.813c.574 0 1.107.134 1.587.374zm2-.787V12c0 .56-.453 1-1 1a.982.982 0 0 1-.827-.44A.996.996 0 0 1 20 12v-1.36a1.6 1.6 0 0 0-1.587-1.587H3.6c-.894 0-1.6.72-1.6 1.587v7.76c0 .88.707 1.6 1.6 1.6H12c.413 0 .773.253.92.613A.999.999 0 0 1 12 22H3.6c-2 0-3.6-1.613-3.6-3.6V3.587A3.59 3.59 0 0 1 3.6 0h3.267c1.8 0 3.293 1.333 3.56 3.053h7.986A3.596 3.596 0 0 1 22 6.64z"></path>
              </svg>

              <span>Projects</span>
            </a>

            <a href="#" class="hover:bg-gray-700 hover:text-gray-200 group py-2 px-3 rounded-md flex items-center">
              <!-- Heroicon name: outline/cog -->
              <svg class="text-gray-300 group-hover:text-gray-100 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 26 26" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
              </svg>
              <span>Settings</span>
            </a>
          </div>
          <div class="mt-10">
            <p class="px-2 text-xs font-semibold text-gray-400 uppercase tracking-wider">
              Account
            </p>
            <div class="mt-2 space-y-0 text-gray-300">
              <div class="flex items-center px-2 py-2">
                <div class="flex-shrink-0">
                  <img class="h-10 w-10 rounded-full" src="https://secure.gravatar.com/avatar/edf8f5994430e63a2477e8af090bb680?d" alt="">
                </div>
                <div class="ml-3 min-w-0 flex-1">
                  <div class="text-base font-semibold text-gray-50 tracking-wide truncate">atsuko</div>
                  <div class="text-xs font-medium text-gray-300 tracking-wide truncate">[email protected]</div>
                </div>
                <a href="#" class="hidden ml-auto flex-shrink-0 bg-white p-2 text-gray-400 hover:text-gray-500">
                  <span class="sr-only">View notifications</span>
                  <!-- Heroicon name: outline/bell -->
                  <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
                  </svg>
                </a>
              </div>

              <a href="#" class="flex items-center hover:bg-gray-700 hover:text-white px-2 py-2 text-base font-medium rounded-md">
                <span class="truncate">User Settings</span>
              </a>

              <a href="#" class="flex items-center hover:bg-gray-700 hover:text-white px-2 py-2 text-base font-medium rounded-md">
                <span class="truncate">Account Settings</span>
              </a>

              <a href="#" class="flex items-center hover:bg-gray-700 hover:text-white px-2 py-2 text-base font-medium rounded-md">
                <span class="truncate">Switch Accounts</span>
              </a>

              <a href="#" class="flex items-center hover:bg-gray-700 hover:text-white px-2 py-2 text-base font-medium rounded-md">
                <span class="truncate">Sign out</span>
              </a>
            </div>
          </div>
        </nav>
      </div>
    </div>

    <div class="flex-shrink-0 w-14" aria-hidden="true">
      <!-- Dummy element to force sidebar to shrink to fit close icon -->
    </div>
  </div>

  <!-- Static sidebar for desktop -->
  <div class="hidden md:flex md:flex-shrink-0">
    <div class="flex flex-col w-16 lg:w-24 2xl:w-28 ">
      <!-- LHS Navigation -->
      <div class="flex-1 flex flex-col min-h-0 bg-gradient-to-b from-blue-900 to-blue-900">
        <div class="flex justify-center items-center h-16 flex-shrink-0 px-4 bg-blue-800">
          <svg class="h-7 w-auto text-white" viewBox="0 0 208.75 174.23" fill="currentColor">
            <path xmlns="http://www.w3.org/2000/svg" d="m208.75 5.17a5.54 5.54 0 0 0 -.1-1c0-.1-.05-.19-.08-.29s-.13-.45-.21-.67l-.15-.32a4.37 4.37 0 0 0 -.32-.55c-.07-.11-.14-.22-.22-.33l-.14-.19c-.08-.09-.17-.16-.25-.24l-.2-.24-.16-.11a5.07 5.07 0 0 0 -.46-.35l-.39-.25a5.05 5.05 0 0 0 -.53-.24l-.42-.17c-.19-.06-.39-.09-.58-.13l-.43-.09a5.58 5.58 0 0 0 -.71 0h-.4c-2.68.24-38.09 3.62-77.89 21.37-23.9 10.63-42.4 26.95-54.04 46.76l-3 1.3c-42.61 19.02-68.07 55.99-68.07 98.9v.72a5.19 5.19 0 0 0 3 4.7 5.28 5.28 0 0 0 2.19.48h141.45a4.54 4.54 0 0 0 .82-.07l.36-.09c.17-.05.34-.08.51-.14s.25-.12.38-.18.3-.12.44-.2a5.63 5.63 0 0 0 .75-.53l57-48.06a5.16 5.16 0 0 0 1.84-4v-115.79zm-51.54 148.11-5.47 4.61v-102.25l46.64-39.31v102.25zm-93.12-27.11h77.28v37.69h-122zm65.23-95.32a267.23 267.23 0 0 1 56.81-17.77l-41.69 35.15a264.47 264.47 0 0 0 -56.44 13.29c10.32-12.6 24.24-23.05 41.32-30.67zm-51.23 45.58a267.64 267.64 0 0 1 63.28-17.35v56.72h-73.88a91.66 91.66 0 0 1 10.6-39.37zm-14.23 6.62a102.7 102.7 0 0 0 -6.86 35.51l-46 38.82c3.48-31.54 22.21-57.92 52.86-74.33z"></path>
          </svg>
        </div>
        <div id="slim-scroll" class="flex-1 flex flex-col overflow-y-auto bg-gradient-to-b from-blue-900 to-blue-900">
          <nav class="flex-1 ">
            <div class="flex flex-col items-center px-2 py-2 space-y-1 lg:space-y-0.5 text-xs font-normal tracking-wide text-blue-200">
              <a href="#" class="group w-full px-1.5 py-2.5 rounded-md flex flex-col items-center bg-transparent transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-label="Dashboard" title="Dashboard">
                <!--Heroicon name: outline/chart square-->
                <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-7 w-7 lg:h-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>

                <span class="hidden lg:block mt-1">Dashboard</span>
              </a>

              <a href="#" class="group w-full px-1.5 py-2.5 rounded-md flex flex-col items-center bg-transparent transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-label="Items" title="Items">
                <!-- Heroicon name: outline/view-list -->
                <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-7 w-7 lg:h-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" viewBox="-7 -6 112 112" fill="currentColor" aria-hidden="true">
                  <path d="M51.39,22.78h40a4,4,0,0,0,0-8h-40a4,4,0,0,0,0,8Z"></path>
                  <path d="M51.39,41.22h30a4,4,0,0,0,0-8h-30a4,4,0,0,0,0,8Z"></path>
                  <path d="M30.61,8h-18a8,8,0,0,0-8,8V34a8,8,0,0,0,8,8h18a8,8,0,0,0,8-8V16A8,8,0,0,0,30.61,8Zm-18,26V16h18V34Z"></path>
                  <path d="M51.39,72.78h40a4,4,0,0,0,0-8h-40a4,4,0,0,0,0,8Z"></path>
                  <path d="M51.39,91.22h30a4,4,0,0,0,0-8h-30a4,4,0,0,0,0,8Z"></path>
                  <path d="M4.61,84a8,8,0,0,0,8,8h18a8,8,0,0,0,8-8V66a8,8,0,0,0-8-8h-18a8,8,0,0,0-8,8Zm8-18h18V84h-18Z"></path>
                </svg>

                <span class="hidden lg:block mt-1">Items</span>
              </a>

              <a href="#" class="group w-full px-1.5 py-2.5 rounded-md flex flex-col items-center fill-current bg-transparent transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-current="page" aria-label="Versions" title="Versions">

                <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-7 w-7 lg:h-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" viewBox="-3 -2.5 29 29" aria-hidden="true">
                  <g fill-rule="evenodd">
                    <path d="M6 20a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm0-2a3 3 0 1 1 0 6 3 3 0 0 1 0-6zM6 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm0-2a3 3 0 1 1 0 6 3 3 0 0 1 0-6zM18 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm0-2a3 3 0 1 1 0 6 3 3 0 0 1 0-6z" fill-rule="nonzero"></path>
                    <path d="M5 8h2v12H5z"></path>
                    <path d="M7 18H5a6 6 0 0 1 6-6v2a4 4 0 0 0-4 4zM17 8h2a6 6 0 0 1-6 6v-2a4 4 0 0 0 4-4z"></path>
                    <path d="m15.061 8.99 3.004-3.004 3.003 3.003zM11 12h2v2h-2zM3.061 8.99l3.004-3.004 3.003 3.003z"></path>
                  </g>
                </svg>

                <span class="hidden lg:block mt-1">Versions</span>
              </a>

              <a href="#" class="group w-full px-1.5 py-2.5 rounded-md flex flex-col items-center fill-current bg-transparent transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-label="Deploys" title="Deploys">

                <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-7 w-7 lg:h-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" viewBox="-1 -2 27 27" aria-hidden="true">
                  <g fill-rule="evenodd">
                    <path d="m7.862 18.962.024.024a1 1 0 0 1 0 1.414l-.707.707a1 1 0 0 1-1.414 0l-.024-.024a1 1 0 0 1 0-1.414l.707-.707a1 1 0 0 1 1.414 0zm-2.876-2.877.024.024a1 1 0 0 1 0 1.415l-.707.707a1 1 0 0 1-1.415 0l-.024-.024a1 1 0 0 1 0-1.415l.707-.707a1 1 0 0 1 1.415 0zm-.683 3.56.024.024a1 1 0 0 1 0 1.414l-.708.707a1 1 0 0 1-1.414 0l-.024-.024a1 1 0 0 1 0-1.414l.707-.707a1 1 0 0 1 1.415 0z"></path>
                    <path d="M10.624 16.424c.95-.512 1.615-.844 2.031-1.01.666-.268 1.226-.168 1.733.08.201.097.369.211.536.346.194.156.39.345.616.584.302.32.587.646 1.176 1.34l.03.035.087.102c.3-.497.545-1.011.658-1.374.026-.08.016-.256-.067-.567-.034-.126-.323-1.003-.389-1.292-.203-.896-.138-1.707.613-2.433.466-.45.91-.948 1.335-1.493 1.69-2.17 2.366-4.603 2.04-7.406-2.555-.4-4.945.29-7.292 2.117A16.95 16.95 0 0 0 12.2 6.795c-.752.747-1.569.798-2.494.578-.268-.064-1.095-.332-1.226-.366-.314-.084-.491-.095-.573-.07-.379.115-.907.361-1.417.66l.073.061.03.025c.697.589 1.02.868 1.339 1.166.239.224.427.417.583.607.135.165.248.329.347.526.257.511.364 1.074.091 1.753-.165.413-.493 1.075-.997 2.02l2.669 2.669zM5.462 14.09c.884-1.608 1.423-2.652 1.617-3.134.145-.36-3.708-3.143-3.558-3.473C3.88 6.7 5.947 5.415 7.29 5.007c1.46-.445 3.01.808 3.476.345a18.913 18.913 0 0 1 1.71-1.498c3.211-2.5 6.647-3.228 10.307-2.183.84 3.92.108 7.362-2.2 10.326a16.21 16.21 0 0 1-1.519 1.699c-.449.434.811 1.996.355 3.46-.406 1.303-1.696 3.327-2.485 3.681-.337.152-3.13-3.699-3.5-3.55-.482.193-1.528.738-3.14 1.635l-4.83-4.831z" fill-rule="nonzero"></path>
                  </g>
                </svg>

                <span class="hidden lg:block mt-1">Deploys</span>
              </a>

              <a href="#" class="group w-full px-1.5 py-2.5 rounded-md flex flex-col items-center fill-current bg-transparent transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-label="RQL" title="RQL">
                <!-- Heroicon name: outline/user-group -->
                <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-7 w-7 lg:h-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 28 28" aria-hidden="true">
                  <g fill-rule="evenodd">
                    <path d="M10.125 10.977a7.022 7.022 0 0 0-1.374 1.865c-1.579-.23-2.905-.694-3.751-1.296v3c.71.505 1.756.913 3.006 1.166a7.122 7.122 0 0 0 .216 2.042C6.876 17.504 5.75 17.08 5 16.546v3.163c.207.167.565.36 1.045.54 1.049.393 2.469.655 4.034.73a6.986 6.986 0 0 0 3.455 1.867c-.796.1-1.648.154-2.534.154-4.418 0-8-1.343-8-3V4c0-1.657 3.582-3 8-3s8 1.343 8 3v6.255a6.972 6.972 0 0 0-2-.965V6.546C15.775 7.417 13.546 8 11 8s-4.775-.583-6-1.454v3c1.082.77 2.948 1.314 5.125 1.43zM5 4.547C6.225 5.416 8.454 6 11 6s4.775-.583 6-1.454v-.255c-.207-.167-.565-.36-1.045-.54C14.705 3.282 12.924 3 11 3s-3.704.282-4.955.751c-.48.18-.838.373-1.045.54v.255z" fill-rule="nonzero"></path>
                    <path d="M15 21a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path>
                    <rect transform="rotate(45 19.768 20.768)" x="17.268" y="19.893" width="5" height="1.75" rx=".875"></rect>
                  </g>
                </svg>
                <span class="hidden lg:block mt-1">RQL</span>
              </a>

              <a href="#" class="group w-full px-1.5 py-2.5 rounded-md flex flex-col items-center fill-current bg-transparent transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-label="People" title="People">
                <!-- Heroicon name: outline/user-group -->
                <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-7 w-7 lg:h-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-2 -2 28 28" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                </svg>
                <span class="hidden lg:block mt-1">People</span>
              </a>

              <a href="#" class="group w-full px-1.5 py-2.5 rounded-md flex flex-col items-center fill-current bg-transparent transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-label="Projects" title="Projects">

                <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-7 w-7 lg:h-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 30 30" aria-hidden="true">
                  <path d="M18.707 18.706a1.352 1.352 0 0 0 0-1.893 1.352 1.352 0 0 0-1.894 0 1.354 1.354 0 0 0 0 1.894 1.353 1.353 0 0 0 1.894 0zM21 16.76c.547 0 1 .453 1 1 0 .546-.453 1-1 1h-.053c-.067.187-.133.373-.227.533l.04.04c.387.4.387 1.027 0 1.427a1.01 1.01 0 0 1-1.426-.013l-.027-.027c-.173.08-.36.16-.547.227V21c0 .546-.453 1-1 1-.546 0-1-.454-1-1v-.053a6.688 6.688 0 0 1-.546-.227l-.027.027c-.4.4-1.027.4-1.426.013a.621.621 0 0 1-.12-.16 1.01 1.01 0 0 1 .12-1.267l.04-.04a3.186 3.186 0 0 1-.227-.533h-.054c-.546 0-1-.454-1-1 0-.547.454-1 1-1h.053c.067-.2.147-.374.227-.547l-.04-.04a1.006 1.006 0 0 1 0-1.413 1.022 1.022 0 0 1 1.426 0l.04.04c.174-.094.347-.16.534-.227v-.053c0-.547.453-1 1-1 .546 0 1 .453 1 1v.053c.187.067.36.133.533.227l.04-.04a.99.99 0 0 1 .707-.294c.267 0 .52.094.72.294.387.4.387 1.026 0 1.413l-.04.04c.08.173.16.347.227.547H21z"></path>
                  <path d="M20 7.427V6.64a1.6 1.6 0 0 0-1.587-1.587H9.467a.999.999 0 0 1-.707-.293.947.947 0 0 1-.293-.707v-.466C8.467 2.72 7.76 2 6.867 2H3.6C2.706 2 2 2.72 2 3.587v3.84a3.576 3.576 0 0 1 1.6-.374h14.813c.574 0 1.107.134 1.587.374zm2-.787V12c0 .56-.453 1-1 1a.982.982 0 0 1-.827-.44A.996.996 0 0 1 20 12v-1.36a1.6 1.6 0 0 0-1.587-1.587H3.6c-.894 0-1.6.72-1.6 1.587v7.76c0 .88.707 1.6 1.6 1.6H12c.413 0 .773.253.92.613A.999.999 0 0 1 12 22H3.6c-2 0-3.6-1.613-3.6-3.6V3.587A3.59 3.59 0 0 1 3.6 0h3.267c1.8 0 3.293 1.333 3.56 3.053h7.986A3.596 3.596 0 0 1 22 6.64z"></path>
                </svg>

                <span class="hidden lg:block mt-1">Projects</span>
              </a>

              <a href="#" class="group w-full px-1.5 py-2.5 rounded-md flex flex-col items-center bg-transparent transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-label="Settings" title="Settings">
                <!-- Heroicon name: outline/cog -->
                <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-7 w-7 lg:h-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-1 -1 26 26" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                </svg>
                <span class="hidden lg:block mt-1">Settings</span>
              </a>
            </div>

            <div class="hidden space-y-1">
              <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
              <a href="#" class="bg-gray-900 text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md" aria-current="page">
                <!--
                  Heroicon name: outline/home

                  Current: "text-gray-300", Default: "text-gray-400 group-hover:text-gray-300"
                -->
                <svg class="text-gray-300 mr-3 flex-shrink-0 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                </svg>
                All Issues
              </a>

              <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md">
                <!-- Heroicon name: outline/view-list -->
                <svg class="text-gray-400 group-hover:text-gray-300 mr-3 flex-shrink-0 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
                </svg>
                My Issues
              </a>

              <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md">
                <!-- Heroicon name: outline/user-circle -->
                <svg class="text-gray-400 group-hover:text-gray-300 mr-3 flex-shrink-0 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                Assigned
              </a>

              <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md">
                <!-- Heroicon name: outline/archive -->
                <svg class="text-gray-400 group-hover:text-gray-300 mr-3 flex-shrink-0 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
                </svg>
                Closed
              </a>

              <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md">
                <!-- Heroicon name: outline/clock -->
                <svg class="text-gray-400 group-hover:text-gray-300 mr-3 flex-shrink-0 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                Recent
              </a>
            </div>
            <div class="hidden mt-10">
              <p class="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">
                Projects
              </p>
              <div class="mt-2 space-y-1">
                <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium text-gray-300 rounded-md hover:text-white hover:bg-gray-700">
                  <span class="truncate">
                    GraphQL API
                  </span>
                </a>

                <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium text-gray-300 rounded-md hover:text-white hover:bg-gray-700">
                  <span class="truncate">
                    iOS App
                  </span>
                </a>

                <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium text-gray-300 rounded-md hover:text-white hover:bg-gray-700">
                  <span class="truncate">
                    Marketing Site Redesign
                  </span>
                </a>

                <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium text-gray-300 rounded-md hover:text-white hover:bg-gray-700">
                  <span class="truncate">
                    Customer Portal
                  </span>
                </a>
              </div>
            </div>
          </nav>
          <div class="flex-shrink-0 flex flex-col items-center space-y-2 text-xs font-normal text-blue-200 tracking-wide">

            <a href="#" class="group p-2 rounded-full flex justify-center bg-transparent transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:text-white hover:bg-transparent focus:outline-none focus:ring-0 focus:ring-blue-700" aria-label="Updates" title="Updates">
              <!-- Heroicon name: outline/home -->
              <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-7 w-7 lg:h-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"></path>
              </svg>
            </a>

            <a href="#" class="group p-2 rounded-full flex justify-center bg-transparent transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:text-white hover:bg-transparent focus:outline-none focus:text-blue-100" aria-label="”Up" title="Upgrade">
              <!-- Heroicon name: outline/home -->
              <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-7 w-7 lg:h-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path>
              </svg>
            </a>

            <a href="#" class="group p-2 rounded-full flex justify-center bg-transparent transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:text-white hover:bg-transparent focus:outline-none focus:text-white" aria-label="Help" title="Help">
              <!-- Heroicon name: outline/home -->
              <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-7 w-7 lg:h-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path>
              </svg>
            </a>

            <a href="#" class="group shadow-sm pb-4 px-2 flex flex-col w-full items-center font-semibold tracking-wide transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:border-blue-200 focus:outline-none hidden" aria-label="Manage Settings" title="Manage Settings">
              <img class="block mx-auto mt-2 h-10 w-10 rounded-full border-2 border-transparent group-hover:border-blue-100 group-focus:border-blue-200" src="https://secure.gravatar.com/avatar/edf8f5994430e63a2477e8af090bb680?d=retro&amp;size=50" alt="">
              <span class="hidden xl:block mt-1 text-blue-200 group-hover:text-blue-50">atsuko</span>
            </a>

          </div>
        </div>
        <div class="flex-shrink-0 flex flex-col items-center space-y-2 text-xs font-normal text-blue-200 tracking-wide">
          <!-- Profile dropdown -->
          <div class="relative flex-shrink-0">
            <div>
              <button type="button" class="group shadow-sm pt-3 pb-6 px-2 flex flex-col w-full items-center font-semibold tracking-wide transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:border-blue-200 focus:outline-none" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                <span class="sr-only">Open user menu</span>
                <img class="block mx-auto mt-2 h-10 w-10 rounded-full border-2 border-transparent group-hover:border-blue-100 group-focus:border-blue-200" src="https://secure.gravatar.com/avatar/edf8f5994430e63a2477e8af090bb680?d" alt="">
              </button>
            </div>

            <!--
                AVATAR POPUP MENU, show/hide based on menu state.

                Entering: "transition ease-out duration-100"
                  From: "transform opacity-0 scale-95"
                  To: "transform opacity-100 scale-100"
                Leaving: "transition ease-in duration-75"
                  From: "transform opacity-100 scale-100"
                  To: "transform opacity-0 scale-95"
              -->
            <div class="origin-bottom-left absolute bottom-11 left-16 mt-2 w-56 rounded-md shadow-xl py-0 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-30" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1" style="
    display: none;
">

              <div class="block flex items-center border-b border-blue-100 rounded-t-md"><a href="#" class="w-full flex flex-col items-start px-4 py-2.5 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-600 rounded-t-md" role="menuitem" tabindex="-1" id="user-menu-item-0"><span class="font-semibold text-gray-800 tracking-wide pb-0.5">atsuko</span>
                  User Settings
                </a></div><a href="#" class="block px-4 py-2 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-1">Email</a>

              <a href="#" class="block px-4 py-2 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-2">Security</a>

              <a href="#" class="block px-4 py-2 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-3">Connected Services</a>
              <div class="flex block mt-1 px-4 pt-2 pb-1 uppercase text-xs font-semibold tracking-widest text-gray-900 focus:outline-none border-t border-blue-100 justify-start"><svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-4 w-4 mr-1 text-blue-600 hidden" viewBox="0 0 20 20" fill="currentColor">
                  <path d="M8 5a1 1 0 100 2h5.586l-1.293 1.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L13.586 5H8zM12 15a1 1 0 100-2H6.414l1.293-1.293a1 1 0 10-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L6.414 15H12z"></path>
                </svg><span class="flex pb-1 border-b border-blue-100">Switch Accounts</span><span class="hidden">Edit</span></div>

              <div class="flex items-center justify-between w-full border-l-2 border-transparent hover:border-blue-500 hover:bg-blue-100"><a href="#" class="block w-full px-4 py-2 text-sm text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-3">Hoohoo</a>
                <a href="#" class="rounded-full group p-1.5 mr-2.5 ml-4 text-sm text-blue-500 bg-blue-50 hover:bg-blue-800 hover:bg-opacity-90 hover:text-blue-50 focus:outline-none focus:text-blue-800 focus:bg-blue-100" aria-label="Manage Settings" role="menuitem" tabindex="-1" id="user-menu-item-4"><svg aria-hidden="true" fill="none" stroke="currentColor" viewBox="2 1 21.5 21.5" xmlns="http://www.w3.org/2000/svg" x-description="Heroicon name: line/cog" class="h-4 w-4">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                  </svg></a>
              </div>
              <div class="flex items-center justify-between w-full border-l-2 border-transparent hover:border-blue-500 hover:bg-blue-100"><a href="#" class="block w-full px-4 py-2 text-sm text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-6">personal-test</a>
                <a href="#" class="rounded-full group p-1.5 mr-2.5 ml-4 text-sm text-blue-500 bg-blue-50 hover:bg-blue-800 hover:bg-opacity-90 hover:text-blue-50 focus:outline-none focus:text-blue-800 focus:bg-blue-100" aria-label="Manage Settings" role="menuitem" tabindex="-1" id="user-menu-item-7"><svg aria-hidden="true" fill="none" stroke="currentColor" viewBox="2 1 21.5 21.5" xmlns="http://www.w3.org/2000/svg" x-description="Heroicon name: line/cog" class="h-4 w-4">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                  </svg></a>
              </div>
              <div class="flex items-center justify-between w-full border-l-2 bg-blue-100 border-blue-800 hover:border-blue-500 hover:bg-blue-100"><a href="#" class="block w-full px-4 py-2 text-sm text-blue-800 hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-8">Rollbar</a>
                <a href="#" class="rounded-full group p-1.5 mr-2.5 ml-4 text-sm text-blue-700 bg-blue-100 hover:bg-blue-800 hover:bg-opacity-90 hover:text-blue-50 focus:outline-none focus:text-blue-800 focus:bg-blue-100" aria-label="Manage Settings" role="menuitem" tabindex="-1" id="user-menu-item-9"><svg aria-hidden="true" fill="none" stroke="currentColor" viewBox="2 1 21.5 21.5" xmlns="http://www.w3.org/2000/svg" x-description="Heroicon name: line/cog" class="h-4 w-4">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                  </svg></a>
              </div>
              <div class="flex items-center justify-between w-full border-l-2 border-transparent hover:border-red-600 hidden"><a href="#" class="block w-full px-4 py-2 text-sm text-gray-600 hover:text-red-700 focus:outline-none focus:text-red-800" role="menuitem" tabindex="-1" id="user-menu-item-7">Design-Playground</a>
                <a href="#" class="rounded-full group px-2 py-2 mx-2.5 text-sm text-red-500 bg-red-50 hover:bg-red-100 hover:bg-opacity-100 hover:text-red-500 focus:outline-none focus:text-red-600 focus:ring-0 focus:ring-red-300 focus:bg-red-50" aria-label="Manage Settings" role="menuitem" tabindex="-1" id="user-menu-item-8"><svg class="h-4 w-4" aria-hidden="true" fill="currentColor" viewBox="0 0 1192.3578 1120.896" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 2000 2000" xml:space="preserve">
                    <path style="" d="m 310.53287,0 c -37.4468,0 -74.1378,6.648 -109.1348,19.714 -14.997,5.613 -26.176,18.486 -29.571,34.146 -3.397,15.657 1.412,31.976 12.732,43.343 l 127.0128,127.059 -18.441,68.909 -68.9988,18.486 L 97.118065,184.599 c -11.319,-11.32 -27.54,-16.274 -43.294,-12.738 -15.752,3.397 -28.582,14.53 -34.195,29.576 -42.542,113.76 -14.6209996,242.658 71.027,328.353 70.181005,70.227 170.783005,102.534 268.883805,86.685 l 13.601,13.603 -200.0878,200.00402 c -71.926,72.018 -82.255005,174.46098 -23.489,233.22598 24.336,24.338 58.153,37.733 95.27,37.733 48.7208,0 99.0438,-22.358 137.8598,-61.267 l 200.07795,-200.03898 228.031,228.05398 c 34.383,34.242 79.99,53.107 128.427,53.107 48.531,0 94.13998,-18.912 128.37998,-53.107 34.383,-34.289 53.246,-79.84898 53.246,-128.37998 0,-48.531 -18.957,-94.091 -53.246,-128.378 L 768.02982,511.451 978.75482,300.839 c 12.724,4.793 26.31698,7.323 40.27698,7.327 30.543,-0.02 59.202,-11.896 80.841,-33.438 l 78.665,-78.715 c 8.866,-8.819 13.82,-20.845 13.82,-33.344 0,-12.498 -4.954,-24.479 -13.82,-33.348 l -95.078,-95.081 c -17.688,-17.688 -49.004,-17.688 -66.691,0 l -78.57798,78.668 c -32.634,32.636 -41.338,80.371 -26.07,121.144 l -210.802,210.688 -84.974,-84.974 c 15.66,-97.723 -16.319,-198.703 -86.685,-268.978 C 471.17582,32.259 393.35287,0 310.53287,0 Z m 4.483,94.381 c 55.936,1.132 108.335,23.44 147.95195,63.105 54.24,54.24 75.319,131.259 56.36,206.062 -4.055,16.13 0.661,33.2 12.358,44.946 l 469.23698,469.23102 c 16.507,16.507 25.609,38.393 25.609,61.692 0,23.299 -9.102,45.136 -25.609,61.64298 -32.96798,32.96 -90.46498,32.913 -123.43198,0.04 L 408.35387,531.867 c -8.914,-8.96 -20.991,-13.82 -33.348,-13.82 l 0,0 c -3.867,0 -7.735,0.426 -11.602,1.463 -73.481,18.629 -152.7138,-3.016 -206.0558,-56.36 -39.902,-39.9 -61.740005,-93.244 -63.014005,-147.907 l 82.349005,82.394 c 11.885,11.934 29.29,16.651 45.609,12.216 l 121.4938,-32.543 c 16.319,-4.338 29.004,-17.072 33.342,-33.344 l 32.595,-121.541 c 4.34,-16.272 -0.285,-33.678 -12.265,-45.564 l -82.442,-82.487 z m 735.14593,39.939 28.341,28.3 -45.321,45.37 c -9.618,9.574 -17.115,10.147 -26.48,1.724 -0.557,-0.616 -1.134,-1.222 -1.728,-1.816 -0.366,-0.367 -0.745,-0.712 -1.122,-1.065 -6.67898,-7.916 -6.42798,-19.773 1.03,-27.233 l 45.28,-45.28 z m -611.95293,564.12602 76.26395,76.268 -198.41995,198.368 c -21.035,21.036 -47.6358,33.63198 -71.2188,33.63198 -8.347,0 -20.138,-1.745 -28.531,-10.04698 -18.065,-18.062 -12.83,-63.532 23.487,-99.894 l 198.4188,-198.327 z m 494.08795,191.298 c -21.743,0 -39.335,17.594 -39.335,39.289 0,21.696 17.592,39.29 39.335,39.29 21.742,0 39.334,-17.594 39.334,-39.29 0,-21.695 -17.592,-39.289 -39.334,-39.289 z"></path>
                  </svg>

                </a>
              </div>
              <a href="#" class="block px-4 py-2 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800 hidden" role="menuitem" tabindex="-1" id="user-menu-item-10">Create new account</a>
              <div class="flex block mt-1 px-4 pt-2 pb-1 uppercase text-xs font-semibold tracking-widest text-gray-900 focus:outline-none border-t border-blue-100 justify-start"><svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-4 w-4 mr-1 text-blue-600 hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="pb-1 border-b border-blue-100">Quick Actions</span>
              </div>
              <div class="flex items-center justify-between w-full border-b-2 border-blue-100 mt-0">
                <div class="flex w-full justify-between divide-x divide-blue-100">
                  <span class="flex p-2 w-1/2 place-content-center text-sm hover:bg-blue-100">
                    <button type="button" class="group flex flex-col items-center space-y-1 text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800" aria-label="Create New Account">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-400 group-hover:text-blue-800" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"></path>
                      </svg>

                      <span class="font-medium">New Acct.</span>

                    </button>
                  </span>
                  <span class="inline-flex p-2 w-1/2 place-content-center text-sm hover:bg-blue-100">
                    <button type="button" class="group flex flex-col items-center space-y-1 text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800">
                      <svg class="h-5 w-5 text-blue-400 group-hover:text-blue-800" xmlns="http://www.w3.org/2000/svg" viewBox="-8 -8 110 110" fill="currentColor" aria-hidden="true">
                        <g>
                          <path d="M98.522,37.664L85.699,14.405c-0.576-1.166-1.91-1.947-3.469-2.303c-0.037-0.011-0.059-0.036-0.104-0.043   c-0.08-0.02-0.166-0.006-0.249-0.025c-0.466-0.083-0.923-0.137-1.414-0.132c-0.488-0.005-0.951,0.05-1.414,0.132   c-0.086,0.019-0.167,0.005-0.251,0.025c-0.042,0.007-0.068,0.032-0.106,0.043c-1.559,0.358-2.892,1.14-3.462,2.303l-9.407,50.362   L55.289,35.621c-0.576-1.165-1.916-1.949-3.476-2.306c-0.034-0.008-0.061-0.03-0.096-0.038c-0.08-0.02-0.15-0.005-0.232-0.022   c-0.467-0.085-0.935-0.143-1.429-0.134c-0.499-0.008-0.962,0.049-1.434,0.134c-0.077,0.017-0.159,0.002-0.235,0.022   c-0.039,0.008-0.061,0.03-0.098,0.041c-1.559,0.357-2.896,1.138-3.471,2.303L34.463,61.735l-10.767-8.414   c-0.086-0.068-0.209-0.093-0.299-0.156c-0.063-0.044-0.088-0.101-0.154-0.142c-0.167-0.104-0.382-0.141-0.559-0.229   c-0.346-0.167-0.678-0.328-1.061-0.436c-0.305-0.085-0.611-0.117-0.929-0.162c-0.354-0.049-0.7-0.104-1.059-0.101   c-0.362-0.004-0.702,0.052-1.055,0.101c-0.319,0.045-0.625,0.077-0.929,0.162c-0.382,0.107-0.717,0.269-1.061,0.436   c-0.182,0.088-0.39,0.124-0.557,0.229c-0.069,0.041-0.097,0.101-0.154,0.142c-0.097,0.063-0.213,0.09-0.301,0.156L2.561,66.89   c-2.003,1.562-1.806,3.955,0.435,5.345c2.239,1.399,5.668,1.265,7.662-0.298l9.558-9.954l12.743,9.954   c1.996,1.562,5.428,1.697,7.666,0.298c0.233-0.142,0.342-0.327,0.528-0.49c0.015-0.008,0.02-0.021,0.037-0.033   c0.36-0.317,0.661-0.641,0.853-1.012c0.058-0.093,0.167-0.158,0.22-0.258l7.562-19.066L62.19,85.599   c0.575,1.164,1.911,1.943,3.468,2.302c0.038,0.012,0.066,0.033,0.106,0.044c0.085,0.02,0.172,0.005,0.257,0.024   c0.465,0.082,0.922,0.137,1.411,0.13c0.484,0.007,0.938-0.048,1.404-0.13c0.088-0.02,0.173-0.005,0.254-0.024   c0.045-0.011,0.071-0.032,0.113-0.044c1.551-0.358,2.888-1.14,3.462-2.302l10.287-55.083l5.302,9.615   c0.975,1.977,4.065,3.027,6.906,2.347C97.996,41.801,99.504,39.644,98.522,37.664z"></path>
                        </g>
                      </svg>
                      <span class="font-medium">Usage</span>

                    </button>
                  </span>

                </div>
              </div>
              <div class="flex items-center justify-between w-full border-t-0 border-blue-100 pb-2.5">
                <div class="flex w-full justify-between divide-x divide-blue-100">
                  <span class="flex p-2 w-1/2 place-content-center text-sm hover:bg-blue-100">
                    <button type="button" class="group flex flex-col items-center space-y-1 text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-400 group-hover:text-blue-800" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"></path>
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd"></path>
                      </svg>
                      <span class="font-medium">Billing</span>

                    </button>
                  </span>
                  <span class="inline-flex p-2 w-1/2 place-content-center text-sm hover:bg-blue-100">
                    <button type="button" class="group flex flex-col items-center space-y-1 text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800">
                      <svg class="h-5 w-5 text-blue-400 group-hover:text-blue-800" xmlns="http://www.w3.org/2000/svg" viewBox="-0.8 -0.8 6.5 6.5" fill="currentColor" aria-hidden="true">
                        <g transform="translate(-34.926021,-0.52916668)">
                          <path transform="scale(0.26458334)" d="m 135,2 c -1.88892,0.0069 -3.00501,1.5484919 -2.99609,3.0058594 v 9.7578126 c 0,1.733148 0.89162,3.349014 2.36132,4.267578 l 4.40625,2.759766 c 1.36016,0.850095 3.22657,-0.189008 3.22657,-1.792969 v -2.001953 h 2 c 1.64501,0 3.00586,-1.351077 3.00586,-2.996094 V 14.003906 A 1.0000006,1.0000006 0 0 0 145.99805,13 a 1.0000006,1.0000006 0 0 0 -0.9961,1.003906 V 15 c 0,0.564136 -0.43977,0.996094 -1.0039,0.996094 h -2 V 8.9980469 c 0,-1.6106249 -0.96296,-3.0706217 -2.44336,-3.7050781 l -3.01172,-1.2910157 h 7.45508 c 0.56396,1.48e-5 1.0039,0.432135 1.0039,0.9960938 v 1.0039062 c 0.002,0.5495974 0.4465,0.9942036 0.9961,0.9960938 0.55247,0.00218 1.00396,-0.4436149 1.00586,-0.9960938 V 4.9980469 C 147.00391,3.3532257 145.64287,2.000043 143.99805,2 Z m -0.99609,3.0859375 4.76171,2.0449219 c 0.75005,0.3214488 1.23243,1.0511637 1.23243,1.8671875 V 17 19.998047 c 0,0.137344 -0.0456,0.168493 -0.16211,0.0957 l -4.41602,-2.761719 c -0.88724,-0.554523 -1.41601,-1.522083 -1.41601,-2.568359 z m 14.96289,1.9121094 a 1.0000006,1.0000006 0 0 0 -0.67188,0.2949219 1.0000006,1.0000006 0 0 0 0,1.4179687 l 0.28711,0.2871094 h -3.58008 a 1.0000006,1.0000006 0 0 0 -1.0039,1.0039061 1.0000006,1.0000006 0 0 0 1.0039,0.996094 h 3.58985 l -0.29688,0.296875 a 1.0000006,1.0000006 0 0 0 0,1.410156 1.0000006,1.0000006 0 0 0 1.41016,0 l 1.94726,-1.949219 A 1.0000006,1.0000006 0 0 0 152,10.001953 a 1.0000006,1.0000006 0 0 0 -0.33008,-0.7460936 1.0000006,1.0000006 0 0 0 -0.01,-0.00977 l -1.95508,-1.953125 A 1.0000006,1.0000006 0 0 0 148.9668,6.9980469 Z"></path>
                        </g>
                      </svg>
                      <span class="font-medium">Logout</span>

                    </button>
                  </span>

                </div>
              </div><a href="#" class="border-b border-blue-100 block mx-3 mb-2 mt-2.5 px-4 py-2.5 text-center text-md font-semibold tracking-wide text-gray-50 bg-gray-700 rounded-full hover:bg-blue-700 hover:text-blue-50 focus:outline-none focus:text-blue-800 hidden" role="menuitem" tabindex="-1" id="user-menu-item-2">Promo CTA</a>
              <div class="flex items-center border-t border-blue-100 rounded-b-md hidden"><a href="#" class="block w-full px-4 pt-2 py-2.5 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800 rounded-b-md" role="menuitem" tabindex="-1" id="user-menu-item-11">Log Out</a></div>
              <div class="flex items-center border-t border-blue-100 hidden"><a href="#" class="block w-full px-4 py-2 text-sm text-gray-600 border-l-2 border-transparent hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-9">Create new account</a></div>

            </div>
          </div>

          <button type="button" class="inline-flex transition duration-300 button-ease items-center px-2.5 md:px-4 py-2.5 border border-transparent text-sm font-medium rounded-full tracking-wide text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700 hidden">
            <svg class="md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4 text-blue-50" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
            </svg>
            <span class="hidden md:block">New Project</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <!-- Wrapper --->
  <div class="relative flex flex-col w-0 flex-1 overflow-y-auto lg:overflow-visible">
    <!-- Top navigation for Tablet + mobile -->

    <header class="bg-blue-900 z-30 md:hidden">
      <div class="mx-auto lg:divide-y lg:divide-gray-700">
        <!-- Menu items -->
        <div class="flex w-full h-16">
          <div class="relative z-10 flex lg:px-0">
            <div class="h-16 flex-shrink-0 flex justify-center items-center bg-blue-800 ">

              <svg class="block px-3.5 sm:px-5 h-7 w-auto text-white" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 208.75 174.23">
                <path d="m208.75 5.17a5.54 5.54 0 0 0 -.1-1c0-.1-.05-.19-.08-.29s-.13-.45-.21-.67l-.15-.32a4.37 4.37 0 0 0 -.32-.55c-.07-.11-.14-.22-.22-.33l-.14-.19c-.08-.09-.17-.16-.25-.24l-.2-.24-.16-.11a5.07 5.07 0 0 0 -.46-.35l-.39-.25a5.05 5.05 0 0 0 -.53-.24l-.42-.17c-.19-.06-.39-.09-.58-.13l-.43-.09a5.58 5.58 0 0 0 -.71 0h-.4c-2.68.24-38.09 3.62-77.89 21.37-23.9 10.63-42.4 26.95-54.04 46.76l-3 1.3c-42.61 19.02-68.07 55.99-68.07 98.9v.72a5.19 5.19 0 0 0 3 4.7 5.28 5.28 0 0 0 2.19.48h141.45a4.54 4.54 0 0 0 .82-.07l.36-.09c.17-.05.34-.08.51-.14s.25-.12.38-.18.3-.12.44-.2a5.63 5.63 0 0 0 .75-.53l57-48.06a5.16 5.16 0 0 0 1.84-4v-115.79zm-51.54 148.11-5.47 4.61v-102.25l46.64-39.31v102.25zm-93.12-27.11h77.28v37.69h-122zm65.23-95.32a267.23 267.23 0 0 1 56.81-17.77l-41.69 35.15a264.47 264.47 0 0 0 -56.44 13.29c10.32-12.6 24.24-23.05 41.32-30.67zm-51.23 45.58a267.64 267.64 0 0 1 63.28-17.35v56.72h-73.88a91.66 91.66 0 0 1 10.6-39.37zm-14.23 6.62a102.7 102.7 0 0 0 -6.86 35.51l-46 38.82c3.48-31.54 22.21-57.92 52.86-74.33z"></path>
              </svg>
            </div>
          </div>
          <div class="relative flex z-10 flex-1 pl-2 sm:px-2 items-center justify-center">
            <nav class="flex flex-1 relative h-full py-2 mb-1 sm:-mb-1 items-center sm:items-start" aria-label="Main Menu">
              <div class="block relative flex mx-auto w-full h-9 items-center justify-center text-sm font-normal text-blue-200 grid grid-flow-col auto-cols-fr gap-x-1 sm:gap-x-3">
                <a href="#" class="group w-full h-full p-2 rounded-md flex flex-col items-center justify-center bg-transparent transition duration-300 ease-in-out hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-label="Dashboard" title="Dashboard">
                  <!--Heroicon name: outline/chart square-->
                  <svg class="text-blue-300 group-hover:text-blue-100 h-6 w-6 sm:h-7 sm:w-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                  </svg>

                  <span class="hidden lg:block mt-1">Dashboard</span>
                </a>

                <a href="#" class="group w-full h-full p-2 rounded-md flex flex-col items-center justify-center bg-transparent transition duration-300 ease-in-out hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-label="Items" title="Items">

                  <svg class="text-blue-300 group-hover:text-blue-100 h-6 w-6 sm:h-7 sm:w-7" xmlns="http://www.w3.org/2000/svg" viewBox="-7 -6 112 112" fill="currentColor" aria-hidden="true">
                    <path d="M51.39,22.78h40a4,4,0,0,0,0-8h-40a4,4,0,0,0,0,8Z"></path>
                    <path d="M51.39,41.22h30a4,4,0,0,0,0-8h-30a4,4,0,0,0,0,8Z"></path>
                    <path d="M30.61,8h-18a8,8,0,0,0-8,8V34a8,8,0,0,0,8,8h18a8,8,0,0,0,8-8V16A8,8,0,0,0,30.61,8Zm-18,26V16h18V34Z"></path>
                    <path d="M51.39,72.78h40a4,4,0,0,0,0-8h-40a4,4,0,0,0,0,8Z"></path>
                    <path d="M51.39,91.22h30a4,4,0,0,0,0-8h-30a4,4,0,0,0,0,8Z"></path>
                    <path d="M4.61,84a8,8,0,0,0,8,8h18a8,8,0,0,0,8-8V66a8,8,0,0,0-8-8h-18a8,8,0,0,0-8,8Zm8-18h18V84h-18Z"></path>
                  </svg>

                  <span class="hidden lg:block mt-1">Items</span>
                </a>

                <a href="#" class="group w-full h-full p-2 rounded-md flex flex-col items-center justify-center fill-current bg-transparent transition duration-300 ease-in-out hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-current="page" aria-label="Versions" title="Versions">

                  <svg class="text-blue-300 group-hover:text-blue-100 h-6 w-6 sm:h-7 sm:w-7" xmlns="http://www.w3.org/2000/svg" viewBox="-3.5 -3.2 30 30" aria-hidden="true">
                    <g fill-rule="evenodd">
                      <path d="M6 20a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm0-2a3 3 0 1 1 0 6 3 3 0 0 1 0-6zM6 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm0-2a3 3 0 1 1 0 6 3 3 0 0 1 0-6zM18 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm0-2a3 3 0 1 1 0 6 3 3 0 0 1 0-6z" fill-rule="nonzero"></path>
                      <path d="M5 8h2v12H5z"></path>
                      <path d="M7 18H5a6 6 0 0 1 6-6v2a4 4 0 0 0-4 4zM17 8h2a6 6 0 0 1-6 6v-2a4 4 0 0 0 4-4z"></path>
                      <path d="m15.061 8.99 3.004-3.004 3.003 3.003zM11 12h2v2h-2zM3.061 8.99l3.004-3.004 3.003 3.003z"></path>
                    </g>
                  </svg>

                  <span class="hidden lg:block mt-1">Versions</span>
                </a>

                <a href="#" class="group w-full h-full p-2 rounded-md flex flex-col items-center justify-center fill-current bg-transparent transition duration-300 ease-in-out hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-label="Deploys" title="Deploys">

                  <svg class="text-blue-300 group-hover:text-blue-100 h-6 w-6 sm:h-7 sm:w-7" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 28 28" aria-hidden="true">
                    <g fill-rule="evenodd">
                      <path d="m7.862 18.962.024.024a1 1 0 0 1 0 1.414l-.707.707a1 1 0 0 1-1.414 0l-.024-.024a1 1 0 0 1 0-1.414l.707-.707a1 1 0 0 1 1.414 0zm-2.876-2.877.024.024a1 1 0 0 1 0 1.415l-.707.707a1 1 0 0 1-1.415 0l-.024-.024a1 1 0 0 1 0-1.415l.707-.707a1 1 0 0 1 1.415 0zm-.683 3.56.024.024a1 1 0 0 1 0 1.414l-.708.707a1 1 0 0 1-1.414 0l-.024-.024a1 1 0 0 1 0-1.414l.707-.707a1 1 0 0 1 1.415 0z"></path>
                      <path d="M10.624 16.424c.95-.512 1.615-.844 2.031-1.01.666-.268 1.226-.168 1.733.08.201.097.369.211.536.346.194.156.39.345.616.584.302.32.587.646 1.176 1.34l.03.035.087.102c.3-.497.545-1.011.658-1.374.026-.08.016-.256-.067-.567-.034-.126-.323-1.003-.389-1.292-.203-.896-.138-1.707.613-2.433.466-.45.91-.948 1.335-1.493 1.69-2.17 2.366-4.603 2.04-7.406-2.555-.4-4.945.29-7.292 2.117A16.95 16.95 0 0 0 12.2 6.795c-.752.747-1.569.798-2.494.578-.268-.064-1.095-.332-1.226-.366-.314-.084-.491-.095-.573-.07-.379.115-.907.361-1.417.66l.073.061.03.025c.697.589 1.02.868 1.339 1.166.239.224.427.417.583.607.135.165.248.329.347.526.257.511.364 1.074.091 1.753-.165.413-.493 1.075-.997 2.02l2.669 2.669zM5.462 14.09c.884-1.608 1.423-2.652 1.617-3.134.145-.36-3.708-3.143-3.558-3.473C3.88 6.7 5.947 5.415 7.29 5.007c1.46-.445 3.01.808 3.476.345a18.913 18.913 0 0 1 1.71-1.498c3.211-2.5 6.647-3.228 10.307-2.183.84 3.92.108 7.362-2.2 10.326a16.21 16.21 0 0 1-1.519 1.699c-.449.434.811 1.996.355 3.46-.406 1.303-1.696 3.327-2.485 3.681-.337.152-3.13-3.699-3.5-3.55-.482.193-1.528.738-3.14 1.635l-4.83-4.831z" fill-rule="nonzero"></path>
                    </g>
                  </svg>

                  <span class="hidden lg:block mt-1">Deploys</span>
                </a>

                <a href="#" class="group w-full h-full p-2 rounded-md flex flex-col items-center justify-center fill-current bg-transparent transition duration-300 ease-in-out hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-label="RQL" title="RQL">
                  <!-- Heroicon name: outline/user-group -->
                  <svg class="text-blue-300 group-hover:text-blue-100 h-6 w-6 sm:h-7 sm:w-7" xmlns="http://www.w3.org/2000/svg" viewBox="-2.5 -2 28 28" aria-hidden="true">
                    <g fill-rule="evenodd">
                      <path d="M10.125 10.977a7.022 7.022 0 0 0-1.374 1.865c-1.579-.23-2.905-.694-3.751-1.296v3c.71.505 1.756.913 3.006 1.166a7.122 7.122 0 0 0 .216 2.042C6.876 17.504 5.75 17.08 5 16.546v3.163c.207.167.565.36 1.045.54 1.049.393 2.469.655 4.034.73a6.986 6.986 0 0 0 3.455 1.867c-.796.1-1.648.154-2.534.154-4.418 0-8-1.343-8-3V4c0-1.657 3.582-3 8-3s8 1.343 8 3v6.255a6.972 6.972 0 0 0-2-.965V6.546C15.775 7.417 13.546 8 11 8s-4.775-.583-6-1.454v3c1.082.77 2.948 1.314 5.125 1.43zM5 4.547C6.225 5.416 8.454 6 11 6s4.775-.583 6-1.454v-.255c-.207-.167-.565-.36-1.045-.54C14.705 3.282 12.924 3 11 3s-3.704.282-4.955.751c-.48.18-.838.373-1.045.54v.255z" fill-rule="nonzero"></path>
                      <path d="M15 21a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path>
                      <rect transform="rotate(45 19.768 20.768)" x="17.268" y="19.893" width="5" height="1.75" rx=".875"></rect>
                    </g>
                  </svg>
                  <span class="hidden lg:block mt-1">RQL</span>
                </a>

                <a href="#" class="group w-full h-full p-2 rounded-md flex flex-col items-center justify-center fill-current bg-transparent transition duration-300 ease-in-out hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700 hidden sm:flex" aria-label="People" title="People">
                  <!-- Heroicon name: outline/user-group -->
                  <svg class="text-blue-300 group-hover:text-blue-100 h-6 w-6 sm:h-7 sm:w-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-2 -2 28 28" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                  </svg>
                  <span class="hidden lg:block mt-1">People</span>
                </a>

                <a href="#" class="group w-full h-full p-2 rounded-md flex flex-col items-center justify-center fill-current bg-transparent transition duration-300 ease-in-out hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700 hidden sm:flex" aria-label="Projects" title="Projects">

                  <svg class="text-blue-300 group-hover:text-blue-100 h-6 w-6 sm:h-7 sm:w-7" xmlns="http://www.w3.org/2000/svg" viewBox="-4 -3.5 29 29" aria-hidden="true">
                    <path d="M18.707 18.706a1.352 1.352 0 0 0 0-1.893 1.352 1.352 0 0 0-1.894 0 1.354 1.354 0 0 0 0 1.894 1.353 1.353 0 0 0 1.894 0zM21 16.76c.547 0 1 .453 1 1 0 .546-.453 1-1 1h-.053c-.067.187-.133.373-.227.533l.04.04c.387.4.387 1.027 0 1.427a1.01 1.01 0 0 1-1.426-.013l-.027-.027c-.173.08-.36.16-.547.227V21c0 .546-.453 1-1 1-.546 0-1-.454-1-1v-.053a6.688 6.688 0 0 1-.546-.227l-.027.027c-.4.4-1.027.4-1.426.013a.621.621 0 0 1-.12-.16 1.01 1.01 0 0 1 .12-1.267l.04-.04a3.186 3.186 0 0 1-.227-.533h-.054c-.546 0-1-.454-1-1 0-.547.454-1 1-1h.053c.067-.2.147-.374.227-.547l-.04-.04a1.006 1.006 0 0 1 0-1.413 1.022 1.022 0 0 1 1.426 0l.04.04c.174-.094.347-.16.534-.227v-.053c0-.547.453-1 1-1 .546 0 1 .453 1 1v.053c.187.067.36.133.533.227l.04-.04a.99.99 0 0 1 .707-.294c.267 0 .52.094.72.294.387.4.387 1.026 0 1.413l-.04.04c.08.173.16.347.227.547H21z"></path>
                    <path d="M20 7.427V6.64a1.6 1.6 0 0 0-1.587-1.587H9.467a.999.999 0 0 1-.707-.293.947.947 0 0 1-.293-.707v-.466C8.467 2.72 7.76 2 6.867 2H3.6C2.706 2 2 2.72 2 3.587v3.84a3.576 3.576 0 0 1 1.6-.374h14.813c.574 0 1.107.134 1.587.374zm2-.787V12c0 .56-.453 1-1 1a.982.982 0 0 1-.827-.44A.996.996 0 0 1 20 12v-1.36a1.6 1.6 0 0 0-1.587-1.587H3.6c-.894 0-1.6.72-1.6 1.587v7.76c0 .88.707 1.6 1.6 1.6H12c.413 0 .773.253.92.613A.999.999 0 0 1 12 22H3.6c-2 0-3.6-1.613-3.6-3.6V3.587A3.59 3.59 0 0 1 3.6 0h3.267c1.8 0 3.293 1.333 3.56 3.053h7.986A3.596 3.596 0 0 1 22 6.64z"></path>
                  </svg>

                  <span class="hidden lg:block mt-1">Projects</span>
                </a>

                <a href="#" class="group w-full h-full p-2 rounded-md flex flex-col items-center justify-center bg-transparent transition duration-300 ease-in-out hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700 hidden sm:flex" aria-label="Settings" title="Settings">
                  <!-- Heroicon name: outline/cog -->
                  <svg class="text-blue-300 group-hover:text-blue-100 h-6 w-6 sm:h-7 sm:w-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-1 -0.5 25 25" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                  </svg>
                  <span class="hidden lg:block mt-1">Settings</span>
                </a>
              </div>

              <div class="hidden space-y-1">
                <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
                <a href="#" class="bg-gray-900 text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md" aria-current="page">
                  <!--
                  Heroicon name: outline/home

                  Current: "text-gray-300", Default: "text-gray-400 group-hover:text-gray-300"
                -->
                  <svg class="text-gray-300 mr-3 flex-shrink-0 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                  </svg>
                  All Issues
                </a>

                <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md">
                  <!-- Heroicon name: outline/view-list -->
                  <svg class="text-gray-400 group-hover:text-gray-300 mr-3 flex-shrink-0 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
                  </svg>
                  My Issues
                </a>

                <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md">
                  <!-- Heroicon name: outline/user-circle -->
                  <svg class="text-gray-400 group-hover:text-gray-300 mr-3 flex-shrink-0 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                  </svg>
                  Assigned
                </a>

                <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md">
                  <!-- Heroicon name: outline/archive -->
                  <svg class="text-gray-400 group-hover:text-gray-300 mr-3 flex-shrink-0 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
                  </svg>
                  Closed
                </a>

                <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md">
                  <!-- Heroicon name: outline/clock -->
                  <svg class="text-gray-400 group-hover:text-gray-300 mr-3 flex-shrink-0 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                  </svg>
                  Recent
                </a>
              </div>
              <div class="hidden mt-10">
                <p class="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">
                  Projects
                </p>
                <div class="mt-2 space-y-1">
                  <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium text-gray-300 rounded-md hover:text-white hover:bg-gray-700">
                    <span class="truncate">
                      GraphQL API
                    </span>
                  </a>

                  <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium text-gray-300 rounded-md hover:text-white hover:bg-gray-700">
                    <span class="truncate">
                      iOS App
                    </span>
                  </a>

                  <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium text-gray-300 rounded-md hover:text-white hover:bg-gray-700">
                    <span class="truncate">
                      Marketing Site Redesign
                    </span>
                  </a>

                  <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium text-gray-300 rounded-md hover:text-white hover:bg-gray-700">
                    <span class="truncate">
                      Customer Portal
                    </span>
                  </a>
                </div>
              </div>
            </nav>

            <div class="w-full mr-14 sm:max-w-xs hidden xl:block">
              <label for="search" class="sr-only">Search</label>
              <div class="relative">
                <div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
                  <!-- Heroicon name: solid/search -->
                  <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
                  </svg>
                </div>
                <input id="search" name="search" class="block w-full bg-gray-700 border border-transparent rounded-md py-2 pl-10 pr-3 text-sm placeholder-gray-400 focus:outline-none focus:bg-white focus:border-white focus:ring-white focus:text-gray-900 focus:placeholder-gray-500 sm:text-sm" placeholder="Search" type="search">
              </div>
            </div>
          </div>
          <div class="relative z-10 flex sm:hidden">
            <!-- Mobile menu button -->
            <button type="button" class="rounded-md p-1.5 text-blue-300 hover:text-blue-100 focus:outline-none focus:text-blue-100" aria-controls="mobile-menu" aria-expanded="false">
              <span class="sr-only">Open menu</span>
              <!--
            Icon when menu is closed.

            Heroicon name: outline/menu

            Menu open: "hidden", Menu closed: "block"
          -->
              <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
              </svg>

              <!--
            Icon when menu is open.

            Heroicon name: outline/x

            Menu open: "block", Menu closed: "hidden"
          -->
              <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </button>
          </div>
          <!-- Avatar + dropdown menu -->
          <div class="ml-2 mr-5 flex items-center max-w-xs">
            <!-- Profile dropdown -->
            <div class="relative flex-shrink-0">
              <div>
                <button type="button" class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-blue-100" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                  <span class="sr-only">Open user menu</span>
                  <img class="h-9 w-9 rounded-full" src="https://secure.gravatar.com/avatar/edf8f5994430e63a2477e8af090bb680?d" alt="">
                </button>
              </div>

              <!--
                Dropdown menu, show/hide based on menu state.

                Entering: "transition ease-out duration-100"
                  From: "transform opacity-0 scale-95"
                  To: "transform opacity-100 scale-100"
                Leaving: "transition ease-in duration-75"
                  From: "transform opacity-100 scale-100"
                  To: "transform opacity-0 scale-95"
              -->

              <div class="origin-top-right absolute right-0 top-12 w-56 rounded-md shadow-lg py-0 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1" style="
    display: none;
">

                <div class="block flex items-center border-b border-blue-100 rounded-t-md"><a href="#" class="w-full flex flex-col items-start px-4 py-2.5 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-600 rounded-t-md" role="menuitem" tabindex="-1" id="user-menu-item-0"><span class="font-semibold text-gray-800 tracking-wide pb-0.5">atsuko</span>
                    User Settings
                  </a></div><a href="#" class="block px-4 py-2 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-1">Email</a>

                <a href="#" class="block px-4 py-2 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-2">Security</a>

                <a href="#" class="block px-4 py-2 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-3">Connected Services</a>
                <div class="flex block mt-1 px-4 pt-2 pb-1 uppercase text-xs font-semibold tracking-widest text-gray-900 focus:outline-none border-t border-blue-100 justify-start"><svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-4 w-4 mr-1 text-blue-600 hidden" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M8 5a1 1 0 100 2h5.586l-1.293 1.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L13.586 5H8zM12 15a1 1 0 100-2H6.414l1.293-1.293a1 1 0 10-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L6.414 15H12z"></path>
                  </svg><span class="flex pb-1 border-b border-blue-100">Switch Account</span><span class="hidden">Edit</span></div>

                <div class="flex items-center justify-between w-full border-l-2 border-transparent hover:border-blue-500 hover:bg-blue-100"><a href="#" class="block w-full px-4 py-2 text-sm text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-3">Hoohoo</a>
                  <a href="#" class="rounded-full group p-1.5 mr-2.5 ml-4 text-sm text-blue-500 bg-blue-50 hover:bg-blue-800 hover:bg-opacity-90 hover:text-blue-50 focus:outline-none focus:text-blue-800 focus:bg-blue-100" aria-label="Manage Settings" role="menuitem" tabindex="-1" id="user-menu-item-4"><svg aria-hidden="true" fill="none" stroke="currentColor" viewBox="2 1 21.5 21.5" xmlns="http://www.w3.org/2000/svg" x-description="Heroicon name: line/cog" class="h-4 w-4">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg></a>
                </div>
                <div class="flex items-center justify-between w-full border-l-2 border-transparent hover:border-blue-500 hover:bg-blue-100"><a href="#" class="block w-full px-4 py-2 text-sm text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-6">personal-test</a>
                  <a href="#" class="rounded-full group p-1.5 mr-2.5 ml-4 text-sm text-blue-500 bg-blue-50 hover:bg-blue-800 hover:bg-opacity-90 hover:text-blue-50 focus:outline-none focus:text-blue-800 focus:bg-blue-100" aria-label="Manage Settings" role="menuitem" tabindex="-1" id="user-menu-item-7"><svg aria-hidden="true" fill="none" stroke="currentColor" viewBox="2 1 21.5 21.5" xmlns="http://www.w3.org/2000/svg" x-description="Heroicon name: line/cog" class="h-4 w-4">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg></a>
                </div>
                <div class="flex items-center justify-between w-full border-l-2 bg-blue-100 border-blue-800 hover:border-blue-500 hover:bg-blue-100"><a href="#" class="block w-full px-4 py-2 text-sm text-blue-800 hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-8">Rollbar</a>
                  <a href="#" class="rounded-full group p-1.5 mr-2.5 ml-4 text-sm text-blue-700 bg-blue-100 hover:bg-blue-800 hover:bg-opacity-90 hover:text-blue-50 focus:outline-none focus:text-blue-800 focus:bg-blue-100" aria-label="Manage Settings" role="menuitem" tabindex="-1" id="user-menu-item-9"><svg aria-hidden="true" fill="none" stroke="currentColor" viewBox="2 1 21.5 21.5" xmlns="http://www.w3.org/2000/svg" x-description="Heroicon name: line/cog" class="h-4 w-4">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg></a>
                </div>
                <div class="flex items-center justify-between w-full border-l-2 border-transparent hover:border-red-600 hidden"><a href="#" class="block w-full px-4 py-2 text-sm text-gray-600 hover:text-red-700 focus:outline-none focus:text-red-800" role="menuitem" tabindex="-1" id="user-menu-item-7">Design-Playground</a>
                  <a href="#" class="rounded-full group px-2 py-2 mx-2.5 text-sm text-red-500 bg-red-50 hover:bg-red-100 hover:bg-opacity-100 hover:text-red-500 focus:outline-none focus:text-red-600 focus:ring-0 focus:ring-red-300 focus:bg-red-50" aria-label="Manage Settings" role="menuitem" tabindex="-1" id="user-menu-item-8"><svg class="h-4 w-4" aria-hidden="true" fill="currentColor" viewBox="0 0 1192.3578 1120.896" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 2000 2000" xml:space="preserve">
                      <path style="" d="m 310.53287,0 c -37.4468,0 -74.1378,6.648 -109.1348,19.714 -14.997,5.613 -26.176,18.486 -29.571,34.146 -3.397,15.657 1.412,31.976 12.732,43.343 l 127.0128,127.059 -18.441,68.909 -68.9988,18.486 L 97.118065,184.599 c -11.319,-11.32 -27.54,-16.274 -43.294,-12.738 -15.752,3.397 -28.582,14.53 -34.195,29.576 -42.542,113.76 -14.6209996,242.658 71.027,328.353 70.181005,70.227 170.783005,102.534 268.883805,86.685 l 13.601,13.603 -200.0878,200.00402 c -71.926,72.018 -82.255005,174.46098 -23.489,233.22598 24.336,24.338 58.153,37.733 95.27,37.733 48.7208,0 99.0438,-22.358 137.8598,-61.267 l 200.07795,-200.03898 228.031,228.05398 c 34.383,34.242 79.99,53.107 128.427,53.107 48.531,0 94.13998,-18.912 128.37998,-53.107 34.383,-34.289 53.246,-79.84898 53.246,-128.37998 0,-48.531 -18.957,-94.091 -53.246,-128.378 L 768.02982,511.451 978.75482,300.839 c 12.724,4.793 26.31698,7.323 40.27698,7.327 30.543,-0.02 59.202,-11.896 80.841,-33.438 l 78.665,-78.715 c 8.866,-8.819 13.82,-20.845 13.82,-33.344 0,-12.498 -4.954,-24.479 -13.82,-33.348 l -95.078,-95.081 c -17.688,-17.688 -49.004,-17.688 -66.691,0 l -78.57798,78.668 c -32.634,32.636 -41.338,80.371 -26.07,121.144 l -210.802,210.688 -84.974,-84.974 c 15.66,-97.723 -16.319,-198.703 -86.685,-268.978 C 471.17582,32.259 393.35287,0 310.53287,0 Z m 4.483,94.381 c 55.936,1.132 108.335,23.44 147.95195,63.105 54.24,54.24 75.319,131.259 56.36,206.062 -4.055,16.13 0.661,33.2 12.358,44.946 l 469.23698,469.23102 c 16.507,16.507 25.609,38.393 25.609,61.692 0,23.299 -9.102,45.136 -25.609,61.64298 -32.96798,32.96 -90.46498,32.913 -123.43198,0.04 L 408.35387,531.867 c -8.914,-8.96 -20.991,-13.82 -33.348,-13.82 l 0,0 c -3.867,0 -7.735,0.426 -11.602,1.463 -73.481,18.629 -152.7138,-3.016 -206.0558,-56.36 -39.902,-39.9 -61.740005,-93.244 -63.014005,-147.907 l 82.349005,82.394 c 11.885,11.934 29.29,16.651 45.609,12.216 l 121.4938,-32.543 c 16.319,-4.338 29.004,-17.072 33.342,-33.344 l 32.595,-121.541 c 4.34,-16.272 -0.285,-33.678 -12.265,-45.564 l -82.442,-82.487 z m 735.14593,39.939 28.341,28.3 -45.321,45.37 c -9.618,9.574 -17.115,10.147 -26.48,1.724 -0.557,-0.616 -1.134,-1.222 -1.728,-1.816 -0.366,-0.367 -0.745,-0.712 -1.122,-1.065 -6.67898,-7.916 -6.42798,-19.773 1.03,-27.233 l 45.28,-45.28 z m -611.95293,564.12602 76.26395,76.268 -198.41995,198.368 c -21.035,21.036 -47.6358,33.63198 -71.2188,33.63198 -8.347,0 -20.138,-1.745 -28.531,-10.04698 -18.065,-18.062 -12.83,-63.532 23.487,-99.894 l 198.4188,-198.327 z m 494.08795,191.298 c -21.743,0 -39.335,17.594 -39.335,39.289 0,21.696 17.592,39.29 39.335,39.29 21.742,0 39.334,-17.594 39.334,-39.29 0,-21.695 -17.592,-39.289 -39.334,-39.289 z"></path>
                    </svg>

                  </a>
                </div>
                <a href="#" class="block px-4 py-2 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-10">Create new account</a>
                <div class="flex block mt-1 px-4 pt-2 pb-1 uppercase text-xs font-semibold tracking-widest text-gray-900 focus:outline-none border-t border-blue-100 justify-start"><svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-4 w-4 mr-1 text-blue-600 hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                  </svg>
                  <span class="pb-1 border-b border-blue-100">Quick Links</span>
                </div>
                <div class="flex items-center justify-between w-full border-b-2 border-blue-100 mt-0">
                  <div class="flex w-full justify-between divide-x divide-blue-100">
                    <span class="flex p-2 w-1/2 place-content-center text-sm hover:bg-blue-100">
                      <button type="button" class="group flex flex-col items-center space-y-1 text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800" aria-label="Create New Account">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-400 group-hover:text-blue-800" viewBox="0 0 20 20" fill="currentColor">
                          <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"></path>
                        </svg>

                        <span class="font-medium">Account</span>

                      </button>
                    </span>
                    <span class="inline-flex p-2 w-1/2 place-content-center text-sm hover:bg-blue-100">
                      <button type="button" class="group flex flex-col items-center space-y-1 text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800">
                        <svg class="h-5 w-5 text-blue-400 group-hover:text-blue-800" xmlns="http://www.w3.org/2000/svg" viewBox="-8 -8 110 110" fill="currentColor" aria-hidden="true">
                          <g>
                            <path d="M98.522,37.664L85.699,14.405c-0.576-1.166-1.91-1.947-3.469-2.303c-0.037-0.011-0.059-0.036-0.104-0.043   c-0.08-0.02-0.166-0.006-0.249-0.025c-0.466-0.083-0.923-0.137-1.414-0.132c-0.488-0.005-0.951,0.05-1.414,0.132   c-0.086,0.019-0.167,0.005-0.251,0.025c-0.042,0.007-0.068,0.032-0.106,0.043c-1.559,0.358-2.892,1.14-3.462,2.303l-9.407,50.362   L55.289,35.621c-0.576-1.165-1.916-1.949-3.476-2.306c-0.034-0.008-0.061-0.03-0.096-0.038c-0.08-0.02-0.15-0.005-0.232-0.022   c-0.467-0.085-0.935-0.143-1.429-0.134c-0.499-0.008-0.962,0.049-1.434,0.134c-0.077,0.017-0.159,0.002-0.235,0.022   c-0.039,0.008-0.061,0.03-0.098,0.041c-1.559,0.357-2.896,1.138-3.471,2.303L34.463,61.735l-10.767-8.414   c-0.086-0.068-0.209-0.093-0.299-0.156c-0.063-0.044-0.088-0.101-0.154-0.142c-0.167-0.104-0.382-0.141-0.559-0.229   c-0.346-0.167-0.678-0.328-1.061-0.436c-0.305-0.085-0.611-0.117-0.929-0.162c-0.354-0.049-0.7-0.104-1.059-0.101   c-0.362-0.004-0.702,0.052-1.055,0.101c-0.319,0.045-0.625,0.077-0.929,0.162c-0.382,0.107-0.717,0.269-1.061,0.436   c-0.182,0.088-0.39,0.124-0.557,0.229c-0.069,0.041-0.097,0.101-0.154,0.142c-0.097,0.063-0.213,0.09-0.301,0.156L2.561,66.89   c-2.003,1.562-1.806,3.955,0.435,5.345c2.239,1.399,5.668,1.265,7.662-0.298l9.558-9.954l12.743,9.954   c1.996,1.562,5.428,1.697,7.666,0.298c0.233-0.142,0.342-0.327,0.528-0.49c0.015-0.008,0.02-0.021,0.037-0.033   c0.36-0.317,0.661-0.641,0.853-1.012c0.058-0.093,0.167-0.158,0.22-0.258l7.562-19.066L62.19,85.599   c0.575,1.164,1.911,1.943,3.468,2.302c0.038,0.012,0.066,0.033,0.106,0.044c0.085,0.02,0.172,0.005,0.257,0.024   c0.465,0.082,0.922,0.137,1.411,0.13c0.484,0.007,0.938-0.048,1.404-0.13c0.088-0.02,0.173-0.005,0.254-0.024   c0.045-0.011,0.071-0.032,0.113-0.044c1.551-0.358,2.888-1.14,3.462-2.302l10.287-55.083l5.302,9.615   c0.975,1.977,4.065,3.027,6.906,2.347C97.996,41.801,99.504,39.644,98.522,37.664z"></path>
                          </g>
                        </svg>
                        <span class="font-medium">Usage</span>

                      </button>
                    </span>

                  </div>
                </div>
                <div class="flex items-center justify-between w-full border-t-0 border-blue-100 pb-2.5">
                  <div class="flex w-full justify-between divide-x divide-blue-100">
                    <span class="flex p-2 w-1/2 place-content-center text-sm hover:bg-blue-100">
                      <button type="button" class="group flex flex-col items-center space-y-1 text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-400 group-hover:text-blue-800" viewBox="0 0 20 20" fill="currentColor">
                          <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"></path>
                          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="font-medium">Billing</span>

                      </button>
                    </span>
                    <span class="inline-flex p-2 w-1/2 place-content-center text-sm hover:bg-blue-100">
                      <button type="button" class="group flex flex-col items-center space-y-1 text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800">
                        <svg class="h-5 w-5 text-blue-400 group-hover:text-blue-800" xmlns="http://www.w3.org/2000/svg" viewBox="-0.8 -0.8 6.5 6.5" fill="currentColor" aria-hidden="true">
                          <g transform="translate(-34.926021,-0.52916668)">
                            <path transform="scale(0.26458334)" d="m 135,2 c -1.88892,0.0069 -3.00501,1.5484919 -2.99609,3.0058594 v 9.7578126 c 0,1.733148 0.89162,3.349014 2.36132,4.267578 l 4.40625,2.759766 c 1.36016,0.850095 3.22657,-0.189008 3.22657,-1.792969 v -2.001953 h 2 c 1.64501,0 3.00586,-1.351077 3.00586,-2.996094 V 14.003906 A 1.0000006,1.0000006 0 0 0 145.99805,13 a 1.0000006,1.0000006 0 0 0 -0.9961,1.003906 V 15 c 0,0.564136 -0.43977,0.996094 -1.0039,0.996094 h -2 V 8.9980469 c 0,-1.6106249 -0.96296,-3.0706217 -2.44336,-3.7050781 l -3.01172,-1.2910157 h 7.45508 c 0.56396,1.48e-5 1.0039,0.432135 1.0039,0.9960938 v 1.0039062 c 0.002,0.5495974 0.4465,0.9942036 0.9961,0.9960938 0.55247,0.00218 1.00396,-0.4436149 1.00586,-0.9960938 V 4.9980469 C 147.00391,3.3532257 145.64287,2.000043 143.99805,2 Z m -0.99609,3.0859375 4.76171,2.0449219 c 0.75005,0.3214488 1.23243,1.0511637 1.23243,1.8671875 V 17 19.998047 c 0,0.137344 -0.0456,0.168493 -0.16211,0.0957 l -4.41602,-2.761719 c -0.88724,-0.554523 -1.41601,-1.522083 -1.41601,-2.568359 z m 14.96289,1.9121094 a 1.0000006,1.0000006 0 0 0 -0.67188,0.2949219 1.0000006,1.0000006 0 0 0 0,1.4179687 l 0.28711,0.2871094 h -3.58008 a 1.0000006,1.0000006 0 0 0 -1.0039,1.0039061 1.0000006,1.0000006 0 0 0 1.0039,0.996094 h 3.58985 l -0.29688,0.296875 a 1.0000006,1.0000006 0 0 0 0,1.410156 1.0000006,1.0000006 0 0 0 1.41016,0 l 1.94726,-1.949219 A 1.0000006,1.0000006 0 0 0 152,10.001953 a 1.0000006,1.0000006 0 0 0 -0.33008,-0.7460936 1.0000006,1.0000006 0 0 0 -0.01,-0.00977 l -1.95508,-1.953125 A 1.0000006,1.0000006 0 0 0 148.9668,6.9980469 Z"></path>
                          </g>
                        </svg>
                        <span class="font-medium">Logout</span>

                      </button>
                    </span>

                  </div>
                </div><a href="#" class="border-b border-blue-100 block mx-3 mb-2 mt-2.5 px-4 py-2.5 text-center text-md font-semibold tracking-wide text-gray-50 bg-gray-700 rounded-full hover:bg-blue-700 hover:text-blue-50 focus:outline-none focus:text-blue-800 hidden" role="menuitem" tabindex="-1" id="user-menu-item-2">Promo CTA</a>
                <div class="flex items-center border-t border-blue-100 rounded-b-md hidden"><a href="#" class="block w-full px-4 pt-2 py-2.5 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800 rounded-b-md" role="menuitem" tabindex="-1" id="user-menu-item-11">Log Out</a></div>
                <div class="flex items-center border-t border-blue-100 hidden"><a href="#" class="block w-full px-4 py-2 text-sm text-gray-600 border-l-2 border-transparent hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-9">Create new account</a></div>

              </div>
            </div>

            <button type="button" class="inline-flex transition duration-300 button-ease items-center px-2.5 md:px-4 py-2.5 border border-transparent text-sm font-medium rounded-full tracking-wide text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700 hidden">
              <svg class="md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4 text-blue-50" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
              </svg>
              <span class="hidden md:block">New Project</span>
            </button>
          </div>

        </div>
        <!-- Submenu bar available --->
        <nav class="bg-gray-50 py-2 flex space-x-8 px-2 sm:px-4 lg:px-8 hidden" aria-label="Sub-menu">

          <a href="#" class="bg-blue-600 text-white rounded-md py-2 px-3 inline-flex items-center text-sm font-medium" aria-current="page">General</a>

          <a href="#" class="text-gray-500 hover:bg-blue-100 hover:text-blue-600 rounded-md py-2 px-3 inline-flex items-center text-sm font-medium">Collaborators</a>

          <a href="#" class="text-gray-500 hover:bg-blue-100 hover:text-blue-600 rounded-md py-2 px-3 inline-flex items-center text-sm font-medium">Integrations</a>

          <a href="#" class="text-gray-500 hover:bg-blue-100 hover:text-blue-600 rounded-md py-2 px-3 inline-flex items-center text-sm font-medium">Link</a>
        </nav>
      </div>

      <!-- Top navigation with condensed popup menu -->
      <nav class="sm:hidden bg-blue-900" aria-label="Mobile menu" id="mobile-menu" style="
    /* display: none; */
">

        <div class="pt-1.5 pb-2 px-2 space-y-0.5 text-blue-200">
          <p class="px-2 pt-1 text-xs font-semibold text-blue-300 uppercase tracking-wider hidden">More</p>
          <a href="#" class="group flex items-end block rounded-md py-2 px-3 text-base font-medium hover:bg-blue-800 hover:text-white focus:outline-none focus:bg-blue-700">
            <svg class="text-blue-300 group-hover:text-blue-100 h-5 w-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
            </svg>
            People</a><a href="#" class="group flex fill-current bg-black bg-opacity-20 block rounded-md py-2 px-3 text-base font-medium flex items-end hover:bg-blue-800 hover:text-white focus:outline-none focus:bg-blue-700" aria-current="page">
            <svg class="text-blue-300 group-hover:text-blue-100 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M18.707 18.706a1.352 1.352 0 0 0 0-1.893 1.352 1.352 0 0 0-1.894 0 1.354 1.354 0 0 0 0 1.894 1.353 1.353 0 0 0 1.894 0zM21 16.76c.547 0 1 .453 1 1 0 .546-.453 1-1 1h-.053c-.067.187-.133.373-.227.533l.04.04c.387.4.387 1.027 0 1.427a1.01 1.01 0 0 1-1.426-.013l-.027-.027c-.173.08-.36.16-.547.227V21c0 .546-.453 1-1 1-.546 0-1-.454-1-1v-.053a6.688 6.688 0 0 1-.546-.227l-.027.027c-.4.4-1.027.4-1.426.013a.621.621 0 0 1-.12-.16 1.01 1.01 0 0 1 .12-1.267l.04-.04a3.186 3.186 0 0 1-.227-.533h-.054c-.546 0-1-.454-1-1 0-.547.454-1 1-1h.053c.067-.2.147-.374.227-.547l-.04-.04a1.006 1.006 0 0 1 0-1.413 1.022 1.022 0 0 1 1.426 0l.04.04c.174-.094.347-.16.534-.227v-.053c0-.547.453-1 1-1 .546 0 1 .453 1 1v.053c.187.067.36.133.533.227l.04-.04a.99.99 0 0 1 .707-.294c.267 0 .52.094.72.294.387.4.387 1.026 0 1.413l-.04.04c.08.173.16.347.227.547H21z"></path>
              <path d="M20 7.427V6.64a1.6 1.6 0 0 0-1.587-1.587H9.467a.999.999 0 0 1-.707-.293.947.947 0 0 1-.293-.707v-.466C8.467 2.72 7.76 2 6.867 2H3.6C2.706 2 2 2.72 2 3.587v3.84a3.576 3.576 0 0 1 1.6-.374h14.813c.574 0 1.107.134 1.587.374zm2-.787V12c0 .56-.453 1-1 1a.982.982 0 0 1-.827-.44A.996.996 0 0 1 20 12v-1.36a1.6 1.6 0 0 0-1.587-1.587H3.6c-.894 0-1.6.72-1.6 1.587v7.76c0 .88.707 1.6 1.6 1.6H12c.413 0 .773.253.92.613A.999.999 0 0 1 12 22H3.6c-2 0-3.6-1.613-3.6-3.6V3.587A3.59 3.59 0 0 1 3.6 0h3.267c1.8 0 3.293 1.333 3.56 3.053h7.986A3.596 3.596 0 0 1 22 6.64z"></path>
            </svg>
            Projects</a>

          <a href="#" class="group flex items-center hover:bg-blue-800 hover:text-white block rounded-md py-2 px-3 text-base font-medium hover:bg-blue-800 hover:text-white focus:outline-none focus:bg-blue-700">
            <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-5 w-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="2 0 21 21" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
            </svg>
            Settings</a>
        </div>
        <div class="pt-1.5 pb-2 px-2 space-y-0.5 border-t border-blue-800 text-blue-200">
          <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
          <a href="#" class="group block rounded-md py-2 px-3 text-base font-medium flex items-center hover:bg-blue-800 hover:text-white focus:outline-none focus:bg-blue-700">
            <svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-5 w-5 text-yellow-400 group-hover:text-blue-100 group-focus:text-yellow-500 self-end" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z" clip-rule="evenodd"></path>
            </svg>

            Upgrade</a>

          <a href="#" class="group block rounded-md py-2 px-3 text-base font-medium flex items-center hover:bg-blue-800 hover:text-white focus:outline-none focus:bg-blue-700">
            <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-5 w-5 mr-3 self-end" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 21" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"></path>
            </svg>
            Updates</a>

          <a href="#" class="group block rounded-md py-2 px-3 text-base font-medium flex items-center hover:bg-blue-800 hover:text-white focus:outline-none focus:bg-blue-700">
            <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-5 w-5 mr-3 self-end" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="2 1 22 22" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
            </svg>
            Documentation</a><a href="#" class="group block rounded-md py-2 px-3 text-base font-medium flex items-center hover:bg-blue-800 hover:text-white focus:outline-none focus:bg-blue-700">
            <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-5 w-5 mr-3 self-end" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="1 1 22 22" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path>&gt;
            </svg>
            Knowledge Base</a><a href="#" class="group block rounded-md py-2 px-3 text-base font-medium flex items-center hover:bg-blue-800 hover:text-white focus:outline-none focus:bg-blue-700 hidden">
            <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="-0.4 0 5.7 5.7" class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-5 w-5 mr-3 self-end">
              <g transform="translate(-34.926021,-0.52916668)">
                <path transform="scale(0.26458334)" d="m 135,2 c -1.88892,0.0069 -3.00501,1.5484919 -2.99609,3.0058594 v 9.7578126 c 0,1.733148 0.89162,3.349014 2.36132,4.267578 l 4.40625,2.759766 c 1.36016,0.850095 3.22657,-0.189008 3.22657,-1.792969 v -2.001953 h 2 c 1.64501,0 3.00586,-1.351077 3.00586,-2.996094 V 14.003906 A 1.0000006,1.0000006 0 0 0 145.99805,13 a 1.0000006,1.0000006 0 0 0 -0.9961,1.003906 V 15 c 0,0.564136 -0.43977,0.996094 -1.0039,0.996094 h -2 V 8.9980469 c 0,-1.6106249 -0.96296,-3.0706217 -2.44336,-3.7050781 l -3.01172,-1.2910157 h 7.45508 c 0.56396,1.48e-5 1.0039,0.432135 1.0039,0.9960938 v 1.0039062 c 0.002,0.5495974 0.4465,0.9942036 0.9961,0.9960938 0.55247,0.00218 1.00396,-0.4436149 1.00586,-0.9960938 V 4.9980469 C 147.00391,3.3532257 145.64287,2.000043 143.99805,2 Z m -0.99609,3.0859375 4.76171,2.0449219 c 0.75005,0.3214488 1.23243,1.0511637 1.23243,1.8671875 V 17 19.998047 c 0,0.137344 -0.0456,0.168493 -0.16211,0.0957 l -4.41602,-2.761719 c -0.88724,-0.554523 -1.41601,-1.522083 -1.41601,-2.568359 z m 14.96289,1.9121094 a 1.0000006,1.0000006 0 0 0 -0.67188,0.2949219 1.0000006,1.0000006 0 0 0 0,1.4179687 l 0.28711,0.2871094 h -3.58008 a 1.0000006,1.0000006 0 0 0 -1.0039,1.0039061 1.0000006,1.0000006 0 0 0 1.0039,0.996094 h 3.58985 l -0.29688,0.296875 a 1.0000006,1.0000006 0 0 0 0,1.410156 1.0000006,1.0000006 0 0 0 1.41016,0 l 1.94726,-1.949219 A 1.0000006,1.0000006 0 0 0 152,10.001953 a 1.0000006,1.0000006 0 0 0 -0.33008,-0.7460936 1.0000006,1.0000006 0 0 0 -0.01,-0.00977 l -1.95508,-1.953125 A 1.0000006,1.0000006 0 0 0 148.9668,6.9980469 Z"></path>
              </g>
            </svg>
            Sign Out</a>

        </div>
        <div class="pt-1.5 pb-2.5 px-2 space-y-0.5 border-t border-blue-800 text-blue-200">
          <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->

          <a href="#" class="group block rounded-md py-2 px-3 text-base font-medium flex items-center hover:bg-blue-800 hover:text-white focus:outline-none focus:bg-blue-700">
            <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="-0.4 0 5.7 5.7" class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-5 w-5 mr-3 self-end">
              <g transform="translate(-34.926021,-0.52916668)">
                <path transform="scale(0.26458334)" d="m 135,2 c -1.88892,0.0069 -3.00501,1.5484919 -2.99609,3.0058594 v 9.7578126 c 0,1.733148 0.89162,3.349014 2.36132,4.267578 l 4.40625,2.759766 c 1.36016,0.850095 3.22657,-0.189008 3.22657,-1.792969 v -2.001953 h 2 c 1.64501,0 3.00586,-1.351077 3.00586,-2.996094 V 14.003906 A 1.0000006,1.0000006 0 0 0 145.99805,13 a 1.0000006,1.0000006 0 0 0 -0.9961,1.003906 V 15 c 0,0.564136 -0.43977,0.996094 -1.0039,0.996094 h -2 V 8.9980469 c 0,-1.6106249 -0.96296,-3.0706217 -2.44336,-3.7050781 l -3.01172,-1.2910157 h 7.45508 c 0.56396,1.48e-5 1.0039,0.432135 1.0039,0.9960938 v 1.0039062 c 0.002,0.5495974 0.4465,0.9942036 0.9961,0.9960938 0.55247,0.00218 1.00396,-0.4436149 1.00586,-0.9960938 V 4.9980469 C 147.00391,3.3532257 145.64287,2.000043 143.99805,2 Z m -0.99609,3.0859375 4.76171,2.0449219 c 0.75005,0.3214488 1.23243,1.0511637 1.23243,1.8671875 V 17 19.998047 c 0,0.137344 -0.0456,0.168493 -0.16211,0.0957 l -4.41602,-2.761719 c -0.88724,-0.554523 -1.41601,-1.522083 -1.41601,-2.568359 z m 14.96289,1.9121094 a 1.0000006,1.0000006 0 0 0 -0.67188,0.2949219 1.0000006,1.0000006 0 0 0 0,1.4179687 l 0.28711,0.2871094 h -3.58008 a 1.0000006,1.0000006 0 0 0 -1.0039,1.0039061 1.0000006,1.0000006 0 0 0 1.0039,0.996094 h 3.58985 l -0.29688,0.296875 a 1.0000006,1.0000006 0 0 0 0,1.410156 1.0000006,1.0000006 0 0 0 1.41016,0 l 1.94726,-1.949219 A 1.0000006,1.0000006 0 0 0 152,10.001953 a 1.0000006,1.0000006 0 0 0 -0.33008,-0.7460936 1.0000006,1.0000006 0 0 0 -0.01,-0.00977 l -1.95508,-1.953125 A 1.0000006,1.0000006 0 0 0 148.9668,6.9980469 Z"></path>
              </g>
            </svg>Log Out</a>

        </div>
        <div class="border-t border-blue-800 pt-3 pb-3 hidden">
          <p class="px-4 pb-1 text-xs font-semibold text-blue-300 uppercase tracking-wider">
            Account
          </p>
          <div class="px-2 space-y-0.5 text-blue-200">
            <div class="flex items-center px-2 py-2">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://secure.gravatar.com/avatar/edf8f5994430e63a2477e8af090bb680?d" alt="">
              </div>
              <div class="ml-3 min-w-0 flex-1">
                <div class="text-base font-semibold text-gray-50 tracking-wide truncate">atsuko</div>
                <div class="text-xs font-medium text-blue-300 tracking-wide truncate">[email protected]</div>
              </div>
              <a href="#" class="hidden ml-auto flex-shrink-0 bg-white p-2 text-gray-400 hover:text-gray-500">
                <span class="sr-only">View notifications</span>
                <!-- Heroicon name: outline/bell -->
                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
                </svg>
              </a>
            </div>

            <a href="#" class="flex items-center hover:bg-blue-800 hover:text-white px-3 py-2 text-base font-medium rounded-md">
              <span class="truncate">User Settings</span>
            </a>

            <a href="#" class="flex items-center hover:bg-blue-800 hover:text-white px-3 py-2 text-base font-medium rounded-md">
              <span class="truncate">Account Settings</span>
            </a>

            <a href="#" class="flex items-center hover:bg-blue-800 hover:text-white px-3 py-2 text-base font-medium rounded-md">
              <span class="truncate">Switch Accounts</span>
            </a>

            <a href="#" class="flex items-center hover:bg-blue-800 hover:text-white px-3 py-2 text-base font-medium rounded-md">
              <span class="truncate">Sign out</span>
            </a>
          </div>
        </div>
      </nav>
    </header><!-- Mobile menu for L2 / not shown on Metrics -->
    <div class="relative z-20 flex-shrink-0 flex pl-1 sm:pl-2 h-16 bg-white border-b border-gray-200 lg:hidden" style="display: none;">
      <button type="button" class="px-4 border-r border-gray-200 text-gray-500 hover:text-white hover:border-gray-600 hover:bg-gray-700 focus:outline-none focus:bg-gray-800 focus:text-white lg:hidden hidden">
        <span class="sr-only">Open sidebar</span>
        <!-- Heroicon name: outline/menu-alt-2 -->
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path>
        </svg>
      </button>
      <div class="flex-1 pr-2 sm:pr-4 flex justify-between" style="
">
        <div class="w-64 flex border-t-0 border-b-0 border-gray-100 bg-white px-3 2xl:px-4 py-2.5 text-sm font-medium text-gray-500">

          <button data-testid="dropdown-button" class="group relative w-full pl-2 pr-8 py-2 text-left cursor-default bg-gray-50 shadow-none border border-transparent text-gray-700 text-sm leading-5 font-semibold tracking-wide placeholder-gray-400 hover:bg-blue-100 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 focus:border-blue-400 focus:bg-blue-100 rounded-md" id="headlessui-listbox-button-2" type="button" aria-haspopup="true" aria-labelledby="headlessui-listbox-label-1 headlessui-listbox-button-2"><span class="flex items-center justify-between">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="flex-shrink-0 h-6 w-6 rounded-md svgicon svgicon-frameworkpyramid hidden">
                <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path>
                <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path>
                <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path>
                <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path>
              </svg>

              <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="" class="flex-shrink-0 h-6 w-6 rounded-full hidden">
              <span class="block truncate">mox-web</span><span class="flex flex-shrink-0 ml-3 mr-1.5 -space-x-2 overflow-hidden">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworkpyramid">
                  <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path>
                  <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path>
                  <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path>
                  <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-node-js" class="bg-white inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworknodejs">
                  <path fill="#83cd29" d="M463.6 113.4L276.9 5c-11.8-6.7-27.1-6.7-39 0L49.2 113.4c-12.2 7-20.8 20.1-20.8 34.2v216.5c0 14.1 8.8 27.2 21 34.2l49.9 28.3c23.8 11.7 32.3 11.7 43.1 11.7 35.3 0 55.4-21.3 55.4-58.6V166.1c0-3-1.6-7.5-4.5-7.5h-23.8c-3 0-9.8 4.5-9.8 7.5v213.8c0 16.5-14.9 32.9-42.8 19l-51.5-29.7c-1.8-1-3.1-2.9-3.1-5V147.6c0-2 2.4-4.1 4.2-5.1L254.6 34.3c1.8-1 4.3-1 6.1 0l185.8 108.2c1.8 1.1 1.2 3.1 1.2 5.2v216.5c0 2.1.8 4.1-1 5.1L260 477.5c-1.6 1-3.6 1-5.3 0L206.8 449c-1.4-.8-3.2-1.1-4.5-.4-13.3 7.5-15.8 8.6-28.3 12.9-3.1 1.1-7.6 2.9 1.7 8.2l62.7 37.1c6 3.5 12.8 5.3 19.7 5.3 7 0 13.8-1.8 19.8-5.3l185.8-108.3c12.2-7.1 17.9-20.2 17.9-34.2V147.6c-.1-14-5.8-27.1-18-34.2zM316 329.9c-49.7 0-60.6-13.7-64.2-38.4-.4-2.7-2.7-5.8-5.4-5.8h-24.3c-3 0-5.4 3.6-5.4 6.6 0 31.6 17.2 69.9 99.3 69.9 59.4 0 93.5-23.1 93.5-64 0-40.5-27.4-51.2-85-58.8-58.3-7.7-64.2-11.6-64.2-25.2 0-11.3 5-26.3 48.2-26.3 38.6 0 52.8 8.3 58.6 34.3.5 2.4 2.7 4.2 5.3 4.2h24.4c1.5 0 2.9-.6 4-1.7 1-1.2 1.6-2.6 1.4-4.1-3.8-44.7-33.5-65.6-93.6-65.6-53.5 0-85.4 22.6-85.4 60.4 0 41.1 31.7 52.4 83.1 57.5 61.4 6 66.2 15 66.2 27.1-.1 20.9-17 29.9-56.5 29.9z"></path>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-browser-js" class="bg-white inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworkbrowserjs ">
                  <path fill="#f0db4f" d="M0 0h512v512H0z"></path>
                  <path fill="#323330" d="M470.1 389.89c-3.75-23.36-19-43-64.1-61.28-15.67-7.2-33.15-12.35-38.35-24.23-1.85-6.91-2.1-10.81-.93-15 3.36-13.58 19.57-17.81 32.42-13.92 8.27 2.77 16.1 9.15 20.83 19.32 22.09-14.31 22-14.21 37.47-24-5.64-8.76-8.66-12.8-12.36-16.55-13.28-14.84-31.39-22.48-60.35-21.9l-15.08 1.95c-14.46 3.65-28.23 11.24-36.31 21.41-24.24 27.5-17.32 75.63 12.17 95.44 29.05 21.81 71.74 26.77 77.19 47.16 5.3 25-18.35 33.05-41.86 30.18-17.32-3.6-27-12.41-37.38-28.42-19.17 11.09-19.17 11.09-38.88 22.43 4.67 10.22 9.58 14.85 17.42 23.7 37.09 37.62 129.9 35.77 146.54-21.17.68-2.01 5.16-15.01 1.56-35.12zM278.34 235.32h-47.89l-.2 123.81c0 26.33 1.37 50.47-2.92 57.86-7 14.56-25.16 12.75-33.43 9.93-8.42-4.14-12.71-10-17.67-18.34-1.36-2.39-2.38-4.24-2.72-4.38L134.57 428c6.47 13.29 16 24.82 28.23 32.32 18.25 10.95 42.77 14.31 68.43 8.42 16.69-4.87 31.1-14.94 38.64-30.27 10.9-20.1 8.56-44.44 8.47-71.35.24-43.86 0-87.76 0-131.8z"></path>
                </svg>

              </span></span><span class="group ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400 group-hover:text-gray-600" aria-hidden="true">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
              </svg></span></button>

        </div>
        <div class="flex-1 flex hidden">
          <form class="group w-full flex lg:ml-0" action="#" method="GET">
            <label for="search-field" class="sr-only">Search</label>
            <div class="relative w-full text-gray-400 focus-within:text-gray-600">
              <div class="absolute inset-y-0 left-0 flex items-center pointer-events-none">
                <!-- Heroicon name: solid/search -->
                <svg class="h-5 w-5 text-gray-400 group-hover:text-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
                </svg>
              </div>
              <input id="search-field" class="block w-full h-full pl-8 pr-3 py-2 border-transparent text-gray-900 focus:border-transparent text-md tracking-wide placeholder-gray-400 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:text-gray-900 focus:ring-0" placeholder="Search items" type="search" name="search">
            </div>
          </form>
        </div>
        <!--- Projects mobile menu --->
        <div class="flex pl-2 lg:px-0" style="
">
          <div class="flex px-2 lg:px-0">
            <div class="flex items-center lg:hidden">
              <!-- Mobile menu button -->
              <button type="button" class="p-1.5 bg-white rounded-lg flex text-sm text-gray-400 hover:text-gray-600 hover:border-blue-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-200 focus:bg-gray-100 focus:text-gray-600" id="user-menu-button" aria-expanded="false">
                <span class="sr-only">Open projects menu</span>
                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path>
                </svg>
              </button>
            </div>
          </div>

          <!-- Open Projects menu when no LHS menu -->
          <div class="lg:hidden" style="
    display: none;
">
            <!--
            Mobile menu overlay, show/hide based on mobile menu state.

            Entering: "duration-150 ease-out"
              From: "opacity-0"
              To: "opacity-100"
            Leaving: "duration-150 ease-in"
              From: "opacity-100"
              To: "opacity-0"
          -->
            <div class="z-20 fixed inset-0 bg-black bg-opacity-25" aria-hidden="true"></div>

            <!--
            Mobile menu, show/hide based on mobile menu state.

            Entering: "duration-150 ease-out"
              From: "opacity-0 scale-95"
              To: "opacity-100 scale-100"
            Leaving: "duration-150 ease-in"
              From: "opacity-100 scale-100"
              To: "opacity-0 scale-95"
          -->
            <div class="z-30 absolute top-0 right-0 max-w-none w-full p-2 transition transform origin-top">
              <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white">
                <div class="flex pt-2 pb-1">
                  <div class="flex items-start justify-start mr-4 order-last">

                    <div class="-mr-2 absolute inset-y-4 right-6 lg:static lg:flex-shrink-0">
                      <button type="button" class="bg-white rounded-lg p-1.5 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-200 focus:bg-gray-100 focus:text-gray-500">
                        <span class="sr-only">Close menu</span>
                        <!-- Heroicon name: outline/x -->
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                      </button>
                    </div>
                  </div>
                  <ul role="list" class="w-full border-b-0 border-gray-100 divide-y divide-blue-50 py-3">
                    <li class="relative pb-4 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600">
                      <div class="flex justify-between space-x-3 pl-5">
                        <div class="min-w-0 flex-1">
                          <div class="block focus:outline-none">
                            <span class="hidden absolute inset-0" aria-hidden="true"></span>
                            <div class="flex space-x-2">

                              <svg class="flex-shrink-0 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path>
                              </svg>
                              <span class="text-sm uppercase font-semibold tracking-widest text-gray-500 pb-1 border-b-0 border-blue-100">
                                Project
                              </span>
                            </div>

                            <p class="hidden text-xs uppercase font-semibold tracking-widest text-blue-600 pb-1">Project</p>
                            <p class="hidden text-sm text-gray-500 truncate">Velit placeat sit ducimus non sed</p>
                          </div>
                        </div>
                        <time datetime="2021-01-27T16:35" class="hidden flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time>
                      </div>
                      <div class="flex mt-1 grid space-y-0.5 text-base font-normal text-gray-800">
                        <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="General" title="General">General</a>

                        <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="Integrations" title="Integrations">Integrations</a>

                        <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="Collaborators" title="Collaborators">Collaborators</a>
                      </div>
                    </li>

                    <li class="relative bg-white py-4 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600">
                      <div class="flex justify-between space-x-3 pl-5">
                        <div class="min-w-0 flex-1">
                          <div class="block focus:outline-none">
                            <span class="hidden absolute inset-0" aria-hidden="true"></span>
                            <div class="flex space-x-2">

                              <svg class="flex-shrink-0 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                              </svg>
                              <span class="text-sm uppercase font-semibold tracking-widest text-gray-500 pb-1 border-b-0 border-blue-100">Symbol Mapping</span>
                            </div>

                            <p class="hidden text-xs uppercase font-semibold tracking-widest text-blue-600 pb-1">Symbol Mapping</p>
                            <p class="hidden text-sm text-gray-500 truncate">Velit placeat sit ducimus non sed</p>
                          </div>
                        </div>
                        <time datetime="2021-01-27T16:35" class="hidden flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time>
                      </div>
                      <div class="flex mt-1 grid space-y-0.5 text-base font-normal text-gray-800">
                        <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="Source Maps" title="Source Maps">Source Maps</a>

                        <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="dSYMs" title="dSYMs">dSYMs</a>

                        <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="ProGuard" title="ProGuard">ProGuard</a>
                      </div>
                    </li>
                    <li class="relative bg-white pt-4 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600">
                      <div class="flex justify-between space-x-3 pl-5">
                        <div class="min-w-0 flex-1">
                          <div class="block focus:outline-none">
                            <span class="hidden absolute inset-0" aria-hidden="true"></span>
                            <div class="flex space-x-2">

                              <svg class="flex-shrink-0 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
                              </svg>
                              <span class="text-sm uppercase font-semibold tracking-widest text-gray-500 pb-1 border-b-0 border-blue-100">Advanced</span>
                            </div>

                            <p class="hidden text-sm uppercase font-semibold tracking-widest text-blue-600 pb-1">Advanced</p>
                            <p class="hidden text-sm text-gray-500 truncate">Velit placeat sit ducimus non sed</p>
                          </div>
                        </div>
                        <time datetime="2021-01-27T16:35" class="hidden flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time>
                      </div>
                      <div class="flex mt-1.5 grid space-y-0.5 text-base font-normal text-gray-800">
                        <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="Custom Grouping" title="Custom Grouping">Custom Grouping</a>

                        <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="IP Blocklist" title="IP Blocklist">IP Blocklist</a>

                      </div>
                    </li>

                  </ul>
                </div>

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

        </div>
        <!-- End projects mobile menu --->
      </div>
    </div>

    <!--- Not in use: Top searchbar full --->
    <div class="relative z-20 flex-shrink-0 flex h-16 bg-white border-b border-gray-200 hidden">
      <button type="button" class="px-4 border-r border-gray-200 text-gray-500 hover:text-white hover:border-gray-600 hover:bg-gray-700 focus:outline-none focus:bg-gray-800 focus:text-white lg:hidden hidden">
        <span class="sr-only">Open sidebar</span>
        <!-- Heroicon name: outline/menu-alt-2 -->
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path>
        </svg>
      </button>
      <div class="flex-1 px-4 sm:pr-6 lg:pr-8 flex justify-between">

        <div class="flex-1 flex">
          <form class="group w-full flex lg:ml-0" action="#" method="GET">
            <label for="search-field" class="sr-only">Search</label>
            <div class="relative w-full text-gray-400 focus-within:text-gray-600">
              <div class="absolute inset-y-0 left-0 flex items-center pointer-events-none">
                <!-- Heroicon name: solid/search -->
                <svg class="h-5 w-5 text-gray-400 group-hover:text-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
                </svg>
              </div>
              <input id="search-field" class="block w-full h-full pl-8 pr-3 py-2 border-transparent text-gray-900 focus:border-transparent text-md tracking-wide placeholder-gray-400 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:text-gray-900 focus:ring-0" placeholder="Search items" type="search" name="search">
            </div>
          </form>
        </div>
        <div class="ml-4 flex items-center lg:ml-6 space-x-4 hidden">
          <!-- Profile dropdown -->
          <div class="relative flex-shrink-0 hidden">
            <div>
              <button type="button" class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-blue-600" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                <span class="sr-only">Open user menu</span>
                <img class="h-9 w-9 rounded-full" src="https://secure.gravatar.com/avatar/edf8f5994430e63a2477e8af090bb680?d" alt="">
              </button>
            </div>

            <!--
                Dropdown menu, show/hide based on menu state.

                Entering: "transition ease-out duration-100"
                  From: "transform opacity-0 scale-95"
                  To: "transform opacity-100 scale-100"
                Leaving: "transition ease-in duration-75"
                  From: "transform opacity-100 scale-100"
                  To: "transform opacity-0 scale-95"
              -->
            <div class="origin-top-right absolute right-0 mt-2 px-1 w-40 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none hidden" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">

              <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:bg-opacity-90 hover:text-blue-800 focus:outline-none focus:bg-blue-600 focus:text-white rounded-md" role="menuitem" tabindex="-1" id="user-menu-item-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="mr-1 -ml-1 h-4 w-4 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"></path>
                </svg>
                Upgrade</a><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:bg-opacity-90 hover:text-blue-800 focus:outline-none focus:bg-blue-600 focus:text-white rounded-md" role="menuitem" tabindex="-1" id="user-menu-item-1">User Settings</a>

              <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:bg-opacity-90 hover:text-blue-800 focus:outline-none focus:bg-blue-600 focus:text-white rounded-md" role="menuitem" tabindex="-1" id="user-menu-item-2">Account Settings</a>

              <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:bg-opacity-90 hover:text-blue-800 focus:outline-none focus:bg-blue-600 focus:text-white rounded-md" role="menuitem" tabindex="-1" id="user-menu-item-3">Switch Accounts</a>

              <a href="#" class="block px-4 py-2 text-sm text-gray-700 border-t border-blue-100 hover:bg-blue-50 hover:bg-opacity-90 hover:text-blue-800 focus:outline-none focus:bg-blue-600 focus:text-white rounded-md" role="menuitem" tabindex="-1" id="user-menu-item-4">
                Sign Out
              </a>
            </div>
          </div>

          <button type="button" class="inline-flex transition duration-300 button-ease items-center px-2.5 md:px-4 py-2.5 border border-transparent text-sm font-medium rounded-full tracking-wide text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700">
            <svg class="md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4 text-blue-50" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
            </svg>
            <span class="hidden md:block">New Project</span>
          </button>
        </div>
      </div>
    </div>
    <!--- Not in use: Top Tabbed menu full -->
    <div class="h-12 mt-1 flex space-x-5 sm:space-x-8 px-4 sm:px-6 lg:hidden hidden" aria-label="Tabbed menu">

      <a href="#" class="border-blue-600 text-blue-800 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium focus:outline-none focus:border-blue-600" aria-current="page">General</a>

      <a href="#" class="border-transparent text-gray-500 hover:border-blue-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium focus:outline-none focus:border-blue-600 focus:text-blue-800">Symbol Mapping</a>
      <a href="#" class="border-transparent text-gray-500 hover:border-blue-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium focus:outline-none focus:border-blue-600 focus:text-blue-800">Advanced</a>

    </div>

    <!--- Main container starts here --->
    <header class="w-full flex-shrink-0 relative h-16 flex items-center border-b border-gray-200 z-20">

      <div class="w-full flex justify-between items-start pl-4 pr-2 sm:px-6 lg:px-8">
        <div class="w-auto flex flex-auto mt-1">

          <h1 id="metrics-heading" class="text-2xl font-medium text-gray-900">
            Metrics
          </h1>
          <p class="mt-0.5 text-sm text-gray-500 truncate hidden">Subtext here, you can also use pill tags instead of text</p><span class="mt-0.5 block hidden">
            <a href="#" class="relative inline-flex items-center rounded-full bg-gray-100 pl-2 pr-3 py-0.5 text-xs">
              <span class="absolute flex-shrink-0 flex items-center justify-center">
                <span class="h-1.5 w-1.5 rounded-full bg-gray-400" aria-hidden="true"></span>
              </span>
              <span class="ml-3 font-medium text-gray-600 tracking-wide">Node.JS</span>
            </a>
            <a href="#" class="relative inline-flex items-center rounded-full bg-gray-100 pl-2 pr-3 py-0.5 text-xs">
              <span class="absolute flex-shrink-0 flex items-center justify-center">
                <span class="h-1.5 w-1.5 rounded-full bg-gray-400" aria-hidden="true"></span>
              </span>
              <span class="ml-3 font-medium text-gray-600 tracking-wide">Pyramid</span>
            </a>
          </span><!-- Breadcrumb -->
          <nav class="flex mt-0.5 hidden" aria-label="Breadcrumb">
            <ol role="list" class="flex items-center space-x-2">
              <li>
                <div class="flex items-center">
                  <a href="#" class="text-sm font-medium text-gray-500 hover:text-blue-600">

                    Projects
                  </a>
                </div>
              </li>

              <li>
                <div class="flex items-center">
                  <svg class="flex-shrink-0 h-4 w-4 text-gray-400 mt-0.5" x-description="Heroicon name: solid/chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                  </svg>
                  <a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-blue-600">mox-web</a>
                </div>
              </li>

              <li>
                <div class="flex items-center">
                  <svg class="flex-shrink-0 h-4 w-4 text-gray-400 mt-0.5" x-description="Heroicon name: solid/chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                  </svg>
                  <a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-blue-600" aria-current="page">General</a>
                </div>
              </li>

            </ol>
          </nav>

        </div>

        <div class="w-auto flex flex-auto justify-center">

          <button data-testid="dropdown-button" class="transition duration-300 button-ease group relative w-auto lg:w-96 pl-2.5 pr-8 py-2 my-auto text-left cursor-default bg-blue-100 shadow-none border border-transparent text-gray-700 text-xs lg:text-sm leading-normal font-semibold tracking-wide placeholder-gray-400 hover:bg-blue-300 hover:bg-opacity-30 hover:text-gray-800 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:text-gray-800 focus:ring-1 focus:ring-blue-600 focus:border-blue-400 focus:bg-blue-100 rounded-md" id="headlessui-listbox-button-2" type="button" aria-haspopup="true" aria-labelledby="headlessui-listbox-label-1 headlessui-listbox-button-2"><span class="inline-flex items-center">
                  <span class="transition duration-200 button-ease inline-flex items-center mr-1 px-2.5 py-1 rounded-full text-xs font-normal bg-blue-600 text-white group-hover:bg-blue-700 group-hover:text-white group-focus:bg-blue-700 group-focus:text-white focus:outline-none">
                      <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path>
                      </svg>
                      30d
                    </span>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="flex-shrink-0 h-6 w-6 mr-2 text-gray-300 hidden">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                  </svg>

                  <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="" class="flex-shrink-0 h-6 w-6 rounded-full hidden">
                  <span class="mx-1 font-semibold uppercase leading-tight">Jan 1, 2022<span class="ml-1 text-xs text-gray-400 font-normal group-hover:text-gray-500">7:00am</span></span>
<span class="mx-1 font-normal text-gray-600">−</span>
<span class="mx-1 font-semibold uppercase leading-tight">Feb 2, 2022<span class="ml-1 text-xs text-gray-400 font-normal group-hover:text-gray-500">7:00am</span></span>
<span class="flex flex-shrink-0 -space-x-2 overflow-hidden ml-3 mr-1.5 hidden">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworkpyramid">
                      <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path>
                      <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path>
                      <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path>
                      <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-node-js" class="bg-white inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworknodejs">
                      <path fill="#83cd29" d="M463.6 113.4L276.9 5c-11.8-6.7-27.1-6.7-39 0L49.2 113.4c-12.2 7-20.8 20.1-20.8 34.2v216.5c0 14.1 8.8 27.2 21 34.2l49.9 28.3c23.8 11.7 32.3 11.7 43.1 11.7 35.3 0 55.4-21.3 55.4-58.6V166.1c0-3-1.6-7.5-4.5-7.5h-23.8c-3 0-9.8 4.5-9.8 7.5v213.8c0 16.5-14.9 32.9-42.8 19l-51.5-29.7c-1.8-1-3.1-2.9-3.1-5V147.6c0-2 2.4-4.1 4.2-5.1L254.6 34.3c1.8-1 4.3-1 6.1 0l185.8 108.2c1.8 1.1 1.2 3.1 1.2 5.2v216.5c0 2.1.8 4.1-1 5.1L260 477.5c-1.6 1-3.6 1-5.3 0L206.8 449c-1.4-.8-3.2-1.1-4.5-.4-13.3 7.5-15.8 8.6-28.3 12.9-3.1 1.1-7.6 2.9 1.7 8.2l62.7 37.1c6 3.5 12.8 5.3 19.7 5.3 7 0 13.8-1.8 19.8-5.3l185.8-108.3c12.2-7.1 17.9-20.2 17.9-34.2V147.6c-.1-14-5.8-27.1-18-34.2zM316 329.9c-49.7 0-60.6-13.7-64.2-38.4-.4-2.7-2.7-5.8-5.4-5.8h-24.3c-3 0-5.4 3.6-5.4 6.6 0 31.6 17.2 69.9 99.3 69.9 59.4 0 93.5-23.1 93.5-64 0-40.5-27.4-51.2-85-58.8-58.3-7.7-64.2-11.6-64.2-25.2 0-11.3 5-26.3 48.2-26.3 38.6 0 52.8 8.3 58.6 34.3.5 2.4 2.7 4.2 5.3 4.2h24.4c1.5 0 2.9-.6 4-1.7 1-1.2 1.6-2.6 1.4-4.1-3.8-44.7-33.5-65.6-93.6-65.6-53.5 0-85.4 22.6-85.4 60.4 0 41.1 31.7 52.4 83.1 57.5 61.4 6 66.2 15 66.2 27.1-.1 20.9-17 29.9-56.5 29.9z"></path>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-browser-js" class="bg-white inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworkbrowserjs ">
                      <path fill="#f0db4f" d="M0 0h512v512H0z"></path>
                      <path fill="#323330" d="M470.1 389.89c-3.75-23.36-19-43-64.1-61.28-15.67-7.2-33.15-12.35-38.35-24.23-1.85-6.91-2.1-10.81-.93-15 3.36-13.58 19.57-17.81 32.42-13.92 8.27 2.77 16.1 9.15 20.83 19.32 22.09-14.31 22-14.21 37.47-24-5.64-8.76-8.66-12.8-12.36-16.55-13.28-14.84-31.39-22.48-60.35-21.9l-15.08 1.95c-14.46 3.65-28.23 11.24-36.31 21.41-24.24 27.5-17.32 75.63 12.17 95.44 29.05 21.81 71.74 26.77 77.19 47.16 5.3 25-18.35 33.05-41.86 30.18-17.32-3.6-27-12.41-37.38-28.42-19.17 11.09-19.17 11.09-38.88 22.43 4.67 10.22 9.58 14.85 17.42 23.7 37.09 37.62 129.9 35.77 146.54-21.17.68-2.01 5.16-15.01 1.56-35.12zM278.34 235.32h-47.89l-.2 123.81c0 26.33 1.37 50.47-2.92 57.86-7 14.56-25.16 12.75-33.43 9.93-8.42-4.14-12.71-10-17.67-18.34-1.36-2.39-2.38-4.24-2.72-4.38L134.57 428c6.47 13.29 16 24.82 28.23 32.32 18.25 10.95 42.77 14.31 68.43 8.42 16.69-4.87 31.1-14.94 38.64-30.27 10.9-20.1 8.56-44.44 8.47-71.35.24-43.86 0-87.76 0-131.8z"></path>
                    </svg>

                  </span></span><span class="group ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400 group-hover:text-gray-600" aria-hidden="true">
                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                  </svg></span></button>

        </div><!-- buttons -->
        <div class="w-auto flex flex-auto items-center justify-end px-3 sm:flex-shrink-0 space-x-3"><button type="button" class="group inline-flex transition duration-300 button-ease justify-center px-2 py-2 border border-gray-300 text-sm font-medium rounded-full text-gray-600 bg-transparent hover:text-gray-700 hover:border-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400">

            <svg class="h-5 w-5 text-gray-400 transition duration-300 button-ease group-hover:text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
            </svg>

            <span class="hidden">Edit</span>
          </button>
          <div class="relative">
            <button type="button" class="inline-flex transition duration-300 button-ease items-center px-3 md:px-4 py-2 md:py-2.5 border border-transparent text-sm font-medium rounded-full tracking-wide text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700">
              <svg class="md:-ml-1 mr-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4 text-blue-50" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
              </svg>

              <span class="hidden md:block tracking-wide">Export</span>
              <svg class="md:-mr-1 md:ml-1.5 h-5 w-5 md:h-4 md:w-4 text-blue-50" x-description="Heroicon name: solid/chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
              </svg>
            </button>
            <div class="origin-top-right absolute right-0 mt-2 w-max rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-download-button" tabindex="-1" style="
    /* display: none; */
">
              <div class="py-1" role="none">
                <!--
                  Active: "bg-gray-100", Not Active: ""

                  Selected: "font-medium text-gray-900", Not Selected: "text-gray-500"
                -->
                <span class="block text-xs uppercase font-semibold tracking-widest text-gray-400 px-4 py-2 focus:outline-none" role="menuitem" tabindex="-1" id="menu-item-0">Download Filtered Data</span>

                <a href="#" class="group flex text-blue-600 block px-4 py-2 text-sm hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="menu-item-1"><svg class="-ml-1 mr-1.5 h-5 w-5 text-gray-500 self-center group-hover:text-gray-500" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M5 4a3 3 0 00-3 3v6a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H5zm-1 9v-1h5v2H5a1 1 0 01-1-1zm7 1h4a1 1 0 001-1v-1h-5v2zm0-4h5V8h-5v2zM9 8H4v2h5V8z" clip-rule="evenodd"></path>
                  </svg>Chart Data (CSV)</a>

                <a href="#" class="group flex text-gray-500 block px-4 py-2 text-sm hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="menu-item-1"><svg class="-ml-1 mr-1.5 h-5 w-5 text-gray-400 self-center group-hover:text-gray-500" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm9 4a1 1 0 10-2 0v6a1 1 0 102 0V7zm-3 2a1 1 0 10-2 0v4a1 1 0 102 0V9zm-3 3a1 1 0 10-2 0v1a1 1 0 102 0v-1z" clip-rule="evenodd"></path>
                  </svg>
                  Chart Snapshot (PNG)</a><a href="#" class="group flex text-gray-500 block px-4 py-2 text-sm hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="menu-item-1"><svg class="-ml-1 mr-1.5 h-5 w-5 text-gray-400 self-center group-hover:text-gray-500" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M5 4a3 3 0 00-3 3v6a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H5zm-1 9v-1h5v2H5a1 1 0 01-1-1zm7 1h4a1 1 0 001-1v-1h-5v2zm0-4h5V8h-5v2zM9 8H4v2h5V8z" clip-rule="evenodd"></path>
                  </svg>Items Metrics (CSV)</a>

                <span href="#" class="block text-xs uppercase font-semibold tracking-widest text-gray-400 block px-4 py-2 mt-2 border-t border-gray-100 focus:outline-none" role="menuitem" tabindex="-1" id="menu-item-3">Consume Data From Our API</span>

                <a href="#" class="group flex text-gray-500 block px-4 py-2 text-sm hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="menu-item-1"><svg class="-ml-1 mr-1.5 h-5 w-5 text-gray-400 self-center group-hover:text-gray-500" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" viewBox="-1 -2 22 22" fill="currentColor" aria-hidden="true">
                    <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path>
                    <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path>
                  </svg>
                  API Metrics Doc</a>
              </div>
            </div>
          </div>

        </div>
        <!--- Metrics filters mobile menu --->
        <div class="flex" style="
">
          <div class="flex">
            <div class="flex items-center lg:hidden">
              <!-- Metrics filters mobile menu button -->
              <button type="button" class="transition duration-300 button-ease p-1.5 bg-transparent rounded-full flex text-sm text-gray-400 border border-transparent hover:text-gray-700 hover:bg-transparent focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400 focus:text-gray-600" id="user-menu-button" aria-expanded="false">
                <span class="sr-only">Open projects menu</span>
                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path>
                </svg>
              </button>
            </div>
          </div>

          <!-- Show Metrics filters / change to md:hidden for impl. sm: for demo only -->
          <div class="sm:hidden" style="
    /* display: none; */
">
            <!--
            Mobile menu overlay, show/hide based on mobile menu state.

            Entering: "duration-150 ease-out"
              From: "opacity-0"
              To: "opacity-100"
            Leaving: "duration-150 ease-in"
              From: "opacity-100"
              To: "opacity-0"
          -->
            <div class="z-20 fixed inset-0 bg-black bg-opacity-25" aria-hidden="true"></div>

            <!--
            Mobile menu, show/hide based on mobile menu state.

            Entering: "duration-150 ease-out"
              From: "opacity-0 scale-95"
              To: "opacity-100 scale-100"
            Leaving: "duration-150 ease-in"
              From: "opacity-100 scale-100"
              To: "opacity-0 scale-95"
          -->
            <div class="z-30 absolute top-0 right-0 max-w-none w-full p-2 transition transform origin-top">
              <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white">
                <div class="flex-shrink-0">
                  <!-- Metrics filters - Select timeframe -->

                  <div class="rounded-t-lg border-t-0 border-b border-gray-100 bg-white pl-3 pr-12 2xl:px-4 py-2.5 h-auto text-md text-gray-500 flex justify-center">

                    <button data-testid="dropdown-button" class="group relative w-full pl-2 pr-8 py-2 my-auto text-left cursor-default bg-gray-50 shadow-none border border-transparent text-gray-700 text-md leading-normal font-semibold tracking-wide placeholder-gray-400 hover:bg-blue-100 hover:text-gray-700 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:text-gray-800 focus:ring-1 focus:ring-blue-600 focus:border-blue-400 focus:bg-blue-100 rounded-md" id="headlessui-listbox-button-2" type="button" aria-haspopup="true" aria-labelledby="headlessui-listbox-label-1 headlessui-listbox-button-2"><span class="inline-flex items-center justify-start">
                  <span class="transition duration-200 button-ease inline-flex items-center mr-0.5 px-2.5 py-1 rounded-full text-sm font-normal bg-blue-200 text-blue-800 group-hover:bg-blue-500 group-hover:text-white focus:text-blue-700 focus:outline-none">
                      <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path>
                      </svg>
                      30d
                    </span>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="flex-shrink-0 h-6 w-6 mr-2 text-gray-300 hidden">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                  </svg>

                  <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="" class="flex-shrink-0 h-6 w-6 rounded-full hidden">
                  <span class="mx-1 font-semibold uppercase leading-tight">Aug 22, 2021<span class="ml-1 text-gray-400 font-normal hidden">7:00am</span></span>
<span class="mx-1 font-normal text-gray-600">−</span>
<span class="mx-1 font-semibold uppercase leading-tight">Aug 22, 2021<span class="ml-1 text-gray-400 font-normal hidden">7:00am</span></span>
<span class="flex flex-shrink-0 -space-x-2 overflow-hidden ml-3 mr-1.5 hidden">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworkpyramid">
                      <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path>
                      <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path>
                      <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path>
                      <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-node-js" class="bg-white inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworknodejs">
                      <path fill="#83cd29" d="M463.6 113.4L276.9 5c-11.8-6.7-27.1-6.7-39 0L49.2 113.4c-12.2 7-20.8 20.1-20.8 34.2v216.5c0 14.1 8.8 27.2 21 34.2l49.9 28.3c23.8 11.7 32.3 11.7 43.1 11.7 35.3 0 55.4-21.3 55.4-58.6V166.1c0-3-1.6-7.5-4.5-7.5h-23.8c-3 0-9.8 4.5-9.8 7.5v213.8c0 16.5-14.9 32.9-42.8 19l-51.5-29.7c-1.8-1-3.1-2.9-3.1-5V147.6c0-2 2.4-4.1 4.2-5.1L254.6 34.3c1.8-1 4.3-1 6.1 0l185.8 108.2c1.8 1.1 1.2 3.1 1.2 5.2v216.5c0 2.1.8 4.1-1 5.1L260 477.5c-1.6 1-3.6 1-5.3 0L206.8 449c-1.4-.8-3.2-1.1-4.5-.4-13.3 7.5-15.8 8.6-28.3 12.9-3.1 1.1-7.6 2.9 1.7 8.2l62.7 37.1c6 3.5 12.8 5.3 19.7 5.3 7 0 13.8-1.8 19.8-5.3l185.8-108.3c12.2-7.1 17.9-20.2 17.9-34.2V147.6c-.1-14-5.8-27.1-18-34.2zM316 329.9c-49.7 0-60.6-13.7-64.2-38.4-.4-2.7-2.7-5.8-5.4-5.8h-24.3c-3 0-5.4 3.6-5.4 6.6 0 31.6 17.2 69.9 99.3 69.9 59.4 0 93.5-23.1 93.5-64 0-40.5-27.4-51.2-85-58.8-58.3-7.7-64.2-11.6-64.2-25.2 0-11.3 5-26.3 48.2-26.3 38.6 0 52.8 8.3 58.6 34.3.5 2.4 2.7 4.2 5.3 4.2h24.4c1.5 0 2.9-.6 4-1.7 1-1.2 1.6-2.6 1.4-4.1-3.8-44.7-33.5-65.6-93.6-65.6-53.5 0-85.4 22.6-85.4 60.4 0 41.1 31.7 52.4 83.1 57.5 61.4 6 66.2 15 66.2 27.1-.1 20.9-17 29.9-56.5 29.9z"></path>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-browser-js" class="bg-white inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworkbrowserjs ">
                      <path fill="#f0db4f" d="M0 0h512v512H0z"></path>
                      <path fill="#323330" d="M470.1 389.89c-3.75-23.36-19-43-64.1-61.28-15.67-7.2-33.15-12.35-38.35-24.23-1.85-6.91-2.1-10.81-.93-15 3.36-13.58 19.57-17.81 32.42-13.92 8.27 2.77 16.1 9.15 20.83 19.32 22.09-14.31 22-14.21 37.47-24-5.64-8.76-8.66-12.8-12.36-16.55-13.28-14.84-31.39-22.48-60.35-21.9l-15.08 1.95c-14.46 3.65-28.23 11.24-36.31 21.41-24.24 27.5-17.32 75.63 12.17 95.44 29.05 21.81 71.74 26.77 77.19 47.16 5.3 25-18.35 33.05-41.86 30.18-17.32-3.6-27-12.41-37.38-28.42-19.17 11.09-19.17 11.09-38.88 22.43 4.67 10.22 9.58 14.85 17.42 23.7 37.09 37.62 129.9 35.77 146.54-21.17.68-2.01 5.16-15.01 1.56-35.12zM278.34 235.32h-47.89l-.2 123.81c0 26.33 1.37 50.47-2.92 57.86-7 14.56-25.16 12.75-33.43 9.93-8.42-4.14-12.71-10-17.67-18.34-1.36-2.39-2.38-4.24-2.72-4.38L134.57 428c6.47 13.29 16 24.82 28.23 32.32 18.25 10.95 42.77 14.31 68.43 8.42 16.69-4.87 31.1-14.94 38.64-30.27 10.9-20.1 8.56-44.44 8.47-71.35.24-43.86 0-87.76 0-131.8z"></path>
                    </svg>

                  </span></span><span class="group ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400 group-hover:text-gray-600" aria-hidden="true">
                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                  </svg></span></button>

                  <button data-testid="dropdown-button" class="group relative w-full pl-2 pr-8 py-2 text-left cursor-default bg-gray-50 shadow-none border border-transparent text-gray-700 text-base leading-5 font-semibold tracking-wide placeholder-gray-400 hover:bg-blue-100 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 focus:border-blue-400 focus:bg-blue-100 rounded-md hidden" id="headlessui-listbox-button-2" type="button" aria-haspopup="true" aria-labelledby="headlessui-listbox-label-1 headlessui-listbox-button-2"><span class="flex items-center justify-start">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="flex-shrink-0 h-6 w-6 mr-2 text-gray-300">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                        </svg>

                        <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="" class="flex-shrink-0 h-6 w-6 rounded-full hidden">
                        <span class="block truncate">Last 30 days</span><span class="flex flex-shrink-0 -space-x-2 overflow-hidden ml-3 mr-1.5 hidden">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworkpyramid">
                            <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path>
                            <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path>
                            <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path>
                            <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path>
                          </svg>
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-node-js" class="bg-white inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworknodejs">
                            <path fill="#83cd29" d="M463.6 113.4L276.9 5c-11.8-6.7-27.1-6.7-39 0L49.2 113.4c-12.2 7-20.8 20.1-20.8 34.2v216.5c0 14.1 8.8 27.2 21 34.2l49.9 28.3c23.8 11.7 32.3 11.7 43.1 11.7 35.3 0 55.4-21.3 55.4-58.6V166.1c0-3-1.6-7.5-4.5-7.5h-23.8c-3 0-9.8 4.5-9.8 7.5v213.8c0 16.5-14.9 32.9-42.8 19l-51.5-29.7c-1.8-1-3.1-2.9-3.1-5V147.6c0-2 2.4-4.1 4.2-5.1L254.6 34.3c1.8-1 4.3-1 6.1 0l185.8 108.2c1.8 1.1 1.2 3.1 1.2 5.2v216.5c0 2.1.8 4.1-1 5.1L260 477.5c-1.6 1-3.6 1-5.3 0L206.8 449c-1.4-.8-3.2-1.1-4.5-.4-13.3 7.5-15.8 8.6-28.3 12.9-3.1 1.1-7.6 2.9 1.7 8.2l62.7 37.1c6 3.5 12.8 5.3 19.7 5.3 7 0 13.8-1.8 19.8-5.3l185.8-108.3c12.2-7.1 17.9-20.2 17.9-34.2V147.6c-.1-14-5.8-27.1-18-34.2zM316 329.9c-49.7 0-60.6-13.7-64.2-38.4-.4-2.7-2.7-5.8-5.4-5.8h-24.3c-3 0-5.4 3.6-5.4 6.6 0 31.6 17.2 69.9 99.3 69.9 59.4 0 93.5-23.1 93.5-64 0-40.5-27.4-51.2-85-58.8-58.3-7.7-64.2-11.6-64.2-25.2 0-11.3 5-26.3 48.2-26.3 38.6 0 52.8 8.3 58.6 34.3.5 2.4 2.7 4.2 5.3 4.2h24.4c1.5 0 2.9-.6 4-1.7 1-1.2 1.6-2.6 1.4-4.1-3.8-44.7-33.5-65.6-93.6-65.6-53.5 0-85.4 22.6-85.4 60.4 0 41.1 31.7 52.4 83.1 57.5 61.4 6 66.2 15 66.2 27.1-.1 20.9-17 29.9-56.5 29.9z"></path>
                          </svg>
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-browser-js" class="bg-white inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworkbrowserjs ">
                            <path fill="#f0db4f" d="M0 0h512v512H0z"></path>
                            <path fill="#323330" d="M470.1 389.89c-3.75-23.36-19-43-64.1-61.28-15.67-7.2-33.15-12.35-38.35-24.23-1.85-6.91-2.1-10.81-.93-15 3.36-13.58 19.57-17.81 32.42-13.92 8.27 2.77 16.1 9.15 20.83 19.32 22.09-14.31 22-14.21 37.47-24-5.64-8.76-8.66-12.8-12.36-16.55-13.28-14.84-31.39-22.48-60.35-21.9l-15.08 1.95c-14.46 3.65-28.23 11.24-36.31 21.41-24.24 27.5-17.32 75.63 12.17 95.44 29.05 21.81 71.74 26.77 77.19 47.16 5.3 25-18.35 33.05-41.86 30.18-17.32-3.6-27-12.41-37.38-28.42-19.17 11.09-19.17 11.09-38.88 22.43 4.67 10.22 9.58 14.85 17.42 23.7 37.09 37.62 129.9 35.77 146.54-21.17.68-2.01 5.16-15.01 1.56-35.12zM278.34 235.32h-47.89l-.2 123.81c0 26.33 1.37 50.47-2.92 57.86-7 14.56-25.16 12.75-33.43 9.93-8.42-4.14-12.71-10-17.67-18.34-1.36-2.39-2.38-4.24-2.72-4.38L134.57 428c6.47 13.29 16 24.82 28.23 32.32 18.25 10.95 42.77 14.31 68.43 8.42 16.69-4.87 31.1-14.94 38.64-30.27 10.9-20.1 8.56-44.44 8.47-71.35.24-43.86 0-87.76 0-131.8z"></path>
                          </svg>

                        </span></span><span class="group ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400 group-hover:text-gray-600" aria-hidden="true">
                          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                        </svg></span></button></div>
                </div>
                <div class="flex pt-2 pb-1">
                  <div class="flex items-start justify-start mr-0 order-last">

                    <div class="-mr-2 absolute inset-y-4 right-6 lg:static lg:flex-shrink-0">
                      <button type="button" class="bg-white rounded-lg p-1.5 inline-flex items-center justify-center text-gray-400 hover:text-gray-700 hover:bg-transparent focus:outline-none focus:text-gray-600">
                        <span class="sr-only">Close menu</span>
                        <!-- Heroicon name: outline/x -->
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                      </button>
                    </div>
                  </div>
                  <ul role="list" class="w-full py-3 border-b-0 border-gray-100 divide-y divide-blue-100">
                    <li class="relative bg-white pb-3 px-6 space-y-3 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600">
                      <div class="group flex justify-between focus:outline-none">
                        <div class="flex space-x-1">

                          <svg class="-ml-1 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                          </svg>
                          <span class="text-sm uppercase font-semibold tracking-widest text-gray-700 pb-1 border-b border-blue-100 group-hover:text-blue-800">Projects</span>
                        </div>
                        <div class="group flex space-x-2 items-end focus:outline-none">
                          <span class="inline-flex items-center px-2.5 py-1 rounded-full text-sm font-medium tracking-wide bg-blue-100 text-blue-800">
                            <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path>
                            </svg>
                            5
                          </span><button type="button" class="h-7 w-7 justify-center inline-flex transition duration-300 button-ease items-center px-0.5 py-0.5 border border-transparent text-sm font-medium rounded-full tracking-wide text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700">
                            <svg class="h-5 w-5 text-blue-50" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                            </svg>

                          </button>
                        </div>

                      </div>
                      <div class="w-full">
                        <div class="mt-1 relative flex rounded-md shadow-none">
                          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" aria-hidden="true">
                              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
                            </svg></div><input id="project-search" type="search" class="block w-full shadow-none border border-gray-200 text-gray-900 text-md leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md pl-10" data-testid="project-search" placeholder="Search">
                        </div>
                        <p class="mt-2 text-sm text-red-600 invisible hidden" id="project-search-error">&amp;nbsp</p>
                      </div>
                      <div class="flex">
                        <div class="-mb-2.5 min-w-0 flex-1">
                          <div class="block focus:outline-none">
                            <span class="hidden absolute inset-0" aria-hidden="true"></span>
                            <div class="flex justify-between items-center">

                              <div class="inline-flex items-center space-x-1"><a class="text-sm font-semibold text-blue-600 hover:text-blue-800 focus:outline-none  focus:text-blue-800" href="https://rollbar.com/Rollbar/api-monitoring/settings/general">Select All</a><span class="text-sm tracking-widest text-gray-200">⎥
                                </span><a class="text-sm font-semibold text-blue-600 hover:text-blue-800 focus:outline-none  focus:text-blue-800" href="https://rollbar.com/Rollbar/api-monitoring/settings/general">Clear All</a></div>

                            </div>

                          </div>
                        </div>
                        <time datetime="2021-01-27T16:35" class="hidden flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time>
                      </div>
                      <div class="w-full">

                        <fieldset class="space-y-0.5 border-0">
                          <legend class="sr-only">Projects</legend>
                          <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                            <div class="flex items-center h-5">
                              <input id="project-mox-m" aria-describedby="project-mox" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                            </div>
                            <div class="ml-3 text-md">
                              <label for="project-mox-m" class="font-medium text-gray-700">mox</label>
                              <span id="project-description" class="text-gray-400 text-xs hidden"><span class="sr-only">mox</span>Python, Javascript</span>
                            </div>
                          </div>

                          <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                            <div class="flex items-center h-5">
                              <input id="project-mox-max-m" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                            </div>
                            <div class="ml-3 text-md">
                              <label for="project-mox-max-m" class="font-medium text-gray-700">mox-max</label>
                              <span id="project-description" class="text-gray-400 text-xs hidden"><span class="sr-only">mox</span>Languages</span>
                            </div>
                          </div>
                          <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                            <div class="flex items-center h-5">
                              <input id="project-mox-web-m" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                            </div>
                            <div class="ml-3 text-md">
                              <label for="project-mox-web-m" class="font-medium text-gray-700">mox-web</label>
                              <span id="project-description" class="text-gray-400 text-xs hidden"><span class="sr-only">mox</span>Languages</span>
                            </div>
                          </div>
                          <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                            <div class="flex items-center h-5">
                              <input id="project-mox-workers-m" aria-describedby="project-mox-workers" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                            </div>
                            <div class="ml-3 text-md">
                              <label for="project-mox-workers-m" class="font-medium text-gray-700">mox-workers</label>
                              <span id="project-description" class="text-gray-400 text-xs hidden"><span class="sr-only">mox</span>Languages</span>
                            </div>
                          </div>
                          <div class="relative flex items-start pl-1 py-1 hover:bg-white hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md hidden">
                            <div class="flex items-center h-5">
                              <svg class="h-4 w-4 text-gray-300 self-center" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="currentColor" aria-hidden="true">
                                <g xmlns="http://www.w3.org/2000/svg">
                                  <g xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" i:extraneous="self">
                                    <g>
                                      <path d="M44.3,66.9c-1.5-0.2-3-0.9-4.1-2l-0.8-0.8c-2.7-2.7-2.7-7-0.2-9.8L36,51.1L23.9,63.1c-5.7-1.3-11.9,0.2-16.3,4.6     c-5.1,5.1-6.4,12.5-3.9,18.8l8.7-8.7c2.7-2.7,7.1-2.7,9.7,0c2.7,2.7,2.7,7.1,0,9.7l-8.7,8.7c6.3,2.5,13.7,1.2,18.8-3.9     c4.4-4.4,6-10.6,4.6-16.3l7.7-7.7C44.5,67.9,44.3,67.4,44.3,66.9z"></path>
                                      <path d="M51.7,41.8c1.3-1.2,3-1.9,4.8-1.9c1.9,0,3.7,0.7,5,2.1l0.8,0.8c1.1,1.1,1.8,2.5,2,4.1c0.5,0.1,1,0.2,1.5,0.4l10.4-10.4     c1.3,0.3,2.7,0.5,4,0.5c4.5,0,8.9-1.7,12.3-5.1c5.1-5.1,6.4-12.5,3.9-18.8l-8.7,8.7c-2.7,2.7-7.1,2.7-9.7,0     c-2.7-2.7-2.7-7.1,0-9.7l8.7-8.7c-6.3-2.5-13.7-1.2-18.8,3.9c-4.4,4.4-6,10.6-4.6,16.3L48.4,38.6L51.7,41.8z"></path>
                                      <path d="M65.4,51.8c-1.1-1.1-3-1.1-4.1,0L61.1,52l-2-2l0.2-0.2c1.1-1.1,1.1-3,0-4.1l-0.8-0.8c-1.1-1.1-3-1.1-4.1,0l-2.7,2.7     L27.5,23.5l4.3-3.7l0.9,0.9c0.6,0.6,1.5,0.6,2.1,0l5.3-5.3c0.6-0.6,0.6-1.5,0-2.1L29.6,2.9c-0.6-0.6-1.5-0.6-2.1,0l-5.3,5.3     c-0.6,0.6-0.6,1.5,0,2.1l0.8,0.8c0,0-11.3,11.3-11.7,11.7c-5.3,5.3-5,15.8-2.1,20.4c0.8,1.3,2.7,0.7,2.8-0.8     c0.3-6,4.5-9.7,8.2-12.8L45,54.3L42.3,57c-1.1,1.1-1.1,3,0,4.1l0.8,0.8c1.1,1.1,3,1.1,4.1,0l0.2-0.2l2,2l-0.2,0.2     c-1.1,1.1-1.1,3,0,4.1l28.6,28.6c1.1,1.1,3,1.1,4.1,0L94,84.6c1.1-1.1,1.1-3,0-4.1L65.4,51.8z M78.9,87.3c-0.6,0.6-1.6,0.6-2.2,0     L58.6,69.1c-0.6-0.6-0.6-1.6,0-2.2c0.6-0.6,1.6-0.6,2.2,0l18.1,18.1C79.5,85.7,79.5,86.7,78.9,87.3z M84.6,81.5     c-0.6,0.6-1.6,0.6-2.2,0L64.3,63.4c-0.6-0.6-0.6-1.6,0-2.2c0.6-0.6,1.6-0.6,2.2,0l18.1,18.1C85.2,79.9,85.2,80.9,84.6,81.5z"></path>
                                    </g>
                                  </g>
                                </g>
                              </svg>
                              <input id="project-atsuko-test" aria-describedby="project-mox-workers" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded hidden">
                            </div>
                            <div class="flex w-full ml-3 text-md items-center justify-between">
                              <label for="project-atsuko-test" class="font-medium text-gray-400">atsuko-test</label>
                              <a href="#" id="project-setup" class="font-semibold tracking-wide text-orange-600 text-sm hover:text-orange-800 focus:text-orange-800 focus:outline-none"><span class="sr-only">atsuko-test</span>Set Up</a>
                            </div>
                          </div>
                          <div class="group relative flex items-start pl-1 py-1 hover:bg-white hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 rounded-md">
                            <div class="flex items-center h-5">
    <svg class="h-4 w-4 text-gray-300 self-center" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="currentColor" aria-hidden="true">
                          <g xmlns="http://www.w3.org/2000/svg"><g xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" i:extraneous="self"><g><path d="M3.4,78c-1.2,1.1-1.2,3,0,4.2l10.7,10.7c1.1,1.1,3,1.1,4.2,0l28.3-28.3L31.7,49.7L3.4,78z"></path><path d="M97.1,26.6l-5.3-5.3c-0.6-0.6-1.5-0.6-2.1,0l-0.8,0.8c0,0-11.3-11.3-11.7-11.7c-5.3-5.3-15.9-5-20.6-2.1     c-1.3,0.8-0.7,2.8,0.8,2.8c6.1,0.3,9.8,4.6,12.9,8.3L53.6,36l6.7,6.7l16.1-16.1l3.8,4.3l-0.9,0.9c-0.6,0.6-0.6,1.5,0,2.1l5.3,5.3     c0.6,0.6,1.5,0.6,2.1,0l10.4-10.4C97.6,28.2,97.6,27.2,97.1,26.6z"></path><path d="M74.3,62.3L37.5,25.5c1.3-5.3-0.2-11.1-4.3-15.3c-4.8-4.8-11.7-6-17.6-3.6l8.2,8.2c2.5,2.5,2.5,6.6,0,9.1     c-2.5,2.5-6.6,2.5-9.1,0l-8.2-8.2C4.1,21.6,5.3,28.6,10,33.3c4.2,4.2,10,5.6,15.3,4.3c0,0,0,0,0,0l36.8,36.8c0,0,0,0,0,0     c-1.3,5.3,0.2,11.2,4.3,15.3c4.8,4.8,11.7,6,17.6,3.6l-8.2-8.2c-2.5-2.5-2.5-6.6,0-9.1c2.5-2.5,6.6-2.5,9.1,0l8.2,8.2     c2.3-5.9,1.1-12.9-3.6-17.6C85.5,62.5,79.6,61,74.3,62.3z"></path></g></g></g>
                        </svg>
                              </div>
                            <div class="flex w-full ml-3 text-md items-center justify-between">
                              <label for="project-atsuko-test" class="font-medium text-gray-400">atsuko-test</label>
                              <a href="#" id="project-setup" class="font-semibold tracking-wide text-orange-600 text-sm hover:text-orange-800 focus:text-orange-800 focus:outline-none"><span class="sr-only">atsuko-test</span>Set Up</a>
                            </div>
                          </div>
                        <div class="group relative flex items-start pl-1 py-1 hover:bg-white hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 rounded-md hidden">
                            <div class="flex items-center h-5">
                              <span class="mt-0.5 h-5 w-5 bg-orange-100 rounded-full flex items-center justify-center" aria-hidden="true">
                                <span class="h-2.5 w-2.5 bg-orange-500 rounded-full"></span>
                              </span>
                              <input id="project-atsuko-test" aria-describedby="project-atsuko-test" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded hidden">
                            </div>
                            <div class="flex w-full ml-2 text-md items-center justify-between">
                              <label for="project-atsuko-test" class="font-medium text-gray-400">atsuko-test-2</label>
                              <a href="#" id="project-setup" class="font-semibold tracking-wide text-orange-600 text-sm hover:text-orange-800 focus:text-orange-800 focus:outline-none"><span class="sr-only">atsuko-test</span>Set Up</a>
                            </div>
                          </div></fieldset>

                      </div>
                      <div class="w-full text-md font-semibold text-blue-600">
                  <a class="flex block justify-center hover:text-blue-800 focus:outline-none focus:text-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="General" title="General">Show All <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mt-0 ml-0.5 self-center" fill="currentColor" viewBox="0 0 100 100">
                      <path xmlns="http://www.w3.org/2000/svg" d="M62.3,62.6l-8.6,8.6V29.3l8.6,8.6c1.4,1.5,3.8,1.6,5.3,0.2c1.5-1.4,1.6-3.8,0.2-5.3c-0.1-0.1-0.1-0.1-0.2-0.2l-15-15  c-1.5-1.5-3.8-1.5-5.3,0l-15,15c-1.4,1.5-1.3,3.9,0.2,5.3c1.4,1.3,3.7,1.3,5.1,0l8.6-8.6v41.9l-8.6-8.6c-1.4-1.5-3.8-1.6-5.3-0.2  c-1.5,1.4-1.6,3.8-0.2,5.3c0.1,0.1,0.1,0.1,0.2,0.2l15,15c1.5,1.5,3.8,1.5,5.3,0l15-15c1.5-1.4,1.6-3.8,0.2-5.3  c-1.4-1.5-3.8-1.6-5.3-0.2C62.5,62.5,62.4,62.5,62.3,62.6z"></path>
                    </svg></a>

                </div>
                    </li>

                    <li class="relative bg-white py-3 px-6 space-y-3 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600">
                      <div class="group flex justify-between focus:outline-none">
                        <div class="flex space-x-1">

                          <svg class="-ml-1 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                          </svg>
                          <span class="text-sm uppercase font-semibold tracking-widest text-gray-700 pb-1 border-b border-blue-100 group-hover:text-blue-800">Environments</span>
                        </div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-sm font-medium tracking-wide bg-blue-100 text-blue-800">
                          <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path>
                          </svg>
                          2
                        </span>

                      </div>
                      <div class="w-full">
                        <div class="mt-1 relative flex rounded-md shadow-none">
                          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" aria-hidden="true">
                              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
                            </svg></div><input id="project-search" type="search" class="block w-full shadow-none border border-gray-200 text-gray-900 text-md leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md pl-10" data-testid="project-search" placeholder="Search">
                        </div>
                        <p class="mt-2 text-sm text-red-600 invisible hidden" id="project-search-error">&amp;nbsp</p>
                      </div>
                      <div class="w-full">

                        <fieldset class="space-y-0.5 border-0">
                          <legend class="sr-only">Projects</legend>
                          <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                            <div class="flex items-center h-5">
                              <input id="env-at-product-demo-m" aria-describedby="project-mox" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                            </div>
                            <div class="ml-3 text-md">
                              <label for="env-at-product-demo-m" class="font-medium text-gray-700">at-product-demo</label>

                            </div>
                          </div>

                          <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                            <div class="flex items-center h-5">
                              <input id="env-development-m" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                            </div>
                            <div class="ml-3 text-md">
                              <label for="env-development-m" class="font-medium text-gray-700">development</label>

                            </div>
                          </div>
                          <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                            <div class="flex items-center h-5">
                              <input id="env-production-m" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                            </div>
                            <div class="ml-3 text-md">
                              <label for="env-production-m" class="font-medium text-gray-700">production</label>

                            </div>
                          </div>
                          <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                            <div class="flex items-center h-5">
                              <input id="env-staging-m" aria-describedby="project-mox-workers" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                            </div>
                            <div class="ml-3 text-md">
                              <label for="env-staging-m" class="font-medium text-gray-700">staging</label>

                            </div>
                          </div>
                        </fieldset>

                      </div>
                      <div class="w-full text-sm font-normal text-blue-600 hidden">
                        <a class="-mt-3 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="General" title="General">Show all...</a>

                      </div>
                    </li>
                    <li class="relative bg-white py-3 px-6 space-y-3 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600">
                      <div class="group flex justify-between focus:outline-none">
                        <div class="flex space-x-1">

                          <svg class="-ml-1 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                          </svg>
                          <span class="text-sm uppercase font-semibold tracking-widest text-gray-700 pb-1 border-b border-blue-100 group-hover:text-blue-800">Severity</span>
                        </div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-sm font-medium tracking-wide bg-blue-100 text-blue-800">
                          <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path>
                          </svg>
                          3
                        </span>

                      </div>
                      <div class="w-full hidden">
                        <div class="mt-1 relative flex rounded-md shadow-none">
                          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" aria-hidden="true">
                              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
                            </svg></div><input id="project-search" type="search" class="block w-full shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md pl-10" data-testid="project-search" placeholder="Search">
                        </div>
                        <p class="mt-2 text-sm text-red-600 invisible hidden" id="project-search-error">&amp;nbsp</p>
                      </div>
                      <div class="w-full hidden">

                        <fieldset class="space-y-0.5 border-0">
                          <legend class="sr-only">Projects</legend>
                          <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                            <div class="flex items-center h-5">
                              <input id="env-" aria-describedby="project-mox" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                            </div>
                            <div class="ml-3 text-sm">
                              <label for="env-" class="font-medium text-gray-700">at-product-demo</label>

                            </div>
                          </div>

                          <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                            <div class="flex items-center h-5">
                              <input id="env-developmen" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                            </div>
                            <div class="ml-3 text-sm">
                              <label for="env-developmen" class="font-medium text-gray-700">development</label>

                            </div>
                          </div>
                          <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                            <div class="flex items-center h-5">
                              <input id="env-productio" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                            </div>
                            <div class="ml-3 text-sm">
                              <label for="env-productio" class="font-medium text-gray-700">production</label>

                            </div>
                          </div>
                          <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                            <div class="flex items-center h-5">
                              <input id="env-stagin" aria-describedby="project-mox-workers" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                            </div>
                            <div class="ml-3 text-sm">
                              <label for="env-stagin" class="font-medium text-gray-700">staging</label>

                            </div>
                          </div>
                        </fieldset>

                      </div>
                      <div class="w-full text-sm font-normal text-blue-600 hidden">
                        <a class="-mt-3 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="General" title="General">Show all...</a>

                      </div>
                    </li>

                    <li class="relative bg-white py-3 px-6 space-y-3 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600">
                      <div class="group flex justify-between focus:outline-none">
                        <div class="flex space-x-1">

                          <svg class="-ml-1 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                          </svg>
                          <span class="text-sm uppercase font-semibold tracking-widest text-gray-700 pb-1 border-b border-blue-100 group-hover:text-blue-800">Frameworks</span>
                        </div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-sm font-medium tracking-wide bg-blue-100 text-blue-800">
                          <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path>
                          </svg>All</span>

                      </div>
                      <div class="w-full hidden">
                        <div class="mt-1 relative flex rounded-md shadow-none">
                          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" aria-hidden="true">
                              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
                            </svg></div><input id="project-search" type="search" class="block w-full shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md pl-10" data-testid="project-search" placeholder="Search">
                        </div>
                        <p class="mt-2 text-sm text-red-600 invisible hidden" id="project-search-error">&amp;nbsp</p>
                      </div>
                      <div class="w-full hidden">

                        <fieldset class="space-y-0.5 border-0">
                          <legend class="sr-only">Projects</legend>
                          <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                            <div class="flex items-center h-5">
                              <input id="env-at-product-dem" aria-describedby="project-mox" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                            </div>
                            <div class="ml-3 text-sm">
                              <label for="env-at-product-dem" class="font-medium text-gray-700">at-product-demo</label>

                            </div>
                          </div>

                          <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                            <div class="flex items-center h-5">
                              <input id="env-developmen" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                            </div>
                            <div class="ml-3 text-sm">
                              <label for="env-developmen" class="font-medium text-gray-700">development</label>

                            </div>
                          </div>
                          <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                            <div class="flex items-center h-5">
                              <input id="env-productio" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                            </div>
                            <div class="ml-3 text-sm">
                              <label for="env-productio" class="font-medium text-gray-700">production</label>

                            </div>
                          </div>
                          <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                            <div class="flex items-center h-5">
                              <input id="env-stagin" aria-describedby="project-mox-workers" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                            </div>
                            <div class="ml-3 text-sm">
                              <label for="env-stagin" class="font-medium text-gray-700">staging</label>

                            </div>
                          </div>
                        </fieldset>

                      </div>
                      <div class="w-full text-sm font-normal text-blue-600 hidden">
                        <a class="-mt-3 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="General" title="General">Show all...</a>

                      </div>
                    </li>
                  </ul>
                  <ul role="list" class="w-full border-b-0 border-gray-100 divide-y divide-blue-50 py-3 hidden">
                    <li class="relative pb-4 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600">
                      <div class="flex justify-between space-x-3 pl-5">
                        <div class="min-w-0 flex-1">
                          <div class="block focus:outline-none">
                            <span class="hidden absolute inset-0" aria-hidden="true"></span>
                            <div class="flex space-x-2">

                              <svg class="flex-shrink-0 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path>
                              </svg>
                              <span class="text-sm uppercase font-semibold tracking-widest text-gray-500 pb-1 border-b-0 border-blue-100">
                                Project
                              </span>
                            </div>

                            <p class="hidden text-xs uppercase font-semibold tracking-widest text-blue-600 pb-1">Project</p>
                            <p class="hidden text-sm text-gray-500 truncate">Velit placeat sit ducimus non sed</p>
                          </div>
                        </div>
                        <time datetime="2021-01-27T16:35" class="hidden flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time>
                      </div>
                      <div class="flex mt-1 grid space-y-0.5 text-base font-normal text-gray-800">
                        <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="General" title="General">General</a>

                        <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="Integrations" title="Integrations">Integrations</a>

                        <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="Collaborators" title="Collaborators">Collaborators</a>
                      </div>
                    </li>

                    <li class="relative bg-white py-4 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600">
                      <div class="flex justify-between space-x-3 pl-5">
                        <div class="min-w-0 flex-1">
                          <div class="block focus:outline-none">
                            <span class="hidden absolute inset-0" aria-hidden="true"></span>
                            <div class="flex space-x-2">

                              <svg class="flex-shrink-0 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                              </svg>
                              <span class="text-sm uppercase font-semibold tracking-widest text-gray-500 pb-1 border-b-0 border-blue-100">Symbol Mapping</span>
                            </div>

                            <p class="hidden text-xs uppercase font-semibold tracking-widest text-blue-600 pb-1">Symbol Mapping</p>
                            <p class="hidden text-sm text-gray-500 truncate">Velit placeat sit ducimus non sed</p>
                          </div>
                        </div>
                        <time datetime="2021-01-27T16:35" class="hidden flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time>
                      </div>
                      <div class="flex mt-1 grid space-y-0.5 text-base font-normal text-gray-800">
                        <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="Source Maps" title="Source Maps">Source Maps</a>

                        <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="dSYMs" title="dSYMs">dSYMs</a>

                        <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="ProGuard" title="ProGuard">ProGuard</a>
                      </div>
                    </li>
                    <li class="relative bg-white pt-4 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600">
                      <div class="flex justify-between space-x-3 pl-5">
                        <div class="min-w-0 flex-1">
                          <div class="block focus:outline-none">
                            <span class="hidden absolute inset-0" aria-hidden="true"></span>
                            <div class="flex space-x-2">

                              <svg class="flex-shrink-0 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
                              </svg>
                              <span class="text-sm uppercase font-semibold tracking-widest text-gray-500 pb-1 border-b-0 border-blue-100">Advanced</span>
                            </div>

                            <p class="hidden text-sm uppercase font-semibold tracking-widest text-blue-600 pb-1">Advanced</p>
                            <p class="hidden text-sm text-gray-500 truncate">Velit placeat sit ducimus non sed</p>
                          </div>
                        </div>
                        <time datetime="2021-01-27T16:35" class="hidden flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time>
                      </div>
                      <div class="flex mt-1.5 grid space-y-0.5 text-base font-normal text-gray-800">
                        <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="Custom Grouping" title="Custom Grouping">Custom Grouping</a>

                        <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="IP Blocklist" title="IP Blocklist">IP Blocklist</a>

                      </div>
                    </li>

                  </ul>
                </div>

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

        </div>
        <!-- ellipsis popup menu --->
        <div class="flex self-start items-center mt-3 sm:flex-shrink-0 hidden">
          <span class="hidden inline-flex items-center ml-6 px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800">
            Active
          </span>
          <div class="ml-3 relative inline-block text-left">
            <div>
              <button type="button" class="transition duration-300 button-ease -my-2 p-2 rounded-full bg-transparent flex items-center border border-transparent text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400" id="menu-3-button" aria-expanded="false" aria-haspopup="true">
                <span class="sr-only">Open options</span>
                <!-- Heroicon name: solid/dots-vertical -->
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
                </svg>
              </button>
            </div>

            <!--
                    Dropdown menu, show/hide based on menu state.

                    Entering: "transition ease-out duration-100"
                      From: "transform opacity-0 scale-95"
                      To: "transform opacity-100 scale-100"
                    Leaving: "transition ease-in duration-75"
                      From: "transform opacity-100 scale-100"
                      To: "transform opacity-0 scale-95"
                  -->
            <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none hidden" role="menu" aria-orientation="vertical" aria-labelledby="menu-3-button" tabindex="-1">
              <div class="py-1" role="none">
                <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
                <button type="button" class="text-gray-700 w-full flex justify-between px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-3-item-0">
                  <span>Re-authorize Rollbot</span>
                </button>
                <a href="#" class="text-gray-700 flex justify-between px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-3-item-1">
                  <span>View events usage</span>
                </a>
                <a href="#" class="text-gray-700 flex justify-between px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-3-item-2">
                  <span>Manage billing</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <main class="flex-1 sm:overflow-y-auto focus:outline-none lg:flex border-t-0 border-gray-200">

      <section aria-labelledby="page-header" class="min-w-0 flex-1 lg:h-full flex flex-col overflow-y-auto lg:overflow-hidden lg:order-last">

        <!-- Simple back navigation -->
        <nav class="flex items-start px-4 pt-4 pb-2 sm:px-6 lg:px-8 /*xl:hidden*/ hidden" aria-label="Breadcrumb">
          <a href="#" class="group inline-flex items-center space-x-1 text-sm font-medium text-gray-500 hover:text-blue-600">
            <svg class="-ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-600" x-description="Heroicon name: solid/chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path>
            </svg>
            <span class="-mt-0.5">Projects</span>
          </a>
        </nav><!-- Top header starts here -->
        <!-- Title, subtext, buttons, ellipsis menu -->
        <div class="bg-transparent shadow-none" style="
    display: none;
">
          <div class="flex justify-between items-start pl-4 pr-2 sm:px-6 lg:px-8 mt-6 mb-2">
            <div class="sm:w-0 flex-1">
              <!-- Responsive breadcrumb -->
              <div class="mb-1" style="
    /* display: none; */
">
                <nav class="flex" aria-label="Breadcrumb">
                  <div class="flex md:hidden">
                    <a href="#" class="group inline-flex space-x-2.5 items-center text-sm font-medium text-gray-500 hover:text-blue-600">
                      <svg class="flex-shrink-0 -mr-1 h-4 w-4 text-gray-400 group-hover:text-gray-600" x-description="Heroicon name: solid/arrow-sm-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" stroke="currentColor" fill="none" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12"></path>
                      </svg>

                      <span>Back to Projects</span>
                    </a>
                  </div>
                  <div class="hidden md:block">
                    <ol role="list" class="flex items-center space-x-3">

                      <li>
                        <div class="flex items-center">

                          <a href="#" class="text-sm font-medium text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-800">Projects</a>
                        </div>
                      </li>

                      <li>
                        <div class="flex items-center">
                          <svg class="flex-shrink-0 h-4 w-4 text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                            <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z"></path>
                          </svg>
                          <a href="#" class="ml-2 text-sm font-medium text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-800">Barcelona-backend</a>
                        </div>
                      </li>

                      <li>
                        <div class="flex items-center">
                          <svg class="flex-shrink-0 h-4 w-4 text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                            <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z"></path>
                          </svg>
                          <a href="#" class="ml-2 text-sm font-medium text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-800" aria-current="page">General</a>
                        </div>
                      </li>

                    </ol>
                  </div>
                </nav>
              </div>
              <h1 id="project-heading" class="text-2xl font-medium text-gray-900">
                mox-web
              </h1>
              <p class="mt-0.5 text-sm text-gray-500 truncate hidden">Subtext here, you can also use pill tags instead of text</p><span class="mt-0.5 block hidden">
                <a href="#" class="relative inline-flex items-center rounded-full bg-gray-100 pl-2 pr-3 py-0.5 text-xs">
                  <span class="absolute flex-shrink-0 flex items-center justify-center">
                    <span class="h-1.5 w-1.5 rounded-full bg-gray-400" aria-hidden="true"></span>
                  </span>
                  <span class="ml-3 font-medium text-gray-600 tracking-wide">Node.JS</span>
                </a>
                <a href="#" class="relative inline-flex items-center rounded-full bg-gray-100 pl-2 pr-3 py-0.5 text-xs">
                  <span class="absolute flex-shrink-0 flex items-center justify-center">
                    <span class="h-1.5 w-1.5 rounded-full bg-gray-400" aria-hidden="true"></span>
                  </span>
                  <span class="ml-3 font-medium text-gray-600 tracking-wide">Pyramid</span>
                </a>
              </span><!-- Breadcrumb -->
              <nav class="flex mt-0.5 hidden" aria-label="Breadcrumb">
                <ol role="list" class="flex items-center space-x-2">
                  <li>
                    <div class="flex items-center">
                      <a href="#" class="text-sm font-medium text-gray-500 hover:text-blue-600">

                        Projects
                      </a>
                    </div>
                  </li>

                  <li>
                    <div class="flex items-center">
                      <svg class="flex-shrink-0 h-4 w-4 text-gray-400 mt-0.5" x-description="Heroicon name: solid/chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                      </svg>
                      <a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-blue-600">mox-web</a>
                    </div>
                  </li>

                  <li>
                    <div class="flex items-center">
                      <svg class="flex-shrink-0 h-4 w-4 text-gray-400 mt-0.5" x-description="Heroicon name: solid/chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                      </svg>
                      <a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-blue-600" aria-current="page">General</a>
                    </div>
                  </li>

                </ol>
              </nav>

            </div>

            <!-- buttons -->
            <div class="flex items-center px-3 sm:flex-shrink-0 z-10 space-x-3"><button type="button" class="group inline-flex transition duration-300 button-ease justify-center px-2 py-2 border border-gray-300 text-sm font-medium rounded-full text-gray-600 bg-transparent hover:text-gray-700 hover:border-blue-300 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400">

                <svg class="h-5 w-5 text-gray-400 transition duration-300 button-ease group-hover:text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                </svg>

                <span class="hidden">Edit</span>
              </button>

              <button type="button" class="inline-flex transition duration-300 button-ease items-center px-2 md:px-4 py-2 md:py-2.5 border border-transparent text-sm font-medium rounded-full tracking-wide text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700">
                <svg class="md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4 text-blue-50" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                </svg>
                <span class="hidden md:block tracking-wide">New Project</span>
              </button>

            </div>
            <!-- ellipsis popup menu --->
            <div class="flex self-start items-center mt-3 sm:flex-shrink-0 z-10 hidden">
              <span class="hidden inline-flex items-center ml-6 px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800">
                Active
              </span>
              <div class="ml-3 relative inline-block text-left">
                <div>
                  <button type="button" class="transition duration-300 button-ease -my-2 p-2 rounded-full bg-transparent flex items-center border border-transparent text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400" id="menu-3-button" aria-expanded="false" aria-haspopup="true">
                    <span class="sr-only">Open options</span>
                    <!-- Heroicon name: solid/dots-vertical -->
                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
                    </svg>
                  </button>
                </div>

                <!--
                    Dropdown menu, show/hide based on menu state.

                    Entering: "transition ease-out duration-100"
                      From: "transform opacity-0 scale-95"
                      To: "transform opacity-100 scale-100"
                    Leaving: "transition ease-in duration-75"
                      From: "transform opacity-100 scale-100"
                      To: "transform opacity-0 scale-95"
                  -->
                <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none hidden" role="menu" aria-orientation="vertical" aria-labelledby="menu-3-button" tabindex="-1">
                  <div class="py-1" role="none">
                    <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
                    <button type="button" class="text-gray-700 w-full flex justify-between px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-3-item-0">
                      <span>Re-authorize Rollbot</span>
                    </button>
                    <a href="#" class="text-gray-700 flex justify-between px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-3-item-1">
                      <span>View events usage</span>
                    </a>
                    <a href="#" class="text-gray-700 flex justify-between px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-3-item-2">
                      <span>Manage billing</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--- Filters --->
        <div class="px-4 pt-4 pb-2 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-8 2xl:grid-cols-12 lg:grid-rows-none flex items-end justify-start gap-x-4 gap-y-1.5 md:gap-y-2.5 w-full z-10">
          <div class="col-span-full md:col-span-full 2xl:col-span-4 flex flex-col">
            <div class="flex flex-col justify-start items-start"><label for="project-search" class="block text-sm font-medium text-gray-700 leading-5 sr-only">Search</label>
              <div class="block w-full sm:col-span-2">
                <div class="mt-1 relative flex rounded-md shadow-none">
                  <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" aria-hidden="true">
                      <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
                    </svg></div><input id="project-search" type="search" class="block w-full shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md pl-10" data-testid="project-search" placeholder="Search">
                </div>
                <p class="mt-2 text-sm text-red-600 invisible hidden" id="project-search-error">&amp;nbsp</p>
              </div>
            </div>
          </div>
          <div class="col-span-full md:col-span-2 2xl:col-span-2 flex flex-col" data-testid="project-status-dropdown">
            <div><label class="text-xs leading-4 font-semibold tracking-wider uppercase text-gray-400" id="headlessui-listbox-label-1">Project Status</label>
              <div class="mt-0.5 relative sm:col-span-2 w-full"><button data-testid="dropdown-button" class="group relative w-full pl-3 pr-10 py-2 text-left cursor-default bg-white shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md" id="headlessui-listbox-button-2" type="button" aria-haspopup="true" aria-labelledby="headlessui-listbox-label-1 headlessui-listbox-button-2"><span class="flex justify-between"><span class="block truncate">Show all</span><span class="ml-2 truncate text-gray-500"></span></span><span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400 group-hover:text-gray-600" aria-hidden="true">
                      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                    </svg></span></button></div>
            </div>
          </div>
          <div class="col-span-full md:col-span-2 2xl:col-span-2 flex flex-col" data-testid="project-integration-dropdown">
            <div><label class="text-xs leading-4 font-semibold tracking-wider uppercase text-gray-400" id="headlessui-listbox-label-3">Integration</label>
              <div class="mt-0.5 relative sm:col-span-2 w-full"><button data-testid="dropdown-button" class="group relative w-full pl-3 pr-10 py-2 text-left cursor-default bg-white shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md" id="headlessui-listbox-button-4" type="button" aria-haspopup="true" aria-labelledby="headlessui-listbox-label-3 headlessui-listbox-button-4"><span class="flex justify-between"><span class="block truncate">Show all</span><span class="ml-2 truncate text-gray-500"></span></span><span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400 group-hover:text-gray-600" aria-hidden="true">
                      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                    </svg></span></button></div>
            </div>
          </div>

          <div class="col-span-full md:col-span-2 2xl:col-span-2 flex flex-col" data-testid="project-integration-dropdown">
            <div class=""><label class="text-xs leading-4 font-semibold tracking-wider uppercase text-gray-400" id="headlessui-listbox-label-3">Integration Status</label>
              <div class="mt-0.5 relative sm:col-span-2 w-full"><button data-testid="dropdown-button" class="group relative w-full pl-3 pr-10 py-2 text-left cursor-default bg-white shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md" id="headlessui-listbox-button-4" type="button" aria-haspopup="true" aria-labelledby="headlessui-listbox-label-3 headlessui-listbox-button-4"><span class="flex justify-between"><span class="block truncate">Show all</span><span class="ml-2 truncate text-gray-500"></span></span><span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400 group-hover:text-gray-600" aria-hidden="true">
                      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                    </svg></span></button></div>
            </div>
          </div>
          <div class="col-span-full md:col-span-2 2xl:col-span-2 flex flex-col self-center justify-self-end p-2 md:mt-5">
            <div class="relative inline-block text-left">
              <div>
                <button type="button" class="group inline-flex justify-center text-sm font-medium text-gray-500 hover:text-gray-600" id="menu-button" aria-expanded="false" aria-haspopup="true">
                  Last Created
                  <!-- Heroicon name: solid/chevron-down -->
                  <svg class="flex-shrink-0 -mr-1 ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                  </svg>
                </button>
              </div>

              <!--
              Dropdown menu, show/hide based on menu state.

              Entering: "transition ease-out duration-100"
                From: "transform opacity-0 scale-95"
                To: "transform opacity-100 scale-100"
              Leaving: "transition ease-in duration-75"
                From: "transform opacity-100 scale-100"
                To: "transform opacity-0 scale-95"
            -->
              <div class="origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1" style="
    display: none;
">
                <div class="py-1" role="none">
                  <!--
                  Active: "bg-gray-100", Not Active: ""

                  Selected: "font-medium text-gray-900", Not Selected: "text-gray-500"
                -->
                  <a href="#" class="font-medium text-gray-800 block px-4 py-2 text-sm hover:text-gray-700 focus:outline-none" role="menuitem" tabindex="-1" id="menu-item-0">
                    Most Popular
                  </a>

                  <a href="#" class="text-gray-500 block px-4 py-2 text-sm hover:text-gray-700 focus:outline-none" role="menuitem" tabindex="-1" id="menu-item-1">
                    Best Rating
                  </a>

                  <a href="#" class="text-gray-500 block px-4 py-2 text-sm hover:text-gray-700 focus:outline-none" role="menuitem" tabindex="-1" id="menu-item-2">
                    Newest
                  </a>

                  <a href="#" class="text-gray-500 block px-4 py-2 text-sm hover:text-gray-700 focus:outline-none" role="menuitem" tabindex="-1" id="menu-item-3">
                    Price: Low to High
                  </a>

                  <a href="#" class="text-gray-500 block px-4 py-2 text-sm hover:text-gray-700 focus:outline-none" role="menuitem" tabindex="-1" id="menu-item-4">
                    Price: High to Low
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Toolbar-->
        <div class="flex-shrink-0 bg-transparent border-b-0 border-gray-100 mt-2 hidden">

          <!-- Toolbar start -->
          <div class="h-16 flex flex-col justify-center">
            <div class="w-auto px-4 sm:px-6 lg:px-8">
              <div class="py-3 flex justify-end sm:justify-between">
                <!-- Left buttons -->
                <div>
                  <span class="relative z-0 inline-flex shadow-sm rounded-full shadow-none sm:space-x-3">
                    <span class="inline-flex shadow-none rounded-full">
                      <button type="button" class="group hidden transition duration-300 button-ease sm:inline-flex -ml-px relative items-center px-3 lg:px-3.5 py-2 rounded-l-full border border-gray-300 text-sm tracking-wide font-medium text-gray-600 bg-transparent hover:border-gray-400 hover:text-gray-800 focus:outline-none focus:ring-1 focus:ring-offset-0 focus:ring-blue-600 focus:border-blue-400" aria-label="View Project Items">
                        <!-- Heroicon name: solid/reply -->
                        <svg class="mr-1.5 lg:mr-2 h-4 w-4 text-gray-400 group-hover:text-gray-600" x-description="Heroicon name: solid/reply" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                          <path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>

                        <span>Action</span>
                      </button>
                      <button type="button" class="group hidden transition duration-300 button-ease sm:inline-flex -ml-px relative items-center px-3 lg:px-3.5 py-2 border border-gray-300 text-sm tracking-wide font-medium text-gray-600 bg-transparent hover:border-gray-400 hover:text-gray-800 focus:outline-none focus:ring-1 focus:ring-offset-0 focus:ring-blue-600 focus:border-blue-400" aria-label="Add Team">
                        <!-- Heroicon name: solid/pencil -->
                        <svg xmlns="http://www.w3.org/2000/svg" class="mr-1.5 lg:mr-2 h-5 w-5 text-gray-400 group-hover:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                        </svg>
                        <span>Team</span>
                      </button>
                      <button type="button" class="group hidden transition duration-300 button-ease sm:inline-flex -ml-px relative items-center px-3 lg:px-3.5 py-2 rounded-r-full border border-gray-300 text-sm tracking-wide font-medium text-gray-600 bg-transparent hover:border-gray-400 hover:text-gray-800 focus:outline-none focus:ring-1 focus:ring-offset-0 focus:ring-blue-600 focus:border-blue-400" aria-label="Invite User">
                        <!-- Heroicon name: solid/user-add -->
                        <svg class="mr-1.5 lg:mr-2 h-5 w-5 text-gray-400 group-hover:text-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                          <path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"></path>
                        </svg>
                        <span>Invite</span>
                      </button>
                    </span>

                    <span class="hidden lg:flex space-x-3">
                      <button class="hidden transition duration-300 button-ease sm:inline-flex -ml-px relative items-center px-3 lg:px-3.5 py-2 rounded-full border border-transparent bg-yellow-100 text-sm font-medium tracking-wide text-yellow-700 hover:bg-yellow-200 focus:z-10 focus:outline-none focus:ring-1 focus:ring-yellow-600 focus:border-yellow-400" type="button" aria-label="Transfer Project">
                        <!-- Heroicon name: line/switch horizontal -->
                        <svg xmlns="http://www.w3.org/2000/svg" class="mr-1.5 lg:mr-2 h-5 w-5 text-yellow-700" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
                        </svg>
                        <span>Transfer</span>
                      </button>
                      <button type="button" class="group hidden transition duration-300 button-ease sm:inline-flex -ml-px relative items-center px-3 lg:px-3.5 py-2 rounded-full border border-transparent bg-red-100 text-sm font-medium tracking-wide text-red-700 hover:bg-red-500 focus:z-10 focus:outline-none focus:ring-1 focus:ring-red-400 focus:border-red-700" aria-label="Delete Project">
                        <!-- Heroicon name: line/trash -->

                        <svg xmlns="http://www.w3.org/2000/svg" class="mr-1.5 lg:mr-2 h-5 w-5 text-red-600 group-hover:text-red-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                        </svg>

                        <span class="text-red-700 group-hover:text-red-50">Delete</span>
                      </button>
                    </span>

                    <span class="-ml-px relative block rounded-full shadow-none lg:hidden">
                      <div>
                        <button type="button" class="group relative transition duration-300 button-ease inline-flex items-center px-3.5 py-2 rounded-full border border-gray-300 bg-transparent text-sm font-medium text-gray-600 hover:border-gray-400 hover:text-gray-800 hover:bg-transparent focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400" id="menu-2-button" aria-expanded="false" aria-haspopup="true">
                          <span class="sr-only sm:hidden">More</span>
                          <span class="-mr-1 inline">More</span>
                          <!-- Heroicon name: solid/chevron-down -->
                          <svg class="h-5 w-5 text-gray-400 ml-2 mr-1 group-hover:text-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                          </svg>
                        </button>
                      </div>

                      <!--
                        Dropdown menu, show/hide based on menu state.

                        Entering: "transition ease-out duration-100"
                          From: "transform opacity-0 scale-95"
                          To: "transform opacity-100 scale-100"
                        Leaving: "transition ease-in duration-75"
                          From: "transform opacity-100 scale-100"
                          To: "transform opacity-0 scale-95"
                      -->
                      <div class="origin-top-right absolute right-0 mt-2 w-36 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-2-button" tabindex="-1">
                        <div class="py-1" role="none">
                          <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
                          <a href="#" class="text-gray-700 block sm:hidden px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-2-item-0">
                            Go to Items
                          </a>
                          <a href="#" class="text-gray-700 block sm:hidden px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-2-item-1">
                            Add Team
                          </a>
                          <a href="#" class="text-gray-700 block sm:hidden px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-2-item-1">
                            Invite User
                          </a><a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-2-item-2">
                            Transfer
                          </a>
                          <a href="#" class="text-red-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-2-item-3">
                            Delete Project
                          </a>
                        </div>
                      </div>
                    </span>
                  </span>
                </div>

                <!-- Right buttons -->
                <nav aria-label="Pagination">
                  <span class="relative ml-3 z-0 inline-flex shadow-none rounded-full">
                    <a href="#" class="group relative transition duration-300 button-ease inline-flex items-center px-3 py-2 rounded-l-full border border-gray-300 bg-transparent text-sm font-medium text-gray-600 hover:border-gray-400 hover:text-gray-800 hover:bg-transparent focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400">
                      <span class="sr-only">Next</span>
                      <!-- Heroicon name: solid/chevron-up -->
                      <svg class="h-5 w-5 text-gray-400 group-hover:text-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                      </svg>
                    </a>
                    <a href="#" class="group -ml-px relative transition duration-300 button-ease inline-flex items-center px-3 py-2 rounded-r-full border border-gray-300 bg-transparent text-sm font-medium text-gray-600 hover:border-gray-400 hover:text-gray-800 hover:bg-transparent focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400">
                      <span class="sr-only">Previous</span>
                      <!-- Heroicon name: solid/chevron-down -->
                      <svg class="h-5 w-5 text-gray-400 group-hover:text-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                      </svg>
                    </a>
                  </span>
                </nav>
              </div>
            </div>
          </div>

        </div>

        <!--- Content container --->
        <div class="min-h-0 flex-1 overflow-y-auto">

          <!-- Content section-->
          <div class="pt-0 pb-6 space-y-2 px-4 sm:px-6 lg:px-8 sm:space-y-4">

            <div class="mt-8 bg-white overflow-hidden rounded-md border border-blue-100">
              <ul role="list" class="divide-y divide-blue-100">
                <li>
                  <a href="#" class="block hover:bg-blue-50 focus:outline-none focus:bg-blue-50" aria-label="Edit Project Details" title="Edit Project Details">
                    <div class="flex items-center px-4 py-4 sm:px-6">
                      <div class="min-w-0 flex-1 flex items-center">
                        <!-- multiple --->
                        <div class="flex flex-shrink-0 -space-x-4 sm:-space-x-3 overflow-hidden items-center">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="inline-block h-8 sm:h-10 w-8 sm:w-10 rounded-lg ring-2 ring-white svgicon svgicon-frameworkpyramid">
                            <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path>
                            <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path>
                            <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path>
                            <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path>
                          </svg>
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-node-js" class="bg-white inline-block h-8 sm:h-10 w-8 sm:w-10 rounded-lg ring-2 ring-white svgicon svgicon-frameworknodejs">
                            <path fill="#83cd29" d="M463.6 113.4L276.9 5c-11.8-6.7-27.1-6.7-39 0L49.2 113.4c-12.2 7-20.8 20.1-20.8 34.2v216.5c0 14.1 8.8 27.2 21 34.2l49.9 28.3c23.8 11.7 32.3 11.7 43.1 11.7 35.3 0 55.4-21.3 55.4-58.6V166.1c0-3-1.6-7.5-4.5-7.5h-23.8c-3 0-9.8 4.5-9.8 7.5v213.8c0 16.5-14.9 32.9-42.8 19l-51.5-29.7c-1.8-1-3.1-2.9-3.1-5V147.6c0-2 2.4-4.1 4.2-5.1L254.6 34.3c1.8-1 4.3-1 6.1 0l185.8 108.2c1.8 1.1 1.2 3.1 1.2 5.2v216.5c0 2.1.8 4.1-1 5.1L260 477.5c-1.6 1-3.6 1-5.3 0L206.8 449c-1.4-.8-3.2-1.1-4.5-.4-13.3 7.5-15.8 8.6-28.3 12.9-3.1 1.1-7.6 2.9 1.7 8.2l62.7 37.1c6 3.5 12.8 5.3 19.7 5.3 7 0 13.8-1.8 19.8-5.3l185.8-108.3c12.2-7.1 17.9-20.2 17.9-34.2V147.6c-.1-14-5.8-27.1-18-34.2zM316 329.9c-49.7 0-60.6-13.7-64.2-38.4-.4-2.7-2.7-5.8-5.4-5.8h-24.3c-3 0-5.4 3.6-5.4 6.6 0 31.6 17.2 69.9 99.3 69.9 59.4 0 93.5-23.1 93.5-64 0-40.5-27.4-51.2-85-58.8-58.3-7.7-64.2-11.6-64.2-25.2 0-11.3 5-26.3 48.2-26.3 38.6 0 52.8 8.3 58.6 34.3.5 2.4 2.7 4.2 5.3 4.2h24.4c1.5 0 2.9-.6 4-1.7 1-1.2 1.6-2.6 1.4-4.1-3.8-44.7-33.5-65.6-93.6-65.6-53.5 0-85.4 22.6-85.4 60.4 0 41.1 31.7 52.4 83.1 57.5 61.4 6 66.2 15 66.2 27.1-.1 20.9-17 29.9-56.5 29.9z"></path>
                          </svg>
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-browser-js" class="bg-white inline-block h-8 sm:h-10 w-8 sm:w-10 rounded-lg ring-2 ring-white svgicon svgicon-frameworkbrowserjs ">
                            <path fill="#f0db4f" d="M0 0h512v512H0z"></path>
                            <path fill="#323330" d="M470.1 389.89c-3.75-23.36-19-43-64.1-61.28-15.67-7.2-33.15-12.35-38.35-24.23-1.85-6.91-2.1-10.81-.93-15 3.36-13.58 19.57-17.81 32.42-13.92 8.27 2.77 16.1 9.15 20.83 19.32 22.09-14.31 22-14.21 37.47-24-5.64-8.76-8.66-12.8-12.36-16.55-13.28-14.84-31.39-22.48-60.35-21.9l-15.08 1.95c-14.46 3.65-28.23 11.24-36.31 21.41-24.24 27.5-17.32 75.63 12.17 95.44 29.05 21.81 71.74 26.77 77.19 47.16 5.3 25-18.35 33.05-41.86 30.18-17.32-3.6-27-12.41-37.38-28.42-19.17 11.09-19.17 11.09-38.88 22.43 4.67 10.22 9.58 14.85 17.42 23.7 37.09 37.62 129.9 35.77 146.54-21.17.68-2.01 5.16-15.01 1.56-35.12zM278.34 235.32h-47.89l-.2 123.81c0 26.33 1.37 50.47-2.92 57.86-7 14.56-25.16 12.75-33.43 9.93-8.42-4.14-12.71-10-17.67-18.34-1.36-2.39-2.38-4.24-2.72-4.38L134.57 428c6.47 13.29 16 24.82 28.23 32.32 18.25 10.95 42.77 14.31 68.43 8.42 16.69-4.87 31.1-14.94 38.64-30.27 10.9-20.1 8.56-44.44 8.47-71.35.24-43.86 0-87.76 0-131.8z"></path>
                          </svg>

                        </div>

                        <!-- single --->
                        <div class="flex-shrink-0 ml-4 hidden">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="flex-shrink-0 h-11 w-11 rounded-lg svgicon svgicon-frameworkpyramid ">
                            <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path>
                            <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path>
                            <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path>
                            <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path>
                          </svg>

                        </div>
                        <div class="min-w-0 flex-1 pl-4 grid grid-cols-2 md:grid-cols-8 md:gap-4 gap-y-3">
                          <div class="md:col-span-5">
                            <p class="text-md leading-5 font-semibold tracking-wide text-gray-700 capitalize truncate">mox-web</p>
                            <p class="flex items-center text-sm text-gray-400">
                              <!-- Heroicon name: solid/mail -->
                              <svg class="hidden flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
                                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
                              </svg>
                              <span class="mr-1 truncate hidden sm:block">No description</span>
                              <span class="text-gray-600 truncate">∙ Europe-Madrid UTC+1 ∙ 24h clock</span>
                            </p>
                          </div>
                          <div class="md:col-span-3 /*hidden*/ h-full block text-sm text-blue-600 capitalize">
                            <div class="flex flex-col justify-center items-end h-full">

                              <!-- Toggle DEMO only: On -->
                              <button type="button" class="hidden relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-600 bg-blue-600" x-data="{ on: false }" role="switch" aria-checked="true" :aria-checked="on.toString()" @click="on = !on" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'bg-indigo-600': on, 'bg-gray-200': !(on) }">
                                <span class="sr-only">Use setting</span>
                                <span class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 translate-x-5" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'translate-x-5': on, 'translate-x-0': !(on) }">
                                  <span class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-0 ease-out duration-100" aria-hidden="true" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'opacity-0 ease-out duration-100': on, 'opacity-100 ease-in duration-200': !(on) }">
                                    <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
                                      <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                  </span>
                                  <span class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-100 ease-in duration-200" aria-hidden="true" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'opacity-100 ease-in duration-200': on, 'opacity-0 ease-out duration-100': !(on) }">
                                    <svg class="h-3 w-3 text-blue-600" fill="currentColor" viewBox="0 0 12 12">
                                      <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"></path>
                                    </svg>
                                  </span>
                                </span>
                              </button>

                              <!-- Toggle Default: Off -->
                              <!-- Enabled: "bg-blue-600", Not Enabled: "bg-gray-200" -->
                              <button type="button" class="hidden bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-600" role="switch" aria-checked="false">
                                <span class="sr-only">Use setting</span>
                                <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
                                <span class="translate-x-0 pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200">
                                  <!-- Enabled: "opacity-0 ease-out duration-100", Not Enabled: "opacity-100 ease-in duration-200" -->
                                  <span class="opacity-100 ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" aria-hidden="true">
                                    <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
                                      <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                  </span>
                                  <!-- Enabled: "opacity-100 ease-in duration-200", Not Enabled: "opacity-0 ease-out duration-100" -->
                                  <span class="opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" aria-hidden="true">
                                    <svg class="h-3 w-3 text-blue-600" fill="currentColor" viewBox="0 0 12 12">
                                      <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"></path>
                                    </svg>
                                  </span>
                                </span>
                              </button>

                              <!-- Button -->
                              <button type="button" class="group inline-flex items-center transition duration-300 button-ease shadow-none px-3.5 py-2 border border-gray-300 text-sm leading-5 tracking-wide font-medium text-gray-600 bg-transparent rounded-full hover:border-blue-300 hover:text-gray-800 focus:outline-none focus:ring-1 focus:ring-offset-0 focus:ring-blue-600 focus:border-blue-400">Edit<span class="hidden sm:flex">&nbsp;Details</span></button>

                              <!-- Text -->
                              <p class="hidden font-semibold tracking-widest">View access tokens</p>
                              <p class="hidden mt-2 flex items-center">
                                <!-- Heroicon name: solid/check-circle -->
                                <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                </svg>View access tokens
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="hidden">
                        <!-- Heroicon name: solid/chevron-right -->
                        <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                        </svg>
                      </div>
                    </div>
                  </a>
                </li>

                <li>
                  <a href="#" class="block hover:bg-blue-50 focus:outline-none focus:bg-blue-50" aria-label="Enable or Disable Project" title="Enable or Disable Project">
                    <div class="flex items-center px-4 py-4 sm:px-6">
                      <div class="min-w-0 flex-1 flex items-center">
                        <div class="hidden flex-shrink-0">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="flex-shrink-0 h-12 w-12 rounded-sm svgicon svgicon-frameworkpyramid ">
                            <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path>
                            <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path>
                            <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path>
                            <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path>
                          </svg>
                          <img class="hidden h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
                        </div>
                        <div class="min-w-0 flex-1 grid grid-cols-5 md:grid-cols-8 md:gap-4">
                          <div class="col-span-3 md:col-span-5">
                            <p class="text-md leading-5 font-semibold tracking-wide text-gray-700 capitalize truncate">Project status</p>
                            <p class="flex items-center text-sm text-gray-400">
                              <!-- Heroicon name: solid/mail -->
                              <svg class="hidden flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
                                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
                              </svg>
                              <span class="mr-1 truncate">Project sending data to Rollbar</span>
                              <span class="text-gray-600 truncate">∙ Enabled</span>
                            </p>
                          </div>
                          <div class="col-span-2 md:col-span-3 /*hidden*/ h-full block text-sm text-blue-600 capitalize">
                            <div class="flex flex-col justify-center items-end h-full">

                              <!-- Toggle DEMO only: On -->
                              <button type="button" class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-600 bg-blue-600" x-data="{ on: false }" role="switch" aria-checked="true" :aria-checked="on.toString()" @click="on = !on" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'bg-indigo-600': on, 'bg-gray-200': !(on) }">
                                <span class="sr-only">Use setting</span>
                                <span class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 translate-x-5" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'translate-x-5': on, 'translate-x-0': !(on) }">
                                  <span class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-0 ease-out duration-100" aria-hidden="true" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'opacity-0 ease-out duration-100': on, 'opacity-100 ease-in duration-200': !(on) }">
                                    <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
                                      <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                  </span>
                                  <span class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-100 ease-in duration-200" aria-hidden="true" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'opacity-100 ease-in duration-200': on, 'opacity-0 ease-out duration-100': !(on) }">
                                    <svg class="h-3 w-3 text-blue-600" fill="currentColor" viewBox="0 0 12 12">
                                      <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"></path>
                                    </svg>
                                  </span>
                                </span>
                              </button>

                              <!-- Toggle Default: Off -->
                              <!-- Enabled: "bg-blue-600", Not Enabled: "bg-gray-200" -->
                              <button type="button" class="hidden bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-600" role="switch" aria-checked="false">
                                <span class="sr-only">Use setting</span>
                                <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
                                <span class="translate-x-0 pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200">
                                  <!-- Enabled: "opacity-0 ease-out duration-100", Not Enabled: "opacity-100 ease-in duration-200" -->
                                  <span class="opacity-100 ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" aria-hidden="true">
                                    <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
                                      <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                  </span>
                                  <!-- Enabled: "opacity-100 ease-in duration-200", Not Enabled: "opacity-0 ease-out duration-100" -->
                                  <span class="opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" aria-hidden="true">
                                    <svg class="h-3 w-3 text-blue-600" fill="currentColor" viewBox="0 0 12 12">
                                      <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"></path>
                                    </svg>
                                  </span>
                                </span>
                              </button>

                              <!-- Button -->
                              <button type="button" class="hidden group inline-flex items-center border transition duration-300 button-ease shadow-none px-3.5 py-2 border border-gray-400 text-sm leading-5 tracking-wider font-semibold text-gray-600 bg-white rounded-3xl hover:bg-white hover:border-2 hover:border-blue-300 hover:text-gray-800 focus:outline-none focus:ring-3 focus:ring-offset-1 focus:ring-offset-white focus:ring-blue-300 focus:border-blue-300">Edit Details</button>

                              <!-- Text -->
                              <p class="hidden font-semibold tracking-widest">View access tokens</p>
                              <p class="hidden mt-2 flex items-center">
                                <!-- Heroicon name: solid/check-circle -->
                                <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                </svg>View access tokens
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="hidden">
                        <!-- Heroicon name: solid/chevron-right -->
                        <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                        </svg>
                      </div>
                    </div>
                  </a>
                </li>

              </ul>
            </div>
            <div class="mt-8 bg-white overflow-hidden rounded-md border border-blue-100">
              <ul role="list" class="divide-y divide-blue-100">
                <li>
                  <a href="#" class="block hover:bg-blue-50 focus:outline-none focus:bg-blue-50" aria-label="View Access Tokens" title="View Access Tokens">
                    <div class="flex items-center px-4 py-4 sm:px-6">
                      <div class="min-w-0 flex-1 flex items-center">
                        <div class="hidden flex-shrink-0">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="flex-shrink-0 h-12 w-12 rounded-sm svgicon svgicon-frameworkpyramid ">
                            <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path>
                            <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path>
                            <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path>
                            <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path>
                          </svg>
                          <img class="hidden h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
                        </div>
                        <div class="min-w-0 flex-1 md:grid md:grid-cols-8 md:gap-4">
                          <div class="md:col-span-5">
                            <p class="text-md leading-5 font-semibold tracking-wide text-gray-700 capitalize truncate">Project access token</p>
                            <p class="flex items-center text-sm text-gray-400">
                              <!-- Heroicon name: solid/mail -->
                              <svg class="flex-shrink-0 mr-1 h-4 w-4 text-green-400" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                              </svg>
                              <span class="mr-1 truncate">52,698 requests processed</span>
                              <span class="text-gray-600 truncate">∙ 4 Active tokens</span>
                            </p>
                          </div>
                          <div class="md:col-span-3 hidden h-full md:block text-sm text-blue-600 capitalize">
                            <div class="flex flex-col justify-center items-end h-full">

                              <!-- Toggle DEMO only: On -->
                              <button type="button" class="hidden relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-600 bg-blue-600" x-data="{ on: false }" role="switch" aria-checked="true" :aria-checked="on.toString()" @click="on = !on" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'bg-indigo-600': on, 'bg-gray-200': !(on) }">
                                <span class="sr-only">Use setting</span>
                                <span class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 translate-x-5" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'translate-x-5': on, 'translate-x-0': !(on) }">
                                  <span class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-0 ease-out duration-100" aria-hidden="true" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'opacity-0 ease-out duration-100': on, 'opacity-100 ease-in duration-200': !(on) }">
                                    <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
                                      <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                  </span>
                                  <span class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-100 ease-in duration-200" aria-hidden="true" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'opacity-100 ease-in duration-200': on, 'opacity-0 ease-out duration-100': !(on) }">
                                    <svg class="h-3 w-3 text-blue-600" fill="currentColor" viewBox="0 0 12 12">
                                      <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"></path>
                                    </svg>
                                  </span>
                                </span>
                              </button>

                              <!-- Toggle Default: Off -->
                              <!-- Enabled: "bg-blue-600", Not Enabled: "bg-gray-200" -->
                              <button type="button" class="hidden bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-600" role="switch" aria-checked="false">
                                <span class="sr-only">Use setting</span>
                                <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
                                <span class="translate-x-0 pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200">
                                  <!-- Enabled: "opacity-0 ease-out duration-100", Not Enabled: "opacity-100 ease-in duration-200" -->
                                  <span class="opacity-100 ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" aria-hidden="true">
                                    <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
                                      <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                  </span>
                                  <!-- Enabled: "opacity-100 ease-in duration-200", Not Enabled: "opacity-0 ease-out duration-100" -->
                                  <span class="opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" aria-hidden="true">
                                    <svg class="h-3 w-3 text-blue-600" fill="currentColor" viewBox="0 0 12 12">
                                      <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"></path>
                                    </svg>
                                  </span>
                                </span>
                              </button>

                              <!-- Button -->
                              <button type="button" class="hidden group inline-flex items-center border transition duration-300 button-ease shadow-none px-3.5 py-2 border border-gray-400 text-sm leading-5 tracking-wider font-semibold text-gray-600 bg-white rounded-3xl hover:bg-white hover:border-2 hover:border-blue-300 hover:text-gray-800 focus:outline-none focus:ring-3 focus:ring-offset-1 focus:ring-offset-white focus:ring-blue-300 focus:border-blue-300">Edit Details</button>

                              <!-- Text -->
                              <p class="font-medium tracking-wide">View access tokens</p>
                              <p class="hidden mt-2 flex items-center">
                                <!-- Heroicon name: solid/check-circle -->
                                <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                </svg>View access tokens
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div>
                        <!-- Heroicon name: solid/chevron-right -->
                        <svg class="ml-2 mt-0.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                        </svg>
                      </div>
                    </div>
                  </a>
                </li>

                <li>
                  <a href="#" class="block hover:bg-blue-50 focus:outline-none focus:bg-blue-50" aria-label="Configure Environments" title="Configure Environments">
                    <div class="flex items-center px-4 py-4 sm:px-6">
                      <div class="min-w-0 flex-1 flex items-center">
                        <div class="hidden flex-shrink-0">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="flex-shrink-0 h-12 w-12 rounded-sm svgicon svgicon-frameworkpyramid ">
                            <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path>
                            <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path>
                            <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path>
                            <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path>
                          </svg>
                          <img class="hidden h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
                        </div>
                        <div class="min-w-0 flex-1 md:grid md:grid-cols-8 md:gap-4">
                          <div class="md:col-span-5">
                            <p class="text-md leading-5 font-semibold tracking-wide text-gray-700 capitalize truncate">Environments and Auto-Resolve Rules</p>
                            <p class="flex items-center text-sm text-gray-400">
                              <!-- Heroicon name: solid/mail -->
                              <svg class="hidden flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
                                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
                              </svg>
                              <span class="mr-1 truncate">5 visible environments</span>
                              <span class="text-gray-600 truncate">∙ Auto-Resolve is enabled</span>
                            </p>
                          </div>
                          <div class="md:col-span-3 hidden h-full md:block text-sm text-blue-600 capitalize">
                            <div class="flex flex-col justify-center items-end h-full">

                              <!-- Toggle DEMO only: On -->
                              <button type="button" class="hidden relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-600 bg-blue-600" x-data="{ on: false }" role="switch" aria-checked="true" :aria-checked="on.toString()" @click="on = !on" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'bg-indigo-600': on, 'bg-gray-200': !(on) }">
                                <span class="sr-only">Use setting</span>
                                <span class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 translate-x-5" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'translate-x-5': on, 'translate-x-0': !(on) }">
                                  <span class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-0 ease-out duration-100" aria-hidden="true" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'opacity-0 ease-out duration-100': on, 'opacity-100 ease-in duration-200': !(on) }">
                                    <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
                                      <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                  </span>
                                  <span class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-100 ease-in duration-200" aria-hidden="true" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'opacity-100 ease-in duration-200': on, 'opacity-0 ease-out duration-100': !(on) }">
                                    <svg class="h-3 w-3 text-blue-600" fill="currentColor" viewBox="0 0 12 12">
                                      <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"></path>
                                    </svg>
                                  </span>
                                </span>
                              </button>

                              <!-- Toggle Default: Off -->
                              <!-- Enabled: "bg-blue-600", Not Enabled: "bg-gray-200" -->
                              <button type="button" class="hidden bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-600" role="switch" aria-checked="false">
                                <span class="sr-only">Use setting</span>
                                <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
                                <span class="translate-x-0 pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200">
                                  <!-- Enabled: "opacity-0 ease-out duration-100", Not Enabled: "opacity-100 ease-in duration-200" -->
                                  <span class="opacity-100 ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" aria-hidden="true">
                                    <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
                                      <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                  </span>
                                  <!-- Enabled: "opacity-100 ease-in duration-200", Not Enabled: "opacity-0 ease-out duration-100" -->
                                  <span class="opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" aria-hidden="true">
                                    <svg class="h-3 w-3 text-blue-600" fill="currentColor" viewBox="0 0 12 12">
                                      <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"></path>
                                    </svg>
                                  </span>
                                </span>
                              </button>

                              <!-- Button -->
                              <button type="button" class="hidden group inline-flex items-center border transition duration-300 button-ease shadow-none px-3.5 py-2 border border-gray-400 text-sm leading-5 tracking-wider font-semibold text-gray-600 bg-white rounded-3xl hover:bg-white hover:border-2 hover:border-blue-300 hover:text-gray-800 focus:outline-none focus:ring-3 focus:ring-offset-1 focus:ring-offset-white focus:ring-blue-300 focus:border-blue-300">Edit Details</button>

                              <!-- Text -->
                              <p class="font-medium tracking-wide">Configure Environments</p>
                              <p class="hidden mt-2 flex items-center">
                                <!-- Heroicon name: solid/check-circle -->
                                <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                </svg>View access tokens
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div>
                        <!-- Heroicon name: solid/chevron-right -->
                        <svg class="ml-2 mt-0.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                        </svg>
                      </div>
                    </div>
                  </a>
                </li>

              </ul>
            </div>
            <div class="mt-8 bg-white overflow-hidden rounded-md border border-blue-100">
              <ul role="list" class="divide-y divide-blue-100">
                <li>
                  <a href="#" class="block hover:bg-blue-50 focus:outline-none focus:bg-blue-50" aria-label="Edit Deploys Timeout" title="Edit Deploys Timeout">
                    <div class="flex items-center px-4 py-4 sm:px-6">
                      <div class="min-w-0 flex-1 flex items-center">
                        <div class="hidden flex-shrink-0">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="flex-shrink-0 h-12 w-12 rounded-sm svgicon svgicon-frameworkpyramid ">
                            <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path>
                            <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path>
                            <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path>
                            <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path>
                          </svg>
                          <img class="hidden h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
                        </div>
                        <div class="min-w-0 flex-1 grid grid-cols-1 gap-y-3 sm:grid-cols-8 md:gap-4 justify-start">
                          <div class="sm:col-span-5">
                            <p class="text-md leading-5 font-semibold tracking-wide text-gray-700 capitalize truncate">Deploys timeout</p>
                            <p class="flex items-center text-sm text-gray-400">
                              <!-- Heroicon name: solid/mail -->
                              <svg class="hidden flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
                                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
                              </svg>
                              <span class="mr-1 truncate">Configure timeout for reported deploys</span>
                              <span class="text-gray-600 truncate">∙ Timeout 60min</span>
                            </p>
                          </div>
                          <div class="sm:col-span-3 /*hidden*/ h-full block text-sm text-blue-600 capitalize">
                            <div class="flex flex-col justify-center items-start sm:items-end h-full">

                              <!-- Toggle DEMO only: On -->
                              <button type="button" class="hidden relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-600 bg-blue-600" x-data="{ on: false }" role="switch" aria-checked="true" :aria-checked="on.toString()" @click="on = !on" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'bg-indigo-600': on, 'bg-gray-200': !(on) }">
                                <span class="sr-only">Use setting</span>
                                <span class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 translate-x-5" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'translate-x-5': on, 'translate-x-0': !(on) }">
                                  <span class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-0 ease-out duration-100" aria-hidden="true" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'opacity-0 ease-out duration-100': on, 'opacity-100 ease-in duration-200': !(on) }">
                                    <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
                                      <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                  </span>
                                  <span class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-100 ease-in duration-200" aria-hidden="true" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'opacity-100 ease-in duration-200': on, 'opacity-0 ease-out duration-100': !(on) }">
                                    <svg class="h-3 w-3 text-blue-600" fill="currentColor" viewBox="0 0 12 12">
                                      <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"></path>
                                    </svg>
                                  </span>
                                </span>
                              </button>

                              <!-- Toggle Default: Off -->
                              <!-- Enabled: "bg-blue-600", Not Enabled: "bg-gray-200" -->
                              <button type="button" class="hidden bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-600" role="switch" aria-checked="false">
                                <span class="sr-only">Use setting</span>
                                <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
                                <span class="translate-x-0 pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200">
                                  <!-- Enabled: "opacity-0 ease-out duration-100", Not Enabled: "opacity-100 ease-in duration-200" -->
                                  <span class="opacity-100 ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" aria-hidden="true">
                                    <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
                                      <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                  </span>
                                  <!-- Enabled: "opacity-100 ease-in duration-200", Not Enabled: "opacity-0 ease-out duration-100" -->
                                  <span class="opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" aria-hidden="true">
                                    <svg class="h-3 w-3 text-blue-600" fill="currentColor" viewBox="0 0 12 12">
                                      <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"></path>
                                    </svg>
                                  </span>
                                </span>
                              </button>

                              <!-- Button -->
                              <button type="button" class="group inline-flex items-center transition duration-300 button-ease shadow-none px-3.5 py-2 border border-gray-300 text-sm leading-5 tracking-wide font-medium text-gray-600 bg-transparent rounded-full hover:border-gray-500 hover:text-gray-800 focus:outline-none focus:ring-1 focus:ring-offset-0 focus:ring-blue-600 focus:border-blue-400">Edit Timeout</button>

                              <!-- Text -->
                              <p class="hidden font-semibold tracking-widest">View access tokens</p>
                              <p class="hidden mt-2 flex items-center">
                                <!-- Heroicon name: solid/check-circle -->
                                <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                </svg>View access tokens
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="hidden">
                        <!-- Heroicon name: solid/chevron-right -->
                        <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                        </svg>
                      </div>
                    </div>
                  </a>
                </li>

              </ul>
            </div>
            <div class="mt-8 bg-white overflow-hidden rounded-md border border-blue-100">
              <ul role="list" class="divide-y divide-blue-100">
                <li>
                  <a href="#" class="block hover:bg-blue-50 focus:outline-none focus:bg-blue-50" aria-label="Transfer Project" title="Transfer Project">
                    <div class="flex items-center px-4 py-4 sm:px-6">
                      <div class="min-w-0 flex-1 flex items-center">
                        <div class="hidden flex-shrink-0">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="flex-shrink-0 h-12 w-12 rounded-sm svgicon svgicon-frameworkpyramid ">
                            <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path>
                            <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path>
                            <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path>
                            <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path>
                          </svg>
                          <img class="hidden h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
                        </div>
                        <div class="min-w-0 flex-1 grid grid-cols-1 gap-y-3 sm:grid-cols-8 md:gap-4">
                          <div class=" sm:col-span-5">
                            <p class="text-md leading-5 font-semibold tracking-wide text-gray-700 capitalize truncate">Transfer Project</p>
                            <p class="flex items-center text-sm text-gray-400">
                              <!-- Heroicon name: solid/mail -->
                              <svg class="hidden flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
                                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
                              </svg>
                              <span class="mr-1 truncate">You may transfer projects between any two accounts your own</span>
                              <span class="hidden text-gray-500 truncate">∙ Timeout 60min</span>
                            </p>
                          </div>
                          <div class="sm:col-span-3 /*hidden*/ h-full md:block text-sm text-blue-600 capitalize">
                            <div class="flex flex-col justify-center items-start sm:items-end h-full">

                              <!-- Toggle DEMO only: On -->
                              <button type="button" class="hidden relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-600 bg-blue-600" x-data="{ on: false }" role="switch" aria-checked="true" :aria-checked="on.toString()" @click="on = !on" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'bg-indigo-600': on, 'bg-gray-200': !(on) }">
                                <span class="sr-only">Use setting</span>
                                <span class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 translate-x-5" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'translate-x-5': on, 'translate-x-0': !(on) }">
                                  <span class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-0 ease-out duration-100" aria-hidden="true" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'opacity-0 ease-out duration-100': on, 'opacity-100 ease-in duration-200': !(on) }">
                                    <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
                                      <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                  </span>
                                  <span class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-100 ease-in duration-200" aria-hidden="true" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'opacity-100 ease-in duration-200': on, 'opacity-0 ease-out duration-100': !(on) }">
                                    <svg class="h-3 w-3 text-blue-600" fill="currentColor" viewBox="0 0 12 12">
                                      <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"></path>
                                    </svg>
                                  </span>
                                </span>
                              </button>

                              <!-- Toggle Default: Off -->
                              <!-- Enabled: "bg-blue-600", Not Enabled: "bg-gray-200" -->
                              <button type="button" class="hidden bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-600" role="switch" aria-checked="false">
                                <span class="sr-only">Use setting</span>
                                <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
                                <span class="translate-x-0 pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200">
                                  <!-- Enabled: "opacity-0 ease-out duration-100", Not Enabled: "opacity-100 ease-in duration-200" -->
                                  <span class="opacity-100 ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" aria-hidden="true">
                                    <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
                                      <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                  </span>
                                  <!-- Enabled: "opacity-100 ease-in duration-200", Not Enabled: "opacity-0 ease-out duration-100" -->
                                  <span class="opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" aria-hidden="true">
                                    <svg class="h-3 w-3 text-blue-600" fill="currentColor" viewBox="0 0 12 12">
                                      <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"></path>
                                    </svg>
                                  </span>
                                </span>
                              </button>

                              <!-- Button -->
                              <button type="button" class="group inline-flex items-center transition duration-300 button-ease shadow-none px-3.5 py-2 border border-transparent text-sm leading-5 tracking-wide font-medium text-yellow-700 bg-yellow-100 rounded-3xl hover:bg-yellow-200 hover:text-yellow-700 focus:outline-none focus:ring-1 focus:ring-offset-0 focus:ring-yellow-600 focus:border-yellow-400">Transfer Project</button>

                              <!-- Text -->
                              <p class="hidden font-semibold tracking-widest">View access tokens</p>
                              <p class="hidden mt-2 flex items-center">
                                <!-- Heroicon name: solid/check-circle -->
                                <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                </svg>View access tokens
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="hidden">
                        <!-- Heroicon name: solid/chevron-right -->
                        <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                        </svg>
                      </div>
                    </div>
                  </a>
                </li>

                <li>
                  <a href="#" class="block hover:bg-blue-50 focus:outline-none focus:bg-blue-50" aria-label="Delete Project" title="Delete Project">
                    <div class="flex items-center px-4 py-4 sm:px-6">
                      <div class="min-w-0 flex-1 flex items-center">
                        <div class="hidden flex-shrink-0">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="flex-shrink-0 h-12 w-12 rounded-sm svgicon svgicon-frameworkpyramid ">
                            <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path>
                            <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path>
                            <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path>
                            <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path>
                          </svg>
                          <img class="hidden h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
                        </div>
                        <div class="min-w-0 flex-1 grid grid-cols-1 gap-y-3 sm:grid-cols-8 md:gap-4">
                          <div class="sm:col-span-5">
                            <p class="text-md leading-5 font-semibold tracking-wide text-gray-700 capitalize truncate">Delete Project</p>
                            <p class="flex items-center text-sm text-gray-400">
                              <!-- Heroicon name: solid/mail -->
                              <svg class="hidden flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
                                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
                              </svg>
                              <span class="mr-1 truncate">Permanently delete this project and all related data. You can't undo this action</span>
                              <span class="hidden text-gray-500 truncate">∙ Timeout 60min</span>
                            </p>
                          </div>
                          <div class="col-span-2 sm:col-span-3 /*hidden*/ h-full block text-sm text-blue-600 capitalize">
                            <div class="flex flex-col justify-center items-start sm:items-end h-full">

                              <!-- Toggle DEMO only: On -->
                              <button type="button" class="hidden relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-600 bg-blue-600" x-data="{ on: false }" role="switch" aria-checked="true" :aria-checked="on.toString()" @click="on = !on" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'bg-indigo-600': on, 'bg-gray-200': !(on) }">
                                <span class="sr-only">Use setting</span>
                                <span class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 translate-x-5" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'translate-x-5': on, 'translate-x-0': !(on) }">
                                  <span class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-0 ease-out duration-100" aria-hidden="true" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'opacity-0 ease-out duration-100': on, 'opacity-100 ease-in duration-200': !(on) }">
                                    <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
                                      <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                  </span>
                                  <span class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-100 ease-in duration-200" aria-hidden="true" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'opacity-100 ease-in duration-200': on, 'opacity-0 ease-out duration-100': !(on) }">
                                    <svg class="h-3 w-3 text-blue-600" fill="currentColor" viewBox="0 0 12 12">
                                      <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"></path>
                                    </svg>
                                  </span>
                                </span>
                              </button>

                              <!-- Toggle Default: Off -->
                              <!-- Enabled: "bg-blue-600", Not Enabled: "bg-gray-200" -->
                              <button type="button" class="hidden bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-600" role="switch" aria-checked="false">
                                <span class="sr-only">Use setting</span>
                                <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
                                <span class="translate-x-0 pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200">
                                  <!-- Enabled: "opacity-0 ease-out duration-100", Not Enabled: "opacity-100 ease-in duration-200" -->
                                  <span class="opacity-100 ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" aria-hidden="true">
                                    <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
                                      <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                  </span>
                                  <!-- Enabled: "opacity-100 ease-in duration-200", Not Enabled: "opacity-0 ease-out duration-100" -->
                                  <span class="opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" aria-hidden="true">
                                    <svg class="h-3 w-3 text-blue-600" fill="currentColor" viewBox="0 0 12 12">
                                      <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"></path>
                                    </svg>
                                  </span>
                                </span>
                              </button>

                              <!-- Button -->
                              <button type="button" class="group inline-flex items-center transition duration-300 button-ease shadow-none px-3.5 py-2 border border-transparent text-sm leading-5 tracking-wide font-medium text-red-700 bg-red-100 rounded-3xl hover:bg-red-500 hover:text-red-50 focus:outline-none focus:ring-1 focus:ring-red-700 focus:border-red-400">Delete Project</button>

                              <!-- Text -->
                              <p class="hidden font-semibold tracking-widest">View access tokens</p>
                              <p class="hidden mt-2 flex items-center">
                                <!-- Heroicon name: solid/check-circle -->
                                <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                </svg>View access tokens
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="hidden">
                        <!-- Heroicon name: solid/chevron-right -->
                        <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                        </svg>
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <ul role="list" class="hidden py-4 space-y-2 sm:px-6 sm:space-y-4 lg:px-8">
            <li class="bg-white px-4 py-6 shadow sm:rounded-lg sm:px-6">
              <div class="sm:flex sm:justify-between sm:items-baseline">
                <h3 class="text-base font-medium">
                  <span class="text-gray-900">Joe Armstrong</span>
                  <span class="text-gray-600">wrote</span>
                </h3>
                <p class="mt-1 text-sm text-gray-600 whitespace-nowrap sm:mt-0 sm:ml-3">
                  <time datetime="2021-01-28T19:24">Yesterday at 7:24am</time>
                </p>
              </div>
              <div class="mt-4 space-y-6 text-sm text-gray-800">
                <p>Thanks so much! Can't wait to try it out.</p>
              </div>
            </li>

            <li class="bg-white px-4 py-6 shadow sm:rounded-lg sm:px-6">
              <div class="sm:flex sm:justify-between sm:items-baseline">
                <h3 class="text-base font-medium">
                  <span class="text-gray-900">Monica White</span>
                  <span class="text-gray-600">wrote</span>
                </h3>
                <p class="mt-1 text-sm text-gray-600 whitespace-nowrap sm:mt-0 sm:ml-3">
                  <time datetime="2021-01-27T16:35">Wednesday at 4:35pm</time>
                </p>
              </div>
              <div class="mt-4 space-y-6 text-sm text-gray-800">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada at ultricies tincidunt elit et, enim. Habitant nunc, adipiscing non fermentum, sed est a, aliquet. Lorem in vel libero vel augue aliquet dui commodo.</p>
                <p>Nec malesuada sed sit ut aliquet. Cras ac pharetra, sapien purus vitae vestibulum auctor faucibus ullamcorper. Leo quam tincidunt porttitor neque, velit sed. Tortor mauris ornare ut tellus sed aliquet amet venenatis condimentum. Convallis accumsan et nunc eleifend.</p>
                <p><strong style="font-weight: 600;">Monica White</strong><br>Customer Service</p>
              </div>
            </li>

            <li class="bg-white px-4 py-6 shadow sm:rounded-lg sm:px-6">
              <div class="sm:flex sm:justify-between sm:items-baseline">
                <h3 class="text-base font-medium">
                  <span class="text-gray-900">Joe Armstrong</span>
                  <span class="text-gray-600">wrote</span>
                </h3>
                <p class="mt-1 text-sm text-gray-600 whitespace-nowrap sm:mt-0 sm:ml-3">
                  <time datetime="2021-01-27T16:09">Wednesday at 4:09pm</time>
                </p>
              </div>
              <div class="mt-4 space-y-6 text-sm text-gray-800">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada at ultricies tincidunt elit et, enim. Habitant nunc, adipiscing non fermentum, sed est a, aliquet. Lorem in vel libero vel augue aliquet dui commodo.</p>
                <p>Nec malesuada sed sit ut aliquet. Cras ac pharetra, sapien purus vitae vestibulum auctor faucibus ullamcorper. Leo quam tincidunt porttitor neque, velit sed. Tortor mauris ornare ut tellus sed aliquet amet venenatis condimentum. Convallis accumsan et nunc eleifend.</p>
                <p>– Joe</p>
              </div>
            </li>
          </ul>
        </div>
      </section>

      <input id="collapsible-filter" class="toggle" type="checkbox" checked=""><label for="collapsible-filter" class="group filter-toggle block origin-top-left absolute -ml-4 lg:left-60 xl:left-72 2xl:left-80 hover:text-blue-800 focus:text-blue-800 focus:outline-none" tabindex="0"><div class="group transition duration-300 button-ease mt-2 bg-white p-1.5 rounded-md shadow-sm text-gray-500 border border-gray-100 hover:bg-gray-600 hover:border-transparent focus:outline-none focus:text-gray-700" aria-label="Hide Filters" title="Hide Filters">
                      <svg class="transition duration-300 button-ease h-4 w-4 group-hover:text-white" x-description="Heroicon name: solid/chevron-double-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
  <path fill-rule="evenodd" d="M15.707 15.707a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 010 1.414zm-6 0a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 011.414 1.414L5.414 10l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
</svg>

                      <span class="sr-only">Minimize Filters</span>
                    </div></label><aside class="lg:flex lg:flex-shrink-0 lg:flex-col justify-between hidden lg:block lg:order-first collapsible-filter border-r border-gray-100">
        
    
                    

      <div id="slim-scroll" class="h-auto relative flex flex-col lg:w-60 xl:w-72 2xl:w-80 overflow-y-auto">
          <div class="flex-shrink-0" style="
    display: none;
">
            <button type="button" class="group transition duration-300 button-ease origin-top-right absolute right-0 mt-2 -mr-3.5 z-10 bg-white p-1.5 rounded-md shadow-sm text-gray-500 border border-gray-100 hover:bg-gray-600 hover:border-transparent focus:outline-none focus:text-gray-700" aria-label="Hide Filters" title="Hide Filters">
                      <svg class="transition duration-300 button-ease h-4 w-4 group-hover:text-white" x-description="Heroicon name: solid/chevron-double-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
  <path fill-rule="evenodd" d="M15.707 15.707a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 010 1.414zm-6 0a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 011.414 1.414L5.414 10l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
</svg>

                      <span class="sr-only">Minimize Filters</span>
                    </button><!-- Nav Page Title: Currently hidden -->
            <div class="h-16 bg-white bg-opacity-50 flex flex-col justify-center px-4 sm:px-6 hidden">
              <div class="flex items-baseline space-x-3">
                <h2 class="text-2xl font-medium text-gray-900">Projects</h2>
                <p class="hidden text-sm font-normal text-gray-500">10 messages</p>
              </div>
            </div>
            <div class="hidden border-t border-b border-gray-200 bg-gray-50 px-6 py-2 text-sm font-medium text-gray-500">Text title</div>
            <div class="border-t-0 border-b border-gray-100 bg-white px-3 2xl:px-4 py-2.5 h-auto text-sm font-medium text-gray-500 flex justify-center" style="
    display: none;
">
    
    

              <button data-testid="dropdown-button" class="group relative w-full pl-2 pr-8 py-2 my-auto text-left cursor-default bg-gray-50 shadow-none border border-transparent text-gray-700 text-xs leading-normal font-semibold tracking-wide placeholder-gray-400 hover:bg-blue-100 hover:text-gray-700 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:text-gray-800 focus:ring-1 focus:ring-blue-600 focus:border-blue-400 focus:bg-blue-100 rounded-md" id="headlessui-listbox-button-2" type="button" aria-haspopup="true" aria-labelledby="headlessui-listbox-label-1 headlessui-listbox-button-2"><span class="inline-flex items-center">
                  <span class="transition duration-200 button-ease inline-flex items-center mr-1.5 px-2.5 py-1 rounded-full text-xs font-normal bg-blue-200 text-blue-800 group-hover:bg-blue-500 group-hover:text-white focus:text-blue-700 focus:outline-none">
                      <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path>
                      </svg>
                      30d
                    </span>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="flex-shrink-0 h-6 w-6 mr-2 text-gray-300 hidden">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                  </svg>

                  <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="" class="flex-shrink-0 h-6 w-6 rounded-full hidden">
                  <span class="mx-1 font-semibold uppercase leading-tight text-center">Aug 22 '09<span class="ml-1 text-gray-400 font-normal lg:hidden xl:inline">7am</span></span>
<span class="mx-1 font-normal text-gray-600">−</span>
<span class="mx-1 font-semibold uppercase leading-tight text-center">Aug 22 '21<span class="ml-1 text-gray-400 font-normal lg:hidden xl:inline">7am</span></span>
<span class="flex flex-shrink-0 -space-x-2 overflow-hidden ml-3 mr-1.5 hidden">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworkpyramid">
                      <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path>
                      <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path>
                      <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path>
                      <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-node-js" class="bg-white inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworknodejs">
                      <path fill="#83cd29" d="M463.6 113.4L276.9 5c-11.8-6.7-27.1-6.7-39 0L49.2 113.4c-12.2 7-20.8 20.1-20.8 34.2v216.5c0 14.1 8.8 27.2 21 34.2l49.9 28.3c23.8 11.7 32.3 11.7 43.1 11.7 35.3 0 55.4-21.3 55.4-58.6V166.1c0-3-1.6-7.5-4.5-7.5h-23.8c-3 0-9.8 4.5-9.8 7.5v213.8c0 16.5-14.9 32.9-42.8 19l-51.5-29.7c-1.8-1-3.1-2.9-3.1-5V147.6c0-2 2.4-4.1 4.2-5.1L254.6 34.3c1.8-1 4.3-1 6.1 0l185.8 108.2c1.8 1.1 1.2 3.1 1.2 5.2v216.5c0 2.1.8 4.1-1 5.1L260 477.5c-1.6 1-3.6 1-5.3 0L206.8 449c-1.4-.8-3.2-1.1-4.5-.4-13.3 7.5-15.8 8.6-28.3 12.9-3.1 1.1-7.6 2.9 1.7 8.2l62.7 37.1c6 3.5 12.8 5.3 19.7 5.3 7 0 13.8-1.8 19.8-5.3l185.8-108.3c12.2-7.1 17.9-20.2 17.9-34.2V147.6c-.1-14-5.8-27.1-18-34.2zM316 329.9c-49.7 0-60.6-13.7-64.2-38.4-.4-2.7-2.7-5.8-5.4-5.8h-24.3c-3 0-5.4 3.6-5.4 6.6 0 31.6 17.2 69.9 99.3 69.9 59.4 0 93.5-23.1 93.5-64 0-40.5-27.4-51.2-85-58.8-58.3-7.7-64.2-11.6-64.2-25.2 0-11.3 5-26.3 48.2-26.3 38.6 0 52.8 8.3 58.6 34.3.5 2.4 2.7 4.2 5.3 4.2h24.4c1.5 0 2.9-.6 4-1.7 1-1.2 1.6-2.6 1.4-4.1-3.8-44.7-33.5-65.6-93.6-65.6-53.5 0-85.4 22.6-85.4 60.4 0 41.1 31.7 52.4 83.1 57.5 61.4 6 66.2 15 66.2 27.1-.1 20.9-17 29.9-56.5 29.9z"></path>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-browser-js" class="bg-white inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworkbrowserjs ">
                      <path fill="#f0db4f" d="M0 0h512v512H0z"></path>
                      <path fill="#323330" d="M470.1 389.89c-3.75-23.36-19-43-64.1-61.28-15.67-7.2-33.15-12.35-38.35-24.23-1.85-6.91-2.1-10.81-.93-15 3.36-13.58 19.57-17.81 32.42-13.92 8.27 2.77 16.1 9.15 20.83 19.32 22.09-14.31 22-14.21 37.47-24-5.64-8.76-8.66-12.8-12.36-16.55-13.28-14.84-31.39-22.48-60.35-21.9l-15.08 1.95c-14.46 3.65-28.23 11.24-36.31 21.41-24.24 27.5-17.32 75.63 12.17 95.44 29.05 21.81 71.74 26.77 77.19 47.16 5.3 25-18.35 33.05-41.86 30.18-17.32-3.6-27-12.41-37.38-28.42-19.17 11.09-19.17 11.09-38.88 22.43 4.67 10.22 9.58 14.85 17.42 23.7 37.09 37.62 129.9 35.77 146.54-21.17.68-2.01 5.16-15.01 1.56-35.12zM278.34 235.32h-47.89l-.2 123.81c0 26.33 1.37 50.47-2.92 57.86-7 14.56-25.16 12.75-33.43 9.93-8.42-4.14-12.71-10-17.67-18.34-1.36-2.39-2.38-4.24-2.72-4.38L134.57 428c6.47 13.29 16 24.82 28.23 32.32 18.25 10.95 42.77 14.31 68.43 8.42 16.69-4.87 31.1-14.94 38.64-30.27 10.9-20.1 8.56-44.44 8.47-71.35.24-43.86 0-87.76 0-131.8z"></path>
                    </svg>

                  </span></span><span class="group ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400 group-hover:text-gray-600" aria-hidden="true">
                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                  </svg></span></button>

            </div>
          </div>
          <!-- Left content starts here -->
          <nav aria-label="Metrics Filters Menu" class="min-h-0 flex-1">
            <ul role="metrics-filters-list" class="border-b border-gray-100 divide-y divide-blue-100">
              <li class="relative bg-white py-3 pl-6 pr-5 space-y-3 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600">
                <div class="block flex flex-row-reverse grid grid-cols-3">
    <div class="col-span-1 group flex space-x-1.5 justify-end focus:outline-none">
                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium tracking-wide bg-blue-100 text-blue-800">
                      <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path>
                      </svg>
                      3
                    </span><button type="button" class="h-6 w-6 inline-flex transition duration-300 button-ease justify-center items-center px-0.5 py-0.5 border border-transparent text-sm font-medium rounded-full tracking-wide text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700">
                      <svg class="h-4 w-4 text-blue-50" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                      </svg>

                    </button>
                  </div><input id="collapsible" class="toggle" type="checkbox" checked=""><label for="collapsible" class="group col-span-2 sh-toggle flex inline-flex order-first space-x-1 items-center hover:text-blue-800 focus:text-blue-800 focus:outline-none" tabindex="0"><svg class="-ml-1 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="text-xs uppercase font-semibold tracking-widest text-gray-700 pb-1 border-b border-blue-100 group-hover:text-blue-800 group-focus:text-blue-800">Projects</span></label><div class="col-span-3 w-full px-0.5 space-y-3 collapsible-content">
                <div class="w-full">
                  <div class="mt-3 relative flex rounded-md shadow-none">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" aria-hidden="true">
                        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
                      </svg></div><input id="project-search" type="search" class="block w-full shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md pl-10" data-testid="project-search" placeholder="Search">
                  </div>
                  <p class="mt-2 text-sm text-red-600 invisible hidden" id="project-search-error">&amp;nbsp</p>
                </div>
                <div class="flex">
                  <div class="-mt-1 -mb-2 min-w-0 flex-1">
                    <div class="block focus:outline-none">
                      <span class="hidden absolute inset-0" aria-hidden="true"></span>
                      <div class="flex justify-between items-center">

                        <span class="inline-flex items-center mr-1 px-2 py-1 rounded-full text-xs font-medium tracking-wide bg-blue-100 text-blue-800 hidden">
                          <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path>
                          </svg>
                          5
                        </span>

                        <div class="inline-flex items-center space-x-1"><a class="text-xs font-normal tracking-wide text-blue-600 hover:text-blue-800 focus:text-blue-800 focus:outline-none" href="https://rollbar.com/Rollbar/api-monitoring/settings/general">Select All</a><span class="text-xs tracking-widest text-gray-200">⎥
                          </span><a class="text-xs font-normal tracking-wide text-blue-600 hover:text-blue-800 focus:text-blue-800 focus:outline-none" href="https://rollbar.com/Rollbar/api-monitoring/settings/general">Clear All</a></div>

                      </div>

                      <p class="hidden text-xs uppercase font-semibold tracking-widest text-blue-600 pb-1">Select all</p>
                      <p class="hidden text-sm text-gray-500 truncate">Velit placeat sit ducimus non sed</p>
                    </div>
                  </div>
                  <time datetime="2021-01-27T16:35" class="hidden flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time>
                </div>
                <div class="w-full">

                  <fieldset class="grid gap-y-0.5 border-0">
                    <legend class="sr-only">Projects</legend>
                    <div class="group relative flex items-center px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                      <div class="flex items-center h-5">
                        <input id="project-mox" aria-describedby="project-mox" name="comments" type="checkbox" checked="" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                      </div>
                      <div class="group flex w-full ml-3 text-sm focus:bg-blue-100">
                        <label for="project-mox" class="w-full inline-flex text-gray-700 items-center justify-between">mox<span class="mx-1 border-b border-transparent text-transparent text-xs uppercase group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500">Only</span></label>
                        <a href="#" id="project-description" class="mx-1 self-center border-b border-transparent text-transparent text-xs group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500 hidden"><span class="sr-only">mox</span>ONLY</a>
                      </div>
                    </div>

                    <div class="relative flex items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md hidden">
                      <div class="flex items-center h-5">
                        <input id="project-mox-max" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                      </div>
                      <div class="ml-3 text-sm">
                        <label for="project-mox-max" class="font-medium text-gray-700">mox-max</label>
                        <span id="project-description" class="text-gray-400 text-xs hidden"><span class="sr-only">mox</span>Languages</span>
                      </div>
                    </div>
                    <div class="group relative flex items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                      <div class="flex items-center h-5">
                        <input id="project-mox-web" aria-describedby="project-mox-web" name="comments" type="checkbox" checked="" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                      </div>
                      <div class="group flex w-full justify-between ml-3 text-sm">
                        <label for="project-mox-web" class="w-full inline-flex items-center justify-between text-gray-700">mox-web<span class="mx-1 border-b border-transparent text-transparent text-xs uppercase group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500">Only</span></label>
                        
                      </div>
                    </div>
                    <div class="group relative flex items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                      <div class="flex items-center h-5">
                        <input id="project-mox-workers" aria-describedby="project-mox-workers" name="comments" type="checkbox" checked="" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                      </div>
                      <div class="group flex w-full justify-between ml-3 text-sm">
                        <label for="project-mox-workers" class="w-full inline-flex items-center justify-between text-gray-700">eg-single-select<span class="mx-1 border-b border-transparent text-transparent text-xs uppercase group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500">Only</span></label>
                        
                      </div>
                    </div>
                    <div class="group relative flex items-start pl-1 py-1 hover:bg-white hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 rounded-md">
                      <div class="flex items-center h-5">
                        <svg class="h-4 w-4 text-gray-300 self-center" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="currentColor" aria-hidden="true">
                          <g xmlns="http://www.w3.org/2000/svg"><g xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" i:extraneous="self"><g><path d="M3.4,78c-1.2,1.1-1.2,3,0,4.2l10.7,10.7c1.1,1.1,3,1.1,4.2,0l28.3-28.3L31.7,49.7L3.4,78z"></path><path d="M97.1,26.6l-5.3-5.3c-0.6-0.6-1.5-0.6-2.1,0l-0.8,0.8c0,0-11.3-11.3-11.7-11.7c-5.3-5.3-15.9-5-20.6-2.1     c-1.3,0.8-0.7,2.8,0.8,2.8c6.1,0.3,9.8,4.6,12.9,8.3L53.6,36l6.7,6.7l16.1-16.1l3.8,4.3l-0.9,0.9c-0.6,0.6-0.6,1.5,0,2.1l5.3,5.3     c0.6,0.6,1.5,0.6,2.1,0l10.4-10.4C97.6,28.2,97.6,27.2,97.1,26.6z"></path><path d="M74.3,62.3L37.5,25.5c1.3-5.3-0.2-11.1-4.3-15.3c-4.8-4.8-11.7-6-17.6-3.6l8.2,8.2c2.5,2.5,2.5,6.6,0,9.1     c-2.5,2.5-6.6,2.5-9.1,0l-8.2-8.2C4.1,21.6,5.3,28.6,10,33.3c4.2,4.2,10,5.6,15.3,4.3c0,0,0,0,0,0l36.8,36.8c0,0,0,0,0,0     c-1.3,5.3,0.2,11.2,4.3,15.3c4.8,4.8,11.7,6,17.6,3.6l-8.2-8.2c-2.5-2.5-2.5-6.6,0-9.1c2.5-2.5,6.6-2.5,9.1,0l8.2,8.2     c2.3-5.9,1.1-12.9-3.6-17.6C85.5,62.5,79.6,61,74.3,62.3z"></path></g></g></g>
                        </svg>
                        <input id="project-atsuko-test" aria-describedby="project-atsuko-test" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded hidden">
                      </div>
                      <div class="flex w-full ml-3 text-sm items-center justify-between">
                        <label for="project-atsuko-test" class="font-medium text-gray-400">preview-list-5</label>
                        <a href="#" id="project-setup" class="mx-2 border-b border-transparent font-normal tracking-wide text-orange-600 text-xs hover:text-orange-800 focus:text-orange-800 focus:border-orange-500 focus:outline-none"><span class="sr-only">atsuko-test</span>Set Up</a>
                      </div>
                    </div>
                    <div class="group relative flex items-start pl-1 py-1 hover:bg-white hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 rounded-md">
                      <div class="flex items-center h-5">
                        <svg class="h-4 w-4 text-gray-300 self-center" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="currentColor" aria-hidden="true">
                          <g xmlns="http://www.w3.org/2000/svg"><g xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" i:extraneous="self"><g><path d="M3.4,78c-1.2,1.1-1.2,3,0,4.2l10.7,10.7c1.1,1.1,3,1.1,4.2,0l28.3-28.3L31.7,49.7L3.4,78z"></path><path d="M97.1,26.6l-5.3-5.3c-0.6-0.6-1.5-0.6-2.1,0l-0.8,0.8c0,0-11.3-11.3-11.7-11.7c-5.3-5.3-15.9-5-20.6-2.1     c-1.3,0.8-0.7,2.8,0.8,2.8c6.1,0.3,9.8,4.6,12.9,8.3L53.6,36l6.7,6.7l16.1-16.1l3.8,4.3l-0.9,0.9c-0.6,0.6-0.6,1.5,0,2.1l5.3,5.3     c0.6,0.6,1.5,0.6,2.1,0l10.4-10.4C97.6,28.2,97.6,27.2,97.1,26.6z"></path><path d="M74.3,62.3L37.5,25.5c1.3-5.3-0.2-11.1-4.3-15.3c-4.8-4.8-11.7-6-17.6-3.6l8.2,8.2c2.5,2.5,2.5,6.6,0,9.1     c-2.5,2.5-6.6,2.5-9.1,0l-8.2-8.2C4.1,21.6,5.3,28.6,10,33.3c4.2,4.2,10,5.6,15.3,4.3c0,0,0,0,0,0l36.8,36.8c0,0,0,0,0,0     c-1.3,5.3,0.2,11.2,4.3,15.3c4.8,4.8,11.7,6,17.6,3.6l-8.2-8.2c-2.5-2.5-2.5-6.6,0-9.1c2.5-2.5,6.6-2.5,9.1,0l8.2,8.2     c2.3-5.9,1.1-12.9-3.6-17.6C85.5,62.5,79.6,61,74.3,62.3z"></path></g></g></g>
                        </svg>
                        <input id="project-atsuko-test" aria-describedby="project-atsuko-test" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded hidden">
                      </div>
                      <div class="flex w-full ml-3 text-sm items-center justify-between">
                        <label for="project-atsuko-test-2" class="lg:w-24 xl:w-36 2xl:w-44 font-medium text-gray-400 truncate">truncate-long-name-width-here</label>
                        <a href="#" id="project-setup" class="mx-2 border-b border-transparent font-normal tracking-wide text-orange-600 text-xs hover:text-orange-800 focus:text-orange-800 focus:border-orange-500 focus:outline-none"><span class="sr-only">atsuko-test</span>Set Up</a>
                      </div>
                    </div><div class="relative flex items-start pl-1 py-1 hidden">
                      <div class="flex items-center h-5">
                        <span class="mt-0.5 h-4 w-4 bg-orange-100 rounded-full flex items-center justify-center" aria-hidden="true">
                          <span class="h-2 w-2 bg-orange-500 rounded-full"></span>
                        </span>
                        <input id="project-atsuko-test" aria-describedby="project-atsuko-test" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded hidden">
                      </div>
                      <div class="group flex w-full ml-2 text-sm items-center justify-between">
                        <label for="project-atsuko-test" class="font-medium text-gray-400">atsuko-test-2</label>
                        <a href="#" id="project-setup" class="mx-1 border-b border-transparent font-normal tracking-wide text-orange-600 text-xs hover:text-orange-800 focus:text-orange-800 focus:border-orange-500 focus:outline-none"><span class="sr-only">atsuko-test</span>Set Up</a>
                      </div>
                    </div>
                    <div class="group relative flex items-start pl-1 py-1 hover:bg-white hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 rounded-md hidden">
                      <div class="flex items-center h-5">
                        <span class="mt-0.5 h-4 w-4 bg-orange-100 rounded-full flex items-center justify-center" aria-hidden="true">
                          <span class="h-2 w-2 bg-orange-500 rounded-full"></span>
                        </span>
                        <input id="project-atsuko-test" aria-describedby="project-atsuko-test" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded hidden">
                      </div>
                      <div class="flex w-full ml-3 text-sm items-center justify-between">
                        <label for="project-atsuko-test" class="font-medium text-gray-400">atsuko-test-3</label>
                        <a href="#" id="project-setup" class="font-semibold tracking-wide text-orange-600 text-xs group-hover:text-orange-700 group-focus:text-orange-700 focus:text-orange-700 focus:outline-none focus:underline"><span class="sr-only">atsuko-test</span>Setup</a>
                      </div>
                    </div>
                  </fieldset>
        </div><div class="flex justify-center text-xs uppercase tracking-wide font-normal text-blue-600">
                  <a class="inline-flex -mt-1.5 justify-center hover:text-blue-800 focus:outline-none focus:text-blue-800" href="#" aria-label="General" title="General">Show More <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mt-0 ml-0.5 self-center" fill="currentColor" viewBox="0 0 120 120">
                      <path xmlns="http://www.w3.org/2000/svg" d="M62.3,62.6l-8.6,8.6V29.3l8.6,8.6c1.4,1.5,3.8,1.6,5.3,0.2c1.5-1.4,1.6-3.8,0.2-5.3c-0.1-0.1-0.1-0.1-0.2-0.2l-15-15  c-1.5-1.5-3.8-1.5-5.3,0l-15,15c-1.4,1.5-1.3,3.9,0.2,5.3c1.4,1.3,3.7,1.3,5.1,0l8.6-8.6v41.9l-8.6-8.6c-1.4-1.5-3.8-1.6-5.3-0.2  c-1.5,1.4-1.6,3.8-0.2,5.3c0.1,0.1,0.1,0.1,0.2,0.2l15,15c1.5,1.5,3.8,1.5,5.3,0l15-15c1.5-1.4,1.6-3.8,0.2-5.3  c-1.4-1.5-3.8-1.6-5.3-0.2C62.5,62.5,62.4,62.5,62.3,62.6z"></path>
                    </svg>
                  </a>

                </div>
        <div class="relative mt-6 mb-4 hidden">
  <div class="absolute inset-0 flex items-center" aria-hidden="true">
    <div class="w-3/4 border-t border-transparent mx-auto"></div>
  </div>
  <div class="relative flex justify-center">
    <a class="flex inline-flex -mt-1 pl-2 border border-blue-300 bg-white text-xs tracking-wide leading-normal font-normal text-blue-600 hover:text-blue-800 hover:border-blue-500 focus:outline-none focus:text-blue-800 rounded-full" href="#" aria-label="Show-al" title="Show All">Show All <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-0.5 self-center" fill="currentColor" viewBox="0 -10 120 120">
                      <path xmlns="http://www.w3.org/2000/svg" d="M62.3,62.6l-8.6,8.6V29.3l8.6,8.6c1.4,1.5,3.8,1.6,5.3,0.2c1.5-1.4,1.6-3.8,0.2-5.3c-0.1-0.1-0.1-0.1-0.2-0.2l-15-15  c-1.5-1.5-3.8-1.5-5.3,0l-15,15c-1.4,1.5-1.3,3.9,0.2,5.3c1.4,1.3,3.7,1.3,5.1,0l8.6-8.6v41.9l-8.6-8.6c-1.4-1.5-3.8-1.6-5.3-0.2  c-1.5,1.4-1.6,3.8-0.2,5.3c0.1,0.1,0.1,0.1,0.2,0.2l15,15c1.5,1.5,3.8,1.5,5.3,0l15-15c1.5-1.4,1.6-3.8,0.2-5.3  c-1.4-1.5-3.8-1.6-5.3-0.2C62.5,62.5,62.4,62.5,62.3,62.6z"></path>
                    </svg></a>
  </div>
<div class="frelative flex justify-left text-xs tracking-wide leading-normal font-normal text-blue-600 bg-blue-50 rounded-full hidden">
                  <a class="flex inline-flex -mt-1 pl-2 leading-5 border border-blue-300 bg-blue-50 hover:text-blue-800 hover:border-blue-500 focus:outline-none focus:text-blue-800 rounded-full" href="#" aria-label="General" title="General">Show All <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-0.5 self-center" fill="currentColor" viewBox="0 -10 120 120">
                      <path xmlns="http://www.w3.org/2000/svg" d="M62.3,62.6l-8.6,8.6V29.3l8.6,8.6c1.4,1.5,3.8,1.6,5.3,0.2c1.5-1.4,1.6-3.8,0.2-5.3c-0.1-0.1-0.1-0.1-0.2-0.2l-15-15  c-1.5-1.5-3.8-1.5-5.3,0l-15,15c-1.4,1.5-1.3,3.9,0.2,5.3c1.4,1.3,3.7,1.3,5.1,0l8.6-8.6v41.9l-8.6-8.6c-1.4-1.5-3.8-1.6-5.3-0.2  c-1.5,1.4-1.6,3.8-0.2,5.3c0.1,0.1,0.1,0.1,0.2,0.2l15,15c1.5,1.5,3.8,1.5,5.3,0l15-15c1.5-1.4,1.6-3.8,0.2-5.3  c-1.4-1.5-3.8-1.6-5.3-0.2C62.5,62.5,62.4,62.5,62.3,62.6z"></path>
                    </svg></a>

                </div></div><div class="flex justify-center w-full text-xs tracking-wide leading-normal font-normal text-blue-600 hidden">
                  <a class="flex inline-flex -mt-1 pl-2 leading-5 border border-blue-300 bg-blue-50 hover:text-blue-800 hover:border-blue-500 focus:outline-none focus:text-blue-800 rounded-full" href="#" aria-label="General" title="General">Show All <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-0.5 self-center" fill="currentColor" viewBox="0 -10 120 120">
                      <path xmlns="http://www.w3.org/2000/svg" d="M62.3,62.6l-8.6,8.6V29.3l8.6,8.6c1.4,1.5,3.8,1.6,5.3,0.2c1.5-1.4,1.6-3.8,0.2-5.3c-0.1-0.1-0.1-0.1-0.2-0.2l-15-15  c-1.5-1.5-3.8-1.5-5.3,0l-15,15c-1.4,1.5-1.3,3.9,0.2,5.3c1.4,1.3,3.7,1.3,5.1,0l8.6-8.6v41.9l-8.6-8.6c-1.4-1.5-3.8-1.6-5.3-0.2  c-1.5,1.4-1.6,3.8-0.2,5.3c0.1,0.1,0.1,0.1,0.2,0.2l15,15c1.5,1.5,3.8,1.5,5.3,0l15-15c1.5-1.4,1.6-3.8,0.2-5.3  c-1.4-1.5-3.8-1.6-5.3-0.2C62.5,62.5,62.4,62.5,62.3,62.6z"></path>
                    </svg></a>

                </div></div>
                    
                </div><div class="group flex justify-between focus:outline-none" style="
    display: none;
">
                  <div class="flex space-x-1 items-center">

                    <svg class="-ml-1 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="text-xs uppercase font-semibold tracking-widest text-gray-700 pb-1 border-b border-blue-100 group-hover:text-blue-800">Projects</span>

                  </div>

                  <div class="group flex space-x-1.5 items-end focus:outline-none">
                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium tracking-wide bg-blue-100 text-blue-800">
                      <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path>
                      </svg>
                      3
                    </span><button type="button" class="h-6 w-6 inline-flex transition duration-300 button-ease justify-center items-center px-0.5 py-0.5 border border-transparent text-sm font-medium rounded-full tracking-wide text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700">
                      <svg class="h-4 w-4 text-blue-50" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                      </svg>

                    </button>
                  </div>

                </div>
    
    
  


    
    
                
              </li>

              <li class="relative bg-white py-3 pl-6 pr-5 space-y-3 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600">
                <div class="block flex grid grid-cols-4">
    <div class="col-span-1 group flex space-x-1.5 justify-end focus:outline-none">
                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium tracking-wide bg-blue-100 text-blue-800">
                      <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path>
                      </svg>
                      2
                    </span>
                  </div><input id="collapsible-env" class="toggle" type="checkbox"><label for="collapsible-env" class="group col-span-3 sh-toggle flex inline-flex order-first space-x-1 items-center"><svg class="-ml-1 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="text-xs uppercase font-semibold tracking-widest text-gray-700 pb-1 border-b border-blue-100 group-hover:text-blue-800 group-focus:text-blue-800">Environments</span></label>
                    <div class="col-span-4 w-full px-0.5 space-y-3 collapsible-content">
    
    <div class="w-full">
                  <div class="mt-3 relative flex rounded-md shadow-none">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" aria-hidden="true">
                        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
                      </svg></div><input id="project-search" type="search" class="block w-full shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md pl-10" data-testid="project-search" placeholder="Search">
                  </div>
                  <p class="mt-2 text-sm text-red-600 invisible hidden" id="project-search-error">&amp;nbsp</p>
                </div>
                <div class="flex">
                  <div class="-mt-1 -mb-2 min-w-0 flex-1">
                    <div class="block focus:outline-none">
                      <span class="hidden absolute inset-0" aria-hidden="true"></span>
                      <div class="flex justify-between items-center">

                        <span class="inline-flex items-center mr-1 px-2 py-1 rounded-full text-xs font-medium tracking-wide bg-blue-100 text-blue-800 hidden">
                          <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path>
                          </svg>
                          5
                        </span>

                        <div class="inline-flex items-center space-x-1"><a class="text-xs font-normal tracking-wide text-blue-600 hover:text-blue-800 focus:text-blue-800 focus:outline-none" href="https://rollbar.com/Rollbar/api-monitoring/settings/general">Select All</a><span class="text-xs tracking-widest text-gray-200">⎥
                          </span><a class="text-xs font-normal tracking-wide text-blue-600 hover:text-blue-800 focus:text-blue-800 focus:outline-none" href="https://rollbar.com/Rollbar/api-monitoring/settings/general">Clear All</a></div>

                      </div>

                      <p class="hidden text-xs uppercase font-semibold tracking-widest text-blue-600 pb-1">Select all</p>
                      <p class="hidden text-sm text-gray-500 truncate">Velit placeat sit ducimus non sed</p>
                    </div>
                  </div>
                  <time datetime="2021-01-27T16:35" class="hidden flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time>
                </div>

<div class="w-full">

                  <fieldset class="h-52 overflow-y-auto overflow-x-hidden grid gap-y-0.5 border-0" id="slim-scroll">
                    <legend class="sr-only">Projects</legend>
                    <div class="relative w-full block items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                      <div class="group w-full flex items-center h-5">
                        <input id="env-1" aria-describedby="project-mox" name="comments" type="checkbox" checked="" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 group-hover:text-blue-800 border-gray-300 rounded"><a href="#" class="origin-top-right absolute right-1 mt-0 z-10 mx-1 self-center border-b border-transparent text-transparent text-xs group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500">MULTI</a>


                      </div>
                      <div class="origin-top-right absolute left-5 -mt-5 z-20 group w-full flex justify-between ml-3 text-sm">
                        <label for="env-1" class="text-gray-700">eg-multi-select</label>
<a href="#" class="origin-top-right absolute right-9 mx-1 self-center border-b border-transparent text-transparent text-xs group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500 cursor-pointer group-hover:cursor-pointer">ONLY</a>

                      </div>
                    </div>

                    <div class="relative w-full block items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                      <div class="group w-full flex items-center h-5">
                        <input id="env-2" aria-describedby="project-mox" name="comments" type="checkbox" checked="" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 group-hover:text-blue-800 border-gray-300 rounded"><a href="#" class="origin-top-right absolute right-1 mt-0 z-10 mx-1 self-center border-b border-transparent text-transparent text-xs group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500">MULTI</a>


                      </div>
                      <div class="origin-top-right absolute left-5 -mt-5 z-20 group w-full flex justify-between ml-3 text-sm">
                        <label for="env-2" class="text-gray-700">development</label>
<a href="#" class="origin-top-right absolute right-9 mx-1 self-center border-b border-transparent text-transparent text-xs group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500 cursor-pointer group-hover:cursor-pointer">ONLY</a>

                      </div>
                    </div>
                    <div class="relative w-full block items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                      <div class="group w-full flex items-center h-5">
                        <input id="env-3" aria-describedby="project-mox" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 group-hover:text-blue-800 border-gray-300 rounded"><a href="#" class="origin-top-right absolute right-1 mt-0 z-10 mx-1 self-center border-b border-transparent text-transparent text-xs group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500">MULTI</a>


                      </div>
                      <div class="origin-top-right absolute left-5 -mt-5 z-20 group w-full flex justify-between ml-3 text-sm">
                        <label for="env-3" class="text-gray-700">production</label>
<a href="#" class="origin-top-right absolute right-9 mx-1 self-center border-b border-transparent text-transparent text-xs group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500 cursor-pointer group-hover:cursor-pointer">ONLY</a>

                      </div>
                    </div>
                    <div class="relative flex items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                      <div class="flex items-center h-5">
                        <input id="env-production-k8s" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                      </div>
                      <div class="group w-full flex justify-between ml-3 text-sm">
                        <label for="env-production-k8s" class="font-medium text-gray-700">production-k8s</label>
<a href="#" id="project-description" class="mx-1 self-center border-b border-transparent text-transparent text-xs group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500"><span class="sr-only">mox</span>ONLY</a>

                      </div>
                    </div>
                    <div class="relative flex items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                      <div class="flex items-center h-5">
                        <input id="env-staging" aria-describedby="project-mox-workers" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                      </div>
                      <div class="group w-full flex justify-between ml-3 text-sm">
                        <label for="env-staging" class="font-medium text-gray-700">staging</label>
<a href="#" id="project-description" class="mx-1 self-center border-b border-transparent text-transparent text-xs group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500"><span class="sr-only">mox</span>ONLY</a>

                      </div>
                    </div>
                    <div class="relative flex items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                      <div class="flex items-center h-5">
                        <input id="env-system" aria-describedby="project-mox-workers" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                      </div>
                      <div class="group w-full flex justify-between ml-3 text-sm">
                        <label for="env-system" class="font-medium text-gray-700">system</label>
<a href="#" id="project-description" class="mx-1 self-center border-b border-transparent text-transparent text-xs group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500"><span class="sr-only">mox</span>ONLY</a>

                      </div>
                    </div>
                    <div class="relative flex items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                      <div class="flex items-center h-5">
                        <input id="env-testing" aria-describedby="project-mox-workers" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                      </div>
                      <div class="group w-full flex justify-between ml-3 text-sm">
                        <label for="env-testing" class="font-medium text-gray-700">testing</label>
<a href="#" id="project-description" class="mx-1 self-center border-b border-transparent text-transparent text-xs group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500"><span class="sr-only">mox</span>ONLY</a>

                      </div>
                    </div>
                    <div class="relative flex items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                      <div class="flex items-center h-5">
                        <input id="env-testing-2" aria-describedby="project-mox-workers" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                      </div>
                      <div class="ml-3 text-sm">
                        <label for="env-testing-2" class="font-medium text-gray-700">testing-2</label>

                      </div>
                    </div>
                    <div class="relative flex items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                      <div class="flex items-center h-5">
                        <input id="env-testing-3" aria-describedby="project-mox-workers" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                      </div>
                      <div class="ml-3 text-sm">
                        <label for="env-testing-3" class="font-medium text-gray-700">testing-3</label>

                      </div>
                    </div>
                  </fieldset>

                </div>
                <div class="flex justify-center text-xs uppercase tracking-wide font-normal text-blue-600">
                  <a class="inline-flex -mt-1.5 justify-center hover:text-blue-800 focus:outline-none focus:text-blue-800" href="#" aria-label="General" title="General">Show Less <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mt-0 ml-0.5 self-center" fill="currentColor" viewBox="0 0 24 24">
                      <g xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.293,13.293a.99962.99962,0,0,1,1.41406,0l3,3A.99989.99989,0,0,1,14.293,17.707L13,16.41406V21a1,1,0,0,1-2,0V16.41406L9.707,17.707A.99989.99989,0,0,1,8.293,16.293ZM11,3V7.58594L9.707,6.293A.99989.99989,0,0,0,8.293,7.707l3,3a.99962.99962,0,0,0,1.41406,0l3-3A.99989.99989,0,0,0,14.293,6.293L13,7.58594V3a1,1,0,0,0-2,0Z"></path>
                      </g>
                    </svg>
                  </a>

                </div>
                
    </div>
                    
                </div>
                <div class="group flex justify-between focus:outline-none hidden">
                  <div class="flex space-x-1 items-center">

                    <svg class="-ml-1 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="text-xs uppercase font-semibold tracking-widest text-gray-700 pb-1 border-b border-blue-100 group-hover:text-blue-800">Environments</span>
                  </div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium tracking-wide bg-blue-100 text-blue-800">
                    <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path>
                    </svg>
                    1
                  </span>

                </div>
    
    
              </li>
              <li class="relative bg-white py-3 pl-6 pr-5 space-y-3 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600">
                <div class="block flex grid grid-cols-4">
    <div class="col-span-1 group flex space-x-1.5 justify-end focus:outline-none">
                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium tracking-wide bg-blue-100 text-blue-800">
                      <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path>
                      </svg>
                      4
                    </span>
                  </div><input id="collapsible-sev" class="toggle" type="checkbox"><label for="collapsible-sev" class="group col-span-3 sh-toggle flex inline-flex order-first space-x-1 items-center"><svg class="-ml-1 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="text-xs uppercase font-semibold tracking-widest text-gray-700 pb-1 border-b border-blue-100 group-hover:text-blue-800 group-focus:text-blue-800">Severity</span></label>
                    <div class="col-span-4 w-full px-0.5 space-y-3 collapsible-content">
    
    <div class="w-full">

                  <div class="flex flex-wrap mt-1 mb-1 space-x-1.5 space-y-2.5" id="filter-scroll">
                    <legend class="sr-only">Severity</legend>
                    <button type="button" class="group inline-flex transition duration-300 button-ease items-center justify-center mx-0.5 mt-1 mb-1.5 px-3.5 py-1.5 border border-blue-500 ring-1 ring-blue-500 text-sm font-medium rounded-full tracking-wide text-gray-700 bg-blue-100 hover:text-gray-800 hover:bg-opacity-30 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400">
                <svg class="md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4 text-red-700 transition duration-300 button-ease" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M10 1.944A11.954 11.954 0 012.166 5C2.056 5.649 2 6.319 2 7c0 5.225 3.34 9.67 8 11.317C14.66 16.67 18 12.225 18 7c0-.682-.057-1.35-.166-2.001A11.954 11.954 0 0110 1.944zM11 14a1 1 0 11-2 0 1 1 0 012 0zm0-7a1 1 0 10-2 0v3a1 1 0 102 0V7z" clip-rule="evenodd"></path>
                </svg>

                <span class="align-middle tracking-wide">Critical</span>
              </button>

                    <button type="button" class="group inline-flex transition duration-300 button-ease items-center justify-center mx-0.5 mt-1 mb-1.5 px-3.5 py-1.5 border border-blue-500 ring-1 ring-blue-500 text-sm font-medium rounded-full tracking-wide text-gray-700 bg-blue-100 hover:text-gray-800 hover:bg-opacity-30 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400">
                <svg class="md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4 text-orange-500 group-hover:text-orange-500 transition duration-300 button-ease" x-description="Heroicon name: solid/x-cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                </svg>




                <span class="align-middle tracking-wide">Error</span>
              </button>
                    
                    
                    
                    
                    
                    
                    
                  <button type="button" class="group inline-flex transition duration-300 button-ease items-center justify-center mx-0.5 mt-1 mb-1.5 px-3.5 py-1.5 border border-blue-500 ring-1 ring-blue-500 text-sm font-medium rounded-full tracking-wide text-gray-700 bg-blue-100 hover:text-gray-800 hover:bg-opacity-30 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400">
                <svg class="md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4 text-yellow-600 group-hover:text-yellow-600 transition duration-300 button-ease" x-description="Heroicon name: solid/x-cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                </svg>





                <span class="align-middle tracking-wide">Warning</span>
              </button><button type="button" class="group inline-flex transition duration-300 button-ease items-center justify-center mx-0.5 mt-1 mb-1.5 px-3.5 py-1.5 border border-gray-300 text-sm font-medium rounded-full tracking-wide text-gray-500 bg-white hover:text-gray-800 hover:border-gray-500 hover:bg-opacity-30 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400 focus:bg-blue-100 focus:text-gray-700">
                <svg class="md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4 text-gray-400 transition duration-300 button-ease" x-description="Heroicon name: solid/x-cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                </svg>






                <span class="align-middle tracking-wide">Info</span>
              </button><button type="button" class="group inline-flex transition duration-300 button-ease items-center justify-center mx-0.5 mt-1 mb-1.5 px-3.5 py-1.5 border border-blue-500 ring-1 ring-blue-500 text-sm font-medium rounded-full tracking-wide text-gray-700 bg-blue-100 hover:text-gray-800 hover:bg-opacity-30 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400">
                <svg class="md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4 text-yellow-800 transition duration-300 button-ease" x-description="Heroicon name: solid/x-cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
                  <g xmlns="http://www.w3.org/2000/svg"><path d="M4,7h8c0-1.518-0.855-2.822-2.101-3.5H10v-1C10,2.224,10.225,2,10.5,2H11V1h-0.5C9.673,1,9,1.673,9,2.5v0.641   C8.679,3.058,8.347,3,8,3S7.321,3.058,7,3.141V2.5C7,1.673,6.327,1,5.5,1H5v1h0.5C5.776,2,6,2.224,6,2.5v1h0.101   C4.855,4.178,4,5.482,4,7z"></path><path d="M12,8.949c1.692-0.245,3-1.691,3-3.449V5h-1v0.5C14,6.878,12.879,8,11.5,8h-7C3.122,8,2,6.878,2,5.5V5H1v0.5   c0,1.758,1.308,3.204,3,3.449V11c0,0.017,0.005,0.033,0.005,0.05C2.311,11.293,1,12.74,1,14.5V15h1v-0.5   c0-1.26,0.939-2.294,2.152-2.465C4.611,13.739,6.151,15,8,15s3.389-1.261,3.848-2.965C13.061,12.206,14,13.24,14,14.5V15h1v-0.5   c0-1.76-1.311-3.207-3.005-3.45C11.995,11.033,12,11.017,12,11V8.949z"></path></g>
                </svg>





                <span class="align-middle tracking-wide">Debug</span>
              </button><button type="button" class="group inline-flex transition duration-300 button-ease items-center justify-center mx-0.5 mt-1 mb-1.5 px-3.5 py-1.5 border border-gray-300 text-sm font-medium rounded-full tracking-wide text-gray-500 bg-white hover:text-gray-800 hover:border-gray-500 hover:bg-opacity-30 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400 focus:bg-blue-100 focus:text-gray-700">
                <svg class="filter saturate-50 hue-rotate-180 brightness-100 text-gray-400 transition duration-300 button-ease rounded-md md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4" icon="framework-browser-js" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true"><path fill="#f0db4f" d="M0 0h512v512H0z"></path><path fill="#323330" d="M470.1 389.89c-3.75-23.36-19-43-64.1-61.28-15.67-7.2-33.15-12.35-38.35-24.23-1.85-6.91-2.1-10.81-.93-15 3.36-13.58 19.57-17.81 32.42-13.92 8.27 2.77 16.1 9.15 20.83 19.32 22.09-14.31 22-14.21 37.47-24-5.64-8.76-8.66-12.8-12.36-16.55-13.28-14.84-31.39-22.48-60.35-21.9l-15.08 1.95c-14.46 3.65-28.23 11.24-36.31 21.41-24.24 27.5-17.32 75.63 12.17 95.44 29.05 21.81 71.74 26.77 77.19 47.16 5.3 25-18.35 33.05-41.86 30.18-17.32-3.6-27-12.41-37.38-28.42-19.17 11.09-19.17 11.09-38.88 22.43 4.67 10.22 9.58 14.85 17.42 23.7 37.09 37.62 129.9 35.77 146.54-21.17.68-2.01 5.16-15.01 1.56-35.12zM278.34 235.32h-47.89l-.2 123.81c0 26.33 1.37 50.47-2.92 57.86-7 14.56-25.16 12.75-33.43 9.93-8.42-4.14-12.71-10-17.67-18.34-1.36-2.39-2.38-4.24-2.72-4.38L134.57 428c6.47 13.29 16 24.82 28.23 32.32 18.25 10.95 42.77 14.31 68.43 8.42 16.69-4.87 31.1-14.94 38.64-30.27 10.9-20.1 8.56-44.44 8.47-71.35.24-43.86 0-87.76 0-131.8z"></path>
                            
                </svg>





                <span class="align-middle tracking-wide">Browser JS</span>
              </button><button type="button" class="group inline-flex transition duration-300 button-ease items-center justify-center mx-0.5 mt-1 mb-1.5 px-3.5 py-1.5 border border-gray-300 text-sm font-medium rounded-full tracking-wide text-gray-500 bg-white hover:text-gray-800 hover:border-gray-500 hover:bg-opacity-30 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400 focus:bg-blue-100 focus:text-gray-700">
                <svg class="filter saturate-50 hue-rotate-180 contrast-75 text-gray-400 transition duration-300 button-ease rounded-md md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4" icon="framework-pyramid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true">
    <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path>
                            <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path>
                            <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path>
                            <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path>
                            
                </svg>





                <span class="align-middle tracking-wide">Pyramid</span>
              </button></div>

                </div><div class="w-full hidden">
                  <div class="mt-3 relative flex rounded-md shadow-none">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" aria-hidden="true">
                        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
                      </svg></div><input id="project-search" type="search" class="block w-full shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md pl-10" data-testid="project-search" placeholder="Search">
                  </div>
                  <p class="mt-2 text-sm text-red-600 invisible hidden" id="project-search-error">&amp;nbsp</p>
                </div>
                
                <div class="w-full text-sm font-normal text-blue-600 hidden">
                  <a class="flex block -mt-1 justify-center hover:text-blue-800 focus:outline-none focus:text-blue-800" href="#" aria-label="General" title="General">Show Less <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mt-0.5 ml-0.5 self-center" fill="currentColor" viewBox="0 0 24 24">
                      <g xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.293,13.293a.99962.99962,0,0,1,1.41406,0l3,3A.99989.99989,0,0,1,14.293,17.707L13,16.41406V21a1,1,0,0,1-2,0V16.41406L9.707,17.707A.99989.99989,0,0,1,8.293,16.293ZM11,3V7.58594L9.707,6.293A.99989.99989,0,0,0,8.293,7.707l3,3a.99962.99962,0,0,0,1.41406,0l3-3A.99989.99989,0,0,0,14.293,6.293L13,7.58594V3a1,1,0,0,0-2,0Z"></path>
                      </g>
                    </svg>
                  </a>

                </div>
                
    </div>
                    
                </div>
                <div class="group flex justify-between focus:outline-none hidden">
                  <div class="flex space-x-1 items-center">

                    <svg class="-ml-1 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="text-xs uppercase font-semibold tracking-widest text-gray-700 pb-1 border-b border-blue-100 group-hover:text-blue-800">Severity</span>
                  </div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium tracking-wide bg-blue-100 text-blue-800">
                    <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path>
                    </svg>
                    4
                  </span>

                </div><div class="w-full hidden">
                  <div class="mt-1 relative flex rounded-md shadow-none">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" aria-hidden="true">
                        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
                      </svg></div><input id="project-search" type="search" class="block w-full shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md pl-10" data-testid="project-search" placeholder="Search">
                  </div>
                  <p class="mt-2 text-sm text-red-600 invisible hidden" id="project-search-error">&amp;nbsp</p>
                </div>
                
                <div class="w-full text-sm font-normal text-blue-600 hidden">
                  <a class="-mt-3 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="General" title="General">Show all...</a>

                </div>
              </li>

              <li class="relative bg-white py-3 pl-6 pr-5 space-y-3 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600">
                <div class="group flex justify-between focus:outline-none">
                  <div class="flex space-x-1 items-center">

                    <svg class="-ml-1 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="text-xs uppercase font-semibold tracking-widest text-gray-700 pb-1 border-b border-blue-100 group-hover:text-blue-800">Frameworks</span>
                  </div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium tracking-wide bg-blue-100 text-blue-800">
                    <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path>
                    </svg>All</span>

                </div>
                <div class="w-full hidden">
                  <div class="mt-1 relative flex rounded-md shadow-none">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" aria-hidden="true">
                        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
                      </svg></div><input id="project-search" type="search" class="block w-full shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md pl-10" data-testid="project-search" placeholder="Search">
                  </div>
                  <p class="mt-2 text-sm text-red-600 invisible hidden" id="project-search-error">&amp;nbsp</p>
                </div>
                <div class="w-full hidden">

                  <fieldset class="space-y-0.5 border-0">
                    <legend class="sr-only">Projects</legend>
                    <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                      <div class="flex items-center h-5">
                        <input id="env-at-product-demo" aria-describedby="project-mox" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                      </div>
                      <div class="ml-3 text-sm">
                        <label for="env-at-product-demo" class="font-medium text-gray-700">at-product-demo</label>

                      </div>
                    </div>

                    <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                      <div class="flex items-center h-5">
                        <input id="env-development" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                      </div>
                      <div class="ml-3 text-sm">
                        <label for="env-development" class="font-medium text-gray-700">development</label>

                      </div>
                    </div>
                    <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                      <div class="flex items-center h-5">
                        <input id="env-production" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                      </div>
                      <div class="ml-3 text-sm">
                        <label for="env-production" class="font-medium text-gray-700">production</label>

                      </div>
                    </div>
                    <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md">
                      <div class="flex items-center h-5">
                        <input id="env-staging" aria-describedby="project-mox-workers" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded">
                      </div>
                      <div class="ml-3 text-sm">
                        <label for="env-staging" class="font-medium text-gray-700">staging</label>

                      </div>
                    </div>
                  </fieldset>

                </div>
                <div class="w-full text-sm font-normal text-blue-600 hidden">
                  <a class="-mt-3 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="General" title="General">Show all...</a>

                </div>
              </li>
            </ul>
          </nav>

        </div><div class="h-auto relative flex flex-col lg:w-60 xl:w-72 2xl:w-80 border-r border-t border-gray-100 bg-transparent py-3 pl-6 pr-5 bg-blue-50 -mt-0.5 rounded-t-md">
          
          <!-- Left content starts here -->
          <div class="block flex flex-row-reverse grid grid-cols-3 items-center">
    <div class="col-span-3 xl:col-span-1 mt-1.5 xl:mt-0 group flex space-x-1.5 justify-center xl:justify-end focus:outline-none">
                    <span class="w-full xl:w-auto inline-flex items-center px-2.5 py-1 rounded-full justify-center text-xs tracking-wide text-yellow-700 bg-yellow-200">
                      <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path>
    </svg><span class="inline-flex xl:hidden">We ♥&nbsp;</span>Feedback</span><button type="button" class="h-6 w-6 inline-flex transition duration-300 button-ease justify-center items-center px-0.5 py-0.5 border border-transparent text-sm font-medium rounded-full tracking-wide text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700 hidden">
                      <svg class="h-4 w-4 text-blue-50" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                      </svg>

                    </button>
                  </div><input id="collapsible-feedback" class="toggle" type="checkbox" checked=""><label for="collapsible-feedback" class="group col-span-3 xl:col-span-2 sh-toggle flex inline-flex order-first space-x-1 items-center hover:text-blue-800 focus:text-blue-800 focus:outline-none" tabindex="0"><svg class="-ml-1 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="text-sm uppercase font-semibold tracking-widest text-gray-700 pb-0 border-b-0 border-blue-100 group-hover:text-blue-800 group-focus:text-blue-800">Dev Metrics Beta</span></label><div class="col-span-3 w-full px-0.5 space-y-3 collapsible-content">
                <div class="w-full">
                  <p class="mt-2 text-sm text-gray-700 leading-snug items-center">Thank you for trying out our new <span class="font-semibold">Filters </span>and <span class="font-semibold">Metrics page</span>. We appreciate your feedback to help us improve your Rollbar experience and delight you further 😊</p>
                </div>
                <div class="w-full">
                  <div class="mt-3 relative flex rounded-md shadow-none">
                    <div class="absolute inset-y-0 left-0 pl-3 mt-2.5 flex items-top pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-5 w-5 text-gray-400" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                      </svg>

</div><textarea id="feedback" name="feedback" rows="2" class="block w-full shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md pl-10" data-testid="project-search" placeholder="Hey there..."></textarea>
                  </div>
                  <p class="mt-2 text-sm text-red-600 invisible hidden" id="project-search-error">&amp;nbsp</p>
                </div>
                <div class="flex justify-center text-xs uppercase tracking-wide font-normal text-blue-600 hidden">
                  <a class="inline-flex -mt-1.5 justify-center hover:text-blue-800 focus:outline-none focus:text-blue-800" href="#" aria-label="General" title="General">Show More <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mt-0 ml-0.5 self-center" fill="currentColor" viewBox="0 0 120 120">
                      <path xmlns="http://www.w3.org/2000/svg" d="M62.3,62.6l-8.6,8.6V29.3l8.6,8.6c1.4,1.5,3.8,1.6,5.3,0.2c1.5-1.4,1.6-3.8,0.2-5.3c-0.1-0.1-0.1-0.1-0.2-0.2l-15-15  c-1.5-1.5-3.8-1.5-5.3,0l-15,15c-1.4,1.5-1.3,3.9,0.2,5.3c1.4,1.3,3.7,1.3,5.1,0l8.6-8.6v41.9l-8.6-8.6c-1.4-1.5-3.8-1.6-5.3-0.2  c-1.5,1.4-1.6,3.8-0.2,5.3c0.1,0.1,0.1,0.1,0.2,0.2l15,15c1.5,1.5,3.8,1.5,5.3,0l15-15c1.5-1.4,1.6-3.8,0.2-5.3  c-1.4-1.5-3.8-1.6-5.3-0.2C62.5,62.5,62.4,62.5,62.3,62.6z"></path>
                    </svg>
                  </a>

                </div>
        <div class="flex justify-center text-xs uppercase tracking-wide font-normal text-blue-600">
                  <button type="button" class="group inline-flex items-center transition duration-300 button-ease shadow-none px-3.5 py-2 mb-2 border border-transparent text-sm leading-5 tracking-wide rounded-full text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-1 focus:ring-orange-600 focus:border-orange-500">Send Message</button>

                </div><div class="relative mt-6 mb-4 hidden">
  <div class="absolute inset-0 flex items-center" aria-hidden="true">
    <div class="w-3/4 border-t border-transparent mx-auto"></div>
  </div>
  <div class="relative flex justify-center">
    <a class="flex inline-flex -mt-1 pl-2 border border-blue-300 bg-white text-xs tracking-wide leading-normal font-normal text-blue-600 hover:text-blue-800 hover:border-blue-500 focus:outline-none focus:text-blue-800 rounded-full" href="#" aria-label="Show-al" title="Show All">Show All <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-0.5 self-center" fill="currentColor" viewBox="0 -10 120 120">
                      <path xmlns="http://www.w3.org/2000/svg" d="M62.3,62.6l-8.6,8.6V29.3l8.6,8.6c1.4,1.5,3.8,1.6,5.3,0.2c1.5-1.4,1.6-3.8,0.2-5.3c-0.1-0.1-0.1-0.1-0.2-0.2l-15-15  c-1.5-1.5-3.8-1.5-5.3,0l-15,15c-1.4,1.5-1.3,3.9,0.2,5.3c1.4,1.3,3.7,1.3,5.1,0l8.6-8.6v41.9l-8.6-8.6c-1.4-1.5-3.8-1.6-5.3-0.2  c-1.5,1.4-1.6,3.8-0.2,5.3c0.1,0.1,0.1,0.1,0.2,0.2l15,15c1.5,1.5,3.8,1.5,5.3,0l15-15c1.5-1.4,1.6-3.8,0.2-5.3  c-1.4-1.5-3.8-1.6-5.3-0.2C62.5,62.5,62.4,62.5,62.3,62.6z"></path>
                    </svg></a>
  </div>
<div class="frelative flex justify-left text-xs tracking-wide leading-normal font-normal text-blue-600 bg-blue-50 rounded-full hidden">
                  <a class="flex inline-flex -mt-1 pl-2 leading-5 border border-blue-300 bg-blue-50 hover:text-blue-800 hover:border-blue-500 focus:outline-none focus:text-blue-800 rounded-full" href="#" aria-label="General" title="General">Show All <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-0.5 self-center" fill="currentColor" viewBox="0 -10 120 120">
                      <path xmlns="http://www.w3.org/2000/svg" d="M62.3,62.6l-8.6,8.6V29.3l8.6,8.6c1.4,1.5,3.8,1.6,5.3,0.2c1.5-1.4,1.6-3.8,0.2-5.3c-0.1-0.1-0.1-0.1-0.2-0.2l-15-15  c-1.5-1.5-3.8-1.5-5.3,0l-15,15c-1.4,1.5-1.3,3.9,0.2,5.3c1.4,1.3,3.7,1.3,5.1,0l8.6-8.6v41.9l-8.6-8.6c-1.4-1.5-3.8-1.6-5.3-0.2  c-1.5,1.4-1.6,3.8-0.2,5.3c0.1,0.1,0.1,0.1,0.2,0.2l15,15c1.5,1.5,3.8,1.5,5.3,0l15-15c1.5-1.4,1.6-3.8,0.2-5.3  c-1.4-1.5-3.8-1.6-5.3-0.2C62.5,62.5,62.4,62.5,62.3,62.6z"></path>
                    </svg></a>

                </div></div><div class="flex justify-center w-full text-xs tracking-wide leading-normal font-normal text-blue-600 hidden">
                  <a class="flex inline-flex -mt-1 pl-2 leading-5 border border-blue-300 bg-blue-50 hover:text-blue-800 hover:border-blue-500 focus:outline-none focus:text-blue-800 rounded-full" href="#" aria-label="General" title="General">Show All <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-0.5 self-center" fill="currentColor" viewBox="0 -10 120 120">
                      <path xmlns="http://www.w3.org/2000/svg" d="M62.3,62.6l-8.6,8.6V29.3l8.6,8.6c1.4,1.5,3.8,1.6,5.3,0.2c1.5-1.4,1.6-3.8,0.2-5.3c-0.1-0.1-0.1-0.1-0.2-0.2l-15-15  c-1.5-1.5-3.8-1.5-5.3,0l-15,15c-1.4,1.5-1.3,3.9,0.2,5.3c1.4,1.3,3.7,1.3,5.1,0l8.6-8.6v41.9l-8.6-8.6c-1.4-1.5-3.8-1.6-5.3-0.2  c-1.5,1.4-1.6,3.8-0.2,5.3c0.1,0.1,0.1,0.1,0.2,0.2l15,15c1.5,1.5,3.8,1.5,5.3,0l15-15c1.5-1.4,1.6-3.8,0.2-5.3  c-1.4-1.5-3.8-1.6-5.3-0.2C62.5,62.5,62.4,62.5,62.3,62.6z"></path>
                    </svg></a>

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

        </div></aside>
    </main>
  </div>
</div>

script.js

import * as tailwindcss from "https://cdn.skypack.dev/[email protected]";
import TailwindcssUi from "https://cdn.skypack.dev/@tailwindcss/[email protected]";
import TailwindcssCustomForms from "https://cdn.skypack.dev/@tailwindcss/[email protected]";

style.css

/* Note: Using Tailwind Components V2 CSS */

body {
  font-family: Bio-sans, -apple-system, sans-serif;
}

textarea,
input[type="range"],
input,
input:matches([type="password"], [type="search"]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /*-webkit-tap-highlight-color: transparent;*/
}

#slim-scroll::-webkit-scrollbar {
  width: 4px;
  cursor: pointer;
}
#slim-scroll::-webkit-scrollbar-track {
  background-color: rgba(232, 234, 240, var(--bg-opacity));
  cursor: pointer;
}
#slim-scroll::-webkit-scrollbar-thumb {
  cursor: pointer;
  background-color: #B8C4DB;
}

input#collapsible[type="checkbox"],
input#collapsible-env[type="checkbox"],
input#collapsible-sev[type="checkbox"],
input#collapsible-feedback[type="checkbox"],
input#collapsible-filter[type="checkbox"] {
  display: none;
}

.sh-toggle {
  cursor: pointer;
  transition: all 0.25s ease-out;
}

.sh-toggle:hover {
  color: #054dd7;
}

.sh-toggle svg {
  transform: rotate(180deg);
  transition: transform 0.2s ease-out;
}

.toggle:checked + .sh-toggle svg {
  transform: rotate(0deg);
}

.collapsible-content {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.25s ease-in-out;
}

.toggle:checked + .sh-toggle + .collapsible-content {
  max-height: 100vh;
}

.filter-toggle {
  cursor: pointer;
  transition: all 0.25s ease-out;
  z-index: 99;
}

.filter-toggle:hover {
  color: #054dd7;
}

@media screen and (min-width: 1024px) {
  .filter-toggle {
    transform: translateX(-15rem);
    transition: transform 0.2s ease-out;
  }
}

@media screen and (min-width: 1280px) {
  .filter-toggle {
    transform: translateX(-18rem);
    transition: transform 0.2s ease-out;
  }
}

@media screen and (min-width: 1536px) {
  .filter-toggle {
    transform: translateX(-20rem);
    transition: transform 0.2s ease-out;
  }
}

.toggle:checked + .filter-toggle {
  transform: translateX(0rem);
  transition: transform 0.2s ease-out;
}

.filter-toggle div svg {
  transform: rotate(180deg);
  transition: transform 0.2s ease-out;
}

.toggle:checked + .filter-toggle div svg {
  transform: rotate(0deg);
}

aside.collapsible-filter {
  max-width: 0px;
  overflow-x: hidden;
  transition: max-width 0.25s ease-in-out;
}

.toggle:checked + .filter-toggle + aside.collapsible-filter {
  max-width: 20rem;
}

button,
input,
optgroup,
select,
textarea {
  font-family: Bio-sans, -apple-system, sans-serif;
}

.text-md {
  font-size: 0.937rem;
  line-height: 1.25rem;
}

.border-2 {
  border-width: 2px;
}

.hover\:border-2:hover {
  border-width: 2px;
}

.bg-current-nav-item {
  --tw-bg-opacity: 1;
  background-color: rgba(59, 115, 255, var(--tw-bg-opacity));
}

.tracking-wide {
  letter-spacing: 0.009em;
}

.tracking-wider {
  letter-spacing: 0.018em;
}

.tracking-widest {
  letter-spacing: 0.025em;
}

.border,
.border-0,
.border-2,
.border-4,
.border-8,
.border-b,
.border-b-2,
.border-l-2,
.border-r,
.border-r-2,
.border-t,
.border-t-2,
.border-t-4,
.lg\:border-b-0,
.md\:border-t-4 {
  --tw-border-opacity: 1;
  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}

.border-transparent {
  border-color: transparent;
}

.h-9\.5 {
  height: 2.375rem;
}

div.tooltip {
  position: relative;
}

.tooltip .tooltip-bottom {
  visibility: hidden;
  position: absolute;
  top: 80%;
  left: 0.25rem;
  z-index: 99;
}

div.tooltip:hover .tooltip-bottom {
  visibility: visible;
}

.tooltip-bottom::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 16px solid #343f55;
  transform: rotate(45deg);
  border-radius: 4px 0px 10px 0px;
  position: relative;
  top: 10px;
  left: calc(50% - 8px);
  z-index: -1;
}

input,
select,
textarea {
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
}

.bg-gray-50 {
  background-color: rgba(247, 249, 253, var(--tw-bg-opacity));
}

.bg-gray-100 {
  background-color: rgba(236, 241, 249, var(--tw-bg-opacity));
}

.bg-gray-200 {
  background-color: rgba(219, 227, 243, var(--tw-bg-opacity));
}

.bg-gray-300 {
  background-color: rgba(182, 193, 215, var(--tw-bg-opacity));
}

.bg-gray-600 {
  background-color: rgba(72, 85, 112, var(--tw-bg-opacity));
}

.bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgba(52, 63, 85, var(--tw-bg-opacity));
}
.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgba(48, 56, 75, var(--tw-bg-opacity));
}

.bg-gray-900 {
  background-color: rgba(40, 47, 62, var(--tw-bg-opacity));
}

.bg-blue-50 {
  background-color: rgba(248, 251, 255, var(--tw-bg-opacity));
}

.bg-blue-100 {
  background-color: rgba(235, 242, 255, var(--tw-bg-opacity));
}

.bg-blue-200 {
  background-color: rgba(216, 230, 255, var(--tw-bg-opacity));
}

.bg-blue-300 {
  background-color: rgba(177, 206, 251, var(--tw-bg-opacity));
}

.bg-blue-500 {
  background-color: rgba(68, 132, 255, var(--tw-bg-opacity));
}

.bg-blue-600 {
  background-color: rgba(60, 114, 255, var(--tw-bg-opacity));
}

.bg-blue-700 {
  background-color: rgba(32, 91, 246, var(--tw-bg-opacity));
}

.bg-blue-800 {
  background-color: rgba(5, 77, 215, var(--tw-bg-opacity));
}

.bg-blue-900 {
  background-color: rgba(0, 60, 176, var(--tw-bg-opacity));
}

.bg-yellow-50 {
  background-color: rgba(255, 252, 240, var(--tw-bg-opacity));
}

.bg-yellow-100 {
  background-color: rgba(255, 250, 223, var(--tw-bg-opacity));
}

.bg-yellow-200 {
  background-color: rgba(255, 246, 197, var(--tw-bg-opacity));
}

.bg-yellow-300 {
  background-color: rgba(255, 229, 138, var(--tw-bg-opacity));
}

.bg-yellow-400 {
  background-color: rgba(255, 215, 72, var(--tw-bg-opacity));
}

.bg-yellow-500 {
  background-color: rgba(253, 200, 11, var(--tw-bg-opacity));
}

.bg-yellow-600 {
  background-color: rgba(235, 169, 0, var(--tw-bg-opacity));
}

.bg-yellow-700 {
  background-color: rgba(189, 117, 9, var(--tw-bg-opacity));
}

.bg-orange-50 {
  background-color: rgba(255, 246, 242, var(--tw-bg-opacity));
}

.bg-orange-100 {
  background-color: rgba(255, 233, 223, var(--tw-bg-opacity));
}

.bg-orange-200 {
  background-color: rgba(255, 222, 207, var(--tw-bg-opacity));
}

.bg-orange-300 {
  background-color: rgba(255, 189, 152, var(--tw-bg-opacity));
}

.bg-orange-400 {
  background-color: rgba(255, 158, 116, var(--tw-bg-opacity));
}

.bg-orange-500 {
  background-color: rgba(255, 142, 91, var(--tw-bg-opacity));
}

.bg-orange-600 {
  background-color: rgba(244, 107, 46, var(--tw-bg-opacity));
}

.bg-orange-700 {
  background-color: rgba(227, 88, 25, var(--tw-bg-opacity));
}

.bg-red-50 {
  background-color: rgba(253, 248, 248, var(--tw-bg-opacity));
}
.bg-red-200 {
  background-color: rgba(255, 224, 222, var(--tw-bg-opacity));
}

.bg-red-300 {
  background-color: rgba(255, 166, 160, var(--tw-bg-opacity));
}

.bg-red-400 {
  background-color: rgba(248, 135, 127, var(--tw-bg-opacity));
}

.bg-red-500 {
  background-color: rgba(246, 96, 81, var(--tw-bg-opacity));
}

.bg-red-600 {
  background-color: rgba(235, 81, 66, var(--tw-bg-opacity));
}

.bg-red-700 {
  background-color: rgba(227, 88, 25, var(--tw-bg-opacity));
}

.text-gray-50 {
  color: rgba(247, 249, 253, var(--tw-text-opacity));
}

.text-gray-100 {
  color: rgba(236, 241, 249, var(--tw-text-opacity));
}

.text-gray-200 {
  color: rgba(219, 227, 243, var(--tw-text-opacity));
}

.text-gray-300 {
  color: rgba(182, 193, 215, var(--tw-text-opacity));
}

.text-gray-400 {
  color: rgba(127, 146, 185, var(--tw-text-opacity));
}

.text-gray-500 {
  color: rgba(94, 109, 140, var(--tw-text-opacity));
}

.text-gray-600 {
  color: rgba(72, 85, 112, var(--tw-text-opacity));
}

.text-gray-700 {
  color: rgba(52, 63, 85, var(--tw-text-opacity));
}

.text-gray-800 {
  color: rgba(48, 56, 75, var(--tw-text-opacity));
}

.text-blue-100 {
  --tw-text-opacity: 1;
  color: rgba(235, 242, 255, var(--tw-text-opacity));
}

.text-blue-200 {
  --tw-text-opacity: 1;
  color: rgba(216, 230, 255, var(--tw-text-opacity));
}

.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgba(177, 206, 251, var(--tw-text-opacity));
}

.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgba(82, 146, 255, var(--tw-text-opacity));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgba(60, 114, 255, var(--tw-text-opacity));
}

.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgba(32, 91, 246, var(--tw-text-opacity));
}

.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgba(5, 77, 215, var(--tw-text-opacity));
}

.text-blue-900 {
  --tw-text-opacity: 1;
  color: rgba(0, 60, 176, var(--tw-text-opacity));
}

.text-yellow-50 {
  color: rgba(255, 252, 240, var(--tw-text-opacity));
}

.text-yellow-100 {
  color: rgba(255, 250, 223, var(--tw-text-opacity));
}

.text-yellow-200 {
  color: rgba(255, 246, 197, var(--tw-text-opacity));
}

.text-yellow-300 {
  color: rgba(255, 229, 138, var(--tw-text-opacity));
}

.text-yellow-400 {
  color: rgba(255, 215, 72, var(--tw-text-opacity));
}

.text-yellow-500 {
  color: rgba(253, 200, 11, var(--tw-text-opacity));
}

.text-yellow-600 {
  color: rgba(235, 169, 0, var(--tw-text-opacity));
}

.text-yellow-700 {
  color: rgba(189, 117, 9, var(--tw-text-opacity));
}

.text-orange-50 {
  color: rgba(255, 246, 242, var(--tw-text-opacity));
}

.text-orange-100 {
  color: rgba(255, 233, 223, var(--tw-text-opacity));
}

.text-orange-200 {
  color: rgba(255, 222, 207, var(--tw-text-opacity));
}

.text-orange-300 {
  color: rgba(255, 189, 152, var(--tw-text-opacity));
}

.text-orange-400 {
  color: rgba(255, 158, 116, var(--tw-text-opacity));
}

.text-orange-500 {
  color: rgba(255, 142, 91, var(--tw-text-opacity));
}

.text-orange-600 {
  color: rgba(244, 107, 46, var(--tw-text-opacity));
}

.text-orange-700 {
  color: rgba(227, 88, 25, var(--tw-text-opacity));
}

.text-orange-800 {
  color: rgba(202, 79, 22, var(--tw-text-opacity));
}

.text-red-50 {
  color: rgba(253, 248, 248, var(--tw-text-opacity));
}
.text-red-200 {
  color: rgba(255, 224, 222, var(--tw-text-opacity));
}

.text-red-300 {
  color: rgba(255, 166, 160, var(--tw-text-opacity));
}

.text-red-400 {
  color: rgba(248, 135, 127, var(--tw-text-opacity));
}

.text-red-500 {
  color: rgba(246, 96, 81, var(--tw-text-opacity));
}

.text-red-600 {
  color: rgba(235, 81, 66, var(--tw-text-opacity));
}

.text-red-700 {
  color: rgba(216, 53, 37, var(--tw-text-opacity));
}

.divide-gray-50 {
  border-color: rgba(247, 249, 253, var(--tw-divide-opacity));
}

.divide-gray-100 {
  border-color: rgba(236, 241, 249, var(--tw-divide-opacity));
}

.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgba(236, 241, 249, var(--tw-divide-opacity));
}

.divide-gray-200 {
  border-color: rgba(219, 227, 243, var(--tw-divide-opacity));
}

.divide-blue-50 {
  border-color: rgba(248, 251, 255, var(--tw-divide-opacity));
}

.divide-blue-100 {
  border-color: rgba(235, 242, 255, var(--tw-divide-opacity));
}

.border-blue-50 {
  border-color: rgba(248, 251, 255, var(--tw-border-opacity));
}

.border-blue-100 {
  border-color: rgba(235, 242, 255, var(--tw-border-opacity));
}

.border-blue-200 {
  border-color: rgba(216, 230, 255, var(--tw-border-opacity));
}

.border-blue-300 {
  border-color: rgba(177, 206, 251, var(--tw-border-opacity));
}

.border-blue-400 {
  border-color: rgba(82, 146, 255, var(--tw-border-opacity));
}

.border-blue-500 {
  border-color: rgba(68, 132, 255, var(--tw-border-opacity));
}

.border-blue-600 {
  border-color: rgba(60, 114, 255, var(--tw-border-opacity));
}

.border-blue-700 {
  border-color: rgba(32, 91, 246, var(--tw-border-opacity));
}

.border-blue-800 {
  border-color: rgba(5, 77, 215, var(--tw-border-opacity));
}

.border-gray-50 {
  border-color: rgba(247, 249, 253, var(--tw-border-opacity));
}

.border-gray-100 {
  border-color: rgba(236, 241, 249, var(--tw-border-opacity));
}

.border-gray-200 {
  border-color: rgba(219, 227, 243, var(--tw-border-opacity));
}

.border-gray-300 {
  border-color: rgba(182, 193, 215, var(--tw-border-opacity));
}

.border-gray-400 {
  border-color: rgba(127, 146, 185, var(--tw-border-opacity));
}
.border-gray-500 {
  border-color: rgba(94, 109, 140, var(--tw-border-opacity));
}
.border-gray-600 {
  border-color: rgba(72, 85, 112, var(--tw-border-opacity));
}
.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgba(52, 63, 85, var(--tw-border-opacity));
}

.hover\:bg-gray-50:hover {
  background-color: rgba(247, 249, 253, var(--tw-bg-opacity));
}

.hover\:bg-gray-600:hover {
  background-color: rgba(72, 85, 112, var(--tw-bg-opacity));
}

.hover\:bg-gray-700:hover {
  background-color: rgba(52, 63, 85, var(--tw-bg-opacity));
}

.hover\:bg-gray-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(48, 56, 75, var(--tw-bg-opacity));
}

.hover\:bg-gray-900:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(40, 47, 62, var(--tw-bg-opacity));
}

.hover\:bg-blue-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(248, 251, 255, var(--tw-bg-opacity));
}

.hover\:bg-blue-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(235, 242, 255, var(--tw-bg-opacity));
}

.hover\:bg-blue-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(216, 230, 255, var(--tw-bg-opacity));
}

.hover\:bg-blue-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(177, 206, 251, var(--tw-bg-opacity));
}

.hover\:bg-blue-700:hover {
  background-color: rgba(32, 91, 246, var(--tw-bg-opacity));
}

.hover\:bg-blue-800:hover {
  background-color: rgba(5, 77, 215, var(--tw-bg-opacity));
}

.hover\:bg-blue-900:hover {
  background-color: rgba(0, 60, 176, var(--tw-bg-opacity));
}

.hover\:border-blue-300:hover {
  border-color: rgba(177, 206, 251, var(--tw-border-opacity));
}

.hover\:border-gray-500:hover {
  border-color: rgba(94, 109, 140, var(--tw-border-opacity));
}

.hover\:text-gray-200:hover  {
  --tw-text-opacity: 1;
  color: rgba(219, 227, 243, var(--tw-text-opacity));
}

.hover\:text-gray-500:hover {
  color: rgba(94, 109, 140, var(--tw-text-opacity));
}

.hover\:text-gray-600:hover {
  color: rgba(72, 85, 112, var(--tw-text-opacity));
}

.hover\:text-gray-700:hover {
  color: rgba(52, 63, 85, var(--tw-text-opacity));
}

.hover\:text-gray-800:hover {
  color: rgba(48, 56, 75, var(--tw-text-opacity));
}

.hover\:text-blue-100:hover {
  --tw-text-opacity: 1;
  color: rgba(235, 242, 255, var(--tw-text-opacity));
}

.hover\:text-blue-200:hover {
  --tw-text-opacity: 1;
  color: rgba(216, 230, 255, var(--tw-text-opacity));
}

.hover\:text-blue-700:hover {
  color: rgba(32, 91, 246, var(--tw-text-opacity));
}

.hover\:text-blue-800:hover {
  color: rgba(5, 77, 215, var(--tw-text-opacity));
}

.hover\:text-orange-700:hover {
  color: rgba(227, 88, 25, var(--tw-text-opacity));
}

.hover\:text-orange-800:hover {
  color: rgba(202, 79, 22, var(--tw-text-opacity));
}

.group:hover .group-hover\:text-orange-500 {
  --tw-text-opacity: 1;
  color: rgba(255, 142, 91, var(--tw-text-opacity));
}

.group:hover .group-hover\:text-orange-600 {
  --tw-text-opacity: 1;
  color: rgba(244, 107, 46, var(--tw-text-opacity));
}

.group:hover .group-hover\:text-orange-700 {
  --tw-text-opacity: 1;
  color: rgba(227, 88, 25, var(--tw-text-opacity));
}

.group:hover .group-hover\:text-orange-800 {
  --tw-text-opacity: 1;
  color: rgba(202, 79, 22, var(--tw-text-opacity));
}

.group:hover .group-hover\:text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgba(255, 215, 72, var(--tw-text-opacity));
}

.group:hover .group-hover\:text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgba(253, 200, 11, var(--tw-text-opacity));
}

.group:hover .group-hover\:text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgba(235, 169, 0, var(--tw-text-opacity));
}

.group:hover .group-hover\:text-blue-800 {
  --tw-text-opacity: 1;
  color: rgba(5, 77, 215, var(--tw-text-opacity));
}

.group:hover .group-hover\:bg-blue-200 {
  --tw-bg-opacity: 1;
  background-color: rgba(216, 230, 255, var(--tw-bg-opacity));
}

group-hover:bg-blue-500 .group-hover\:bg-blue-500 {
  background-color: rgba(68, 132, 255, var(--tw-bg-opacity));
}

group-hover:bg-blue-600 .group-hover\:bg-blue-600 {
  background-color: rgba(60, 114, 255, var(--tw-bg-opacity));
}

.group:hover .group-hover\:bg-blue-700 {
  --tw-bg-opacity: 1;
  background-color: rgba(32, 91, 246, var(--tw-bg-opacity));
}

group-hover:bg-gray-500 .group-hover\:bg-gray-600 {
  background-color: rgba(94, 109, 140, var(--tw-bg-opacity));
}

group-hover:bg-gray-600 .group-hover\:bg-gray-600 {
  background-color: rgba(72, 85, 112, var(--tw-bg-opacity));
}

group-hover:bg-gray-700 .group-hover\:bg-gray-700 {
  background-color: rgba(52, 63, 85, var(--tw-bg-opacity));
}

group-hover:text-blue-100 .group-hover\:text-blue-100 {
  color: rgba(235, 242, 255, var(--tw-text-opacity));
}

group-hover:text-blue-200 .group-hover\:text-blue-200 {
  color: rgba(216, 230, 255, var(--tw-text-opacity));
}

.group:hover .group-hover\:text-gray-500 {
  --tw-text-opacity: 1;
  color: rgba(94, 109, 140, var(--tw-text-opacity));
}

group-hover:text-gray-500:hover .group-hover\:text-gray-500 {
  color: rgba(94, 109, 140, var(--tw-text-opacity));
}

group-hover:text-gray-600:hover .group-hover\:text-gray-600 {
  color: rgba(72, 85, 112, var(--tw-text-opacity));
}

group-focus:text-blue-100 .group-focus\:text-blue-100 {
  color: rgba(235, 242, 255, var(--tw-text-opacity));
}

group-focus:text-blue-800 .group-focus\:text-blue-800 {
  color: rgba(5, 77, 215, var(--tw-text-opacity));
}

.focus\:ring-blue-600:focus {
  --tw-ring-color: rgba(60, 114, 255, var(--tw-ring-opacity));
}

.focus\:ring-blue-700:focus {
  --tw-ring-color: rgba(32, 91, 246, var(--tw-ring-opacity));
}

.focus\:ring-blue-800:focus {
  --tw-ring-color: rgba(5, 77, 215, var(--tw-ring-opacity));
}

.focus\:border-blue-400:focus {
  border-color: rgba(82, 146, 255, var(--tw-border-opacity));
}

.focus\:border-blue-500:focus {
  border-color: rgba(68, 132, 255, var(--tw-border-opacity));
}

.focus\:border-blue-600:focus {
  border-color: rgba(60, 114, 255, var(--tw-border-opacity));
}

.focus\:border-blue-700:focus {
  border-color: rgba(32, 91, 246, var(--tw-border-opacity));
}

.focus\:text-blue-800:focus {
  --tw-text-opacity: 1;
  color: rgba(5, 77, 215, var(--tw-text-opacity));
}

.focus\:bg-blue-100:focus {
  --tw-bg-opacity: 1;
  background-color: rgba(235, 242, 255, var(--tw-bg-opacity));
}

.focus\:bg-blue-200:focus {
  --tw-bg-opacity: 1;
  background-color: rgba(216, 230, 255, var(--tw-bg-opacity));
}

.focus\:bg-blue-600:focus {
  --tw-bg-opacity: 1;
  background-color: rgba(60, 114, 255, var(--tw-bg-opacity));
}

.focus\:bg-blue-700:focus {
  --tw-bg-opacity: 1;
  background-color: rgba(32, 91, 246, var(--tw-bg-opacity));
}

.focus\:.text-gray-900:focus {
  color: rgba(40, 47, 62, var(--tw-text-opacity));
}

/*--- input validation ---*/
.border-red-300 {
  color: rgba(255, 166, 160, var(--tw-border-opacity));
}

.placeholder-red-400 {
  color: rgba(248, 135, 127, var(--tw-placeholder-opacity));
}

.placeholder-red-500 {
  color: rgba(246, 96, 81, var(--tw-placeholder-opacity));
}

.placeholder-red-600 {
  color: rgba(235, 81, 66, var(--tw-placeholder-opacity));
}

.hover\:text-red-700:hover {
  color: rgba(227, 88, 25, var(--tw-text-opacity));
}

.hover\:text-red-800:hover {
  color: rgba(192, 46, 33, var(--tw-text-opacity));
}

.group:hover .group-hover\:text-red-700 {
  --tw-text-opacity: 1;
  color: rgba(227, 88, 25, var(--tw-text-opacity));
}

.group:hover .group-hover\:text-red-800 {
  --tw-text-opacity: 1;
  color: rgba(192, 46, 33, var(--tw-text-opacity));
}

.hover\:border-red-500:hover {
  color: rgba(246, 96, 81, var(--tw-border-opacity));
}

.hover\:placeholder-red-600:hover {
  color: rgba(235, 81, 66, var(--tw-placeholder-opacity));
}

.focus\:border-red-300:focus {
  color: rgba(255, 166, 160, var(--tw-border-opacity));
}

.focus\:placeholder-red-600:focus {
  color: rgba(235, 81, 66, var(--tw-placeholder-opacity));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

/*mobile overlay-opacity 75*/
bg-gray-600  {
  --tw-bg-opacity: 1;
  background-color: rgba(72, 85, 112, var(--tw-bg-opacity));
}

/*mobile menu items*/
.hover\:bg-gray-800:hover  {
  --tw-bg-opacity: 1;
  background-color: rgba(48, 56, 75, var(--tw-bg-opacity));
}

.ease-in-out  {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.scale-105,
 .transform  {
  transform: var(--tw-transform);
}

.hover\:scale-105:hover,
 .hover\:transform:hover  {
  transform: var(--tw-transform);
}

.to-gray-50 {
  --tw-gradient-to: #f7f9fd;
}
.to-gray-600 {
  --tw-gradient-to: #485570;
}
.to-gray-700 {
  --tw-gradient-to: #343f55;
}
.to-blue-600 {
  --tw-gradient-to: #3c72ff;
}
.to-blue-700 {
  --tw-gradient-to: #205bf6;
}
.to-blue-800 {
  --tw-gradient-to: #054dd7;
}
.to-blue-900 {
  --tw-gradient-to: #003cb0;
}

.from-blue-50 {
  --tw-gradient-from: #f8fbff;
  --tw-gradient-stops: var(--tw-gradient-from),
    var(--tw-gradient-to, rgba(248, 251, 255, 0));
}
.from-blue-600 {
  --tw-gradient-from: #3c72ff;
  --tw-gradient-stops: var(--tw-gradient-from),
    var(--tw-gradient-to, rgba(60, 115, 255, 0));
}
.from-blue-700 {
  --tw-gradient-from: #205bf6;
  --tw-gradient-stops: var(--tw-gradient-from),
    var(--tw-gradient-to, rgba(32, 91, 246, 0));
}
.from-blue-800 {
  --tw-gradient-from: #054dd7;
  --tw-gradient-stops: var(--tw-gradient-from),
    var(--tw-gradient-to, rgba(5, 77, 215, 0));
}
.from-blue-900 {
  --tw-gradient-from: #003cb0;
  --tw-gradient-stops: var(--tw-gradient-from),
    var(--tw-gradient-to, rgba(0, 60, 176, 0));
}

.via-blue-50 {
  --tw-gradient-stops: var(--tw-gradient-from), #f8fbff,
    var(--tw-gradient-to, rgba(248, 251, 255, 0));
}
.via-blue-500 {
  --tw-gradient-stops: var(--tw-gradient-from), #4484ff,
    var(--tw-gradient-to, rgba(68, 132, 255, 0));
}
.via-blue-600 {
  --tw-gradient-stops: var(--tw-gradient-from), #3c72ff,
    var(--tw-gradient-to, rgba(60, 114, 255, 0));
}
.via-blue-700 {
  --tw-gradient-stops: var(--tw-gradient-from), #205bf6,
    var(--tw-gradient-to, rgba(32, 91, 246, 0));
}
.via-blue-800 {
  --tw-gradient-stops: var(--tw-gradient-from), #054dd7,
    var(--tw-gradient-to, rgba(5, 77, 215, 0));
}

.via-purple-500 {
  --tw-gradient-stops: var(--tw-gradient-from), #7a7cff,
    var(--tw-gradient-to, rgba(122, 124, 255, 0));
}
.via-purple-600 {
  --tw-gradient-stops: var(--tw-gradient-from), #6062ff,
    var(--tw-gradient-to, rgba(96, 98, 255, 0));
}
.via-purple-700 {
  --tw-gradient-stops: var(--tw-gradient-from), #4c48ff,
    var(--tw-gradient-to, rgba(76, 72, 255, 0));
}
.via-gray-600 {
  --tw-gradient-stops: var(--tw-gradient-from), #485570,
    var(--tw-gradient-to, rgba(72, 85, 112, 0));
}
.via-gray-700 {
  --tw-gradient-stops: var(--tw-gradient-from), #343f55,
    var(--tw-gradient-to, rgba(52, 63, 85, 0));
}

.via-white {
  --tw-gradient-stops: var(--tw-gradient-from), #fff,
    var(--tw-gradient-to, rgba(255, 255, 255, 0));
}

.bg-opacity-10 {
  --tw-bg-opacity: 0.1;
}
.bg-opacity-20 {
  --tw-bg-opacity: 0.2;
}
.bg-opacity-30 {
  --tw-bg-opacity: 0.3;
}
.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}
.hover\:bg-opacity-10:hover {
  --tw-bg-opacity: 0.1;
}
.hover\:bg-opacity-20:hover {
  --tw-bg-opacity: 0.2;
}
.hover\:bg-opacity-30:hover {
  --tw-bg-opacity: 0.3;
}
.hover\:bg-opacity-40:hover {
  --tw-bg-opacity: 0.4;
}
.hover\:bg-opacity-50:hover {
  --tw-bg-opacity: 0.5;
}
.hover\:bg-opacity-60:hover {
  --tw-bg-opacity: 0.6;
}
.hover\:bg-opacity-90:hover {
  --tw-bg-opacity: 0.9;
}

.border-r {
  border-right-width: 1px;
}
.border-r-2 {
  border-right-width: 2px;
}

.border-opacity-30 {
  --tw-border-opacity: 0.3;
}
.border-opacity-40 {
  --tw-border-opacity: 0.4;
}
.border-opacity-90 {
  --tw-border-opacity: 0.9;
}

.shadow-sm  {
  --tw-shadow: 0 1px 2px 0 rgba (52, 63, 85, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #343f55),
    var(--tw-ring-shadow, 0 0 #343f55), var(--tw-shadow);
}

@media (min-width: 640px) {
  .sm\:shadow-sm  {
    --tw-shadow: 0 1px 2px 0 rgba (52, 63, 85, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #343f55),
      var(--tw-ring-shadow, 0 0 #343f55), var(--tw-shadow);
  }
}

@media (min-width: 1280px) {
  .xl\:border-gray-100 {
    border-color: rgba(236, 241, 249, var(--tw-border-opacity));
  }
  .xl\:border-gray-200 {
    border-color: rgba(219, 227, 243, var(--tw-border-opacity));
  }
}

/*to add variant plugin for hover and group-hover font-{weight}

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
       fontWeight: ['hover', 'focus'],
      }
    }
  } */

styles

<link href="https://use.typekit.net/wfk6sbz.css" rel="stylesheet" />
<link href="https://heyatsuko.com/libs/rb-tw.css" rel="stylesheet" />
<link href="https://tailwindui.com/css/components-v2.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css" rel="stylesheet" />

troubleshoot-metrics-backup.markdown

Troubleshoot Metrics Backup

A Pen by Atsuko on CodePen.

License.