From 0db3dac0ec0ab06dd8157fd2ba481a985d20dc02 Mon Sep 17 00:00:00 2001
From: Sipke Schoorstra <sipkeschoorstra@outlook.com>
Date: Sun, 8 Nov 2020 22:55:03 +0100
Subject: [PATCH] Incremental work on designer

---
 .../Shared/ClientApp/public/index.html        |    15 +-
 .../Shared/ClientApp/public/tailwind.css      | 11509 ++--------------
 .../Shared/ClientApp/public/tile.png          |   Bin 0 -> 10561 bytes
 .../ClientApp/public/workflow-designer.html   |   405 +
 .../ClientApp/public/workflow-instances.html  |     7 +-
 .../Shared/ClientApp/public/workflows.html    |    12 +-
 .../Shared/ClientApp/src/index.html           |     8 +-
 .../Shared/ClientApp/src/partials/layout.html |     3 +-
 .../ClientApp/src/partials/navmenu.html       |     4 +-
 .../Shared/ClientApp/src/tailwind.css         |    63 +
 .../ClientApp/src/workflow-designer.html      |   106 +
 .../Shared/ClientApp/src/workflows.html       |     5 +-
 .../Shared/ClientApp/tailwind.config.js       |    34 +-
 13 files changed, 1883 insertions(+), 10288 deletions(-)
 create mode 100644 src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/tile.png
 create mode 100644 src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflow-designer.html
 create mode 100644 src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/workflow-designer.html
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/index.html b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/index.html
index 182cfbcbc..71b74f47f 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/index.html
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/index.html
@@ -9,6 +9,7 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
     <link rel="stylesheet" href="/tailwind.css">
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.0/joint.css">
     <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.js" defer=""></script>
 </head>
 <body class="antialiased font-sans bg-gray-200 overflow-hidden">
@@ -18,12 +19,12 @@
         <div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" x-keydown.window.escape="sidebarOpen = false">
             <div x-show="sidebarOpen" class="md:hidden" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state." style="display: none;">
     <div class="fixed inset-0 flex z-40">
-        <div @click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0" style="display: none;">
+        <div x-on:click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0" style="display: none;">
             <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
         </div>
         <div x-show="sidebarOpen" x-description="Off-canvas menu, show/hide based on off-canvas menu state." x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="relative flex-1 flex flex-col max-w-xs w-full bg-white" style="display: none;">
             <div class="absolute top-0 right-0 -mr-14 p-1">
-                <button x-show="sidebarOpen" @click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar" style="display: none;">
+                <button x-show="sidebarOpen" x-on:click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar" style="display: none;">
                     <svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                     </svg>
@@ -130,9 +131,15 @@
                         </svg>
                     </button>
                 </div>
-                <main class="flex-1 relative z-0 overflow-y-auto focus:outline-none" tabindex="0" x-data="" x-init="$el.focus()">
+                <main class="flex flex-1 flex-col relative z-0 overflow-y-auto focus:outline-none" tabindex="0" x-data="" x-init="$el.focus()">
                     
-    HUUUUUU
+    <div class="border-b border-gray-200 px-4 py-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8">
+        <div class="flex-1 min-w-0">
+            <h1 class="text-lg font-medium leading-6 text-gray-900 sm:truncate">
+                Home
+            </h1>
+        </div>
+    </div>
 
                 </main>
             </div>
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/tailwind.css b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/tailwind.css
index 8592354c4..73a5d8a95 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/tailwind.css
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/tailwind.css
@@ -17266,6 +17266,206 @@ video {
   border-left-width: 1px;
 }
 
+.hover\:border-0:hover {
+  border-width: 0;
+}
+
+.hover\:border-2:hover {
+  border-width: 2px;
+}
+
+.hover\:border-4:hover {
+  border-width: 4px;
+}
+
+.hover\:border-8:hover {
+  border-width: 8px;
+}
+
+.hover\:border:hover {
+  border-width: 1px;
+}
+
+.hover\:border-t-0:hover {
+  border-top-width: 0;
+}
+
+.hover\:border-r-0:hover {
+  border-right-width: 0;
+}
+
+.hover\:border-b-0:hover {
+  border-bottom-width: 0;
+}
+
+.hover\:border-l-0:hover {
+  border-left-width: 0;
+}
+
+.hover\:border-t-2:hover {
+  border-top-width: 2px;
+}
+
+.hover\:border-r-2:hover {
+  border-right-width: 2px;
+}
+
+.hover\:border-b-2:hover {
+  border-bottom-width: 2px;
+}
+
+.hover\:border-l-2:hover {
+  border-left-width: 2px;
+}
+
+.hover\:border-t-4:hover {
+  border-top-width: 4px;
+}
+
+.hover\:border-r-4:hover {
+  border-right-width: 4px;
+}
+
+.hover\:border-b-4:hover {
+  border-bottom-width: 4px;
+}
+
+.hover\:border-l-4:hover {
+  border-left-width: 4px;
+}
+
+.hover\:border-t-8:hover {
+  border-top-width: 8px;
+}
+
+.hover\:border-r-8:hover {
+  border-right-width: 8px;
+}
+
+.hover\:border-b-8:hover {
+  border-bottom-width: 8px;
+}
+
+.hover\:border-l-8:hover {
+  border-left-width: 8px;
+}
+
+.hover\:border-t:hover {
+  border-top-width: 1px;
+}
+
+.hover\:border-r:hover {
+  border-right-width: 1px;
+}
+
+.hover\:border-b:hover {
+  border-bottom-width: 1px;
+}
+
+.hover\:border-l:hover {
+  border-left-width: 1px;
+}
+
+.focus\:border-0:focus {
+  border-width: 0;
+}
+
+.focus\:border-2:focus {
+  border-width: 2px;
+}
+
+.focus\:border-4:focus {
+  border-width: 4px;
+}
+
+.focus\:border-8:focus {
+  border-width: 8px;
+}
+
+.focus\:border:focus {
+  border-width: 1px;
+}
+
+.focus\:border-t-0:focus {
+  border-top-width: 0;
+}
+
+.focus\:border-r-0:focus {
+  border-right-width: 0;
+}
+
+.focus\:border-b-0:focus {
+  border-bottom-width: 0;
+}
+
+.focus\:border-l-0:focus {
+  border-left-width: 0;
+}
+
+.focus\:border-t-2:focus {
+  border-top-width: 2px;
+}
+
+.focus\:border-r-2:focus {
+  border-right-width: 2px;
+}
+
+.focus\:border-b-2:focus {
+  border-bottom-width: 2px;
+}
+
+.focus\:border-l-2:focus {
+  border-left-width: 2px;
+}
+
+.focus\:border-t-4:focus {
+  border-top-width: 4px;
+}
+
+.focus\:border-r-4:focus {
+  border-right-width: 4px;
+}
+
+.focus\:border-b-4:focus {
+  border-bottom-width: 4px;
+}
+
+.focus\:border-l-4:focus {
+  border-left-width: 4px;
+}
+
+.focus\:border-t-8:focus {
+  border-top-width: 8px;
+}
+
+.focus\:border-r-8:focus {
+  border-right-width: 8px;
+}
+
+.focus\:border-b-8:focus {
+  border-bottom-width: 8px;
+}
+
+.focus\:border-l-8:focus {
+  border-left-width: 8px;
+}
+
+.focus\:border-t:focus {
+  border-top-width: 1px;
+}
+
+.focus\:border-r:focus {
+  border-right-width: 1px;
+}
+
+.focus\:border-b:focus {
+  border-bottom-width: 1px;
+}
+
+.focus\:border-l:focus {
+  border-left-width: 1px;
+}
+
 .box-border {
   box-sizing: border-box;
 }
@@ -28853,223 +29053,6 @@ video {
   left: 0;
 }
 
-.inset-1 {
-  top: 0.25rem;
-  right: 0.25rem;
-  bottom: 0.25rem;
-  left: 0.25rem;
-}
-
-.inset-2 {
-  top: 0.5rem;
-  right: 0.5rem;
-  bottom: 0.5rem;
-  left: 0.5rem;
-}
-
-.inset-3 {
-  top: 0.75rem;
-  right: 0.75rem;
-  bottom: 0.75rem;
-  left: 0.75rem;
-}
-
-.inset-4 {
-  top: 1rem;
-  right: 1rem;
-  bottom: 1rem;
-  left: 1rem;
-}
-
-.inset-5 {
-  top: 1.25rem;
-  right: 1.25rem;
-  bottom: 1.25rem;
-  left: 1.25rem;
-}
-
-.inset-6 {
-  top: 1.5rem;
-  right: 1.5rem;
-  bottom: 1.5rem;
-  left: 1.5rem;
-}
-
-.inset-7 {
-  top: 1.75rem;
-  right: 1.75rem;
-  bottom: 1.75rem;
-  left: 1.75rem;
-}
-
-.inset-8 {
-  top: 2rem;
-  right: 2rem;
-  bottom: 2rem;
-  left: 2rem;
-}
-
-.inset-9 {
-  top: 2.25rem;
-  right: 2.25rem;
-  bottom: 2.25rem;
-  left: 2.25rem;
-}
-
-.inset-10 {
-  top: 2.5rem;
-  right: 2.5rem;
-  bottom: 2.5rem;
-  left: 2.5rem;
-}
-
-.inset-11 {
-  top: 2.75rem;
-  right: 2.75rem;
-  bottom: 2.75rem;
-  left: 2.75rem;
-}
-
-.inset-12 {
-  top: 3rem;
-  right: 3rem;
-  bottom: 3rem;
-  left: 3rem;
-}
-
-.inset-13 {
-  top: 3.25rem;
-  right: 3.25rem;
-  bottom: 3.25rem;
-  left: 3.25rem;
-}
-
-.inset-14 {
-  top: 3.5rem;
-  right: 3.5rem;
-  bottom: 3.5rem;
-  left: 3.5rem;
-}
-
-.inset-15 {
-  top: 3.75rem;
-  right: 3.75rem;
-  bottom: 3.75rem;
-  left: 3.75rem;
-}
-
-.inset-16 {
-  top: 4rem;
-  right: 4rem;
-  bottom: 4rem;
-  left: 4rem;
-}
-
-.inset-20 {
-  top: 5rem;
-  right: 5rem;
-  bottom: 5rem;
-  left: 5rem;
-}
-
-.inset-24 {
-  top: 6rem;
-  right: 6rem;
-  bottom: 6rem;
-  left: 6rem;
-}
-
-.inset-28 {
-  top: 7rem;
-  right: 7rem;
-  bottom: 7rem;
-  left: 7rem;
-}
-
-.inset-32 {
-  top: 8rem;
-  right: 8rem;
-  bottom: 8rem;
-  left: 8rem;
-}
-
-.inset-36 {
-  top: 9rem;
-  right: 9rem;
-  bottom: 9rem;
-  left: 9rem;
-}
-
-.inset-40 {
-  top: 10rem;
-  right: 10rem;
-  bottom: 10rem;
-  left: 10rem;
-}
-
-.inset-44 {
-  top: 11rem;
-  right: 11rem;
-  bottom: 11rem;
-  left: 11rem;
-}
-
-.inset-48 {
-  top: 12rem;
-  right: 12rem;
-  bottom: 12rem;
-  left: 12rem;
-}
-
-.inset-52 {
-  top: 13rem;
-  right: 13rem;
-  bottom: 13rem;
-  left: 13rem;
-}
-
-.inset-56 {
-  top: 14rem;
-  right: 14rem;
-  bottom: 14rem;
-  left: 14rem;
-}
-
-.inset-60 {
-  top: 15rem;
-  right: 15rem;
-  bottom: 15rem;
-  left: 15rem;
-}
-
-.inset-64 {
-  top: 16rem;
-  right: 16rem;
-  bottom: 16rem;
-  left: 16rem;
-}
-
-.inset-72 {
-  top: 18rem;
-  right: 18rem;
-  bottom: 18rem;
-  left: 18rem;
-}
-
-.inset-80 {
-  top: 20rem;
-  right: 20rem;
-  bottom: 20rem;
-  left: 20rem;
-}
-
-.inset-96 {
-  top: 24rem;
-  right: 24rem;
-  bottom: 24rem;
-  left: 24rem;
-}
-
 .inset-auto {
   top: auto;
   right: auto;
@@ -29077,228 +29060,18 @@ video {
   left: auto;
 }
 
-.inset-px {
-  top: 1px;
-  right: 1px;
-  bottom: 1px;
-  left: 1px;
+.inset-inverse-right-10 {
+  top: -1rem;
+  right: -1rem;
+  bottom: -1rem;
+  left: -1rem;
 }
 
-.inset-0\.5 {
-  top: 0.125rem;
-  right: 0.125rem;
-  bottom: 0.125rem;
-  left: 0.125rem;
-}
-
-.inset-1\.5 {
-  top: 0.375rem;
-  right: 0.375rem;
-  bottom: 0.375rem;
-  left: 0.375rem;
-}
-
-.inset-2\.5 {
-  top: 0.625rem;
-  right: 0.625rem;
-  bottom: 0.625rem;
-  left: 0.625rem;
-}
-
-.inset-3\.5 {
-  top: 0.875rem;
-  right: 0.875rem;
-  bottom: 0.875rem;
-  left: 0.875rem;
-}
-
-.inset-1\/2 {
-  top: 50%;
-  right: 50%;
-  bottom: 50%;
-  left: 50%;
-}
-
-.inset-1\/3 {
-  top: 33.333333%;
-  right: 33.333333%;
-  bottom: 33.333333%;
-  left: 33.333333%;
-}
-
-.inset-2\/3 {
-  top: 66.666667%;
-  right: 66.666667%;
-  bottom: 66.666667%;
-  left: 66.666667%;
-}
-
-.inset-1\/4 {
-  top: 25%;
-  right: 25%;
-  bottom: 25%;
-  left: 25%;
-}
-
-.inset-2\/4 {
-  top: 50%;
-  right: 50%;
-  bottom: 50%;
-  left: 50%;
-}
-
-.inset-3\/4 {
-  top: 75%;
-  right: 75%;
-  bottom: 75%;
-  left: 75%;
-}
-
-.inset-1\/5 {
-  top: 20%;
-  right: 20%;
-  bottom: 20%;
-  left: 20%;
-}
-
-.inset-2\/5 {
-  top: 40%;
-  right: 40%;
-  bottom: 40%;
-  left: 40%;
-}
-
-.inset-3\/5 {
-  top: 60%;
-  right: 60%;
-  bottom: 60%;
-  left: 60%;
-}
-
-.inset-4\/5 {
-  top: 80%;
-  right: 80%;
-  bottom: 80%;
-  left: 80%;
-}
-
-.inset-1\/6 {
-  top: 16.666667%;
-  right: 16.666667%;
-  bottom: 16.666667%;
-  left: 16.666667%;
-}
-
-.inset-2\/6 {
-  top: 33.333333%;
-  right: 33.333333%;
-  bottom: 33.333333%;
-  left: 33.333333%;
-}
-
-.inset-3\/6 {
-  top: 50%;
-  right: 50%;
-  bottom: 50%;
-  left: 50%;
-}
-
-.inset-4\/6 {
-  top: 66.666667%;
-  right: 66.666667%;
-  bottom: 66.666667%;
-  left: 66.666667%;
-}
-
-.inset-5\/6 {
-  top: 83.333333%;
-  right: 83.333333%;
-  bottom: 83.333333%;
-  left: 83.333333%;
-}
-
-.inset-1\/12 {
-  top: 8.333333%;
-  right: 8.333333%;
-  bottom: 8.333333%;
-  left: 8.333333%;
-}
-
-.inset-2\/12 {
-  top: 16.666667%;
-  right: 16.666667%;
-  bottom: 16.666667%;
-  left: 16.666667%;
-}
-
-.inset-3\/12 {
-  top: 25%;
-  right: 25%;
-  bottom: 25%;
-  left: 25%;
-}
-
-.inset-4\/12 {
-  top: 33.333333%;
-  right: 33.333333%;
-  bottom: 33.333333%;
-  left: 33.333333%;
-}
-
-.inset-5\/12 {
-  top: 41.666667%;
-  right: 41.666667%;
-  bottom: 41.666667%;
-  left: 41.666667%;
-}
-
-.inset-6\/12 {
-  top: 50%;
-  right: 50%;
-  bottom: 50%;
-  left: 50%;
-}
-
-.inset-7\/12 {
-  top: 58.333333%;
-  right: 58.333333%;
-  bottom: 58.333333%;
-  left: 58.333333%;
-}
-
-.inset-8\/12 {
-  top: 66.666667%;
-  right: 66.666667%;
-  bottom: 66.666667%;
-  left: 66.666667%;
-}
-
-.inset-9\/12 {
-  top: 75%;
-  right: 75%;
-  bottom: 75%;
-  left: 75%;
-}
-
-.inset-10\/12 {
-  top: 83.333333%;
-  right: 83.333333%;
-  bottom: 83.333333%;
-  left: 83.333333%;
-}
-
-.inset-11\/12 {
-  top: 91.666667%;
-  right: 91.666667%;
-  bottom: 91.666667%;
-  left: 91.666667%;
-}
-
-.inset-full {
-  top: 100%;
-  right: 100%;
-  bottom: 100%;
-  left: 100%;
+.inset-inverse-right-30 {
+  top: -3rem;
+  right: -3rem;
+  bottom: -3rem;
+  left: -3rem;
 }
 
 .inset-y-0 {
@@ -29311,316 +29084,6 @@ video {
   left: 0;
 }
 
-.inset-y-1 {
-  top: 0.25rem;
-  bottom: 0.25rem;
-}
-
-.inset-x-1 {
-  right: 0.25rem;
-  left: 0.25rem;
-}
-
-.inset-y-2 {
-  top: 0.5rem;
-  bottom: 0.5rem;
-}
-
-.inset-x-2 {
-  right: 0.5rem;
-  left: 0.5rem;
-}
-
-.inset-y-3 {
-  top: 0.75rem;
-  bottom: 0.75rem;
-}
-
-.inset-x-3 {
-  right: 0.75rem;
-  left: 0.75rem;
-}
-
-.inset-y-4 {
-  top: 1rem;
-  bottom: 1rem;
-}
-
-.inset-x-4 {
-  right: 1rem;
-  left: 1rem;
-}
-
-.inset-y-5 {
-  top: 1.25rem;
-  bottom: 1.25rem;
-}
-
-.inset-x-5 {
-  right: 1.25rem;
-  left: 1.25rem;
-}
-
-.inset-y-6 {
-  top: 1.5rem;
-  bottom: 1.5rem;
-}
-
-.inset-x-6 {
-  right: 1.5rem;
-  left: 1.5rem;
-}
-
-.inset-y-7 {
-  top: 1.75rem;
-  bottom: 1.75rem;
-}
-
-.inset-x-7 {
-  right: 1.75rem;
-  left: 1.75rem;
-}
-
-.inset-y-8 {
-  top: 2rem;
-  bottom: 2rem;
-}
-
-.inset-x-8 {
-  right: 2rem;
-  left: 2rem;
-}
-
-.inset-y-9 {
-  top: 2.25rem;
-  bottom: 2.25rem;
-}
-
-.inset-x-9 {
-  right: 2.25rem;
-  left: 2.25rem;
-}
-
-.inset-y-10 {
-  top: 2.5rem;
-  bottom: 2.5rem;
-}
-
-.inset-x-10 {
-  right: 2.5rem;
-  left: 2.5rem;
-}
-
-.inset-y-11 {
-  top: 2.75rem;
-  bottom: 2.75rem;
-}
-
-.inset-x-11 {
-  right: 2.75rem;
-  left: 2.75rem;
-}
-
-.inset-y-12 {
-  top: 3rem;
-  bottom: 3rem;
-}
-
-.inset-x-12 {
-  right: 3rem;
-  left: 3rem;
-}
-
-.inset-y-13 {
-  top: 3.25rem;
-  bottom: 3.25rem;
-}
-
-.inset-x-13 {
-  right: 3.25rem;
-  left: 3.25rem;
-}
-
-.inset-y-14 {
-  top: 3.5rem;
-  bottom: 3.5rem;
-}
-
-.inset-x-14 {
-  right: 3.5rem;
-  left: 3.5rem;
-}
-
-.inset-y-15 {
-  top: 3.75rem;
-  bottom: 3.75rem;
-}
-
-.inset-x-15 {
-  right: 3.75rem;
-  left: 3.75rem;
-}
-
-.inset-y-16 {
-  top: 4rem;
-  bottom: 4rem;
-}
-
-.inset-x-16 {
-  right: 4rem;
-  left: 4rem;
-}
-
-.inset-y-20 {
-  top: 5rem;
-  bottom: 5rem;
-}
-
-.inset-x-20 {
-  right: 5rem;
-  left: 5rem;
-}
-
-.inset-y-24 {
-  top: 6rem;
-  bottom: 6rem;
-}
-
-.inset-x-24 {
-  right: 6rem;
-  left: 6rem;
-}
-
-.inset-y-28 {
-  top: 7rem;
-  bottom: 7rem;
-}
-
-.inset-x-28 {
-  right: 7rem;
-  left: 7rem;
-}
-
-.inset-y-32 {
-  top: 8rem;
-  bottom: 8rem;
-}
-
-.inset-x-32 {
-  right: 8rem;
-  left: 8rem;
-}
-
-.inset-y-36 {
-  top: 9rem;
-  bottom: 9rem;
-}
-
-.inset-x-36 {
-  right: 9rem;
-  left: 9rem;
-}
-
-.inset-y-40 {
-  top: 10rem;
-  bottom: 10rem;
-}
-
-.inset-x-40 {
-  right: 10rem;
-  left: 10rem;
-}
-
-.inset-y-44 {
-  top: 11rem;
-  bottom: 11rem;
-}
-
-.inset-x-44 {
-  right: 11rem;
-  left: 11rem;
-}
-
-.inset-y-48 {
-  top: 12rem;
-  bottom: 12rem;
-}
-
-.inset-x-48 {
-  right: 12rem;
-  left: 12rem;
-}
-
-.inset-y-52 {
-  top: 13rem;
-  bottom: 13rem;
-}
-
-.inset-x-52 {
-  right: 13rem;
-  left: 13rem;
-}
-
-.inset-y-56 {
-  top: 14rem;
-  bottom: 14rem;
-}
-
-.inset-x-56 {
-  right: 14rem;
-  left: 14rem;
-}
-
-.inset-y-60 {
-  top: 15rem;
-  bottom: 15rem;
-}
-
-.inset-x-60 {
-  right: 15rem;
-  left: 15rem;
-}
-
-.inset-y-64 {
-  top: 16rem;
-  bottom: 16rem;
-}
-
-.inset-x-64 {
-  right: 16rem;
-  left: 16rem;
-}
-
-.inset-y-72 {
-  top: 18rem;
-  bottom: 18rem;
-}
-
-.inset-x-72 {
-  right: 18rem;
-  left: 18rem;
-}
-
-.inset-y-80 {
-  top: 20rem;
-  bottom: 20rem;
-}
-
-.inset-x-80 {
-  right: 20rem;
-  left: 20rem;
-}
-
-.inset-y-96 {
-  top: 24rem;
-  bottom: 24rem;
-}
-
-.inset-x-96 {
-  right: 24rem;
-  left: 24rem;
-}
-
 .inset-y-auto {
   top: auto;
   bottom: auto;
@@ -29631,324 +29094,24 @@ video {
   left: auto;
 }
 
-.inset-y-px {
-  top: 1px;
-  bottom: 1px;
+.inset-y-inverse-right-10 {
+  top: -1rem;
+  bottom: -1rem;
 }
 
-.inset-x-px {
-  right: 1px;
-  left: 1px;
+.inset-x-inverse-right-10 {
+  right: -1rem;
+  left: -1rem;
 }
 
-.inset-y-0\.5 {
-  top: 0.125rem;
-  bottom: 0.125rem;
+.inset-y-inverse-right-30 {
+  top: -3rem;
+  bottom: -3rem;
 }
 
-.inset-x-0\.5 {
-  right: 0.125rem;
-  left: 0.125rem;
-}
-
-.inset-y-1\.5 {
-  top: 0.375rem;
-  bottom: 0.375rem;
-}
-
-.inset-x-1\.5 {
-  right: 0.375rem;
-  left: 0.375rem;
-}
-
-.inset-y-2\.5 {
-  top: 0.625rem;
-  bottom: 0.625rem;
-}
-
-.inset-x-2\.5 {
-  right: 0.625rem;
-  left: 0.625rem;
-}
-
-.inset-y-3\.5 {
-  top: 0.875rem;
-  bottom: 0.875rem;
-}
-
-.inset-x-3\.5 {
-  right: 0.875rem;
-  left: 0.875rem;
-}
-
-.inset-y-1\/2 {
-  top: 50%;
-  bottom: 50%;
-}
-
-.inset-x-1\/2 {
-  right: 50%;
-  left: 50%;
-}
-
-.inset-y-1\/3 {
-  top: 33.333333%;
-  bottom: 33.333333%;
-}
-
-.inset-x-1\/3 {
-  right: 33.333333%;
-  left: 33.333333%;
-}
-
-.inset-y-2\/3 {
-  top: 66.666667%;
-  bottom: 66.666667%;
-}
-
-.inset-x-2\/3 {
-  right: 66.666667%;
-  left: 66.666667%;
-}
-
-.inset-y-1\/4 {
-  top: 25%;
-  bottom: 25%;
-}
-
-.inset-x-1\/4 {
-  right: 25%;
-  left: 25%;
-}
-
-.inset-y-2\/4 {
-  top: 50%;
-  bottom: 50%;
-}
-
-.inset-x-2\/4 {
-  right: 50%;
-  left: 50%;
-}
-
-.inset-y-3\/4 {
-  top: 75%;
-  bottom: 75%;
-}
-
-.inset-x-3\/4 {
-  right: 75%;
-  left: 75%;
-}
-
-.inset-y-1\/5 {
-  top: 20%;
-  bottom: 20%;
-}
-
-.inset-x-1\/5 {
-  right: 20%;
-  left: 20%;
-}
-
-.inset-y-2\/5 {
-  top: 40%;
-  bottom: 40%;
-}
-
-.inset-x-2\/5 {
-  right: 40%;
-  left: 40%;
-}
-
-.inset-y-3\/5 {
-  top: 60%;
-  bottom: 60%;
-}
-
-.inset-x-3\/5 {
-  right: 60%;
-  left: 60%;
-}
-
-.inset-y-4\/5 {
-  top: 80%;
-  bottom: 80%;
-}
-
-.inset-x-4\/5 {
-  right: 80%;
-  left: 80%;
-}
-
-.inset-y-1\/6 {
-  top: 16.666667%;
-  bottom: 16.666667%;
-}
-
-.inset-x-1\/6 {
-  right: 16.666667%;
-  left: 16.666667%;
-}
-
-.inset-y-2\/6 {
-  top: 33.333333%;
-  bottom: 33.333333%;
-}
-
-.inset-x-2\/6 {
-  right: 33.333333%;
-  left: 33.333333%;
-}
-
-.inset-y-3\/6 {
-  top: 50%;
-  bottom: 50%;
-}
-
-.inset-x-3\/6 {
-  right: 50%;
-  left: 50%;
-}
-
-.inset-y-4\/6 {
-  top: 66.666667%;
-  bottom: 66.666667%;
-}
-
-.inset-x-4\/6 {
-  right: 66.666667%;
-  left: 66.666667%;
-}
-
-.inset-y-5\/6 {
-  top: 83.333333%;
-  bottom: 83.333333%;
-}
-
-.inset-x-5\/6 {
-  right: 83.333333%;
-  left: 83.333333%;
-}
-
-.inset-y-1\/12 {
-  top: 8.333333%;
-  bottom: 8.333333%;
-}
-
-.inset-x-1\/12 {
-  right: 8.333333%;
-  left: 8.333333%;
-}
-
-.inset-y-2\/12 {
-  top: 16.666667%;
-  bottom: 16.666667%;
-}
-
-.inset-x-2\/12 {
-  right: 16.666667%;
-  left: 16.666667%;
-}
-
-.inset-y-3\/12 {
-  top: 25%;
-  bottom: 25%;
-}
-
-.inset-x-3\/12 {
-  right: 25%;
-  left: 25%;
-}
-
-.inset-y-4\/12 {
-  top: 33.333333%;
-  bottom: 33.333333%;
-}
-
-.inset-x-4\/12 {
-  right: 33.333333%;
-  left: 33.333333%;
-}
-
-.inset-y-5\/12 {
-  top: 41.666667%;
-  bottom: 41.666667%;
-}
-
-.inset-x-5\/12 {
-  right: 41.666667%;
-  left: 41.666667%;
-}
-
-.inset-y-6\/12 {
-  top: 50%;
-  bottom: 50%;
-}
-
-.inset-x-6\/12 {
-  right: 50%;
-  left: 50%;
-}
-
-.inset-y-7\/12 {
-  top: 58.333333%;
-  bottom: 58.333333%;
-}
-
-.inset-x-7\/12 {
-  right: 58.333333%;
-  left: 58.333333%;
-}
-
-.inset-y-8\/12 {
-  top: 66.666667%;
-  bottom: 66.666667%;
-}
-
-.inset-x-8\/12 {
-  right: 66.666667%;
-  left: 66.666667%;
-}
-
-.inset-y-9\/12 {
-  top: 75%;
-  bottom: 75%;
-}
-
-.inset-x-9\/12 {
-  right: 75%;
-  left: 75%;
-}
-
-.inset-y-10\/12 {
-  top: 83.333333%;
-  bottom: 83.333333%;
-}
-
-.inset-x-10\/12 {
-  right: 83.333333%;
-  left: 83.333333%;
-}
-
-.inset-y-11\/12 {
-  top: 91.666667%;
-  bottom: 91.666667%;
-}
-
-.inset-x-11\/12 {
-  right: 91.666667%;
-  left: 91.666667%;
-}
-
-.inset-y-full {
-  top: 100%;
-  bottom: 100%;
-}
-
-.inset-x-full {
-  right: 100%;
-  left: 100%;
+.inset-x-inverse-right-30 {
+  right: -3rem;
+  left: -3rem;
 }
 
 .top-0 {
@@ -29967,502 +29130,6 @@ video {
   left: 0;
 }
 
-.top-1 {
-  top: 0.25rem;
-}
-
-.right-1 {
-  right: 0.25rem;
-}
-
-.bottom-1 {
-  bottom: 0.25rem;
-}
-
-.left-1 {
-  left: 0.25rem;
-}
-
-.top-2 {
-  top: 0.5rem;
-}
-
-.right-2 {
-  right: 0.5rem;
-}
-
-.bottom-2 {
-  bottom: 0.5rem;
-}
-
-.left-2 {
-  left: 0.5rem;
-}
-
-.top-3 {
-  top: 0.75rem;
-}
-
-.right-3 {
-  right: 0.75rem;
-}
-
-.bottom-3 {
-  bottom: 0.75rem;
-}
-
-.left-3 {
-  left: 0.75rem;
-}
-
-.top-4 {
-  top: 1rem;
-}
-
-.right-4 {
-  right: 1rem;
-}
-
-.bottom-4 {
-  bottom: 1rem;
-}
-
-.left-4 {
-  left: 1rem;
-}
-
-.top-5 {
-  top: 1.25rem;
-}
-
-.right-5 {
-  right: 1.25rem;
-}
-
-.bottom-5 {
-  bottom: 1.25rem;
-}
-
-.left-5 {
-  left: 1.25rem;
-}
-
-.top-6 {
-  top: 1.5rem;
-}
-
-.right-6 {
-  right: 1.5rem;
-}
-
-.bottom-6 {
-  bottom: 1.5rem;
-}
-
-.left-6 {
-  left: 1.5rem;
-}
-
-.top-7 {
-  top: 1.75rem;
-}
-
-.right-7 {
-  right: 1.75rem;
-}
-
-.bottom-7 {
-  bottom: 1.75rem;
-}
-
-.left-7 {
-  left: 1.75rem;
-}
-
-.top-8 {
-  top: 2rem;
-}
-
-.right-8 {
-  right: 2rem;
-}
-
-.bottom-8 {
-  bottom: 2rem;
-}
-
-.left-8 {
-  left: 2rem;
-}
-
-.top-9 {
-  top: 2.25rem;
-}
-
-.right-9 {
-  right: 2.25rem;
-}
-
-.bottom-9 {
-  bottom: 2.25rem;
-}
-
-.left-9 {
-  left: 2.25rem;
-}
-
-.top-10 {
-  top: 2.5rem;
-}
-
-.right-10 {
-  right: 2.5rem;
-}
-
-.bottom-10 {
-  bottom: 2.5rem;
-}
-
-.left-10 {
-  left: 2.5rem;
-}
-
-.top-11 {
-  top: 2.75rem;
-}
-
-.right-11 {
-  right: 2.75rem;
-}
-
-.bottom-11 {
-  bottom: 2.75rem;
-}
-
-.left-11 {
-  left: 2.75rem;
-}
-
-.top-12 {
-  top: 3rem;
-}
-
-.right-12 {
-  right: 3rem;
-}
-
-.bottom-12 {
-  bottom: 3rem;
-}
-
-.left-12 {
-  left: 3rem;
-}
-
-.top-13 {
-  top: 3.25rem;
-}
-
-.right-13 {
-  right: 3.25rem;
-}
-
-.bottom-13 {
-  bottom: 3.25rem;
-}
-
-.left-13 {
-  left: 3.25rem;
-}
-
-.top-14 {
-  top: 3.5rem;
-}
-
-.right-14 {
-  right: 3.5rem;
-}
-
-.bottom-14 {
-  bottom: 3.5rem;
-}
-
-.left-14 {
-  left: 3.5rem;
-}
-
-.top-15 {
-  top: 3.75rem;
-}
-
-.right-15 {
-  right: 3.75rem;
-}
-
-.bottom-15 {
-  bottom: 3.75rem;
-}
-
-.left-15 {
-  left: 3.75rem;
-}
-
-.top-16 {
-  top: 4rem;
-}
-
-.right-16 {
-  right: 4rem;
-}
-
-.bottom-16 {
-  bottom: 4rem;
-}
-
-.left-16 {
-  left: 4rem;
-}
-
-.top-20 {
-  top: 5rem;
-}
-
-.right-20 {
-  right: 5rem;
-}
-
-.bottom-20 {
-  bottom: 5rem;
-}
-
-.left-20 {
-  left: 5rem;
-}
-
-.top-24 {
-  top: 6rem;
-}
-
-.right-24 {
-  right: 6rem;
-}
-
-.bottom-24 {
-  bottom: 6rem;
-}
-
-.left-24 {
-  left: 6rem;
-}
-
-.top-28 {
-  top: 7rem;
-}
-
-.right-28 {
-  right: 7rem;
-}
-
-.bottom-28 {
-  bottom: 7rem;
-}
-
-.left-28 {
-  left: 7rem;
-}
-
-.top-32 {
-  top: 8rem;
-}
-
-.right-32 {
-  right: 8rem;
-}
-
-.bottom-32 {
-  bottom: 8rem;
-}
-
-.left-32 {
-  left: 8rem;
-}
-
-.top-36 {
-  top: 9rem;
-}
-
-.right-36 {
-  right: 9rem;
-}
-
-.bottom-36 {
-  bottom: 9rem;
-}
-
-.left-36 {
-  left: 9rem;
-}
-
-.top-40 {
-  top: 10rem;
-}
-
-.right-40 {
-  right: 10rem;
-}
-
-.bottom-40 {
-  bottom: 10rem;
-}
-
-.left-40 {
-  left: 10rem;
-}
-
-.top-44 {
-  top: 11rem;
-}
-
-.right-44 {
-  right: 11rem;
-}
-
-.bottom-44 {
-  bottom: 11rem;
-}
-
-.left-44 {
-  left: 11rem;
-}
-
-.top-48 {
-  top: 12rem;
-}
-
-.right-48 {
-  right: 12rem;
-}
-
-.bottom-48 {
-  bottom: 12rem;
-}
-
-.left-48 {
-  left: 12rem;
-}
-
-.top-52 {
-  top: 13rem;
-}
-
-.right-52 {
-  right: 13rem;
-}
-
-.bottom-52 {
-  bottom: 13rem;
-}
-
-.left-52 {
-  left: 13rem;
-}
-
-.top-56 {
-  top: 14rem;
-}
-
-.right-56 {
-  right: 14rem;
-}
-
-.bottom-56 {
-  bottom: 14rem;
-}
-
-.left-56 {
-  left: 14rem;
-}
-
-.top-60 {
-  top: 15rem;
-}
-
-.right-60 {
-  right: 15rem;
-}
-
-.bottom-60 {
-  bottom: 15rem;
-}
-
-.left-60 {
-  left: 15rem;
-}
-
-.top-64 {
-  top: 16rem;
-}
-
-.right-64 {
-  right: 16rem;
-}
-
-.bottom-64 {
-  bottom: 16rem;
-}
-
-.left-64 {
-  left: 16rem;
-}
-
-.top-72 {
-  top: 18rem;
-}
-
-.right-72 {
-  right: 18rem;
-}
-
-.bottom-72 {
-  bottom: 18rem;
-}
-
-.left-72 {
-  left: 18rem;
-}
-
-.top-80 {
-  top: 20rem;
-}
-
-.right-80 {
-  right: 20rem;
-}
-
-.bottom-80 {
-  bottom: 20rem;
-}
-
-.left-80 {
-  left: 20rem;
-}
-
-.top-96 {
-  top: 24rem;
-}
-
-.right-96 {
-  right: 24rem;
-}
-
-.bottom-96 {
-  bottom: 24rem;
-}
-
-.left-96 {
-  left: 24rem;
-}
-
 .top-auto {
   top: auto;
 }
@@ -30479,516 +29146,36 @@ video {
   left: auto;
 }
 
-.top-px {
-  top: 1px;
+.top-inverse-right-10 {
+  top: -1rem;
 }
 
-.right-px {
-  right: 1px;
+.right-inverse-right-10 {
+  right: -1rem;
 }
 
-.bottom-px {
-  bottom: 1px;
+.bottom-inverse-right-10 {
+  bottom: -1rem;
 }
 
-.left-px {
-  left: 1px;
+.left-inverse-right-10 {
+  left: -1rem;
 }
 
-.top-0\.5 {
-  top: 0.125rem;
+.top-inverse-right-30 {
+  top: -3rem;
 }
 
-.right-0\.5 {
-  right: 0.125rem;
+.right-inverse-right-30 {
+  right: -3rem;
 }
 
-.bottom-0\.5 {
-  bottom: 0.125rem;
+.bottom-inverse-right-30 {
+  bottom: -3rem;
 }
 
-.left-0\.5 {
-  left: 0.125rem;
-}
-
-.top-1\.5 {
-  top: 0.375rem;
-}
-
-.right-1\.5 {
-  right: 0.375rem;
-}
-
-.bottom-1\.5 {
-  bottom: 0.375rem;
-}
-
-.left-1\.5 {
-  left: 0.375rem;
-}
-
-.top-2\.5 {
-  top: 0.625rem;
-}
-
-.right-2\.5 {
-  right: 0.625rem;
-}
-
-.bottom-2\.5 {
-  bottom: 0.625rem;
-}
-
-.left-2\.5 {
-  left: 0.625rem;
-}
-
-.top-3\.5 {
-  top: 0.875rem;
-}
-
-.right-3\.5 {
-  right: 0.875rem;
-}
-
-.bottom-3\.5 {
-  bottom: 0.875rem;
-}
-
-.left-3\.5 {
-  left: 0.875rem;
-}
-
-.top-1\/2 {
-  top: 50%;
-}
-
-.right-1\/2 {
-  right: 50%;
-}
-
-.bottom-1\/2 {
-  bottom: 50%;
-}
-
-.left-1\/2 {
-  left: 50%;
-}
-
-.top-1\/3 {
-  top: 33.333333%;
-}
-
-.right-1\/3 {
-  right: 33.333333%;
-}
-
-.bottom-1\/3 {
-  bottom: 33.333333%;
-}
-
-.left-1\/3 {
-  left: 33.333333%;
-}
-
-.top-2\/3 {
-  top: 66.666667%;
-}
-
-.right-2\/3 {
-  right: 66.666667%;
-}
-
-.bottom-2\/3 {
-  bottom: 66.666667%;
-}
-
-.left-2\/3 {
-  left: 66.666667%;
-}
-
-.top-1\/4 {
-  top: 25%;
-}
-
-.right-1\/4 {
-  right: 25%;
-}
-
-.bottom-1\/4 {
-  bottom: 25%;
-}
-
-.left-1\/4 {
-  left: 25%;
-}
-
-.top-2\/4 {
-  top: 50%;
-}
-
-.right-2\/4 {
-  right: 50%;
-}
-
-.bottom-2\/4 {
-  bottom: 50%;
-}
-
-.left-2\/4 {
-  left: 50%;
-}
-
-.top-3\/4 {
-  top: 75%;
-}
-
-.right-3\/4 {
-  right: 75%;
-}
-
-.bottom-3\/4 {
-  bottom: 75%;
-}
-
-.left-3\/4 {
-  left: 75%;
-}
-
-.top-1\/5 {
-  top: 20%;
-}
-
-.right-1\/5 {
-  right: 20%;
-}
-
-.bottom-1\/5 {
-  bottom: 20%;
-}
-
-.left-1\/5 {
-  left: 20%;
-}
-
-.top-2\/5 {
-  top: 40%;
-}
-
-.right-2\/5 {
-  right: 40%;
-}
-
-.bottom-2\/5 {
-  bottom: 40%;
-}
-
-.left-2\/5 {
-  left: 40%;
-}
-
-.top-3\/5 {
-  top: 60%;
-}
-
-.right-3\/5 {
-  right: 60%;
-}
-
-.bottom-3\/5 {
-  bottom: 60%;
-}
-
-.left-3\/5 {
-  left: 60%;
-}
-
-.top-4\/5 {
-  top: 80%;
-}
-
-.right-4\/5 {
-  right: 80%;
-}
-
-.bottom-4\/5 {
-  bottom: 80%;
-}
-
-.left-4\/5 {
-  left: 80%;
-}
-
-.top-1\/6 {
-  top: 16.666667%;
-}
-
-.right-1\/6 {
-  right: 16.666667%;
-}
-
-.bottom-1\/6 {
-  bottom: 16.666667%;
-}
-
-.left-1\/6 {
-  left: 16.666667%;
-}
-
-.top-2\/6 {
-  top: 33.333333%;
-}
-
-.right-2\/6 {
-  right: 33.333333%;
-}
-
-.bottom-2\/6 {
-  bottom: 33.333333%;
-}
-
-.left-2\/6 {
-  left: 33.333333%;
-}
-
-.top-3\/6 {
-  top: 50%;
-}
-
-.right-3\/6 {
-  right: 50%;
-}
-
-.bottom-3\/6 {
-  bottom: 50%;
-}
-
-.left-3\/6 {
-  left: 50%;
-}
-
-.top-4\/6 {
-  top: 66.666667%;
-}
-
-.right-4\/6 {
-  right: 66.666667%;
-}
-
-.bottom-4\/6 {
-  bottom: 66.666667%;
-}
-
-.left-4\/6 {
-  left: 66.666667%;
-}
-
-.top-5\/6 {
-  top: 83.333333%;
-}
-
-.right-5\/6 {
-  right: 83.333333%;
-}
-
-.bottom-5\/6 {
-  bottom: 83.333333%;
-}
-
-.left-5\/6 {
-  left: 83.333333%;
-}
-
-.top-1\/12 {
-  top: 8.333333%;
-}
-
-.right-1\/12 {
-  right: 8.333333%;
-}
-
-.bottom-1\/12 {
-  bottom: 8.333333%;
-}
-
-.left-1\/12 {
-  left: 8.333333%;
-}
-
-.top-2\/12 {
-  top: 16.666667%;
-}
-
-.right-2\/12 {
-  right: 16.666667%;
-}
-
-.bottom-2\/12 {
-  bottom: 16.666667%;
-}
-
-.left-2\/12 {
-  left: 16.666667%;
-}
-
-.top-3\/12 {
-  top: 25%;
-}
-
-.right-3\/12 {
-  right: 25%;
-}
-
-.bottom-3\/12 {
-  bottom: 25%;
-}
-
-.left-3\/12 {
-  left: 25%;
-}
-
-.top-4\/12 {
-  top: 33.333333%;
-}
-
-.right-4\/12 {
-  right: 33.333333%;
-}
-
-.bottom-4\/12 {
-  bottom: 33.333333%;
-}
-
-.left-4\/12 {
-  left: 33.333333%;
-}
-
-.top-5\/12 {
-  top: 41.666667%;
-}
-
-.right-5\/12 {
-  right: 41.666667%;
-}
-
-.bottom-5\/12 {
-  bottom: 41.666667%;
-}
-
-.left-5\/12 {
-  left: 41.666667%;
-}
-
-.top-6\/12 {
-  top: 50%;
-}
-
-.right-6\/12 {
-  right: 50%;
-}
-
-.bottom-6\/12 {
-  bottom: 50%;
-}
-
-.left-6\/12 {
-  left: 50%;
-}
-
-.top-7\/12 {
-  top: 58.333333%;
-}
-
-.right-7\/12 {
-  right: 58.333333%;
-}
-
-.bottom-7\/12 {
-  bottom: 58.333333%;
-}
-
-.left-7\/12 {
-  left: 58.333333%;
-}
-
-.top-8\/12 {
-  top: 66.666667%;
-}
-
-.right-8\/12 {
-  right: 66.666667%;
-}
-
-.bottom-8\/12 {
-  bottom: 66.666667%;
-}
-
-.left-8\/12 {
-  left: 66.666667%;
-}
-
-.top-9\/12 {
-  top: 75%;
-}
-
-.right-9\/12 {
-  right: 75%;
-}
-
-.bottom-9\/12 {
-  bottom: 75%;
-}
-
-.left-9\/12 {
-  left: 75%;
-}
-
-.top-10\/12 {
-  top: 83.333333%;
-}
-
-.right-10\/12 {
-  right: 83.333333%;
-}
-
-.bottom-10\/12 {
-  bottom: 83.333333%;
-}
-
-.left-10\/12 {
-  left: 83.333333%;
-}
-
-.top-11\/12 {
-  top: 91.666667%;
-}
-
-.right-11\/12 {
-  right: 91.666667%;
-}
-
-.bottom-11\/12 {
-  bottom: 91.666667%;
-}
-
-.left-11\/12 {
-  left: 91.666667%;
-}
-
-.top-full {
-  top: 100%;
-}
-
-.right-full {
-  right: 100%;
-}
-
-.bottom-full {
-  bottom: 100%;
-}
-
-.left-full {
-  left: 100%;
+.left-inverse-right-30 {
+  left: -3rem;
 }
 
 .resize-none {
@@ -42825,6 +41012,70 @@ video {
   display: none;
 }
 
+#workflow-canvas{
+  background-image: url(tile.png);
+  background-repeat: repeat;
+  background-size: 30px 30px;
+  background-color: #FBFBFB;
+}
+
+.canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.box {
+  display: inline-block;
+  width: 80%;
+  min-width: 300px;
+  max-width: 300px;
+  min-height: 50px;
+  margin-left: 1rem;
+}
+
+.canvas ul {
+  padding: 0;
+  list-style-type: none;
+  display: inline-block;
+  height: 100%;
+}
+
+.canvas li {
+  margin-top: 50px;
+  height: 100%;
+  text-align: center;
+}
+
+.children ul {
+  display: inline-block;
+  padding: 0;
+  overflow: hidden;
+  text-align: center;
+  height: 100%;
+}
+
+h4 {
+  -webkit-margin-before: 1em;
+          margin-block-start: 1em;
+}
+
+.children li {
+  float: left;
+  width: 50%;
+}
+
+._jsPlumb_connector {
+  z-index: 1;
+}
+
+._jsPlumb_overlay {
+  z-index: 1;
+}
+
+li {
+  height: 50px;
+}
+
 @media (min-width: 640px) {
   .sm\:container {
     width: 100%;
@@ -59261,6 +57512,206 @@ video {
     border-left-width: 1px;
   }
 
+  .sm\:hover\:border-0:hover {
+    border-width: 0;
+  }
+
+  .sm\:hover\:border-2:hover {
+    border-width: 2px;
+  }
+
+  .sm\:hover\:border-4:hover {
+    border-width: 4px;
+  }
+
+  .sm\:hover\:border-8:hover {
+    border-width: 8px;
+  }
+
+  .sm\:hover\:border:hover {
+    border-width: 1px;
+  }
+
+  .sm\:hover\:border-t-0:hover {
+    border-top-width: 0;
+  }
+
+  .sm\:hover\:border-r-0:hover {
+    border-right-width: 0;
+  }
+
+  .sm\:hover\:border-b-0:hover {
+    border-bottom-width: 0;
+  }
+
+  .sm\:hover\:border-l-0:hover {
+    border-left-width: 0;
+  }
+
+  .sm\:hover\:border-t-2:hover {
+    border-top-width: 2px;
+  }
+
+  .sm\:hover\:border-r-2:hover {
+    border-right-width: 2px;
+  }
+
+  .sm\:hover\:border-b-2:hover {
+    border-bottom-width: 2px;
+  }
+
+  .sm\:hover\:border-l-2:hover {
+    border-left-width: 2px;
+  }
+
+  .sm\:hover\:border-t-4:hover {
+    border-top-width: 4px;
+  }
+
+  .sm\:hover\:border-r-4:hover {
+    border-right-width: 4px;
+  }
+
+  .sm\:hover\:border-b-4:hover {
+    border-bottom-width: 4px;
+  }
+
+  .sm\:hover\:border-l-4:hover {
+    border-left-width: 4px;
+  }
+
+  .sm\:hover\:border-t-8:hover {
+    border-top-width: 8px;
+  }
+
+  .sm\:hover\:border-r-8:hover {
+    border-right-width: 8px;
+  }
+
+  .sm\:hover\:border-b-8:hover {
+    border-bottom-width: 8px;
+  }
+
+  .sm\:hover\:border-l-8:hover {
+    border-left-width: 8px;
+  }
+
+  .sm\:hover\:border-t:hover {
+    border-top-width: 1px;
+  }
+
+  .sm\:hover\:border-r:hover {
+    border-right-width: 1px;
+  }
+
+  .sm\:hover\:border-b:hover {
+    border-bottom-width: 1px;
+  }
+
+  .sm\:hover\:border-l:hover {
+    border-left-width: 1px;
+  }
+
+  .sm\:focus\:border-0:focus {
+    border-width: 0;
+  }
+
+  .sm\:focus\:border-2:focus {
+    border-width: 2px;
+  }
+
+  .sm\:focus\:border-4:focus {
+    border-width: 4px;
+  }
+
+  .sm\:focus\:border-8:focus {
+    border-width: 8px;
+  }
+
+  .sm\:focus\:border:focus {
+    border-width: 1px;
+  }
+
+  .sm\:focus\:border-t-0:focus {
+    border-top-width: 0;
+  }
+
+  .sm\:focus\:border-r-0:focus {
+    border-right-width: 0;
+  }
+
+  .sm\:focus\:border-b-0:focus {
+    border-bottom-width: 0;
+  }
+
+  .sm\:focus\:border-l-0:focus {
+    border-left-width: 0;
+  }
+
+  .sm\:focus\:border-t-2:focus {
+    border-top-width: 2px;
+  }
+
+  .sm\:focus\:border-r-2:focus {
+    border-right-width: 2px;
+  }
+
+  .sm\:focus\:border-b-2:focus {
+    border-bottom-width: 2px;
+  }
+
+  .sm\:focus\:border-l-2:focus {
+    border-left-width: 2px;
+  }
+
+  .sm\:focus\:border-t-4:focus {
+    border-top-width: 4px;
+  }
+
+  .sm\:focus\:border-r-4:focus {
+    border-right-width: 4px;
+  }
+
+  .sm\:focus\:border-b-4:focus {
+    border-bottom-width: 4px;
+  }
+
+  .sm\:focus\:border-l-4:focus {
+    border-left-width: 4px;
+  }
+
+  .sm\:focus\:border-t-8:focus {
+    border-top-width: 8px;
+  }
+
+  .sm\:focus\:border-r-8:focus {
+    border-right-width: 8px;
+  }
+
+  .sm\:focus\:border-b-8:focus {
+    border-bottom-width: 8px;
+  }
+
+  .sm\:focus\:border-l-8:focus {
+    border-left-width: 8px;
+  }
+
+  .sm\:focus\:border-t:focus {
+    border-top-width: 1px;
+  }
+
+  .sm\:focus\:border-r:focus {
+    border-right-width: 1px;
+  }
+
+  .sm\:focus\:border-b:focus {
+    border-bottom-width: 1px;
+  }
+
+  .sm\:focus\:border-l:focus {
+    border-left-width: 1px;
+  }
+
   .sm\:box-border {
     box-sizing: border-box;
   }
@@ -70848,223 +69299,6 @@ video {
     left: 0;
   }
 
-  .sm\:inset-1 {
-    top: 0.25rem;
-    right: 0.25rem;
-    bottom: 0.25rem;
-    left: 0.25rem;
-  }
-
-  .sm\:inset-2 {
-    top: 0.5rem;
-    right: 0.5rem;
-    bottom: 0.5rem;
-    left: 0.5rem;
-  }
-
-  .sm\:inset-3 {
-    top: 0.75rem;
-    right: 0.75rem;
-    bottom: 0.75rem;
-    left: 0.75rem;
-  }
-
-  .sm\:inset-4 {
-    top: 1rem;
-    right: 1rem;
-    bottom: 1rem;
-    left: 1rem;
-  }
-
-  .sm\:inset-5 {
-    top: 1.25rem;
-    right: 1.25rem;
-    bottom: 1.25rem;
-    left: 1.25rem;
-  }
-
-  .sm\:inset-6 {
-    top: 1.5rem;
-    right: 1.5rem;
-    bottom: 1.5rem;
-    left: 1.5rem;
-  }
-
-  .sm\:inset-7 {
-    top: 1.75rem;
-    right: 1.75rem;
-    bottom: 1.75rem;
-    left: 1.75rem;
-  }
-
-  .sm\:inset-8 {
-    top: 2rem;
-    right: 2rem;
-    bottom: 2rem;
-    left: 2rem;
-  }
-
-  .sm\:inset-9 {
-    top: 2.25rem;
-    right: 2.25rem;
-    bottom: 2.25rem;
-    left: 2.25rem;
-  }
-
-  .sm\:inset-10 {
-    top: 2.5rem;
-    right: 2.5rem;
-    bottom: 2.5rem;
-    left: 2.5rem;
-  }
-
-  .sm\:inset-11 {
-    top: 2.75rem;
-    right: 2.75rem;
-    bottom: 2.75rem;
-    left: 2.75rem;
-  }
-
-  .sm\:inset-12 {
-    top: 3rem;
-    right: 3rem;
-    bottom: 3rem;
-    left: 3rem;
-  }
-
-  .sm\:inset-13 {
-    top: 3.25rem;
-    right: 3.25rem;
-    bottom: 3.25rem;
-    left: 3.25rem;
-  }
-
-  .sm\:inset-14 {
-    top: 3.5rem;
-    right: 3.5rem;
-    bottom: 3.5rem;
-    left: 3.5rem;
-  }
-
-  .sm\:inset-15 {
-    top: 3.75rem;
-    right: 3.75rem;
-    bottom: 3.75rem;
-    left: 3.75rem;
-  }
-
-  .sm\:inset-16 {
-    top: 4rem;
-    right: 4rem;
-    bottom: 4rem;
-    left: 4rem;
-  }
-
-  .sm\:inset-20 {
-    top: 5rem;
-    right: 5rem;
-    bottom: 5rem;
-    left: 5rem;
-  }
-
-  .sm\:inset-24 {
-    top: 6rem;
-    right: 6rem;
-    bottom: 6rem;
-    left: 6rem;
-  }
-
-  .sm\:inset-28 {
-    top: 7rem;
-    right: 7rem;
-    bottom: 7rem;
-    left: 7rem;
-  }
-
-  .sm\:inset-32 {
-    top: 8rem;
-    right: 8rem;
-    bottom: 8rem;
-    left: 8rem;
-  }
-
-  .sm\:inset-36 {
-    top: 9rem;
-    right: 9rem;
-    bottom: 9rem;
-    left: 9rem;
-  }
-
-  .sm\:inset-40 {
-    top: 10rem;
-    right: 10rem;
-    bottom: 10rem;
-    left: 10rem;
-  }
-
-  .sm\:inset-44 {
-    top: 11rem;
-    right: 11rem;
-    bottom: 11rem;
-    left: 11rem;
-  }
-
-  .sm\:inset-48 {
-    top: 12rem;
-    right: 12rem;
-    bottom: 12rem;
-    left: 12rem;
-  }
-
-  .sm\:inset-52 {
-    top: 13rem;
-    right: 13rem;
-    bottom: 13rem;
-    left: 13rem;
-  }
-
-  .sm\:inset-56 {
-    top: 14rem;
-    right: 14rem;
-    bottom: 14rem;
-    left: 14rem;
-  }
-
-  .sm\:inset-60 {
-    top: 15rem;
-    right: 15rem;
-    bottom: 15rem;
-    left: 15rem;
-  }
-
-  .sm\:inset-64 {
-    top: 16rem;
-    right: 16rem;
-    bottom: 16rem;
-    left: 16rem;
-  }
-
-  .sm\:inset-72 {
-    top: 18rem;
-    right: 18rem;
-    bottom: 18rem;
-    left: 18rem;
-  }
-
-  .sm\:inset-80 {
-    top: 20rem;
-    right: 20rem;
-    bottom: 20rem;
-    left: 20rem;
-  }
-
-  .sm\:inset-96 {
-    top: 24rem;
-    right: 24rem;
-    bottom: 24rem;
-    left: 24rem;
-  }
-
   .sm\:inset-auto {
     top: auto;
     right: auto;
@@ -71072,228 +69306,18 @@ video {
     left: auto;
   }
 
-  .sm\:inset-px {
-    top: 1px;
-    right: 1px;
-    bottom: 1px;
-    left: 1px;
+  .sm\:inset-inverse-right-10 {
+    top: -1rem;
+    right: -1rem;
+    bottom: -1rem;
+    left: -1rem;
   }
 
-  .sm\:inset-0\.5 {
-    top: 0.125rem;
-    right: 0.125rem;
-    bottom: 0.125rem;
-    left: 0.125rem;
-  }
-
-  .sm\:inset-1\.5 {
-    top: 0.375rem;
-    right: 0.375rem;
-    bottom: 0.375rem;
-    left: 0.375rem;
-  }
-
-  .sm\:inset-2\.5 {
-    top: 0.625rem;
-    right: 0.625rem;
-    bottom: 0.625rem;
-    left: 0.625rem;
-  }
-
-  .sm\:inset-3\.5 {
-    top: 0.875rem;
-    right: 0.875rem;
-    bottom: 0.875rem;
-    left: 0.875rem;
-  }
-
-  .sm\:inset-1\/2 {
-    top: 50%;
-    right: 50%;
-    bottom: 50%;
-    left: 50%;
-  }
-
-  .sm\:inset-1\/3 {
-    top: 33.333333%;
-    right: 33.333333%;
-    bottom: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .sm\:inset-2\/3 {
-    top: 66.666667%;
-    right: 66.666667%;
-    bottom: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .sm\:inset-1\/4 {
-    top: 25%;
-    right: 25%;
-    bottom: 25%;
-    left: 25%;
-  }
-
-  .sm\:inset-2\/4 {
-    top: 50%;
-    right: 50%;
-    bottom: 50%;
-    left: 50%;
-  }
-
-  .sm\:inset-3\/4 {
-    top: 75%;
-    right: 75%;
-    bottom: 75%;
-    left: 75%;
-  }
-
-  .sm\:inset-1\/5 {
-    top: 20%;
-    right: 20%;
-    bottom: 20%;
-    left: 20%;
-  }
-
-  .sm\:inset-2\/5 {
-    top: 40%;
-    right: 40%;
-    bottom: 40%;
-    left: 40%;
-  }
-
-  .sm\:inset-3\/5 {
-    top: 60%;
-    right: 60%;
-    bottom: 60%;
-    left: 60%;
-  }
-
-  .sm\:inset-4\/5 {
-    top: 80%;
-    right: 80%;
-    bottom: 80%;
-    left: 80%;
-  }
-
-  .sm\:inset-1\/6 {
-    top: 16.666667%;
-    right: 16.666667%;
-    bottom: 16.666667%;
-    left: 16.666667%;
-  }
-
-  .sm\:inset-2\/6 {
-    top: 33.333333%;
-    right: 33.333333%;
-    bottom: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .sm\:inset-3\/6 {
-    top: 50%;
-    right: 50%;
-    bottom: 50%;
-    left: 50%;
-  }
-
-  .sm\:inset-4\/6 {
-    top: 66.666667%;
-    right: 66.666667%;
-    bottom: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .sm\:inset-5\/6 {
-    top: 83.333333%;
-    right: 83.333333%;
-    bottom: 83.333333%;
-    left: 83.333333%;
-  }
-
-  .sm\:inset-1\/12 {
-    top: 8.333333%;
-    right: 8.333333%;
-    bottom: 8.333333%;
-    left: 8.333333%;
-  }
-
-  .sm\:inset-2\/12 {
-    top: 16.666667%;
-    right: 16.666667%;
-    bottom: 16.666667%;
-    left: 16.666667%;
-  }
-
-  .sm\:inset-3\/12 {
-    top: 25%;
-    right: 25%;
-    bottom: 25%;
-    left: 25%;
-  }
-
-  .sm\:inset-4\/12 {
-    top: 33.333333%;
-    right: 33.333333%;
-    bottom: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .sm\:inset-5\/12 {
-    top: 41.666667%;
-    right: 41.666667%;
-    bottom: 41.666667%;
-    left: 41.666667%;
-  }
-
-  .sm\:inset-6\/12 {
-    top: 50%;
-    right: 50%;
-    bottom: 50%;
-    left: 50%;
-  }
-
-  .sm\:inset-7\/12 {
-    top: 58.333333%;
-    right: 58.333333%;
-    bottom: 58.333333%;
-    left: 58.333333%;
-  }
-
-  .sm\:inset-8\/12 {
-    top: 66.666667%;
-    right: 66.666667%;
-    bottom: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .sm\:inset-9\/12 {
-    top: 75%;
-    right: 75%;
-    bottom: 75%;
-    left: 75%;
-  }
-
-  .sm\:inset-10\/12 {
-    top: 83.333333%;
-    right: 83.333333%;
-    bottom: 83.333333%;
-    left: 83.333333%;
-  }
-
-  .sm\:inset-11\/12 {
-    top: 91.666667%;
-    right: 91.666667%;
-    bottom: 91.666667%;
-    left: 91.666667%;
-  }
-
-  .sm\:inset-full {
-    top: 100%;
-    right: 100%;
-    bottom: 100%;
-    left: 100%;
+  .sm\:inset-inverse-right-30 {
+    top: -3rem;
+    right: -3rem;
+    bottom: -3rem;
+    left: -3rem;
   }
 
   .sm\:inset-y-0 {
@@ -71306,316 +69330,6 @@ video {
     left: 0;
   }
 
-  .sm\:inset-y-1 {
-    top: 0.25rem;
-    bottom: 0.25rem;
-  }
-
-  .sm\:inset-x-1 {
-    right: 0.25rem;
-    left: 0.25rem;
-  }
-
-  .sm\:inset-y-2 {
-    top: 0.5rem;
-    bottom: 0.5rem;
-  }
-
-  .sm\:inset-x-2 {
-    right: 0.5rem;
-    left: 0.5rem;
-  }
-
-  .sm\:inset-y-3 {
-    top: 0.75rem;
-    bottom: 0.75rem;
-  }
-
-  .sm\:inset-x-3 {
-    right: 0.75rem;
-    left: 0.75rem;
-  }
-
-  .sm\:inset-y-4 {
-    top: 1rem;
-    bottom: 1rem;
-  }
-
-  .sm\:inset-x-4 {
-    right: 1rem;
-    left: 1rem;
-  }
-
-  .sm\:inset-y-5 {
-    top: 1.25rem;
-    bottom: 1.25rem;
-  }
-
-  .sm\:inset-x-5 {
-    right: 1.25rem;
-    left: 1.25rem;
-  }
-
-  .sm\:inset-y-6 {
-    top: 1.5rem;
-    bottom: 1.5rem;
-  }
-
-  .sm\:inset-x-6 {
-    right: 1.5rem;
-    left: 1.5rem;
-  }
-
-  .sm\:inset-y-7 {
-    top: 1.75rem;
-    bottom: 1.75rem;
-  }
-
-  .sm\:inset-x-7 {
-    right: 1.75rem;
-    left: 1.75rem;
-  }
-
-  .sm\:inset-y-8 {
-    top: 2rem;
-    bottom: 2rem;
-  }
-
-  .sm\:inset-x-8 {
-    right: 2rem;
-    left: 2rem;
-  }
-
-  .sm\:inset-y-9 {
-    top: 2.25rem;
-    bottom: 2.25rem;
-  }
-
-  .sm\:inset-x-9 {
-    right: 2.25rem;
-    left: 2.25rem;
-  }
-
-  .sm\:inset-y-10 {
-    top: 2.5rem;
-    bottom: 2.5rem;
-  }
-
-  .sm\:inset-x-10 {
-    right: 2.5rem;
-    left: 2.5rem;
-  }
-
-  .sm\:inset-y-11 {
-    top: 2.75rem;
-    bottom: 2.75rem;
-  }
-
-  .sm\:inset-x-11 {
-    right: 2.75rem;
-    left: 2.75rem;
-  }
-
-  .sm\:inset-y-12 {
-    top: 3rem;
-    bottom: 3rem;
-  }
-
-  .sm\:inset-x-12 {
-    right: 3rem;
-    left: 3rem;
-  }
-
-  .sm\:inset-y-13 {
-    top: 3.25rem;
-    bottom: 3.25rem;
-  }
-
-  .sm\:inset-x-13 {
-    right: 3.25rem;
-    left: 3.25rem;
-  }
-
-  .sm\:inset-y-14 {
-    top: 3.5rem;
-    bottom: 3.5rem;
-  }
-
-  .sm\:inset-x-14 {
-    right: 3.5rem;
-    left: 3.5rem;
-  }
-
-  .sm\:inset-y-15 {
-    top: 3.75rem;
-    bottom: 3.75rem;
-  }
-
-  .sm\:inset-x-15 {
-    right: 3.75rem;
-    left: 3.75rem;
-  }
-
-  .sm\:inset-y-16 {
-    top: 4rem;
-    bottom: 4rem;
-  }
-
-  .sm\:inset-x-16 {
-    right: 4rem;
-    left: 4rem;
-  }
-
-  .sm\:inset-y-20 {
-    top: 5rem;
-    bottom: 5rem;
-  }
-
-  .sm\:inset-x-20 {
-    right: 5rem;
-    left: 5rem;
-  }
-
-  .sm\:inset-y-24 {
-    top: 6rem;
-    bottom: 6rem;
-  }
-
-  .sm\:inset-x-24 {
-    right: 6rem;
-    left: 6rem;
-  }
-
-  .sm\:inset-y-28 {
-    top: 7rem;
-    bottom: 7rem;
-  }
-
-  .sm\:inset-x-28 {
-    right: 7rem;
-    left: 7rem;
-  }
-
-  .sm\:inset-y-32 {
-    top: 8rem;
-    bottom: 8rem;
-  }
-
-  .sm\:inset-x-32 {
-    right: 8rem;
-    left: 8rem;
-  }
-
-  .sm\:inset-y-36 {
-    top: 9rem;
-    bottom: 9rem;
-  }
-
-  .sm\:inset-x-36 {
-    right: 9rem;
-    left: 9rem;
-  }
-
-  .sm\:inset-y-40 {
-    top: 10rem;
-    bottom: 10rem;
-  }
-
-  .sm\:inset-x-40 {
-    right: 10rem;
-    left: 10rem;
-  }
-
-  .sm\:inset-y-44 {
-    top: 11rem;
-    bottom: 11rem;
-  }
-
-  .sm\:inset-x-44 {
-    right: 11rem;
-    left: 11rem;
-  }
-
-  .sm\:inset-y-48 {
-    top: 12rem;
-    bottom: 12rem;
-  }
-
-  .sm\:inset-x-48 {
-    right: 12rem;
-    left: 12rem;
-  }
-
-  .sm\:inset-y-52 {
-    top: 13rem;
-    bottom: 13rem;
-  }
-
-  .sm\:inset-x-52 {
-    right: 13rem;
-    left: 13rem;
-  }
-
-  .sm\:inset-y-56 {
-    top: 14rem;
-    bottom: 14rem;
-  }
-
-  .sm\:inset-x-56 {
-    right: 14rem;
-    left: 14rem;
-  }
-
-  .sm\:inset-y-60 {
-    top: 15rem;
-    bottom: 15rem;
-  }
-
-  .sm\:inset-x-60 {
-    right: 15rem;
-    left: 15rem;
-  }
-
-  .sm\:inset-y-64 {
-    top: 16rem;
-    bottom: 16rem;
-  }
-
-  .sm\:inset-x-64 {
-    right: 16rem;
-    left: 16rem;
-  }
-
-  .sm\:inset-y-72 {
-    top: 18rem;
-    bottom: 18rem;
-  }
-
-  .sm\:inset-x-72 {
-    right: 18rem;
-    left: 18rem;
-  }
-
-  .sm\:inset-y-80 {
-    top: 20rem;
-    bottom: 20rem;
-  }
-
-  .sm\:inset-x-80 {
-    right: 20rem;
-    left: 20rem;
-  }
-
-  .sm\:inset-y-96 {
-    top: 24rem;
-    bottom: 24rem;
-  }
-
-  .sm\:inset-x-96 {
-    right: 24rem;
-    left: 24rem;
-  }
-
   .sm\:inset-y-auto {
     top: auto;
     bottom: auto;
@@ -71626,324 +69340,24 @@ video {
     left: auto;
   }
 
-  .sm\:inset-y-px {
-    top: 1px;
-    bottom: 1px;
+  .sm\:inset-y-inverse-right-10 {
+    top: -1rem;
+    bottom: -1rem;
   }
 
-  .sm\:inset-x-px {
-    right: 1px;
-    left: 1px;
+  .sm\:inset-x-inverse-right-10 {
+    right: -1rem;
+    left: -1rem;
   }
 
-  .sm\:inset-y-0\.5 {
-    top: 0.125rem;
-    bottom: 0.125rem;
+  .sm\:inset-y-inverse-right-30 {
+    top: -3rem;
+    bottom: -3rem;
   }
 
-  .sm\:inset-x-0\.5 {
-    right: 0.125rem;
-    left: 0.125rem;
-  }
-
-  .sm\:inset-y-1\.5 {
-    top: 0.375rem;
-    bottom: 0.375rem;
-  }
-
-  .sm\:inset-x-1\.5 {
-    right: 0.375rem;
-    left: 0.375rem;
-  }
-
-  .sm\:inset-y-2\.5 {
-    top: 0.625rem;
-    bottom: 0.625rem;
-  }
-
-  .sm\:inset-x-2\.5 {
-    right: 0.625rem;
-    left: 0.625rem;
-  }
-
-  .sm\:inset-y-3\.5 {
-    top: 0.875rem;
-    bottom: 0.875rem;
-  }
-
-  .sm\:inset-x-3\.5 {
-    right: 0.875rem;
-    left: 0.875rem;
-  }
-
-  .sm\:inset-y-1\/2 {
-    top: 50%;
-    bottom: 50%;
-  }
-
-  .sm\:inset-x-1\/2 {
-    right: 50%;
-    left: 50%;
-  }
-
-  .sm\:inset-y-1\/3 {
-    top: 33.333333%;
-    bottom: 33.333333%;
-  }
-
-  .sm\:inset-x-1\/3 {
-    right: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .sm\:inset-y-2\/3 {
-    top: 66.666667%;
-    bottom: 66.666667%;
-  }
-
-  .sm\:inset-x-2\/3 {
-    right: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .sm\:inset-y-1\/4 {
-    top: 25%;
-    bottom: 25%;
-  }
-
-  .sm\:inset-x-1\/4 {
-    right: 25%;
-    left: 25%;
-  }
-
-  .sm\:inset-y-2\/4 {
-    top: 50%;
-    bottom: 50%;
-  }
-
-  .sm\:inset-x-2\/4 {
-    right: 50%;
-    left: 50%;
-  }
-
-  .sm\:inset-y-3\/4 {
-    top: 75%;
-    bottom: 75%;
-  }
-
-  .sm\:inset-x-3\/4 {
-    right: 75%;
-    left: 75%;
-  }
-
-  .sm\:inset-y-1\/5 {
-    top: 20%;
-    bottom: 20%;
-  }
-
-  .sm\:inset-x-1\/5 {
-    right: 20%;
-    left: 20%;
-  }
-
-  .sm\:inset-y-2\/5 {
-    top: 40%;
-    bottom: 40%;
-  }
-
-  .sm\:inset-x-2\/5 {
-    right: 40%;
-    left: 40%;
-  }
-
-  .sm\:inset-y-3\/5 {
-    top: 60%;
-    bottom: 60%;
-  }
-
-  .sm\:inset-x-3\/5 {
-    right: 60%;
-    left: 60%;
-  }
-
-  .sm\:inset-y-4\/5 {
-    top: 80%;
-    bottom: 80%;
-  }
-
-  .sm\:inset-x-4\/5 {
-    right: 80%;
-    left: 80%;
-  }
-
-  .sm\:inset-y-1\/6 {
-    top: 16.666667%;
-    bottom: 16.666667%;
-  }
-
-  .sm\:inset-x-1\/6 {
-    right: 16.666667%;
-    left: 16.666667%;
-  }
-
-  .sm\:inset-y-2\/6 {
-    top: 33.333333%;
-    bottom: 33.333333%;
-  }
-
-  .sm\:inset-x-2\/6 {
-    right: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .sm\:inset-y-3\/6 {
-    top: 50%;
-    bottom: 50%;
-  }
-
-  .sm\:inset-x-3\/6 {
-    right: 50%;
-    left: 50%;
-  }
-
-  .sm\:inset-y-4\/6 {
-    top: 66.666667%;
-    bottom: 66.666667%;
-  }
-
-  .sm\:inset-x-4\/6 {
-    right: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .sm\:inset-y-5\/6 {
-    top: 83.333333%;
-    bottom: 83.333333%;
-  }
-
-  .sm\:inset-x-5\/6 {
-    right: 83.333333%;
-    left: 83.333333%;
-  }
-
-  .sm\:inset-y-1\/12 {
-    top: 8.333333%;
-    bottom: 8.333333%;
-  }
-
-  .sm\:inset-x-1\/12 {
-    right: 8.333333%;
-    left: 8.333333%;
-  }
-
-  .sm\:inset-y-2\/12 {
-    top: 16.666667%;
-    bottom: 16.666667%;
-  }
-
-  .sm\:inset-x-2\/12 {
-    right: 16.666667%;
-    left: 16.666667%;
-  }
-
-  .sm\:inset-y-3\/12 {
-    top: 25%;
-    bottom: 25%;
-  }
-
-  .sm\:inset-x-3\/12 {
-    right: 25%;
-    left: 25%;
-  }
-
-  .sm\:inset-y-4\/12 {
-    top: 33.333333%;
-    bottom: 33.333333%;
-  }
-
-  .sm\:inset-x-4\/12 {
-    right: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .sm\:inset-y-5\/12 {
-    top: 41.666667%;
-    bottom: 41.666667%;
-  }
-
-  .sm\:inset-x-5\/12 {
-    right: 41.666667%;
-    left: 41.666667%;
-  }
-
-  .sm\:inset-y-6\/12 {
-    top: 50%;
-    bottom: 50%;
-  }
-
-  .sm\:inset-x-6\/12 {
-    right: 50%;
-    left: 50%;
-  }
-
-  .sm\:inset-y-7\/12 {
-    top: 58.333333%;
-    bottom: 58.333333%;
-  }
-
-  .sm\:inset-x-7\/12 {
-    right: 58.333333%;
-    left: 58.333333%;
-  }
-
-  .sm\:inset-y-8\/12 {
-    top: 66.666667%;
-    bottom: 66.666667%;
-  }
-
-  .sm\:inset-x-8\/12 {
-    right: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .sm\:inset-y-9\/12 {
-    top: 75%;
-    bottom: 75%;
-  }
-
-  .sm\:inset-x-9\/12 {
-    right: 75%;
-    left: 75%;
-  }
-
-  .sm\:inset-y-10\/12 {
-    top: 83.333333%;
-    bottom: 83.333333%;
-  }
-
-  .sm\:inset-x-10\/12 {
-    right: 83.333333%;
-    left: 83.333333%;
-  }
-
-  .sm\:inset-y-11\/12 {
-    top: 91.666667%;
-    bottom: 91.666667%;
-  }
-
-  .sm\:inset-x-11\/12 {
-    right: 91.666667%;
-    left: 91.666667%;
-  }
-
-  .sm\:inset-y-full {
-    top: 100%;
-    bottom: 100%;
-  }
-
-  .sm\:inset-x-full {
-    right: 100%;
-    left: 100%;
+  .sm\:inset-x-inverse-right-30 {
+    right: -3rem;
+    left: -3rem;
   }
 
   .sm\:top-0 {
@@ -71962,502 +69376,6 @@ video {
     left: 0;
   }
 
-  .sm\:top-1 {
-    top: 0.25rem;
-  }
-
-  .sm\:right-1 {
-    right: 0.25rem;
-  }
-
-  .sm\:bottom-1 {
-    bottom: 0.25rem;
-  }
-
-  .sm\:left-1 {
-    left: 0.25rem;
-  }
-
-  .sm\:top-2 {
-    top: 0.5rem;
-  }
-
-  .sm\:right-2 {
-    right: 0.5rem;
-  }
-
-  .sm\:bottom-2 {
-    bottom: 0.5rem;
-  }
-
-  .sm\:left-2 {
-    left: 0.5rem;
-  }
-
-  .sm\:top-3 {
-    top: 0.75rem;
-  }
-
-  .sm\:right-3 {
-    right: 0.75rem;
-  }
-
-  .sm\:bottom-3 {
-    bottom: 0.75rem;
-  }
-
-  .sm\:left-3 {
-    left: 0.75rem;
-  }
-
-  .sm\:top-4 {
-    top: 1rem;
-  }
-
-  .sm\:right-4 {
-    right: 1rem;
-  }
-
-  .sm\:bottom-4 {
-    bottom: 1rem;
-  }
-
-  .sm\:left-4 {
-    left: 1rem;
-  }
-
-  .sm\:top-5 {
-    top: 1.25rem;
-  }
-
-  .sm\:right-5 {
-    right: 1.25rem;
-  }
-
-  .sm\:bottom-5 {
-    bottom: 1.25rem;
-  }
-
-  .sm\:left-5 {
-    left: 1.25rem;
-  }
-
-  .sm\:top-6 {
-    top: 1.5rem;
-  }
-
-  .sm\:right-6 {
-    right: 1.5rem;
-  }
-
-  .sm\:bottom-6 {
-    bottom: 1.5rem;
-  }
-
-  .sm\:left-6 {
-    left: 1.5rem;
-  }
-
-  .sm\:top-7 {
-    top: 1.75rem;
-  }
-
-  .sm\:right-7 {
-    right: 1.75rem;
-  }
-
-  .sm\:bottom-7 {
-    bottom: 1.75rem;
-  }
-
-  .sm\:left-7 {
-    left: 1.75rem;
-  }
-
-  .sm\:top-8 {
-    top: 2rem;
-  }
-
-  .sm\:right-8 {
-    right: 2rem;
-  }
-
-  .sm\:bottom-8 {
-    bottom: 2rem;
-  }
-
-  .sm\:left-8 {
-    left: 2rem;
-  }
-
-  .sm\:top-9 {
-    top: 2.25rem;
-  }
-
-  .sm\:right-9 {
-    right: 2.25rem;
-  }
-
-  .sm\:bottom-9 {
-    bottom: 2.25rem;
-  }
-
-  .sm\:left-9 {
-    left: 2.25rem;
-  }
-
-  .sm\:top-10 {
-    top: 2.5rem;
-  }
-
-  .sm\:right-10 {
-    right: 2.5rem;
-  }
-
-  .sm\:bottom-10 {
-    bottom: 2.5rem;
-  }
-
-  .sm\:left-10 {
-    left: 2.5rem;
-  }
-
-  .sm\:top-11 {
-    top: 2.75rem;
-  }
-
-  .sm\:right-11 {
-    right: 2.75rem;
-  }
-
-  .sm\:bottom-11 {
-    bottom: 2.75rem;
-  }
-
-  .sm\:left-11 {
-    left: 2.75rem;
-  }
-
-  .sm\:top-12 {
-    top: 3rem;
-  }
-
-  .sm\:right-12 {
-    right: 3rem;
-  }
-
-  .sm\:bottom-12 {
-    bottom: 3rem;
-  }
-
-  .sm\:left-12 {
-    left: 3rem;
-  }
-
-  .sm\:top-13 {
-    top: 3.25rem;
-  }
-
-  .sm\:right-13 {
-    right: 3.25rem;
-  }
-
-  .sm\:bottom-13 {
-    bottom: 3.25rem;
-  }
-
-  .sm\:left-13 {
-    left: 3.25rem;
-  }
-
-  .sm\:top-14 {
-    top: 3.5rem;
-  }
-
-  .sm\:right-14 {
-    right: 3.5rem;
-  }
-
-  .sm\:bottom-14 {
-    bottom: 3.5rem;
-  }
-
-  .sm\:left-14 {
-    left: 3.5rem;
-  }
-
-  .sm\:top-15 {
-    top: 3.75rem;
-  }
-
-  .sm\:right-15 {
-    right: 3.75rem;
-  }
-
-  .sm\:bottom-15 {
-    bottom: 3.75rem;
-  }
-
-  .sm\:left-15 {
-    left: 3.75rem;
-  }
-
-  .sm\:top-16 {
-    top: 4rem;
-  }
-
-  .sm\:right-16 {
-    right: 4rem;
-  }
-
-  .sm\:bottom-16 {
-    bottom: 4rem;
-  }
-
-  .sm\:left-16 {
-    left: 4rem;
-  }
-
-  .sm\:top-20 {
-    top: 5rem;
-  }
-
-  .sm\:right-20 {
-    right: 5rem;
-  }
-
-  .sm\:bottom-20 {
-    bottom: 5rem;
-  }
-
-  .sm\:left-20 {
-    left: 5rem;
-  }
-
-  .sm\:top-24 {
-    top: 6rem;
-  }
-
-  .sm\:right-24 {
-    right: 6rem;
-  }
-
-  .sm\:bottom-24 {
-    bottom: 6rem;
-  }
-
-  .sm\:left-24 {
-    left: 6rem;
-  }
-
-  .sm\:top-28 {
-    top: 7rem;
-  }
-
-  .sm\:right-28 {
-    right: 7rem;
-  }
-
-  .sm\:bottom-28 {
-    bottom: 7rem;
-  }
-
-  .sm\:left-28 {
-    left: 7rem;
-  }
-
-  .sm\:top-32 {
-    top: 8rem;
-  }
-
-  .sm\:right-32 {
-    right: 8rem;
-  }
-
-  .sm\:bottom-32 {
-    bottom: 8rem;
-  }
-
-  .sm\:left-32 {
-    left: 8rem;
-  }
-
-  .sm\:top-36 {
-    top: 9rem;
-  }
-
-  .sm\:right-36 {
-    right: 9rem;
-  }
-
-  .sm\:bottom-36 {
-    bottom: 9rem;
-  }
-
-  .sm\:left-36 {
-    left: 9rem;
-  }
-
-  .sm\:top-40 {
-    top: 10rem;
-  }
-
-  .sm\:right-40 {
-    right: 10rem;
-  }
-
-  .sm\:bottom-40 {
-    bottom: 10rem;
-  }
-
-  .sm\:left-40 {
-    left: 10rem;
-  }
-
-  .sm\:top-44 {
-    top: 11rem;
-  }
-
-  .sm\:right-44 {
-    right: 11rem;
-  }
-
-  .sm\:bottom-44 {
-    bottom: 11rem;
-  }
-
-  .sm\:left-44 {
-    left: 11rem;
-  }
-
-  .sm\:top-48 {
-    top: 12rem;
-  }
-
-  .sm\:right-48 {
-    right: 12rem;
-  }
-
-  .sm\:bottom-48 {
-    bottom: 12rem;
-  }
-
-  .sm\:left-48 {
-    left: 12rem;
-  }
-
-  .sm\:top-52 {
-    top: 13rem;
-  }
-
-  .sm\:right-52 {
-    right: 13rem;
-  }
-
-  .sm\:bottom-52 {
-    bottom: 13rem;
-  }
-
-  .sm\:left-52 {
-    left: 13rem;
-  }
-
-  .sm\:top-56 {
-    top: 14rem;
-  }
-
-  .sm\:right-56 {
-    right: 14rem;
-  }
-
-  .sm\:bottom-56 {
-    bottom: 14rem;
-  }
-
-  .sm\:left-56 {
-    left: 14rem;
-  }
-
-  .sm\:top-60 {
-    top: 15rem;
-  }
-
-  .sm\:right-60 {
-    right: 15rem;
-  }
-
-  .sm\:bottom-60 {
-    bottom: 15rem;
-  }
-
-  .sm\:left-60 {
-    left: 15rem;
-  }
-
-  .sm\:top-64 {
-    top: 16rem;
-  }
-
-  .sm\:right-64 {
-    right: 16rem;
-  }
-
-  .sm\:bottom-64 {
-    bottom: 16rem;
-  }
-
-  .sm\:left-64 {
-    left: 16rem;
-  }
-
-  .sm\:top-72 {
-    top: 18rem;
-  }
-
-  .sm\:right-72 {
-    right: 18rem;
-  }
-
-  .sm\:bottom-72 {
-    bottom: 18rem;
-  }
-
-  .sm\:left-72 {
-    left: 18rem;
-  }
-
-  .sm\:top-80 {
-    top: 20rem;
-  }
-
-  .sm\:right-80 {
-    right: 20rem;
-  }
-
-  .sm\:bottom-80 {
-    bottom: 20rem;
-  }
-
-  .sm\:left-80 {
-    left: 20rem;
-  }
-
-  .sm\:top-96 {
-    top: 24rem;
-  }
-
-  .sm\:right-96 {
-    right: 24rem;
-  }
-
-  .sm\:bottom-96 {
-    bottom: 24rem;
-  }
-
-  .sm\:left-96 {
-    left: 24rem;
-  }
-
   .sm\:top-auto {
     top: auto;
   }
@@ -72474,516 +69392,36 @@ video {
     left: auto;
   }
 
-  .sm\:top-px {
-    top: 1px;
+  .sm\:top-inverse-right-10 {
+    top: -1rem;
   }
 
-  .sm\:right-px {
-    right: 1px;
+  .sm\:right-inverse-right-10 {
+    right: -1rem;
   }
 
-  .sm\:bottom-px {
-    bottom: 1px;
+  .sm\:bottom-inverse-right-10 {
+    bottom: -1rem;
   }
 
-  .sm\:left-px {
-    left: 1px;
+  .sm\:left-inverse-right-10 {
+    left: -1rem;
   }
 
-  .sm\:top-0\.5 {
-    top: 0.125rem;
+  .sm\:top-inverse-right-30 {
+    top: -3rem;
   }
 
-  .sm\:right-0\.5 {
-    right: 0.125rem;
+  .sm\:right-inverse-right-30 {
+    right: -3rem;
   }
 
-  .sm\:bottom-0\.5 {
-    bottom: 0.125rem;
+  .sm\:bottom-inverse-right-30 {
+    bottom: -3rem;
   }
 
-  .sm\:left-0\.5 {
-    left: 0.125rem;
-  }
-
-  .sm\:top-1\.5 {
-    top: 0.375rem;
-  }
-
-  .sm\:right-1\.5 {
-    right: 0.375rem;
-  }
-
-  .sm\:bottom-1\.5 {
-    bottom: 0.375rem;
-  }
-
-  .sm\:left-1\.5 {
-    left: 0.375rem;
-  }
-
-  .sm\:top-2\.5 {
-    top: 0.625rem;
-  }
-
-  .sm\:right-2\.5 {
-    right: 0.625rem;
-  }
-
-  .sm\:bottom-2\.5 {
-    bottom: 0.625rem;
-  }
-
-  .sm\:left-2\.5 {
-    left: 0.625rem;
-  }
-
-  .sm\:top-3\.5 {
-    top: 0.875rem;
-  }
-
-  .sm\:right-3\.5 {
-    right: 0.875rem;
-  }
-
-  .sm\:bottom-3\.5 {
-    bottom: 0.875rem;
-  }
-
-  .sm\:left-3\.5 {
-    left: 0.875rem;
-  }
-
-  .sm\:top-1\/2 {
-    top: 50%;
-  }
-
-  .sm\:right-1\/2 {
-    right: 50%;
-  }
-
-  .sm\:bottom-1\/2 {
-    bottom: 50%;
-  }
-
-  .sm\:left-1\/2 {
-    left: 50%;
-  }
-
-  .sm\:top-1\/3 {
-    top: 33.333333%;
-  }
-
-  .sm\:right-1\/3 {
-    right: 33.333333%;
-  }
-
-  .sm\:bottom-1\/3 {
-    bottom: 33.333333%;
-  }
-
-  .sm\:left-1\/3 {
-    left: 33.333333%;
-  }
-
-  .sm\:top-2\/3 {
-    top: 66.666667%;
-  }
-
-  .sm\:right-2\/3 {
-    right: 66.666667%;
-  }
-
-  .sm\:bottom-2\/3 {
-    bottom: 66.666667%;
-  }
-
-  .sm\:left-2\/3 {
-    left: 66.666667%;
-  }
-
-  .sm\:top-1\/4 {
-    top: 25%;
-  }
-
-  .sm\:right-1\/4 {
-    right: 25%;
-  }
-
-  .sm\:bottom-1\/4 {
-    bottom: 25%;
-  }
-
-  .sm\:left-1\/4 {
-    left: 25%;
-  }
-
-  .sm\:top-2\/4 {
-    top: 50%;
-  }
-
-  .sm\:right-2\/4 {
-    right: 50%;
-  }
-
-  .sm\:bottom-2\/4 {
-    bottom: 50%;
-  }
-
-  .sm\:left-2\/4 {
-    left: 50%;
-  }
-
-  .sm\:top-3\/4 {
-    top: 75%;
-  }
-
-  .sm\:right-3\/4 {
-    right: 75%;
-  }
-
-  .sm\:bottom-3\/4 {
-    bottom: 75%;
-  }
-
-  .sm\:left-3\/4 {
-    left: 75%;
-  }
-
-  .sm\:top-1\/5 {
-    top: 20%;
-  }
-
-  .sm\:right-1\/5 {
-    right: 20%;
-  }
-
-  .sm\:bottom-1\/5 {
-    bottom: 20%;
-  }
-
-  .sm\:left-1\/5 {
-    left: 20%;
-  }
-
-  .sm\:top-2\/5 {
-    top: 40%;
-  }
-
-  .sm\:right-2\/5 {
-    right: 40%;
-  }
-
-  .sm\:bottom-2\/5 {
-    bottom: 40%;
-  }
-
-  .sm\:left-2\/5 {
-    left: 40%;
-  }
-
-  .sm\:top-3\/5 {
-    top: 60%;
-  }
-
-  .sm\:right-3\/5 {
-    right: 60%;
-  }
-
-  .sm\:bottom-3\/5 {
-    bottom: 60%;
-  }
-
-  .sm\:left-3\/5 {
-    left: 60%;
-  }
-
-  .sm\:top-4\/5 {
-    top: 80%;
-  }
-
-  .sm\:right-4\/5 {
-    right: 80%;
-  }
-
-  .sm\:bottom-4\/5 {
-    bottom: 80%;
-  }
-
-  .sm\:left-4\/5 {
-    left: 80%;
-  }
-
-  .sm\:top-1\/6 {
-    top: 16.666667%;
-  }
-
-  .sm\:right-1\/6 {
-    right: 16.666667%;
-  }
-
-  .sm\:bottom-1\/6 {
-    bottom: 16.666667%;
-  }
-
-  .sm\:left-1\/6 {
-    left: 16.666667%;
-  }
-
-  .sm\:top-2\/6 {
-    top: 33.333333%;
-  }
-
-  .sm\:right-2\/6 {
-    right: 33.333333%;
-  }
-
-  .sm\:bottom-2\/6 {
-    bottom: 33.333333%;
-  }
-
-  .sm\:left-2\/6 {
-    left: 33.333333%;
-  }
-
-  .sm\:top-3\/6 {
-    top: 50%;
-  }
-
-  .sm\:right-3\/6 {
-    right: 50%;
-  }
-
-  .sm\:bottom-3\/6 {
-    bottom: 50%;
-  }
-
-  .sm\:left-3\/6 {
-    left: 50%;
-  }
-
-  .sm\:top-4\/6 {
-    top: 66.666667%;
-  }
-
-  .sm\:right-4\/6 {
-    right: 66.666667%;
-  }
-
-  .sm\:bottom-4\/6 {
-    bottom: 66.666667%;
-  }
-
-  .sm\:left-4\/6 {
-    left: 66.666667%;
-  }
-
-  .sm\:top-5\/6 {
-    top: 83.333333%;
-  }
-
-  .sm\:right-5\/6 {
-    right: 83.333333%;
-  }
-
-  .sm\:bottom-5\/6 {
-    bottom: 83.333333%;
-  }
-
-  .sm\:left-5\/6 {
-    left: 83.333333%;
-  }
-
-  .sm\:top-1\/12 {
-    top: 8.333333%;
-  }
-
-  .sm\:right-1\/12 {
-    right: 8.333333%;
-  }
-
-  .sm\:bottom-1\/12 {
-    bottom: 8.333333%;
-  }
-
-  .sm\:left-1\/12 {
-    left: 8.333333%;
-  }
-
-  .sm\:top-2\/12 {
-    top: 16.666667%;
-  }
-
-  .sm\:right-2\/12 {
-    right: 16.666667%;
-  }
-
-  .sm\:bottom-2\/12 {
-    bottom: 16.666667%;
-  }
-
-  .sm\:left-2\/12 {
-    left: 16.666667%;
-  }
-
-  .sm\:top-3\/12 {
-    top: 25%;
-  }
-
-  .sm\:right-3\/12 {
-    right: 25%;
-  }
-
-  .sm\:bottom-3\/12 {
-    bottom: 25%;
-  }
-
-  .sm\:left-3\/12 {
-    left: 25%;
-  }
-
-  .sm\:top-4\/12 {
-    top: 33.333333%;
-  }
-
-  .sm\:right-4\/12 {
-    right: 33.333333%;
-  }
-
-  .sm\:bottom-4\/12 {
-    bottom: 33.333333%;
-  }
-
-  .sm\:left-4\/12 {
-    left: 33.333333%;
-  }
-
-  .sm\:top-5\/12 {
-    top: 41.666667%;
-  }
-
-  .sm\:right-5\/12 {
-    right: 41.666667%;
-  }
-
-  .sm\:bottom-5\/12 {
-    bottom: 41.666667%;
-  }
-
-  .sm\:left-5\/12 {
-    left: 41.666667%;
-  }
-
-  .sm\:top-6\/12 {
-    top: 50%;
-  }
-
-  .sm\:right-6\/12 {
-    right: 50%;
-  }
-
-  .sm\:bottom-6\/12 {
-    bottom: 50%;
-  }
-
-  .sm\:left-6\/12 {
-    left: 50%;
-  }
-
-  .sm\:top-7\/12 {
-    top: 58.333333%;
-  }
-
-  .sm\:right-7\/12 {
-    right: 58.333333%;
-  }
-
-  .sm\:bottom-7\/12 {
-    bottom: 58.333333%;
-  }
-
-  .sm\:left-7\/12 {
-    left: 58.333333%;
-  }
-
-  .sm\:top-8\/12 {
-    top: 66.666667%;
-  }
-
-  .sm\:right-8\/12 {
-    right: 66.666667%;
-  }
-
-  .sm\:bottom-8\/12 {
-    bottom: 66.666667%;
-  }
-
-  .sm\:left-8\/12 {
-    left: 66.666667%;
-  }
-
-  .sm\:top-9\/12 {
-    top: 75%;
-  }
-
-  .sm\:right-9\/12 {
-    right: 75%;
-  }
-
-  .sm\:bottom-9\/12 {
-    bottom: 75%;
-  }
-
-  .sm\:left-9\/12 {
-    left: 75%;
-  }
-
-  .sm\:top-10\/12 {
-    top: 83.333333%;
-  }
-
-  .sm\:right-10\/12 {
-    right: 83.333333%;
-  }
-
-  .sm\:bottom-10\/12 {
-    bottom: 83.333333%;
-  }
-
-  .sm\:left-10\/12 {
-    left: 83.333333%;
-  }
-
-  .sm\:top-11\/12 {
-    top: 91.666667%;
-  }
-
-  .sm\:right-11\/12 {
-    right: 91.666667%;
-  }
-
-  .sm\:bottom-11\/12 {
-    bottom: 91.666667%;
-  }
-
-  .sm\:left-11\/12 {
-    left: 91.666667%;
-  }
-
-  .sm\:top-full {
-    top: 100%;
-  }
-
-  .sm\:right-full {
-    right: 100%;
-  }
-
-  .sm\:bottom-full {
-    bottom: 100%;
-  }
-
-  .sm\:left-full {
-    left: 100%;
+  .sm\:left-inverse-right-30 {
+    left: -3rem;
   }
 
   .sm\:resize-none {
@@ -101187,6 +97625,206 @@ video {
     border-left-width: 1px;
   }
 
+  .md\:hover\:border-0:hover {
+    border-width: 0;
+  }
+
+  .md\:hover\:border-2:hover {
+    border-width: 2px;
+  }
+
+  .md\:hover\:border-4:hover {
+    border-width: 4px;
+  }
+
+  .md\:hover\:border-8:hover {
+    border-width: 8px;
+  }
+
+  .md\:hover\:border:hover {
+    border-width: 1px;
+  }
+
+  .md\:hover\:border-t-0:hover {
+    border-top-width: 0;
+  }
+
+  .md\:hover\:border-r-0:hover {
+    border-right-width: 0;
+  }
+
+  .md\:hover\:border-b-0:hover {
+    border-bottom-width: 0;
+  }
+
+  .md\:hover\:border-l-0:hover {
+    border-left-width: 0;
+  }
+
+  .md\:hover\:border-t-2:hover {
+    border-top-width: 2px;
+  }
+
+  .md\:hover\:border-r-2:hover {
+    border-right-width: 2px;
+  }
+
+  .md\:hover\:border-b-2:hover {
+    border-bottom-width: 2px;
+  }
+
+  .md\:hover\:border-l-2:hover {
+    border-left-width: 2px;
+  }
+
+  .md\:hover\:border-t-4:hover {
+    border-top-width: 4px;
+  }
+
+  .md\:hover\:border-r-4:hover {
+    border-right-width: 4px;
+  }
+
+  .md\:hover\:border-b-4:hover {
+    border-bottom-width: 4px;
+  }
+
+  .md\:hover\:border-l-4:hover {
+    border-left-width: 4px;
+  }
+
+  .md\:hover\:border-t-8:hover {
+    border-top-width: 8px;
+  }
+
+  .md\:hover\:border-r-8:hover {
+    border-right-width: 8px;
+  }
+
+  .md\:hover\:border-b-8:hover {
+    border-bottom-width: 8px;
+  }
+
+  .md\:hover\:border-l-8:hover {
+    border-left-width: 8px;
+  }
+
+  .md\:hover\:border-t:hover {
+    border-top-width: 1px;
+  }
+
+  .md\:hover\:border-r:hover {
+    border-right-width: 1px;
+  }
+
+  .md\:hover\:border-b:hover {
+    border-bottom-width: 1px;
+  }
+
+  .md\:hover\:border-l:hover {
+    border-left-width: 1px;
+  }
+
+  .md\:focus\:border-0:focus {
+    border-width: 0;
+  }
+
+  .md\:focus\:border-2:focus {
+    border-width: 2px;
+  }
+
+  .md\:focus\:border-4:focus {
+    border-width: 4px;
+  }
+
+  .md\:focus\:border-8:focus {
+    border-width: 8px;
+  }
+
+  .md\:focus\:border:focus {
+    border-width: 1px;
+  }
+
+  .md\:focus\:border-t-0:focus {
+    border-top-width: 0;
+  }
+
+  .md\:focus\:border-r-0:focus {
+    border-right-width: 0;
+  }
+
+  .md\:focus\:border-b-0:focus {
+    border-bottom-width: 0;
+  }
+
+  .md\:focus\:border-l-0:focus {
+    border-left-width: 0;
+  }
+
+  .md\:focus\:border-t-2:focus {
+    border-top-width: 2px;
+  }
+
+  .md\:focus\:border-r-2:focus {
+    border-right-width: 2px;
+  }
+
+  .md\:focus\:border-b-2:focus {
+    border-bottom-width: 2px;
+  }
+
+  .md\:focus\:border-l-2:focus {
+    border-left-width: 2px;
+  }
+
+  .md\:focus\:border-t-4:focus {
+    border-top-width: 4px;
+  }
+
+  .md\:focus\:border-r-4:focus {
+    border-right-width: 4px;
+  }
+
+  .md\:focus\:border-b-4:focus {
+    border-bottom-width: 4px;
+  }
+
+  .md\:focus\:border-l-4:focus {
+    border-left-width: 4px;
+  }
+
+  .md\:focus\:border-t-8:focus {
+    border-top-width: 8px;
+  }
+
+  .md\:focus\:border-r-8:focus {
+    border-right-width: 8px;
+  }
+
+  .md\:focus\:border-b-8:focus {
+    border-bottom-width: 8px;
+  }
+
+  .md\:focus\:border-l-8:focus {
+    border-left-width: 8px;
+  }
+
+  .md\:focus\:border-t:focus {
+    border-top-width: 1px;
+  }
+
+  .md\:focus\:border-r:focus {
+    border-right-width: 1px;
+  }
+
+  .md\:focus\:border-b:focus {
+    border-bottom-width: 1px;
+  }
+
+  .md\:focus\:border-l:focus {
+    border-left-width: 1px;
+  }
+
   .md\:box-border {
     box-sizing: border-box;
   }
@@ -112774,223 +109412,6 @@ video {
     left: 0;
   }
 
-  .md\:inset-1 {
-    top: 0.25rem;
-    right: 0.25rem;
-    bottom: 0.25rem;
-    left: 0.25rem;
-  }
-
-  .md\:inset-2 {
-    top: 0.5rem;
-    right: 0.5rem;
-    bottom: 0.5rem;
-    left: 0.5rem;
-  }
-
-  .md\:inset-3 {
-    top: 0.75rem;
-    right: 0.75rem;
-    bottom: 0.75rem;
-    left: 0.75rem;
-  }
-
-  .md\:inset-4 {
-    top: 1rem;
-    right: 1rem;
-    bottom: 1rem;
-    left: 1rem;
-  }
-
-  .md\:inset-5 {
-    top: 1.25rem;
-    right: 1.25rem;
-    bottom: 1.25rem;
-    left: 1.25rem;
-  }
-
-  .md\:inset-6 {
-    top: 1.5rem;
-    right: 1.5rem;
-    bottom: 1.5rem;
-    left: 1.5rem;
-  }
-
-  .md\:inset-7 {
-    top: 1.75rem;
-    right: 1.75rem;
-    bottom: 1.75rem;
-    left: 1.75rem;
-  }
-
-  .md\:inset-8 {
-    top: 2rem;
-    right: 2rem;
-    bottom: 2rem;
-    left: 2rem;
-  }
-
-  .md\:inset-9 {
-    top: 2.25rem;
-    right: 2.25rem;
-    bottom: 2.25rem;
-    left: 2.25rem;
-  }
-
-  .md\:inset-10 {
-    top: 2.5rem;
-    right: 2.5rem;
-    bottom: 2.5rem;
-    left: 2.5rem;
-  }
-
-  .md\:inset-11 {
-    top: 2.75rem;
-    right: 2.75rem;
-    bottom: 2.75rem;
-    left: 2.75rem;
-  }
-
-  .md\:inset-12 {
-    top: 3rem;
-    right: 3rem;
-    bottom: 3rem;
-    left: 3rem;
-  }
-
-  .md\:inset-13 {
-    top: 3.25rem;
-    right: 3.25rem;
-    bottom: 3.25rem;
-    left: 3.25rem;
-  }
-
-  .md\:inset-14 {
-    top: 3.5rem;
-    right: 3.5rem;
-    bottom: 3.5rem;
-    left: 3.5rem;
-  }
-
-  .md\:inset-15 {
-    top: 3.75rem;
-    right: 3.75rem;
-    bottom: 3.75rem;
-    left: 3.75rem;
-  }
-
-  .md\:inset-16 {
-    top: 4rem;
-    right: 4rem;
-    bottom: 4rem;
-    left: 4rem;
-  }
-
-  .md\:inset-20 {
-    top: 5rem;
-    right: 5rem;
-    bottom: 5rem;
-    left: 5rem;
-  }
-
-  .md\:inset-24 {
-    top: 6rem;
-    right: 6rem;
-    bottom: 6rem;
-    left: 6rem;
-  }
-
-  .md\:inset-28 {
-    top: 7rem;
-    right: 7rem;
-    bottom: 7rem;
-    left: 7rem;
-  }
-
-  .md\:inset-32 {
-    top: 8rem;
-    right: 8rem;
-    bottom: 8rem;
-    left: 8rem;
-  }
-
-  .md\:inset-36 {
-    top: 9rem;
-    right: 9rem;
-    bottom: 9rem;
-    left: 9rem;
-  }
-
-  .md\:inset-40 {
-    top: 10rem;
-    right: 10rem;
-    bottom: 10rem;
-    left: 10rem;
-  }
-
-  .md\:inset-44 {
-    top: 11rem;
-    right: 11rem;
-    bottom: 11rem;
-    left: 11rem;
-  }
-
-  .md\:inset-48 {
-    top: 12rem;
-    right: 12rem;
-    bottom: 12rem;
-    left: 12rem;
-  }
-
-  .md\:inset-52 {
-    top: 13rem;
-    right: 13rem;
-    bottom: 13rem;
-    left: 13rem;
-  }
-
-  .md\:inset-56 {
-    top: 14rem;
-    right: 14rem;
-    bottom: 14rem;
-    left: 14rem;
-  }
-
-  .md\:inset-60 {
-    top: 15rem;
-    right: 15rem;
-    bottom: 15rem;
-    left: 15rem;
-  }
-
-  .md\:inset-64 {
-    top: 16rem;
-    right: 16rem;
-    bottom: 16rem;
-    left: 16rem;
-  }
-
-  .md\:inset-72 {
-    top: 18rem;
-    right: 18rem;
-    bottom: 18rem;
-    left: 18rem;
-  }
-
-  .md\:inset-80 {
-    top: 20rem;
-    right: 20rem;
-    bottom: 20rem;
-    left: 20rem;
-  }
-
-  .md\:inset-96 {
-    top: 24rem;
-    right: 24rem;
-    bottom: 24rem;
-    left: 24rem;
-  }
-
   .md\:inset-auto {
     top: auto;
     right: auto;
@@ -112998,228 +109419,18 @@ video {
     left: auto;
   }
 
-  .md\:inset-px {
-    top: 1px;
-    right: 1px;
-    bottom: 1px;
-    left: 1px;
+  .md\:inset-inverse-right-10 {
+    top: -1rem;
+    right: -1rem;
+    bottom: -1rem;
+    left: -1rem;
   }
 
-  .md\:inset-0\.5 {
-    top: 0.125rem;
-    right: 0.125rem;
-    bottom: 0.125rem;
-    left: 0.125rem;
-  }
-
-  .md\:inset-1\.5 {
-    top: 0.375rem;
-    right: 0.375rem;
-    bottom: 0.375rem;
-    left: 0.375rem;
-  }
-
-  .md\:inset-2\.5 {
-    top: 0.625rem;
-    right: 0.625rem;
-    bottom: 0.625rem;
-    left: 0.625rem;
-  }
-
-  .md\:inset-3\.5 {
-    top: 0.875rem;
-    right: 0.875rem;
-    bottom: 0.875rem;
-    left: 0.875rem;
-  }
-
-  .md\:inset-1\/2 {
-    top: 50%;
-    right: 50%;
-    bottom: 50%;
-    left: 50%;
-  }
-
-  .md\:inset-1\/3 {
-    top: 33.333333%;
-    right: 33.333333%;
-    bottom: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .md\:inset-2\/3 {
-    top: 66.666667%;
-    right: 66.666667%;
-    bottom: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .md\:inset-1\/4 {
-    top: 25%;
-    right: 25%;
-    bottom: 25%;
-    left: 25%;
-  }
-
-  .md\:inset-2\/4 {
-    top: 50%;
-    right: 50%;
-    bottom: 50%;
-    left: 50%;
-  }
-
-  .md\:inset-3\/4 {
-    top: 75%;
-    right: 75%;
-    bottom: 75%;
-    left: 75%;
-  }
-
-  .md\:inset-1\/5 {
-    top: 20%;
-    right: 20%;
-    bottom: 20%;
-    left: 20%;
-  }
-
-  .md\:inset-2\/5 {
-    top: 40%;
-    right: 40%;
-    bottom: 40%;
-    left: 40%;
-  }
-
-  .md\:inset-3\/5 {
-    top: 60%;
-    right: 60%;
-    bottom: 60%;
-    left: 60%;
-  }
-
-  .md\:inset-4\/5 {
-    top: 80%;
-    right: 80%;
-    bottom: 80%;
-    left: 80%;
-  }
-
-  .md\:inset-1\/6 {
-    top: 16.666667%;
-    right: 16.666667%;
-    bottom: 16.666667%;
-    left: 16.666667%;
-  }
-
-  .md\:inset-2\/6 {
-    top: 33.333333%;
-    right: 33.333333%;
-    bottom: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .md\:inset-3\/6 {
-    top: 50%;
-    right: 50%;
-    bottom: 50%;
-    left: 50%;
-  }
-
-  .md\:inset-4\/6 {
-    top: 66.666667%;
-    right: 66.666667%;
-    bottom: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .md\:inset-5\/6 {
-    top: 83.333333%;
-    right: 83.333333%;
-    bottom: 83.333333%;
-    left: 83.333333%;
-  }
-
-  .md\:inset-1\/12 {
-    top: 8.333333%;
-    right: 8.333333%;
-    bottom: 8.333333%;
-    left: 8.333333%;
-  }
-
-  .md\:inset-2\/12 {
-    top: 16.666667%;
-    right: 16.666667%;
-    bottom: 16.666667%;
-    left: 16.666667%;
-  }
-
-  .md\:inset-3\/12 {
-    top: 25%;
-    right: 25%;
-    bottom: 25%;
-    left: 25%;
-  }
-
-  .md\:inset-4\/12 {
-    top: 33.333333%;
-    right: 33.333333%;
-    bottom: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .md\:inset-5\/12 {
-    top: 41.666667%;
-    right: 41.666667%;
-    bottom: 41.666667%;
-    left: 41.666667%;
-  }
-
-  .md\:inset-6\/12 {
-    top: 50%;
-    right: 50%;
-    bottom: 50%;
-    left: 50%;
-  }
-
-  .md\:inset-7\/12 {
-    top: 58.333333%;
-    right: 58.333333%;
-    bottom: 58.333333%;
-    left: 58.333333%;
-  }
-
-  .md\:inset-8\/12 {
-    top: 66.666667%;
-    right: 66.666667%;
-    bottom: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .md\:inset-9\/12 {
-    top: 75%;
-    right: 75%;
-    bottom: 75%;
-    left: 75%;
-  }
-
-  .md\:inset-10\/12 {
-    top: 83.333333%;
-    right: 83.333333%;
-    bottom: 83.333333%;
-    left: 83.333333%;
-  }
-
-  .md\:inset-11\/12 {
-    top: 91.666667%;
-    right: 91.666667%;
-    bottom: 91.666667%;
-    left: 91.666667%;
-  }
-
-  .md\:inset-full {
-    top: 100%;
-    right: 100%;
-    bottom: 100%;
-    left: 100%;
+  .md\:inset-inverse-right-30 {
+    top: -3rem;
+    right: -3rem;
+    bottom: -3rem;
+    left: -3rem;
   }
 
   .md\:inset-y-0 {
@@ -113232,316 +109443,6 @@ video {
     left: 0;
   }
 
-  .md\:inset-y-1 {
-    top: 0.25rem;
-    bottom: 0.25rem;
-  }
-
-  .md\:inset-x-1 {
-    right: 0.25rem;
-    left: 0.25rem;
-  }
-
-  .md\:inset-y-2 {
-    top: 0.5rem;
-    bottom: 0.5rem;
-  }
-
-  .md\:inset-x-2 {
-    right: 0.5rem;
-    left: 0.5rem;
-  }
-
-  .md\:inset-y-3 {
-    top: 0.75rem;
-    bottom: 0.75rem;
-  }
-
-  .md\:inset-x-3 {
-    right: 0.75rem;
-    left: 0.75rem;
-  }
-
-  .md\:inset-y-4 {
-    top: 1rem;
-    bottom: 1rem;
-  }
-
-  .md\:inset-x-4 {
-    right: 1rem;
-    left: 1rem;
-  }
-
-  .md\:inset-y-5 {
-    top: 1.25rem;
-    bottom: 1.25rem;
-  }
-
-  .md\:inset-x-5 {
-    right: 1.25rem;
-    left: 1.25rem;
-  }
-
-  .md\:inset-y-6 {
-    top: 1.5rem;
-    bottom: 1.5rem;
-  }
-
-  .md\:inset-x-6 {
-    right: 1.5rem;
-    left: 1.5rem;
-  }
-
-  .md\:inset-y-7 {
-    top: 1.75rem;
-    bottom: 1.75rem;
-  }
-
-  .md\:inset-x-7 {
-    right: 1.75rem;
-    left: 1.75rem;
-  }
-
-  .md\:inset-y-8 {
-    top: 2rem;
-    bottom: 2rem;
-  }
-
-  .md\:inset-x-8 {
-    right: 2rem;
-    left: 2rem;
-  }
-
-  .md\:inset-y-9 {
-    top: 2.25rem;
-    bottom: 2.25rem;
-  }
-
-  .md\:inset-x-9 {
-    right: 2.25rem;
-    left: 2.25rem;
-  }
-
-  .md\:inset-y-10 {
-    top: 2.5rem;
-    bottom: 2.5rem;
-  }
-
-  .md\:inset-x-10 {
-    right: 2.5rem;
-    left: 2.5rem;
-  }
-
-  .md\:inset-y-11 {
-    top: 2.75rem;
-    bottom: 2.75rem;
-  }
-
-  .md\:inset-x-11 {
-    right: 2.75rem;
-    left: 2.75rem;
-  }
-
-  .md\:inset-y-12 {
-    top: 3rem;
-    bottom: 3rem;
-  }
-
-  .md\:inset-x-12 {
-    right: 3rem;
-    left: 3rem;
-  }
-
-  .md\:inset-y-13 {
-    top: 3.25rem;
-    bottom: 3.25rem;
-  }
-
-  .md\:inset-x-13 {
-    right: 3.25rem;
-    left: 3.25rem;
-  }
-
-  .md\:inset-y-14 {
-    top: 3.5rem;
-    bottom: 3.5rem;
-  }
-
-  .md\:inset-x-14 {
-    right: 3.5rem;
-    left: 3.5rem;
-  }
-
-  .md\:inset-y-15 {
-    top: 3.75rem;
-    bottom: 3.75rem;
-  }
-
-  .md\:inset-x-15 {
-    right: 3.75rem;
-    left: 3.75rem;
-  }
-
-  .md\:inset-y-16 {
-    top: 4rem;
-    bottom: 4rem;
-  }
-
-  .md\:inset-x-16 {
-    right: 4rem;
-    left: 4rem;
-  }
-
-  .md\:inset-y-20 {
-    top: 5rem;
-    bottom: 5rem;
-  }
-
-  .md\:inset-x-20 {
-    right: 5rem;
-    left: 5rem;
-  }
-
-  .md\:inset-y-24 {
-    top: 6rem;
-    bottom: 6rem;
-  }
-
-  .md\:inset-x-24 {
-    right: 6rem;
-    left: 6rem;
-  }
-
-  .md\:inset-y-28 {
-    top: 7rem;
-    bottom: 7rem;
-  }
-
-  .md\:inset-x-28 {
-    right: 7rem;
-    left: 7rem;
-  }
-
-  .md\:inset-y-32 {
-    top: 8rem;
-    bottom: 8rem;
-  }
-
-  .md\:inset-x-32 {
-    right: 8rem;
-    left: 8rem;
-  }
-
-  .md\:inset-y-36 {
-    top: 9rem;
-    bottom: 9rem;
-  }
-
-  .md\:inset-x-36 {
-    right: 9rem;
-    left: 9rem;
-  }
-
-  .md\:inset-y-40 {
-    top: 10rem;
-    bottom: 10rem;
-  }
-
-  .md\:inset-x-40 {
-    right: 10rem;
-    left: 10rem;
-  }
-
-  .md\:inset-y-44 {
-    top: 11rem;
-    bottom: 11rem;
-  }
-
-  .md\:inset-x-44 {
-    right: 11rem;
-    left: 11rem;
-  }
-
-  .md\:inset-y-48 {
-    top: 12rem;
-    bottom: 12rem;
-  }
-
-  .md\:inset-x-48 {
-    right: 12rem;
-    left: 12rem;
-  }
-
-  .md\:inset-y-52 {
-    top: 13rem;
-    bottom: 13rem;
-  }
-
-  .md\:inset-x-52 {
-    right: 13rem;
-    left: 13rem;
-  }
-
-  .md\:inset-y-56 {
-    top: 14rem;
-    bottom: 14rem;
-  }
-
-  .md\:inset-x-56 {
-    right: 14rem;
-    left: 14rem;
-  }
-
-  .md\:inset-y-60 {
-    top: 15rem;
-    bottom: 15rem;
-  }
-
-  .md\:inset-x-60 {
-    right: 15rem;
-    left: 15rem;
-  }
-
-  .md\:inset-y-64 {
-    top: 16rem;
-    bottom: 16rem;
-  }
-
-  .md\:inset-x-64 {
-    right: 16rem;
-    left: 16rem;
-  }
-
-  .md\:inset-y-72 {
-    top: 18rem;
-    bottom: 18rem;
-  }
-
-  .md\:inset-x-72 {
-    right: 18rem;
-    left: 18rem;
-  }
-
-  .md\:inset-y-80 {
-    top: 20rem;
-    bottom: 20rem;
-  }
-
-  .md\:inset-x-80 {
-    right: 20rem;
-    left: 20rem;
-  }
-
-  .md\:inset-y-96 {
-    top: 24rem;
-    bottom: 24rem;
-  }
-
-  .md\:inset-x-96 {
-    right: 24rem;
-    left: 24rem;
-  }
-
   .md\:inset-y-auto {
     top: auto;
     bottom: auto;
@@ -113552,324 +109453,24 @@ video {
     left: auto;
   }
 
-  .md\:inset-y-px {
-    top: 1px;
-    bottom: 1px;
+  .md\:inset-y-inverse-right-10 {
+    top: -1rem;
+    bottom: -1rem;
   }
 
-  .md\:inset-x-px {
-    right: 1px;
-    left: 1px;
+  .md\:inset-x-inverse-right-10 {
+    right: -1rem;
+    left: -1rem;
   }
 
-  .md\:inset-y-0\.5 {
-    top: 0.125rem;
-    bottom: 0.125rem;
+  .md\:inset-y-inverse-right-30 {
+    top: -3rem;
+    bottom: -3rem;
   }
 
-  .md\:inset-x-0\.5 {
-    right: 0.125rem;
-    left: 0.125rem;
-  }
-
-  .md\:inset-y-1\.5 {
-    top: 0.375rem;
-    bottom: 0.375rem;
-  }
-
-  .md\:inset-x-1\.5 {
-    right: 0.375rem;
-    left: 0.375rem;
-  }
-
-  .md\:inset-y-2\.5 {
-    top: 0.625rem;
-    bottom: 0.625rem;
-  }
-
-  .md\:inset-x-2\.5 {
-    right: 0.625rem;
-    left: 0.625rem;
-  }
-
-  .md\:inset-y-3\.5 {
-    top: 0.875rem;
-    bottom: 0.875rem;
-  }
-
-  .md\:inset-x-3\.5 {
-    right: 0.875rem;
-    left: 0.875rem;
-  }
-
-  .md\:inset-y-1\/2 {
-    top: 50%;
-    bottom: 50%;
-  }
-
-  .md\:inset-x-1\/2 {
-    right: 50%;
-    left: 50%;
-  }
-
-  .md\:inset-y-1\/3 {
-    top: 33.333333%;
-    bottom: 33.333333%;
-  }
-
-  .md\:inset-x-1\/3 {
-    right: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .md\:inset-y-2\/3 {
-    top: 66.666667%;
-    bottom: 66.666667%;
-  }
-
-  .md\:inset-x-2\/3 {
-    right: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .md\:inset-y-1\/4 {
-    top: 25%;
-    bottom: 25%;
-  }
-
-  .md\:inset-x-1\/4 {
-    right: 25%;
-    left: 25%;
-  }
-
-  .md\:inset-y-2\/4 {
-    top: 50%;
-    bottom: 50%;
-  }
-
-  .md\:inset-x-2\/4 {
-    right: 50%;
-    left: 50%;
-  }
-
-  .md\:inset-y-3\/4 {
-    top: 75%;
-    bottom: 75%;
-  }
-
-  .md\:inset-x-3\/4 {
-    right: 75%;
-    left: 75%;
-  }
-
-  .md\:inset-y-1\/5 {
-    top: 20%;
-    bottom: 20%;
-  }
-
-  .md\:inset-x-1\/5 {
-    right: 20%;
-    left: 20%;
-  }
-
-  .md\:inset-y-2\/5 {
-    top: 40%;
-    bottom: 40%;
-  }
-
-  .md\:inset-x-2\/5 {
-    right: 40%;
-    left: 40%;
-  }
-
-  .md\:inset-y-3\/5 {
-    top: 60%;
-    bottom: 60%;
-  }
-
-  .md\:inset-x-3\/5 {
-    right: 60%;
-    left: 60%;
-  }
-
-  .md\:inset-y-4\/5 {
-    top: 80%;
-    bottom: 80%;
-  }
-
-  .md\:inset-x-4\/5 {
-    right: 80%;
-    left: 80%;
-  }
-
-  .md\:inset-y-1\/6 {
-    top: 16.666667%;
-    bottom: 16.666667%;
-  }
-
-  .md\:inset-x-1\/6 {
-    right: 16.666667%;
-    left: 16.666667%;
-  }
-
-  .md\:inset-y-2\/6 {
-    top: 33.333333%;
-    bottom: 33.333333%;
-  }
-
-  .md\:inset-x-2\/6 {
-    right: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .md\:inset-y-3\/6 {
-    top: 50%;
-    bottom: 50%;
-  }
-
-  .md\:inset-x-3\/6 {
-    right: 50%;
-    left: 50%;
-  }
-
-  .md\:inset-y-4\/6 {
-    top: 66.666667%;
-    bottom: 66.666667%;
-  }
-
-  .md\:inset-x-4\/6 {
-    right: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .md\:inset-y-5\/6 {
-    top: 83.333333%;
-    bottom: 83.333333%;
-  }
-
-  .md\:inset-x-5\/6 {
-    right: 83.333333%;
-    left: 83.333333%;
-  }
-
-  .md\:inset-y-1\/12 {
-    top: 8.333333%;
-    bottom: 8.333333%;
-  }
-
-  .md\:inset-x-1\/12 {
-    right: 8.333333%;
-    left: 8.333333%;
-  }
-
-  .md\:inset-y-2\/12 {
-    top: 16.666667%;
-    bottom: 16.666667%;
-  }
-
-  .md\:inset-x-2\/12 {
-    right: 16.666667%;
-    left: 16.666667%;
-  }
-
-  .md\:inset-y-3\/12 {
-    top: 25%;
-    bottom: 25%;
-  }
-
-  .md\:inset-x-3\/12 {
-    right: 25%;
-    left: 25%;
-  }
-
-  .md\:inset-y-4\/12 {
-    top: 33.333333%;
-    bottom: 33.333333%;
-  }
-
-  .md\:inset-x-4\/12 {
-    right: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .md\:inset-y-5\/12 {
-    top: 41.666667%;
-    bottom: 41.666667%;
-  }
-
-  .md\:inset-x-5\/12 {
-    right: 41.666667%;
-    left: 41.666667%;
-  }
-
-  .md\:inset-y-6\/12 {
-    top: 50%;
-    bottom: 50%;
-  }
-
-  .md\:inset-x-6\/12 {
-    right: 50%;
-    left: 50%;
-  }
-
-  .md\:inset-y-7\/12 {
-    top: 58.333333%;
-    bottom: 58.333333%;
-  }
-
-  .md\:inset-x-7\/12 {
-    right: 58.333333%;
-    left: 58.333333%;
-  }
-
-  .md\:inset-y-8\/12 {
-    top: 66.666667%;
-    bottom: 66.666667%;
-  }
-
-  .md\:inset-x-8\/12 {
-    right: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .md\:inset-y-9\/12 {
-    top: 75%;
-    bottom: 75%;
-  }
-
-  .md\:inset-x-9\/12 {
-    right: 75%;
-    left: 75%;
-  }
-
-  .md\:inset-y-10\/12 {
-    top: 83.333333%;
-    bottom: 83.333333%;
-  }
-
-  .md\:inset-x-10\/12 {
-    right: 83.333333%;
-    left: 83.333333%;
-  }
-
-  .md\:inset-y-11\/12 {
-    top: 91.666667%;
-    bottom: 91.666667%;
-  }
-
-  .md\:inset-x-11\/12 {
-    right: 91.666667%;
-    left: 91.666667%;
-  }
-
-  .md\:inset-y-full {
-    top: 100%;
-    bottom: 100%;
-  }
-
-  .md\:inset-x-full {
-    right: 100%;
-    left: 100%;
+  .md\:inset-x-inverse-right-30 {
+    right: -3rem;
+    left: -3rem;
   }
 
   .md\:top-0 {
@@ -113888,502 +109489,6 @@ video {
     left: 0;
   }
 
-  .md\:top-1 {
-    top: 0.25rem;
-  }
-
-  .md\:right-1 {
-    right: 0.25rem;
-  }
-
-  .md\:bottom-1 {
-    bottom: 0.25rem;
-  }
-
-  .md\:left-1 {
-    left: 0.25rem;
-  }
-
-  .md\:top-2 {
-    top: 0.5rem;
-  }
-
-  .md\:right-2 {
-    right: 0.5rem;
-  }
-
-  .md\:bottom-2 {
-    bottom: 0.5rem;
-  }
-
-  .md\:left-2 {
-    left: 0.5rem;
-  }
-
-  .md\:top-3 {
-    top: 0.75rem;
-  }
-
-  .md\:right-3 {
-    right: 0.75rem;
-  }
-
-  .md\:bottom-3 {
-    bottom: 0.75rem;
-  }
-
-  .md\:left-3 {
-    left: 0.75rem;
-  }
-
-  .md\:top-4 {
-    top: 1rem;
-  }
-
-  .md\:right-4 {
-    right: 1rem;
-  }
-
-  .md\:bottom-4 {
-    bottom: 1rem;
-  }
-
-  .md\:left-4 {
-    left: 1rem;
-  }
-
-  .md\:top-5 {
-    top: 1.25rem;
-  }
-
-  .md\:right-5 {
-    right: 1.25rem;
-  }
-
-  .md\:bottom-5 {
-    bottom: 1.25rem;
-  }
-
-  .md\:left-5 {
-    left: 1.25rem;
-  }
-
-  .md\:top-6 {
-    top: 1.5rem;
-  }
-
-  .md\:right-6 {
-    right: 1.5rem;
-  }
-
-  .md\:bottom-6 {
-    bottom: 1.5rem;
-  }
-
-  .md\:left-6 {
-    left: 1.5rem;
-  }
-
-  .md\:top-7 {
-    top: 1.75rem;
-  }
-
-  .md\:right-7 {
-    right: 1.75rem;
-  }
-
-  .md\:bottom-7 {
-    bottom: 1.75rem;
-  }
-
-  .md\:left-7 {
-    left: 1.75rem;
-  }
-
-  .md\:top-8 {
-    top: 2rem;
-  }
-
-  .md\:right-8 {
-    right: 2rem;
-  }
-
-  .md\:bottom-8 {
-    bottom: 2rem;
-  }
-
-  .md\:left-8 {
-    left: 2rem;
-  }
-
-  .md\:top-9 {
-    top: 2.25rem;
-  }
-
-  .md\:right-9 {
-    right: 2.25rem;
-  }
-
-  .md\:bottom-9 {
-    bottom: 2.25rem;
-  }
-
-  .md\:left-9 {
-    left: 2.25rem;
-  }
-
-  .md\:top-10 {
-    top: 2.5rem;
-  }
-
-  .md\:right-10 {
-    right: 2.5rem;
-  }
-
-  .md\:bottom-10 {
-    bottom: 2.5rem;
-  }
-
-  .md\:left-10 {
-    left: 2.5rem;
-  }
-
-  .md\:top-11 {
-    top: 2.75rem;
-  }
-
-  .md\:right-11 {
-    right: 2.75rem;
-  }
-
-  .md\:bottom-11 {
-    bottom: 2.75rem;
-  }
-
-  .md\:left-11 {
-    left: 2.75rem;
-  }
-
-  .md\:top-12 {
-    top: 3rem;
-  }
-
-  .md\:right-12 {
-    right: 3rem;
-  }
-
-  .md\:bottom-12 {
-    bottom: 3rem;
-  }
-
-  .md\:left-12 {
-    left: 3rem;
-  }
-
-  .md\:top-13 {
-    top: 3.25rem;
-  }
-
-  .md\:right-13 {
-    right: 3.25rem;
-  }
-
-  .md\:bottom-13 {
-    bottom: 3.25rem;
-  }
-
-  .md\:left-13 {
-    left: 3.25rem;
-  }
-
-  .md\:top-14 {
-    top: 3.5rem;
-  }
-
-  .md\:right-14 {
-    right: 3.5rem;
-  }
-
-  .md\:bottom-14 {
-    bottom: 3.5rem;
-  }
-
-  .md\:left-14 {
-    left: 3.5rem;
-  }
-
-  .md\:top-15 {
-    top: 3.75rem;
-  }
-
-  .md\:right-15 {
-    right: 3.75rem;
-  }
-
-  .md\:bottom-15 {
-    bottom: 3.75rem;
-  }
-
-  .md\:left-15 {
-    left: 3.75rem;
-  }
-
-  .md\:top-16 {
-    top: 4rem;
-  }
-
-  .md\:right-16 {
-    right: 4rem;
-  }
-
-  .md\:bottom-16 {
-    bottom: 4rem;
-  }
-
-  .md\:left-16 {
-    left: 4rem;
-  }
-
-  .md\:top-20 {
-    top: 5rem;
-  }
-
-  .md\:right-20 {
-    right: 5rem;
-  }
-
-  .md\:bottom-20 {
-    bottom: 5rem;
-  }
-
-  .md\:left-20 {
-    left: 5rem;
-  }
-
-  .md\:top-24 {
-    top: 6rem;
-  }
-
-  .md\:right-24 {
-    right: 6rem;
-  }
-
-  .md\:bottom-24 {
-    bottom: 6rem;
-  }
-
-  .md\:left-24 {
-    left: 6rem;
-  }
-
-  .md\:top-28 {
-    top: 7rem;
-  }
-
-  .md\:right-28 {
-    right: 7rem;
-  }
-
-  .md\:bottom-28 {
-    bottom: 7rem;
-  }
-
-  .md\:left-28 {
-    left: 7rem;
-  }
-
-  .md\:top-32 {
-    top: 8rem;
-  }
-
-  .md\:right-32 {
-    right: 8rem;
-  }
-
-  .md\:bottom-32 {
-    bottom: 8rem;
-  }
-
-  .md\:left-32 {
-    left: 8rem;
-  }
-
-  .md\:top-36 {
-    top: 9rem;
-  }
-
-  .md\:right-36 {
-    right: 9rem;
-  }
-
-  .md\:bottom-36 {
-    bottom: 9rem;
-  }
-
-  .md\:left-36 {
-    left: 9rem;
-  }
-
-  .md\:top-40 {
-    top: 10rem;
-  }
-
-  .md\:right-40 {
-    right: 10rem;
-  }
-
-  .md\:bottom-40 {
-    bottom: 10rem;
-  }
-
-  .md\:left-40 {
-    left: 10rem;
-  }
-
-  .md\:top-44 {
-    top: 11rem;
-  }
-
-  .md\:right-44 {
-    right: 11rem;
-  }
-
-  .md\:bottom-44 {
-    bottom: 11rem;
-  }
-
-  .md\:left-44 {
-    left: 11rem;
-  }
-
-  .md\:top-48 {
-    top: 12rem;
-  }
-
-  .md\:right-48 {
-    right: 12rem;
-  }
-
-  .md\:bottom-48 {
-    bottom: 12rem;
-  }
-
-  .md\:left-48 {
-    left: 12rem;
-  }
-
-  .md\:top-52 {
-    top: 13rem;
-  }
-
-  .md\:right-52 {
-    right: 13rem;
-  }
-
-  .md\:bottom-52 {
-    bottom: 13rem;
-  }
-
-  .md\:left-52 {
-    left: 13rem;
-  }
-
-  .md\:top-56 {
-    top: 14rem;
-  }
-
-  .md\:right-56 {
-    right: 14rem;
-  }
-
-  .md\:bottom-56 {
-    bottom: 14rem;
-  }
-
-  .md\:left-56 {
-    left: 14rem;
-  }
-
-  .md\:top-60 {
-    top: 15rem;
-  }
-
-  .md\:right-60 {
-    right: 15rem;
-  }
-
-  .md\:bottom-60 {
-    bottom: 15rem;
-  }
-
-  .md\:left-60 {
-    left: 15rem;
-  }
-
-  .md\:top-64 {
-    top: 16rem;
-  }
-
-  .md\:right-64 {
-    right: 16rem;
-  }
-
-  .md\:bottom-64 {
-    bottom: 16rem;
-  }
-
-  .md\:left-64 {
-    left: 16rem;
-  }
-
-  .md\:top-72 {
-    top: 18rem;
-  }
-
-  .md\:right-72 {
-    right: 18rem;
-  }
-
-  .md\:bottom-72 {
-    bottom: 18rem;
-  }
-
-  .md\:left-72 {
-    left: 18rem;
-  }
-
-  .md\:top-80 {
-    top: 20rem;
-  }
-
-  .md\:right-80 {
-    right: 20rem;
-  }
-
-  .md\:bottom-80 {
-    bottom: 20rem;
-  }
-
-  .md\:left-80 {
-    left: 20rem;
-  }
-
-  .md\:top-96 {
-    top: 24rem;
-  }
-
-  .md\:right-96 {
-    right: 24rem;
-  }
-
-  .md\:bottom-96 {
-    bottom: 24rem;
-  }
-
-  .md\:left-96 {
-    left: 24rem;
-  }
-
   .md\:top-auto {
     top: auto;
   }
@@ -114400,516 +109505,36 @@ video {
     left: auto;
   }
 
-  .md\:top-px {
-    top: 1px;
+  .md\:top-inverse-right-10 {
+    top: -1rem;
   }
 
-  .md\:right-px {
-    right: 1px;
+  .md\:right-inverse-right-10 {
+    right: -1rem;
   }
 
-  .md\:bottom-px {
-    bottom: 1px;
+  .md\:bottom-inverse-right-10 {
+    bottom: -1rem;
   }
 
-  .md\:left-px {
-    left: 1px;
+  .md\:left-inverse-right-10 {
+    left: -1rem;
   }
 
-  .md\:top-0\.5 {
-    top: 0.125rem;
+  .md\:top-inverse-right-30 {
+    top: -3rem;
   }
 
-  .md\:right-0\.5 {
-    right: 0.125rem;
+  .md\:right-inverse-right-30 {
+    right: -3rem;
   }
 
-  .md\:bottom-0\.5 {
-    bottom: 0.125rem;
+  .md\:bottom-inverse-right-30 {
+    bottom: -3rem;
   }
 
-  .md\:left-0\.5 {
-    left: 0.125rem;
-  }
-
-  .md\:top-1\.5 {
-    top: 0.375rem;
-  }
-
-  .md\:right-1\.5 {
-    right: 0.375rem;
-  }
-
-  .md\:bottom-1\.5 {
-    bottom: 0.375rem;
-  }
-
-  .md\:left-1\.5 {
-    left: 0.375rem;
-  }
-
-  .md\:top-2\.5 {
-    top: 0.625rem;
-  }
-
-  .md\:right-2\.5 {
-    right: 0.625rem;
-  }
-
-  .md\:bottom-2\.5 {
-    bottom: 0.625rem;
-  }
-
-  .md\:left-2\.5 {
-    left: 0.625rem;
-  }
-
-  .md\:top-3\.5 {
-    top: 0.875rem;
-  }
-
-  .md\:right-3\.5 {
-    right: 0.875rem;
-  }
-
-  .md\:bottom-3\.5 {
-    bottom: 0.875rem;
-  }
-
-  .md\:left-3\.5 {
-    left: 0.875rem;
-  }
-
-  .md\:top-1\/2 {
-    top: 50%;
-  }
-
-  .md\:right-1\/2 {
-    right: 50%;
-  }
-
-  .md\:bottom-1\/2 {
-    bottom: 50%;
-  }
-
-  .md\:left-1\/2 {
-    left: 50%;
-  }
-
-  .md\:top-1\/3 {
-    top: 33.333333%;
-  }
-
-  .md\:right-1\/3 {
-    right: 33.333333%;
-  }
-
-  .md\:bottom-1\/3 {
-    bottom: 33.333333%;
-  }
-
-  .md\:left-1\/3 {
-    left: 33.333333%;
-  }
-
-  .md\:top-2\/3 {
-    top: 66.666667%;
-  }
-
-  .md\:right-2\/3 {
-    right: 66.666667%;
-  }
-
-  .md\:bottom-2\/3 {
-    bottom: 66.666667%;
-  }
-
-  .md\:left-2\/3 {
-    left: 66.666667%;
-  }
-
-  .md\:top-1\/4 {
-    top: 25%;
-  }
-
-  .md\:right-1\/4 {
-    right: 25%;
-  }
-
-  .md\:bottom-1\/4 {
-    bottom: 25%;
-  }
-
-  .md\:left-1\/4 {
-    left: 25%;
-  }
-
-  .md\:top-2\/4 {
-    top: 50%;
-  }
-
-  .md\:right-2\/4 {
-    right: 50%;
-  }
-
-  .md\:bottom-2\/4 {
-    bottom: 50%;
-  }
-
-  .md\:left-2\/4 {
-    left: 50%;
-  }
-
-  .md\:top-3\/4 {
-    top: 75%;
-  }
-
-  .md\:right-3\/4 {
-    right: 75%;
-  }
-
-  .md\:bottom-3\/4 {
-    bottom: 75%;
-  }
-
-  .md\:left-3\/4 {
-    left: 75%;
-  }
-
-  .md\:top-1\/5 {
-    top: 20%;
-  }
-
-  .md\:right-1\/5 {
-    right: 20%;
-  }
-
-  .md\:bottom-1\/5 {
-    bottom: 20%;
-  }
-
-  .md\:left-1\/5 {
-    left: 20%;
-  }
-
-  .md\:top-2\/5 {
-    top: 40%;
-  }
-
-  .md\:right-2\/5 {
-    right: 40%;
-  }
-
-  .md\:bottom-2\/5 {
-    bottom: 40%;
-  }
-
-  .md\:left-2\/5 {
-    left: 40%;
-  }
-
-  .md\:top-3\/5 {
-    top: 60%;
-  }
-
-  .md\:right-3\/5 {
-    right: 60%;
-  }
-
-  .md\:bottom-3\/5 {
-    bottom: 60%;
-  }
-
-  .md\:left-3\/5 {
-    left: 60%;
-  }
-
-  .md\:top-4\/5 {
-    top: 80%;
-  }
-
-  .md\:right-4\/5 {
-    right: 80%;
-  }
-
-  .md\:bottom-4\/5 {
-    bottom: 80%;
-  }
-
-  .md\:left-4\/5 {
-    left: 80%;
-  }
-
-  .md\:top-1\/6 {
-    top: 16.666667%;
-  }
-
-  .md\:right-1\/6 {
-    right: 16.666667%;
-  }
-
-  .md\:bottom-1\/6 {
-    bottom: 16.666667%;
-  }
-
-  .md\:left-1\/6 {
-    left: 16.666667%;
-  }
-
-  .md\:top-2\/6 {
-    top: 33.333333%;
-  }
-
-  .md\:right-2\/6 {
-    right: 33.333333%;
-  }
-
-  .md\:bottom-2\/6 {
-    bottom: 33.333333%;
-  }
-
-  .md\:left-2\/6 {
-    left: 33.333333%;
-  }
-
-  .md\:top-3\/6 {
-    top: 50%;
-  }
-
-  .md\:right-3\/6 {
-    right: 50%;
-  }
-
-  .md\:bottom-3\/6 {
-    bottom: 50%;
-  }
-
-  .md\:left-3\/6 {
-    left: 50%;
-  }
-
-  .md\:top-4\/6 {
-    top: 66.666667%;
-  }
-
-  .md\:right-4\/6 {
-    right: 66.666667%;
-  }
-
-  .md\:bottom-4\/6 {
-    bottom: 66.666667%;
-  }
-
-  .md\:left-4\/6 {
-    left: 66.666667%;
-  }
-
-  .md\:top-5\/6 {
-    top: 83.333333%;
-  }
-
-  .md\:right-5\/6 {
-    right: 83.333333%;
-  }
-
-  .md\:bottom-5\/6 {
-    bottom: 83.333333%;
-  }
-
-  .md\:left-5\/6 {
-    left: 83.333333%;
-  }
-
-  .md\:top-1\/12 {
-    top: 8.333333%;
-  }
-
-  .md\:right-1\/12 {
-    right: 8.333333%;
-  }
-
-  .md\:bottom-1\/12 {
-    bottom: 8.333333%;
-  }
-
-  .md\:left-1\/12 {
-    left: 8.333333%;
-  }
-
-  .md\:top-2\/12 {
-    top: 16.666667%;
-  }
-
-  .md\:right-2\/12 {
-    right: 16.666667%;
-  }
-
-  .md\:bottom-2\/12 {
-    bottom: 16.666667%;
-  }
-
-  .md\:left-2\/12 {
-    left: 16.666667%;
-  }
-
-  .md\:top-3\/12 {
-    top: 25%;
-  }
-
-  .md\:right-3\/12 {
-    right: 25%;
-  }
-
-  .md\:bottom-3\/12 {
-    bottom: 25%;
-  }
-
-  .md\:left-3\/12 {
-    left: 25%;
-  }
-
-  .md\:top-4\/12 {
-    top: 33.333333%;
-  }
-
-  .md\:right-4\/12 {
-    right: 33.333333%;
-  }
-
-  .md\:bottom-4\/12 {
-    bottom: 33.333333%;
-  }
-
-  .md\:left-4\/12 {
-    left: 33.333333%;
-  }
-
-  .md\:top-5\/12 {
-    top: 41.666667%;
-  }
-
-  .md\:right-5\/12 {
-    right: 41.666667%;
-  }
-
-  .md\:bottom-5\/12 {
-    bottom: 41.666667%;
-  }
-
-  .md\:left-5\/12 {
-    left: 41.666667%;
-  }
-
-  .md\:top-6\/12 {
-    top: 50%;
-  }
-
-  .md\:right-6\/12 {
-    right: 50%;
-  }
-
-  .md\:bottom-6\/12 {
-    bottom: 50%;
-  }
-
-  .md\:left-6\/12 {
-    left: 50%;
-  }
-
-  .md\:top-7\/12 {
-    top: 58.333333%;
-  }
-
-  .md\:right-7\/12 {
-    right: 58.333333%;
-  }
-
-  .md\:bottom-7\/12 {
-    bottom: 58.333333%;
-  }
-
-  .md\:left-7\/12 {
-    left: 58.333333%;
-  }
-
-  .md\:top-8\/12 {
-    top: 66.666667%;
-  }
-
-  .md\:right-8\/12 {
-    right: 66.666667%;
-  }
-
-  .md\:bottom-8\/12 {
-    bottom: 66.666667%;
-  }
-
-  .md\:left-8\/12 {
-    left: 66.666667%;
-  }
-
-  .md\:top-9\/12 {
-    top: 75%;
-  }
-
-  .md\:right-9\/12 {
-    right: 75%;
-  }
-
-  .md\:bottom-9\/12 {
-    bottom: 75%;
-  }
-
-  .md\:left-9\/12 {
-    left: 75%;
-  }
-
-  .md\:top-10\/12 {
-    top: 83.333333%;
-  }
-
-  .md\:right-10\/12 {
-    right: 83.333333%;
-  }
-
-  .md\:bottom-10\/12 {
-    bottom: 83.333333%;
-  }
-
-  .md\:left-10\/12 {
-    left: 83.333333%;
-  }
-
-  .md\:top-11\/12 {
-    top: 91.666667%;
-  }
-
-  .md\:right-11\/12 {
-    right: 91.666667%;
-  }
-
-  .md\:bottom-11\/12 {
-    bottom: 91.666667%;
-  }
-
-  .md\:left-11\/12 {
-    left: 91.666667%;
-  }
-
-  .md\:top-full {
-    top: 100%;
-  }
-
-  .md\:right-full {
-    right: 100%;
-  }
-
-  .md\:bottom-full {
-    bottom: 100%;
-  }
-
-  .md\:left-full {
-    left: 100%;
+  .md\:left-inverse-right-30 {
+    left: -3rem;
   }
 
   .md\:resize-none {
@@ -143113,6 +137738,206 @@ video {
     border-left-width: 1px;
   }
 
+  .lg\:hover\:border-0:hover {
+    border-width: 0;
+  }
+
+  .lg\:hover\:border-2:hover {
+    border-width: 2px;
+  }
+
+  .lg\:hover\:border-4:hover {
+    border-width: 4px;
+  }
+
+  .lg\:hover\:border-8:hover {
+    border-width: 8px;
+  }
+
+  .lg\:hover\:border:hover {
+    border-width: 1px;
+  }
+
+  .lg\:hover\:border-t-0:hover {
+    border-top-width: 0;
+  }
+
+  .lg\:hover\:border-r-0:hover {
+    border-right-width: 0;
+  }
+
+  .lg\:hover\:border-b-0:hover {
+    border-bottom-width: 0;
+  }
+
+  .lg\:hover\:border-l-0:hover {
+    border-left-width: 0;
+  }
+
+  .lg\:hover\:border-t-2:hover {
+    border-top-width: 2px;
+  }
+
+  .lg\:hover\:border-r-2:hover {
+    border-right-width: 2px;
+  }
+
+  .lg\:hover\:border-b-2:hover {
+    border-bottom-width: 2px;
+  }
+
+  .lg\:hover\:border-l-2:hover {
+    border-left-width: 2px;
+  }
+
+  .lg\:hover\:border-t-4:hover {
+    border-top-width: 4px;
+  }
+
+  .lg\:hover\:border-r-4:hover {
+    border-right-width: 4px;
+  }
+
+  .lg\:hover\:border-b-4:hover {
+    border-bottom-width: 4px;
+  }
+
+  .lg\:hover\:border-l-4:hover {
+    border-left-width: 4px;
+  }
+
+  .lg\:hover\:border-t-8:hover {
+    border-top-width: 8px;
+  }
+
+  .lg\:hover\:border-r-8:hover {
+    border-right-width: 8px;
+  }
+
+  .lg\:hover\:border-b-8:hover {
+    border-bottom-width: 8px;
+  }
+
+  .lg\:hover\:border-l-8:hover {
+    border-left-width: 8px;
+  }
+
+  .lg\:hover\:border-t:hover {
+    border-top-width: 1px;
+  }
+
+  .lg\:hover\:border-r:hover {
+    border-right-width: 1px;
+  }
+
+  .lg\:hover\:border-b:hover {
+    border-bottom-width: 1px;
+  }
+
+  .lg\:hover\:border-l:hover {
+    border-left-width: 1px;
+  }
+
+  .lg\:focus\:border-0:focus {
+    border-width: 0;
+  }
+
+  .lg\:focus\:border-2:focus {
+    border-width: 2px;
+  }
+
+  .lg\:focus\:border-4:focus {
+    border-width: 4px;
+  }
+
+  .lg\:focus\:border-8:focus {
+    border-width: 8px;
+  }
+
+  .lg\:focus\:border:focus {
+    border-width: 1px;
+  }
+
+  .lg\:focus\:border-t-0:focus {
+    border-top-width: 0;
+  }
+
+  .lg\:focus\:border-r-0:focus {
+    border-right-width: 0;
+  }
+
+  .lg\:focus\:border-b-0:focus {
+    border-bottom-width: 0;
+  }
+
+  .lg\:focus\:border-l-0:focus {
+    border-left-width: 0;
+  }
+
+  .lg\:focus\:border-t-2:focus {
+    border-top-width: 2px;
+  }
+
+  .lg\:focus\:border-r-2:focus {
+    border-right-width: 2px;
+  }
+
+  .lg\:focus\:border-b-2:focus {
+    border-bottom-width: 2px;
+  }
+
+  .lg\:focus\:border-l-2:focus {
+    border-left-width: 2px;
+  }
+
+  .lg\:focus\:border-t-4:focus {
+    border-top-width: 4px;
+  }
+
+  .lg\:focus\:border-r-4:focus {
+    border-right-width: 4px;
+  }
+
+  .lg\:focus\:border-b-4:focus {
+    border-bottom-width: 4px;
+  }
+
+  .lg\:focus\:border-l-4:focus {
+    border-left-width: 4px;
+  }
+
+  .lg\:focus\:border-t-8:focus {
+    border-top-width: 8px;
+  }
+
+  .lg\:focus\:border-r-8:focus {
+    border-right-width: 8px;
+  }
+
+  .lg\:focus\:border-b-8:focus {
+    border-bottom-width: 8px;
+  }
+
+  .lg\:focus\:border-l-8:focus {
+    border-left-width: 8px;
+  }
+
+  .lg\:focus\:border-t:focus {
+    border-top-width: 1px;
+  }
+
+  .lg\:focus\:border-r:focus {
+    border-right-width: 1px;
+  }
+
+  .lg\:focus\:border-b:focus {
+    border-bottom-width: 1px;
+  }
+
+  .lg\:focus\:border-l:focus {
+    border-left-width: 1px;
+  }
+
   .lg\:box-border {
     box-sizing: border-box;
   }
@@ -154700,223 +149525,6 @@ video {
     left: 0;
   }
 
-  .lg\:inset-1 {
-    top: 0.25rem;
-    right: 0.25rem;
-    bottom: 0.25rem;
-    left: 0.25rem;
-  }
-
-  .lg\:inset-2 {
-    top: 0.5rem;
-    right: 0.5rem;
-    bottom: 0.5rem;
-    left: 0.5rem;
-  }
-
-  .lg\:inset-3 {
-    top: 0.75rem;
-    right: 0.75rem;
-    bottom: 0.75rem;
-    left: 0.75rem;
-  }
-
-  .lg\:inset-4 {
-    top: 1rem;
-    right: 1rem;
-    bottom: 1rem;
-    left: 1rem;
-  }
-
-  .lg\:inset-5 {
-    top: 1.25rem;
-    right: 1.25rem;
-    bottom: 1.25rem;
-    left: 1.25rem;
-  }
-
-  .lg\:inset-6 {
-    top: 1.5rem;
-    right: 1.5rem;
-    bottom: 1.5rem;
-    left: 1.5rem;
-  }
-
-  .lg\:inset-7 {
-    top: 1.75rem;
-    right: 1.75rem;
-    bottom: 1.75rem;
-    left: 1.75rem;
-  }
-
-  .lg\:inset-8 {
-    top: 2rem;
-    right: 2rem;
-    bottom: 2rem;
-    left: 2rem;
-  }
-
-  .lg\:inset-9 {
-    top: 2.25rem;
-    right: 2.25rem;
-    bottom: 2.25rem;
-    left: 2.25rem;
-  }
-
-  .lg\:inset-10 {
-    top: 2.5rem;
-    right: 2.5rem;
-    bottom: 2.5rem;
-    left: 2.5rem;
-  }
-
-  .lg\:inset-11 {
-    top: 2.75rem;
-    right: 2.75rem;
-    bottom: 2.75rem;
-    left: 2.75rem;
-  }
-
-  .lg\:inset-12 {
-    top: 3rem;
-    right: 3rem;
-    bottom: 3rem;
-    left: 3rem;
-  }
-
-  .lg\:inset-13 {
-    top: 3.25rem;
-    right: 3.25rem;
-    bottom: 3.25rem;
-    left: 3.25rem;
-  }
-
-  .lg\:inset-14 {
-    top: 3.5rem;
-    right: 3.5rem;
-    bottom: 3.5rem;
-    left: 3.5rem;
-  }
-
-  .lg\:inset-15 {
-    top: 3.75rem;
-    right: 3.75rem;
-    bottom: 3.75rem;
-    left: 3.75rem;
-  }
-
-  .lg\:inset-16 {
-    top: 4rem;
-    right: 4rem;
-    bottom: 4rem;
-    left: 4rem;
-  }
-
-  .lg\:inset-20 {
-    top: 5rem;
-    right: 5rem;
-    bottom: 5rem;
-    left: 5rem;
-  }
-
-  .lg\:inset-24 {
-    top: 6rem;
-    right: 6rem;
-    bottom: 6rem;
-    left: 6rem;
-  }
-
-  .lg\:inset-28 {
-    top: 7rem;
-    right: 7rem;
-    bottom: 7rem;
-    left: 7rem;
-  }
-
-  .lg\:inset-32 {
-    top: 8rem;
-    right: 8rem;
-    bottom: 8rem;
-    left: 8rem;
-  }
-
-  .lg\:inset-36 {
-    top: 9rem;
-    right: 9rem;
-    bottom: 9rem;
-    left: 9rem;
-  }
-
-  .lg\:inset-40 {
-    top: 10rem;
-    right: 10rem;
-    bottom: 10rem;
-    left: 10rem;
-  }
-
-  .lg\:inset-44 {
-    top: 11rem;
-    right: 11rem;
-    bottom: 11rem;
-    left: 11rem;
-  }
-
-  .lg\:inset-48 {
-    top: 12rem;
-    right: 12rem;
-    bottom: 12rem;
-    left: 12rem;
-  }
-
-  .lg\:inset-52 {
-    top: 13rem;
-    right: 13rem;
-    bottom: 13rem;
-    left: 13rem;
-  }
-
-  .lg\:inset-56 {
-    top: 14rem;
-    right: 14rem;
-    bottom: 14rem;
-    left: 14rem;
-  }
-
-  .lg\:inset-60 {
-    top: 15rem;
-    right: 15rem;
-    bottom: 15rem;
-    left: 15rem;
-  }
-
-  .lg\:inset-64 {
-    top: 16rem;
-    right: 16rem;
-    bottom: 16rem;
-    left: 16rem;
-  }
-
-  .lg\:inset-72 {
-    top: 18rem;
-    right: 18rem;
-    bottom: 18rem;
-    left: 18rem;
-  }
-
-  .lg\:inset-80 {
-    top: 20rem;
-    right: 20rem;
-    bottom: 20rem;
-    left: 20rem;
-  }
-
-  .lg\:inset-96 {
-    top: 24rem;
-    right: 24rem;
-    bottom: 24rem;
-    left: 24rem;
-  }
-
   .lg\:inset-auto {
     top: auto;
     right: auto;
@@ -154924,228 +149532,18 @@ video {
     left: auto;
   }
 
-  .lg\:inset-px {
-    top: 1px;
-    right: 1px;
-    bottom: 1px;
-    left: 1px;
+  .lg\:inset-inverse-right-10 {
+    top: -1rem;
+    right: -1rem;
+    bottom: -1rem;
+    left: -1rem;
   }
 
-  .lg\:inset-0\.5 {
-    top: 0.125rem;
-    right: 0.125rem;
-    bottom: 0.125rem;
-    left: 0.125rem;
-  }
-
-  .lg\:inset-1\.5 {
-    top: 0.375rem;
-    right: 0.375rem;
-    bottom: 0.375rem;
-    left: 0.375rem;
-  }
-
-  .lg\:inset-2\.5 {
-    top: 0.625rem;
-    right: 0.625rem;
-    bottom: 0.625rem;
-    left: 0.625rem;
-  }
-
-  .lg\:inset-3\.5 {
-    top: 0.875rem;
-    right: 0.875rem;
-    bottom: 0.875rem;
-    left: 0.875rem;
-  }
-
-  .lg\:inset-1\/2 {
-    top: 50%;
-    right: 50%;
-    bottom: 50%;
-    left: 50%;
-  }
-
-  .lg\:inset-1\/3 {
-    top: 33.333333%;
-    right: 33.333333%;
-    bottom: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .lg\:inset-2\/3 {
-    top: 66.666667%;
-    right: 66.666667%;
-    bottom: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .lg\:inset-1\/4 {
-    top: 25%;
-    right: 25%;
-    bottom: 25%;
-    left: 25%;
-  }
-
-  .lg\:inset-2\/4 {
-    top: 50%;
-    right: 50%;
-    bottom: 50%;
-    left: 50%;
-  }
-
-  .lg\:inset-3\/4 {
-    top: 75%;
-    right: 75%;
-    bottom: 75%;
-    left: 75%;
-  }
-
-  .lg\:inset-1\/5 {
-    top: 20%;
-    right: 20%;
-    bottom: 20%;
-    left: 20%;
-  }
-
-  .lg\:inset-2\/5 {
-    top: 40%;
-    right: 40%;
-    bottom: 40%;
-    left: 40%;
-  }
-
-  .lg\:inset-3\/5 {
-    top: 60%;
-    right: 60%;
-    bottom: 60%;
-    left: 60%;
-  }
-
-  .lg\:inset-4\/5 {
-    top: 80%;
-    right: 80%;
-    bottom: 80%;
-    left: 80%;
-  }
-
-  .lg\:inset-1\/6 {
-    top: 16.666667%;
-    right: 16.666667%;
-    bottom: 16.666667%;
-    left: 16.666667%;
-  }
-
-  .lg\:inset-2\/6 {
-    top: 33.333333%;
-    right: 33.333333%;
-    bottom: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .lg\:inset-3\/6 {
-    top: 50%;
-    right: 50%;
-    bottom: 50%;
-    left: 50%;
-  }
-
-  .lg\:inset-4\/6 {
-    top: 66.666667%;
-    right: 66.666667%;
-    bottom: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .lg\:inset-5\/6 {
-    top: 83.333333%;
-    right: 83.333333%;
-    bottom: 83.333333%;
-    left: 83.333333%;
-  }
-
-  .lg\:inset-1\/12 {
-    top: 8.333333%;
-    right: 8.333333%;
-    bottom: 8.333333%;
-    left: 8.333333%;
-  }
-
-  .lg\:inset-2\/12 {
-    top: 16.666667%;
-    right: 16.666667%;
-    bottom: 16.666667%;
-    left: 16.666667%;
-  }
-
-  .lg\:inset-3\/12 {
-    top: 25%;
-    right: 25%;
-    bottom: 25%;
-    left: 25%;
-  }
-
-  .lg\:inset-4\/12 {
-    top: 33.333333%;
-    right: 33.333333%;
-    bottom: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .lg\:inset-5\/12 {
-    top: 41.666667%;
-    right: 41.666667%;
-    bottom: 41.666667%;
-    left: 41.666667%;
-  }
-
-  .lg\:inset-6\/12 {
-    top: 50%;
-    right: 50%;
-    bottom: 50%;
-    left: 50%;
-  }
-
-  .lg\:inset-7\/12 {
-    top: 58.333333%;
-    right: 58.333333%;
-    bottom: 58.333333%;
-    left: 58.333333%;
-  }
-
-  .lg\:inset-8\/12 {
-    top: 66.666667%;
-    right: 66.666667%;
-    bottom: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .lg\:inset-9\/12 {
-    top: 75%;
-    right: 75%;
-    bottom: 75%;
-    left: 75%;
-  }
-
-  .lg\:inset-10\/12 {
-    top: 83.333333%;
-    right: 83.333333%;
-    bottom: 83.333333%;
-    left: 83.333333%;
-  }
-
-  .lg\:inset-11\/12 {
-    top: 91.666667%;
-    right: 91.666667%;
-    bottom: 91.666667%;
-    left: 91.666667%;
-  }
-
-  .lg\:inset-full {
-    top: 100%;
-    right: 100%;
-    bottom: 100%;
-    left: 100%;
+  .lg\:inset-inverse-right-30 {
+    top: -3rem;
+    right: -3rem;
+    bottom: -3rem;
+    left: -3rem;
   }
 
   .lg\:inset-y-0 {
@@ -155158,316 +149556,6 @@ video {
     left: 0;
   }
 
-  .lg\:inset-y-1 {
-    top: 0.25rem;
-    bottom: 0.25rem;
-  }
-
-  .lg\:inset-x-1 {
-    right: 0.25rem;
-    left: 0.25rem;
-  }
-
-  .lg\:inset-y-2 {
-    top: 0.5rem;
-    bottom: 0.5rem;
-  }
-
-  .lg\:inset-x-2 {
-    right: 0.5rem;
-    left: 0.5rem;
-  }
-
-  .lg\:inset-y-3 {
-    top: 0.75rem;
-    bottom: 0.75rem;
-  }
-
-  .lg\:inset-x-3 {
-    right: 0.75rem;
-    left: 0.75rem;
-  }
-
-  .lg\:inset-y-4 {
-    top: 1rem;
-    bottom: 1rem;
-  }
-
-  .lg\:inset-x-4 {
-    right: 1rem;
-    left: 1rem;
-  }
-
-  .lg\:inset-y-5 {
-    top: 1.25rem;
-    bottom: 1.25rem;
-  }
-
-  .lg\:inset-x-5 {
-    right: 1.25rem;
-    left: 1.25rem;
-  }
-
-  .lg\:inset-y-6 {
-    top: 1.5rem;
-    bottom: 1.5rem;
-  }
-
-  .lg\:inset-x-6 {
-    right: 1.5rem;
-    left: 1.5rem;
-  }
-
-  .lg\:inset-y-7 {
-    top: 1.75rem;
-    bottom: 1.75rem;
-  }
-
-  .lg\:inset-x-7 {
-    right: 1.75rem;
-    left: 1.75rem;
-  }
-
-  .lg\:inset-y-8 {
-    top: 2rem;
-    bottom: 2rem;
-  }
-
-  .lg\:inset-x-8 {
-    right: 2rem;
-    left: 2rem;
-  }
-
-  .lg\:inset-y-9 {
-    top: 2.25rem;
-    bottom: 2.25rem;
-  }
-
-  .lg\:inset-x-9 {
-    right: 2.25rem;
-    left: 2.25rem;
-  }
-
-  .lg\:inset-y-10 {
-    top: 2.5rem;
-    bottom: 2.5rem;
-  }
-
-  .lg\:inset-x-10 {
-    right: 2.5rem;
-    left: 2.5rem;
-  }
-
-  .lg\:inset-y-11 {
-    top: 2.75rem;
-    bottom: 2.75rem;
-  }
-
-  .lg\:inset-x-11 {
-    right: 2.75rem;
-    left: 2.75rem;
-  }
-
-  .lg\:inset-y-12 {
-    top: 3rem;
-    bottom: 3rem;
-  }
-
-  .lg\:inset-x-12 {
-    right: 3rem;
-    left: 3rem;
-  }
-
-  .lg\:inset-y-13 {
-    top: 3.25rem;
-    bottom: 3.25rem;
-  }
-
-  .lg\:inset-x-13 {
-    right: 3.25rem;
-    left: 3.25rem;
-  }
-
-  .lg\:inset-y-14 {
-    top: 3.5rem;
-    bottom: 3.5rem;
-  }
-
-  .lg\:inset-x-14 {
-    right: 3.5rem;
-    left: 3.5rem;
-  }
-
-  .lg\:inset-y-15 {
-    top: 3.75rem;
-    bottom: 3.75rem;
-  }
-
-  .lg\:inset-x-15 {
-    right: 3.75rem;
-    left: 3.75rem;
-  }
-
-  .lg\:inset-y-16 {
-    top: 4rem;
-    bottom: 4rem;
-  }
-
-  .lg\:inset-x-16 {
-    right: 4rem;
-    left: 4rem;
-  }
-
-  .lg\:inset-y-20 {
-    top: 5rem;
-    bottom: 5rem;
-  }
-
-  .lg\:inset-x-20 {
-    right: 5rem;
-    left: 5rem;
-  }
-
-  .lg\:inset-y-24 {
-    top: 6rem;
-    bottom: 6rem;
-  }
-
-  .lg\:inset-x-24 {
-    right: 6rem;
-    left: 6rem;
-  }
-
-  .lg\:inset-y-28 {
-    top: 7rem;
-    bottom: 7rem;
-  }
-
-  .lg\:inset-x-28 {
-    right: 7rem;
-    left: 7rem;
-  }
-
-  .lg\:inset-y-32 {
-    top: 8rem;
-    bottom: 8rem;
-  }
-
-  .lg\:inset-x-32 {
-    right: 8rem;
-    left: 8rem;
-  }
-
-  .lg\:inset-y-36 {
-    top: 9rem;
-    bottom: 9rem;
-  }
-
-  .lg\:inset-x-36 {
-    right: 9rem;
-    left: 9rem;
-  }
-
-  .lg\:inset-y-40 {
-    top: 10rem;
-    bottom: 10rem;
-  }
-
-  .lg\:inset-x-40 {
-    right: 10rem;
-    left: 10rem;
-  }
-
-  .lg\:inset-y-44 {
-    top: 11rem;
-    bottom: 11rem;
-  }
-
-  .lg\:inset-x-44 {
-    right: 11rem;
-    left: 11rem;
-  }
-
-  .lg\:inset-y-48 {
-    top: 12rem;
-    bottom: 12rem;
-  }
-
-  .lg\:inset-x-48 {
-    right: 12rem;
-    left: 12rem;
-  }
-
-  .lg\:inset-y-52 {
-    top: 13rem;
-    bottom: 13rem;
-  }
-
-  .lg\:inset-x-52 {
-    right: 13rem;
-    left: 13rem;
-  }
-
-  .lg\:inset-y-56 {
-    top: 14rem;
-    bottom: 14rem;
-  }
-
-  .lg\:inset-x-56 {
-    right: 14rem;
-    left: 14rem;
-  }
-
-  .lg\:inset-y-60 {
-    top: 15rem;
-    bottom: 15rem;
-  }
-
-  .lg\:inset-x-60 {
-    right: 15rem;
-    left: 15rem;
-  }
-
-  .lg\:inset-y-64 {
-    top: 16rem;
-    bottom: 16rem;
-  }
-
-  .lg\:inset-x-64 {
-    right: 16rem;
-    left: 16rem;
-  }
-
-  .lg\:inset-y-72 {
-    top: 18rem;
-    bottom: 18rem;
-  }
-
-  .lg\:inset-x-72 {
-    right: 18rem;
-    left: 18rem;
-  }
-
-  .lg\:inset-y-80 {
-    top: 20rem;
-    bottom: 20rem;
-  }
-
-  .lg\:inset-x-80 {
-    right: 20rem;
-    left: 20rem;
-  }
-
-  .lg\:inset-y-96 {
-    top: 24rem;
-    bottom: 24rem;
-  }
-
-  .lg\:inset-x-96 {
-    right: 24rem;
-    left: 24rem;
-  }
-
   .lg\:inset-y-auto {
     top: auto;
     bottom: auto;
@@ -155478,324 +149566,24 @@ video {
     left: auto;
   }
 
-  .lg\:inset-y-px {
-    top: 1px;
-    bottom: 1px;
+  .lg\:inset-y-inverse-right-10 {
+    top: -1rem;
+    bottom: -1rem;
   }
 
-  .lg\:inset-x-px {
-    right: 1px;
-    left: 1px;
+  .lg\:inset-x-inverse-right-10 {
+    right: -1rem;
+    left: -1rem;
   }
 
-  .lg\:inset-y-0\.5 {
-    top: 0.125rem;
-    bottom: 0.125rem;
+  .lg\:inset-y-inverse-right-30 {
+    top: -3rem;
+    bottom: -3rem;
   }
 
-  .lg\:inset-x-0\.5 {
-    right: 0.125rem;
-    left: 0.125rem;
-  }
-
-  .lg\:inset-y-1\.5 {
-    top: 0.375rem;
-    bottom: 0.375rem;
-  }
-
-  .lg\:inset-x-1\.5 {
-    right: 0.375rem;
-    left: 0.375rem;
-  }
-
-  .lg\:inset-y-2\.5 {
-    top: 0.625rem;
-    bottom: 0.625rem;
-  }
-
-  .lg\:inset-x-2\.5 {
-    right: 0.625rem;
-    left: 0.625rem;
-  }
-
-  .lg\:inset-y-3\.5 {
-    top: 0.875rem;
-    bottom: 0.875rem;
-  }
-
-  .lg\:inset-x-3\.5 {
-    right: 0.875rem;
-    left: 0.875rem;
-  }
-
-  .lg\:inset-y-1\/2 {
-    top: 50%;
-    bottom: 50%;
-  }
-
-  .lg\:inset-x-1\/2 {
-    right: 50%;
-    left: 50%;
-  }
-
-  .lg\:inset-y-1\/3 {
-    top: 33.333333%;
-    bottom: 33.333333%;
-  }
-
-  .lg\:inset-x-1\/3 {
-    right: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .lg\:inset-y-2\/3 {
-    top: 66.666667%;
-    bottom: 66.666667%;
-  }
-
-  .lg\:inset-x-2\/3 {
-    right: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .lg\:inset-y-1\/4 {
-    top: 25%;
-    bottom: 25%;
-  }
-
-  .lg\:inset-x-1\/4 {
-    right: 25%;
-    left: 25%;
-  }
-
-  .lg\:inset-y-2\/4 {
-    top: 50%;
-    bottom: 50%;
-  }
-
-  .lg\:inset-x-2\/4 {
-    right: 50%;
-    left: 50%;
-  }
-
-  .lg\:inset-y-3\/4 {
-    top: 75%;
-    bottom: 75%;
-  }
-
-  .lg\:inset-x-3\/4 {
-    right: 75%;
-    left: 75%;
-  }
-
-  .lg\:inset-y-1\/5 {
-    top: 20%;
-    bottom: 20%;
-  }
-
-  .lg\:inset-x-1\/5 {
-    right: 20%;
-    left: 20%;
-  }
-
-  .lg\:inset-y-2\/5 {
-    top: 40%;
-    bottom: 40%;
-  }
-
-  .lg\:inset-x-2\/5 {
-    right: 40%;
-    left: 40%;
-  }
-
-  .lg\:inset-y-3\/5 {
-    top: 60%;
-    bottom: 60%;
-  }
-
-  .lg\:inset-x-3\/5 {
-    right: 60%;
-    left: 60%;
-  }
-
-  .lg\:inset-y-4\/5 {
-    top: 80%;
-    bottom: 80%;
-  }
-
-  .lg\:inset-x-4\/5 {
-    right: 80%;
-    left: 80%;
-  }
-
-  .lg\:inset-y-1\/6 {
-    top: 16.666667%;
-    bottom: 16.666667%;
-  }
-
-  .lg\:inset-x-1\/6 {
-    right: 16.666667%;
-    left: 16.666667%;
-  }
-
-  .lg\:inset-y-2\/6 {
-    top: 33.333333%;
-    bottom: 33.333333%;
-  }
-
-  .lg\:inset-x-2\/6 {
-    right: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .lg\:inset-y-3\/6 {
-    top: 50%;
-    bottom: 50%;
-  }
-
-  .lg\:inset-x-3\/6 {
-    right: 50%;
-    left: 50%;
-  }
-
-  .lg\:inset-y-4\/6 {
-    top: 66.666667%;
-    bottom: 66.666667%;
-  }
-
-  .lg\:inset-x-4\/6 {
-    right: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .lg\:inset-y-5\/6 {
-    top: 83.333333%;
-    bottom: 83.333333%;
-  }
-
-  .lg\:inset-x-5\/6 {
-    right: 83.333333%;
-    left: 83.333333%;
-  }
-
-  .lg\:inset-y-1\/12 {
-    top: 8.333333%;
-    bottom: 8.333333%;
-  }
-
-  .lg\:inset-x-1\/12 {
-    right: 8.333333%;
-    left: 8.333333%;
-  }
-
-  .lg\:inset-y-2\/12 {
-    top: 16.666667%;
-    bottom: 16.666667%;
-  }
-
-  .lg\:inset-x-2\/12 {
-    right: 16.666667%;
-    left: 16.666667%;
-  }
-
-  .lg\:inset-y-3\/12 {
-    top: 25%;
-    bottom: 25%;
-  }
-
-  .lg\:inset-x-3\/12 {
-    right: 25%;
-    left: 25%;
-  }
-
-  .lg\:inset-y-4\/12 {
-    top: 33.333333%;
-    bottom: 33.333333%;
-  }
-
-  .lg\:inset-x-4\/12 {
-    right: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .lg\:inset-y-5\/12 {
-    top: 41.666667%;
-    bottom: 41.666667%;
-  }
-
-  .lg\:inset-x-5\/12 {
-    right: 41.666667%;
-    left: 41.666667%;
-  }
-
-  .lg\:inset-y-6\/12 {
-    top: 50%;
-    bottom: 50%;
-  }
-
-  .lg\:inset-x-6\/12 {
-    right: 50%;
-    left: 50%;
-  }
-
-  .lg\:inset-y-7\/12 {
-    top: 58.333333%;
-    bottom: 58.333333%;
-  }
-
-  .lg\:inset-x-7\/12 {
-    right: 58.333333%;
-    left: 58.333333%;
-  }
-
-  .lg\:inset-y-8\/12 {
-    top: 66.666667%;
-    bottom: 66.666667%;
-  }
-
-  .lg\:inset-x-8\/12 {
-    right: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .lg\:inset-y-9\/12 {
-    top: 75%;
-    bottom: 75%;
-  }
-
-  .lg\:inset-x-9\/12 {
-    right: 75%;
-    left: 75%;
-  }
-
-  .lg\:inset-y-10\/12 {
-    top: 83.333333%;
-    bottom: 83.333333%;
-  }
-
-  .lg\:inset-x-10\/12 {
-    right: 83.333333%;
-    left: 83.333333%;
-  }
-
-  .lg\:inset-y-11\/12 {
-    top: 91.666667%;
-    bottom: 91.666667%;
-  }
-
-  .lg\:inset-x-11\/12 {
-    right: 91.666667%;
-    left: 91.666667%;
-  }
-
-  .lg\:inset-y-full {
-    top: 100%;
-    bottom: 100%;
-  }
-
-  .lg\:inset-x-full {
-    right: 100%;
-    left: 100%;
+  .lg\:inset-x-inverse-right-30 {
+    right: -3rem;
+    left: -3rem;
   }
 
   .lg\:top-0 {
@@ -155814,502 +149602,6 @@ video {
     left: 0;
   }
 
-  .lg\:top-1 {
-    top: 0.25rem;
-  }
-
-  .lg\:right-1 {
-    right: 0.25rem;
-  }
-
-  .lg\:bottom-1 {
-    bottom: 0.25rem;
-  }
-
-  .lg\:left-1 {
-    left: 0.25rem;
-  }
-
-  .lg\:top-2 {
-    top: 0.5rem;
-  }
-
-  .lg\:right-2 {
-    right: 0.5rem;
-  }
-
-  .lg\:bottom-2 {
-    bottom: 0.5rem;
-  }
-
-  .lg\:left-2 {
-    left: 0.5rem;
-  }
-
-  .lg\:top-3 {
-    top: 0.75rem;
-  }
-
-  .lg\:right-3 {
-    right: 0.75rem;
-  }
-
-  .lg\:bottom-3 {
-    bottom: 0.75rem;
-  }
-
-  .lg\:left-3 {
-    left: 0.75rem;
-  }
-
-  .lg\:top-4 {
-    top: 1rem;
-  }
-
-  .lg\:right-4 {
-    right: 1rem;
-  }
-
-  .lg\:bottom-4 {
-    bottom: 1rem;
-  }
-
-  .lg\:left-4 {
-    left: 1rem;
-  }
-
-  .lg\:top-5 {
-    top: 1.25rem;
-  }
-
-  .lg\:right-5 {
-    right: 1.25rem;
-  }
-
-  .lg\:bottom-5 {
-    bottom: 1.25rem;
-  }
-
-  .lg\:left-5 {
-    left: 1.25rem;
-  }
-
-  .lg\:top-6 {
-    top: 1.5rem;
-  }
-
-  .lg\:right-6 {
-    right: 1.5rem;
-  }
-
-  .lg\:bottom-6 {
-    bottom: 1.5rem;
-  }
-
-  .lg\:left-6 {
-    left: 1.5rem;
-  }
-
-  .lg\:top-7 {
-    top: 1.75rem;
-  }
-
-  .lg\:right-7 {
-    right: 1.75rem;
-  }
-
-  .lg\:bottom-7 {
-    bottom: 1.75rem;
-  }
-
-  .lg\:left-7 {
-    left: 1.75rem;
-  }
-
-  .lg\:top-8 {
-    top: 2rem;
-  }
-
-  .lg\:right-8 {
-    right: 2rem;
-  }
-
-  .lg\:bottom-8 {
-    bottom: 2rem;
-  }
-
-  .lg\:left-8 {
-    left: 2rem;
-  }
-
-  .lg\:top-9 {
-    top: 2.25rem;
-  }
-
-  .lg\:right-9 {
-    right: 2.25rem;
-  }
-
-  .lg\:bottom-9 {
-    bottom: 2.25rem;
-  }
-
-  .lg\:left-9 {
-    left: 2.25rem;
-  }
-
-  .lg\:top-10 {
-    top: 2.5rem;
-  }
-
-  .lg\:right-10 {
-    right: 2.5rem;
-  }
-
-  .lg\:bottom-10 {
-    bottom: 2.5rem;
-  }
-
-  .lg\:left-10 {
-    left: 2.5rem;
-  }
-
-  .lg\:top-11 {
-    top: 2.75rem;
-  }
-
-  .lg\:right-11 {
-    right: 2.75rem;
-  }
-
-  .lg\:bottom-11 {
-    bottom: 2.75rem;
-  }
-
-  .lg\:left-11 {
-    left: 2.75rem;
-  }
-
-  .lg\:top-12 {
-    top: 3rem;
-  }
-
-  .lg\:right-12 {
-    right: 3rem;
-  }
-
-  .lg\:bottom-12 {
-    bottom: 3rem;
-  }
-
-  .lg\:left-12 {
-    left: 3rem;
-  }
-
-  .lg\:top-13 {
-    top: 3.25rem;
-  }
-
-  .lg\:right-13 {
-    right: 3.25rem;
-  }
-
-  .lg\:bottom-13 {
-    bottom: 3.25rem;
-  }
-
-  .lg\:left-13 {
-    left: 3.25rem;
-  }
-
-  .lg\:top-14 {
-    top: 3.5rem;
-  }
-
-  .lg\:right-14 {
-    right: 3.5rem;
-  }
-
-  .lg\:bottom-14 {
-    bottom: 3.5rem;
-  }
-
-  .lg\:left-14 {
-    left: 3.5rem;
-  }
-
-  .lg\:top-15 {
-    top: 3.75rem;
-  }
-
-  .lg\:right-15 {
-    right: 3.75rem;
-  }
-
-  .lg\:bottom-15 {
-    bottom: 3.75rem;
-  }
-
-  .lg\:left-15 {
-    left: 3.75rem;
-  }
-
-  .lg\:top-16 {
-    top: 4rem;
-  }
-
-  .lg\:right-16 {
-    right: 4rem;
-  }
-
-  .lg\:bottom-16 {
-    bottom: 4rem;
-  }
-
-  .lg\:left-16 {
-    left: 4rem;
-  }
-
-  .lg\:top-20 {
-    top: 5rem;
-  }
-
-  .lg\:right-20 {
-    right: 5rem;
-  }
-
-  .lg\:bottom-20 {
-    bottom: 5rem;
-  }
-
-  .lg\:left-20 {
-    left: 5rem;
-  }
-
-  .lg\:top-24 {
-    top: 6rem;
-  }
-
-  .lg\:right-24 {
-    right: 6rem;
-  }
-
-  .lg\:bottom-24 {
-    bottom: 6rem;
-  }
-
-  .lg\:left-24 {
-    left: 6rem;
-  }
-
-  .lg\:top-28 {
-    top: 7rem;
-  }
-
-  .lg\:right-28 {
-    right: 7rem;
-  }
-
-  .lg\:bottom-28 {
-    bottom: 7rem;
-  }
-
-  .lg\:left-28 {
-    left: 7rem;
-  }
-
-  .lg\:top-32 {
-    top: 8rem;
-  }
-
-  .lg\:right-32 {
-    right: 8rem;
-  }
-
-  .lg\:bottom-32 {
-    bottom: 8rem;
-  }
-
-  .lg\:left-32 {
-    left: 8rem;
-  }
-
-  .lg\:top-36 {
-    top: 9rem;
-  }
-
-  .lg\:right-36 {
-    right: 9rem;
-  }
-
-  .lg\:bottom-36 {
-    bottom: 9rem;
-  }
-
-  .lg\:left-36 {
-    left: 9rem;
-  }
-
-  .lg\:top-40 {
-    top: 10rem;
-  }
-
-  .lg\:right-40 {
-    right: 10rem;
-  }
-
-  .lg\:bottom-40 {
-    bottom: 10rem;
-  }
-
-  .lg\:left-40 {
-    left: 10rem;
-  }
-
-  .lg\:top-44 {
-    top: 11rem;
-  }
-
-  .lg\:right-44 {
-    right: 11rem;
-  }
-
-  .lg\:bottom-44 {
-    bottom: 11rem;
-  }
-
-  .lg\:left-44 {
-    left: 11rem;
-  }
-
-  .lg\:top-48 {
-    top: 12rem;
-  }
-
-  .lg\:right-48 {
-    right: 12rem;
-  }
-
-  .lg\:bottom-48 {
-    bottom: 12rem;
-  }
-
-  .lg\:left-48 {
-    left: 12rem;
-  }
-
-  .lg\:top-52 {
-    top: 13rem;
-  }
-
-  .lg\:right-52 {
-    right: 13rem;
-  }
-
-  .lg\:bottom-52 {
-    bottom: 13rem;
-  }
-
-  .lg\:left-52 {
-    left: 13rem;
-  }
-
-  .lg\:top-56 {
-    top: 14rem;
-  }
-
-  .lg\:right-56 {
-    right: 14rem;
-  }
-
-  .lg\:bottom-56 {
-    bottom: 14rem;
-  }
-
-  .lg\:left-56 {
-    left: 14rem;
-  }
-
-  .lg\:top-60 {
-    top: 15rem;
-  }
-
-  .lg\:right-60 {
-    right: 15rem;
-  }
-
-  .lg\:bottom-60 {
-    bottom: 15rem;
-  }
-
-  .lg\:left-60 {
-    left: 15rem;
-  }
-
-  .lg\:top-64 {
-    top: 16rem;
-  }
-
-  .lg\:right-64 {
-    right: 16rem;
-  }
-
-  .lg\:bottom-64 {
-    bottom: 16rem;
-  }
-
-  .lg\:left-64 {
-    left: 16rem;
-  }
-
-  .lg\:top-72 {
-    top: 18rem;
-  }
-
-  .lg\:right-72 {
-    right: 18rem;
-  }
-
-  .lg\:bottom-72 {
-    bottom: 18rem;
-  }
-
-  .lg\:left-72 {
-    left: 18rem;
-  }
-
-  .lg\:top-80 {
-    top: 20rem;
-  }
-
-  .lg\:right-80 {
-    right: 20rem;
-  }
-
-  .lg\:bottom-80 {
-    bottom: 20rem;
-  }
-
-  .lg\:left-80 {
-    left: 20rem;
-  }
-
-  .lg\:top-96 {
-    top: 24rem;
-  }
-
-  .lg\:right-96 {
-    right: 24rem;
-  }
-
-  .lg\:bottom-96 {
-    bottom: 24rem;
-  }
-
-  .lg\:left-96 {
-    left: 24rem;
-  }
-
   .lg\:top-auto {
     top: auto;
   }
@@ -156326,516 +149618,36 @@ video {
     left: auto;
   }
 
-  .lg\:top-px {
-    top: 1px;
+  .lg\:top-inverse-right-10 {
+    top: -1rem;
   }
 
-  .lg\:right-px {
-    right: 1px;
+  .lg\:right-inverse-right-10 {
+    right: -1rem;
   }
 
-  .lg\:bottom-px {
-    bottom: 1px;
+  .lg\:bottom-inverse-right-10 {
+    bottom: -1rem;
   }
 
-  .lg\:left-px {
-    left: 1px;
+  .lg\:left-inverse-right-10 {
+    left: -1rem;
   }
 
-  .lg\:top-0\.5 {
-    top: 0.125rem;
+  .lg\:top-inverse-right-30 {
+    top: -3rem;
   }
 
-  .lg\:right-0\.5 {
-    right: 0.125rem;
+  .lg\:right-inverse-right-30 {
+    right: -3rem;
   }
 
-  .lg\:bottom-0\.5 {
-    bottom: 0.125rem;
+  .lg\:bottom-inverse-right-30 {
+    bottom: -3rem;
   }
 
-  .lg\:left-0\.5 {
-    left: 0.125rem;
-  }
-
-  .lg\:top-1\.5 {
-    top: 0.375rem;
-  }
-
-  .lg\:right-1\.5 {
-    right: 0.375rem;
-  }
-
-  .lg\:bottom-1\.5 {
-    bottom: 0.375rem;
-  }
-
-  .lg\:left-1\.5 {
-    left: 0.375rem;
-  }
-
-  .lg\:top-2\.5 {
-    top: 0.625rem;
-  }
-
-  .lg\:right-2\.5 {
-    right: 0.625rem;
-  }
-
-  .lg\:bottom-2\.5 {
-    bottom: 0.625rem;
-  }
-
-  .lg\:left-2\.5 {
-    left: 0.625rem;
-  }
-
-  .lg\:top-3\.5 {
-    top: 0.875rem;
-  }
-
-  .lg\:right-3\.5 {
-    right: 0.875rem;
-  }
-
-  .lg\:bottom-3\.5 {
-    bottom: 0.875rem;
-  }
-
-  .lg\:left-3\.5 {
-    left: 0.875rem;
-  }
-
-  .lg\:top-1\/2 {
-    top: 50%;
-  }
-
-  .lg\:right-1\/2 {
-    right: 50%;
-  }
-
-  .lg\:bottom-1\/2 {
-    bottom: 50%;
-  }
-
-  .lg\:left-1\/2 {
-    left: 50%;
-  }
-
-  .lg\:top-1\/3 {
-    top: 33.333333%;
-  }
-
-  .lg\:right-1\/3 {
-    right: 33.333333%;
-  }
-
-  .lg\:bottom-1\/3 {
-    bottom: 33.333333%;
-  }
-
-  .lg\:left-1\/3 {
-    left: 33.333333%;
-  }
-
-  .lg\:top-2\/3 {
-    top: 66.666667%;
-  }
-
-  .lg\:right-2\/3 {
-    right: 66.666667%;
-  }
-
-  .lg\:bottom-2\/3 {
-    bottom: 66.666667%;
-  }
-
-  .lg\:left-2\/3 {
-    left: 66.666667%;
-  }
-
-  .lg\:top-1\/4 {
-    top: 25%;
-  }
-
-  .lg\:right-1\/4 {
-    right: 25%;
-  }
-
-  .lg\:bottom-1\/4 {
-    bottom: 25%;
-  }
-
-  .lg\:left-1\/4 {
-    left: 25%;
-  }
-
-  .lg\:top-2\/4 {
-    top: 50%;
-  }
-
-  .lg\:right-2\/4 {
-    right: 50%;
-  }
-
-  .lg\:bottom-2\/4 {
-    bottom: 50%;
-  }
-
-  .lg\:left-2\/4 {
-    left: 50%;
-  }
-
-  .lg\:top-3\/4 {
-    top: 75%;
-  }
-
-  .lg\:right-3\/4 {
-    right: 75%;
-  }
-
-  .lg\:bottom-3\/4 {
-    bottom: 75%;
-  }
-
-  .lg\:left-3\/4 {
-    left: 75%;
-  }
-
-  .lg\:top-1\/5 {
-    top: 20%;
-  }
-
-  .lg\:right-1\/5 {
-    right: 20%;
-  }
-
-  .lg\:bottom-1\/5 {
-    bottom: 20%;
-  }
-
-  .lg\:left-1\/5 {
-    left: 20%;
-  }
-
-  .lg\:top-2\/5 {
-    top: 40%;
-  }
-
-  .lg\:right-2\/5 {
-    right: 40%;
-  }
-
-  .lg\:bottom-2\/5 {
-    bottom: 40%;
-  }
-
-  .lg\:left-2\/5 {
-    left: 40%;
-  }
-
-  .lg\:top-3\/5 {
-    top: 60%;
-  }
-
-  .lg\:right-3\/5 {
-    right: 60%;
-  }
-
-  .lg\:bottom-3\/5 {
-    bottom: 60%;
-  }
-
-  .lg\:left-3\/5 {
-    left: 60%;
-  }
-
-  .lg\:top-4\/5 {
-    top: 80%;
-  }
-
-  .lg\:right-4\/5 {
-    right: 80%;
-  }
-
-  .lg\:bottom-4\/5 {
-    bottom: 80%;
-  }
-
-  .lg\:left-4\/5 {
-    left: 80%;
-  }
-
-  .lg\:top-1\/6 {
-    top: 16.666667%;
-  }
-
-  .lg\:right-1\/6 {
-    right: 16.666667%;
-  }
-
-  .lg\:bottom-1\/6 {
-    bottom: 16.666667%;
-  }
-
-  .lg\:left-1\/6 {
-    left: 16.666667%;
-  }
-
-  .lg\:top-2\/6 {
-    top: 33.333333%;
-  }
-
-  .lg\:right-2\/6 {
-    right: 33.333333%;
-  }
-
-  .lg\:bottom-2\/6 {
-    bottom: 33.333333%;
-  }
-
-  .lg\:left-2\/6 {
-    left: 33.333333%;
-  }
-
-  .lg\:top-3\/6 {
-    top: 50%;
-  }
-
-  .lg\:right-3\/6 {
-    right: 50%;
-  }
-
-  .lg\:bottom-3\/6 {
-    bottom: 50%;
-  }
-
-  .lg\:left-3\/6 {
-    left: 50%;
-  }
-
-  .lg\:top-4\/6 {
-    top: 66.666667%;
-  }
-
-  .lg\:right-4\/6 {
-    right: 66.666667%;
-  }
-
-  .lg\:bottom-4\/6 {
-    bottom: 66.666667%;
-  }
-
-  .lg\:left-4\/6 {
-    left: 66.666667%;
-  }
-
-  .lg\:top-5\/6 {
-    top: 83.333333%;
-  }
-
-  .lg\:right-5\/6 {
-    right: 83.333333%;
-  }
-
-  .lg\:bottom-5\/6 {
-    bottom: 83.333333%;
-  }
-
-  .lg\:left-5\/6 {
-    left: 83.333333%;
-  }
-
-  .lg\:top-1\/12 {
-    top: 8.333333%;
-  }
-
-  .lg\:right-1\/12 {
-    right: 8.333333%;
-  }
-
-  .lg\:bottom-1\/12 {
-    bottom: 8.333333%;
-  }
-
-  .lg\:left-1\/12 {
-    left: 8.333333%;
-  }
-
-  .lg\:top-2\/12 {
-    top: 16.666667%;
-  }
-
-  .lg\:right-2\/12 {
-    right: 16.666667%;
-  }
-
-  .lg\:bottom-2\/12 {
-    bottom: 16.666667%;
-  }
-
-  .lg\:left-2\/12 {
-    left: 16.666667%;
-  }
-
-  .lg\:top-3\/12 {
-    top: 25%;
-  }
-
-  .lg\:right-3\/12 {
-    right: 25%;
-  }
-
-  .lg\:bottom-3\/12 {
-    bottom: 25%;
-  }
-
-  .lg\:left-3\/12 {
-    left: 25%;
-  }
-
-  .lg\:top-4\/12 {
-    top: 33.333333%;
-  }
-
-  .lg\:right-4\/12 {
-    right: 33.333333%;
-  }
-
-  .lg\:bottom-4\/12 {
-    bottom: 33.333333%;
-  }
-
-  .lg\:left-4\/12 {
-    left: 33.333333%;
-  }
-
-  .lg\:top-5\/12 {
-    top: 41.666667%;
-  }
-
-  .lg\:right-5\/12 {
-    right: 41.666667%;
-  }
-
-  .lg\:bottom-5\/12 {
-    bottom: 41.666667%;
-  }
-
-  .lg\:left-5\/12 {
-    left: 41.666667%;
-  }
-
-  .lg\:top-6\/12 {
-    top: 50%;
-  }
-
-  .lg\:right-6\/12 {
-    right: 50%;
-  }
-
-  .lg\:bottom-6\/12 {
-    bottom: 50%;
-  }
-
-  .lg\:left-6\/12 {
-    left: 50%;
-  }
-
-  .lg\:top-7\/12 {
-    top: 58.333333%;
-  }
-
-  .lg\:right-7\/12 {
-    right: 58.333333%;
-  }
-
-  .lg\:bottom-7\/12 {
-    bottom: 58.333333%;
-  }
-
-  .lg\:left-7\/12 {
-    left: 58.333333%;
-  }
-
-  .lg\:top-8\/12 {
-    top: 66.666667%;
-  }
-
-  .lg\:right-8\/12 {
-    right: 66.666667%;
-  }
-
-  .lg\:bottom-8\/12 {
-    bottom: 66.666667%;
-  }
-
-  .lg\:left-8\/12 {
-    left: 66.666667%;
-  }
-
-  .lg\:top-9\/12 {
-    top: 75%;
-  }
-
-  .lg\:right-9\/12 {
-    right: 75%;
-  }
-
-  .lg\:bottom-9\/12 {
-    bottom: 75%;
-  }
-
-  .lg\:left-9\/12 {
-    left: 75%;
-  }
-
-  .lg\:top-10\/12 {
-    top: 83.333333%;
-  }
-
-  .lg\:right-10\/12 {
-    right: 83.333333%;
-  }
-
-  .lg\:bottom-10\/12 {
-    bottom: 83.333333%;
-  }
-
-  .lg\:left-10\/12 {
-    left: 83.333333%;
-  }
-
-  .lg\:top-11\/12 {
-    top: 91.666667%;
-  }
-
-  .lg\:right-11\/12 {
-    right: 91.666667%;
-  }
-
-  .lg\:bottom-11\/12 {
-    bottom: 91.666667%;
-  }
-
-  .lg\:left-11\/12 {
-    left: 91.666667%;
-  }
-
-  .lg\:top-full {
-    top: 100%;
-  }
-
-  .lg\:right-full {
-    right: 100%;
-  }
-
-  .lg\:bottom-full {
-    bottom: 100%;
-  }
-
-  .lg\:left-full {
-    left: 100%;
+  .lg\:left-inverse-right-30 {
+    left: -3rem;
   }
 
   .lg\:resize-none {
@@ -185039,6 +177851,206 @@ video {
     border-left-width: 1px;
   }
 
+  .xl\:hover\:border-0:hover {
+    border-width: 0;
+  }
+
+  .xl\:hover\:border-2:hover {
+    border-width: 2px;
+  }
+
+  .xl\:hover\:border-4:hover {
+    border-width: 4px;
+  }
+
+  .xl\:hover\:border-8:hover {
+    border-width: 8px;
+  }
+
+  .xl\:hover\:border:hover {
+    border-width: 1px;
+  }
+
+  .xl\:hover\:border-t-0:hover {
+    border-top-width: 0;
+  }
+
+  .xl\:hover\:border-r-0:hover {
+    border-right-width: 0;
+  }
+
+  .xl\:hover\:border-b-0:hover {
+    border-bottom-width: 0;
+  }
+
+  .xl\:hover\:border-l-0:hover {
+    border-left-width: 0;
+  }
+
+  .xl\:hover\:border-t-2:hover {
+    border-top-width: 2px;
+  }
+
+  .xl\:hover\:border-r-2:hover {
+    border-right-width: 2px;
+  }
+
+  .xl\:hover\:border-b-2:hover {
+    border-bottom-width: 2px;
+  }
+
+  .xl\:hover\:border-l-2:hover {
+    border-left-width: 2px;
+  }
+
+  .xl\:hover\:border-t-4:hover {
+    border-top-width: 4px;
+  }
+
+  .xl\:hover\:border-r-4:hover {
+    border-right-width: 4px;
+  }
+
+  .xl\:hover\:border-b-4:hover {
+    border-bottom-width: 4px;
+  }
+
+  .xl\:hover\:border-l-4:hover {
+    border-left-width: 4px;
+  }
+
+  .xl\:hover\:border-t-8:hover {
+    border-top-width: 8px;
+  }
+
+  .xl\:hover\:border-r-8:hover {
+    border-right-width: 8px;
+  }
+
+  .xl\:hover\:border-b-8:hover {
+    border-bottom-width: 8px;
+  }
+
+  .xl\:hover\:border-l-8:hover {
+    border-left-width: 8px;
+  }
+
+  .xl\:hover\:border-t:hover {
+    border-top-width: 1px;
+  }
+
+  .xl\:hover\:border-r:hover {
+    border-right-width: 1px;
+  }
+
+  .xl\:hover\:border-b:hover {
+    border-bottom-width: 1px;
+  }
+
+  .xl\:hover\:border-l:hover {
+    border-left-width: 1px;
+  }
+
+  .xl\:focus\:border-0:focus {
+    border-width: 0;
+  }
+
+  .xl\:focus\:border-2:focus {
+    border-width: 2px;
+  }
+
+  .xl\:focus\:border-4:focus {
+    border-width: 4px;
+  }
+
+  .xl\:focus\:border-8:focus {
+    border-width: 8px;
+  }
+
+  .xl\:focus\:border:focus {
+    border-width: 1px;
+  }
+
+  .xl\:focus\:border-t-0:focus {
+    border-top-width: 0;
+  }
+
+  .xl\:focus\:border-r-0:focus {
+    border-right-width: 0;
+  }
+
+  .xl\:focus\:border-b-0:focus {
+    border-bottom-width: 0;
+  }
+
+  .xl\:focus\:border-l-0:focus {
+    border-left-width: 0;
+  }
+
+  .xl\:focus\:border-t-2:focus {
+    border-top-width: 2px;
+  }
+
+  .xl\:focus\:border-r-2:focus {
+    border-right-width: 2px;
+  }
+
+  .xl\:focus\:border-b-2:focus {
+    border-bottom-width: 2px;
+  }
+
+  .xl\:focus\:border-l-2:focus {
+    border-left-width: 2px;
+  }
+
+  .xl\:focus\:border-t-4:focus {
+    border-top-width: 4px;
+  }
+
+  .xl\:focus\:border-r-4:focus {
+    border-right-width: 4px;
+  }
+
+  .xl\:focus\:border-b-4:focus {
+    border-bottom-width: 4px;
+  }
+
+  .xl\:focus\:border-l-4:focus {
+    border-left-width: 4px;
+  }
+
+  .xl\:focus\:border-t-8:focus {
+    border-top-width: 8px;
+  }
+
+  .xl\:focus\:border-r-8:focus {
+    border-right-width: 8px;
+  }
+
+  .xl\:focus\:border-b-8:focus {
+    border-bottom-width: 8px;
+  }
+
+  .xl\:focus\:border-l-8:focus {
+    border-left-width: 8px;
+  }
+
+  .xl\:focus\:border-t:focus {
+    border-top-width: 1px;
+  }
+
+  .xl\:focus\:border-r:focus {
+    border-right-width: 1px;
+  }
+
+  .xl\:focus\:border-b:focus {
+    border-bottom-width: 1px;
+  }
+
+  .xl\:focus\:border-l:focus {
+    border-left-width: 1px;
+  }
+
   .xl\:box-border {
     box-sizing: border-box;
   }
@@ -196626,223 +189638,6 @@ video {
     left: 0;
   }
 
-  .xl\:inset-1 {
-    top: 0.25rem;
-    right: 0.25rem;
-    bottom: 0.25rem;
-    left: 0.25rem;
-  }
-
-  .xl\:inset-2 {
-    top: 0.5rem;
-    right: 0.5rem;
-    bottom: 0.5rem;
-    left: 0.5rem;
-  }
-
-  .xl\:inset-3 {
-    top: 0.75rem;
-    right: 0.75rem;
-    bottom: 0.75rem;
-    left: 0.75rem;
-  }
-
-  .xl\:inset-4 {
-    top: 1rem;
-    right: 1rem;
-    bottom: 1rem;
-    left: 1rem;
-  }
-
-  .xl\:inset-5 {
-    top: 1.25rem;
-    right: 1.25rem;
-    bottom: 1.25rem;
-    left: 1.25rem;
-  }
-
-  .xl\:inset-6 {
-    top: 1.5rem;
-    right: 1.5rem;
-    bottom: 1.5rem;
-    left: 1.5rem;
-  }
-
-  .xl\:inset-7 {
-    top: 1.75rem;
-    right: 1.75rem;
-    bottom: 1.75rem;
-    left: 1.75rem;
-  }
-
-  .xl\:inset-8 {
-    top: 2rem;
-    right: 2rem;
-    bottom: 2rem;
-    left: 2rem;
-  }
-
-  .xl\:inset-9 {
-    top: 2.25rem;
-    right: 2.25rem;
-    bottom: 2.25rem;
-    left: 2.25rem;
-  }
-
-  .xl\:inset-10 {
-    top: 2.5rem;
-    right: 2.5rem;
-    bottom: 2.5rem;
-    left: 2.5rem;
-  }
-
-  .xl\:inset-11 {
-    top: 2.75rem;
-    right: 2.75rem;
-    bottom: 2.75rem;
-    left: 2.75rem;
-  }
-
-  .xl\:inset-12 {
-    top: 3rem;
-    right: 3rem;
-    bottom: 3rem;
-    left: 3rem;
-  }
-
-  .xl\:inset-13 {
-    top: 3.25rem;
-    right: 3.25rem;
-    bottom: 3.25rem;
-    left: 3.25rem;
-  }
-
-  .xl\:inset-14 {
-    top: 3.5rem;
-    right: 3.5rem;
-    bottom: 3.5rem;
-    left: 3.5rem;
-  }
-
-  .xl\:inset-15 {
-    top: 3.75rem;
-    right: 3.75rem;
-    bottom: 3.75rem;
-    left: 3.75rem;
-  }
-
-  .xl\:inset-16 {
-    top: 4rem;
-    right: 4rem;
-    bottom: 4rem;
-    left: 4rem;
-  }
-
-  .xl\:inset-20 {
-    top: 5rem;
-    right: 5rem;
-    bottom: 5rem;
-    left: 5rem;
-  }
-
-  .xl\:inset-24 {
-    top: 6rem;
-    right: 6rem;
-    bottom: 6rem;
-    left: 6rem;
-  }
-
-  .xl\:inset-28 {
-    top: 7rem;
-    right: 7rem;
-    bottom: 7rem;
-    left: 7rem;
-  }
-
-  .xl\:inset-32 {
-    top: 8rem;
-    right: 8rem;
-    bottom: 8rem;
-    left: 8rem;
-  }
-
-  .xl\:inset-36 {
-    top: 9rem;
-    right: 9rem;
-    bottom: 9rem;
-    left: 9rem;
-  }
-
-  .xl\:inset-40 {
-    top: 10rem;
-    right: 10rem;
-    bottom: 10rem;
-    left: 10rem;
-  }
-
-  .xl\:inset-44 {
-    top: 11rem;
-    right: 11rem;
-    bottom: 11rem;
-    left: 11rem;
-  }
-
-  .xl\:inset-48 {
-    top: 12rem;
-    right: 12rem;
-    bottom: 12rem;
-    left: 12rem;
-  }
-
-  .xl\:inset-52 {
-    top: 13rem;
-    right: 13rem;
-    bottom: 13rem;
-    left: 13rem;
-  }
-
-  .xl\:inset-56 {
-    top: 14rem;
-    right: 14rem;
-    bottom: 14rem;
-    left: 14rem;
-  }
-
-  .xl\:inset-60 {
-    top: 15rem;
-    right: 15rem;
-    bottom: 15rem;
-    left: 15rem;
-  }
-
-  .xl\:inset-64 {
-    top: 16rem;
-    right: 16rem;
-    bottom: 16rem;
-    left: 16rem;
-  }
-
-  .xl\:inset-72 {
-    top: 18rem;
-    right: 18rem;
-    bottom: 18rem;
-    left: 18rem;
-  }
-
-  .xl\:inset-80 {
-    top: 20rem;
-    right: 20rem;
-    bottom: 20rem;
-    left: 20rem;
-  }
-
-  .xl\:inset-96 {
-    top: 24rem;
-    right: 24rem;
-    bottom: 24rem;
-    left: 24rem;
-  }
-
   .xl\:inset-auto {
     top: auto;
     right: auto;
@@ -196850,228 +189645,18 @@ video {
     left: auto;
   }
 
-  .xl\:inset-px {
-    top: 1px;
-    right: 1px;
-    bottom: 1px;
-    left: 1px;
+  .xl\:inset-inverse-right-10 {
+    top: -1rem;
+    right: -1rem;
+    bottom: -1rem;
+    left: -1rem;
   }
 
-  .xl\:inset-0\.5 {
-    top: 0.125rem;
-    right: 0.125rem;
-    bottom: 0.125rem;
-    left: 0.125rem;
-  }
-
-  .xl\:inset-1\.5 {
-    top: 0.375rem;
-    right: 0.375rem;
-    bottom: 0.375rem;
-    left: 0.375rem;
-  }
-
-  .xl\:inset-2\.5 {
-    top: 0.625rem;
-    right: 0.625rem;
-    bottom: 0.625rem;
-    left: 0.625rem;
-  }
-
-  .xl\:inset-3\.5 {
-    top: 0.875rem;
-    right: 0.875rem;
-    bottom: 0.875rem;
-    left: 0.875rem;
-  }
-
-  .xl\:inset-1\/2 {
-    top: 50%;
-    right: 50%;
-    bottom: 50%;
-    left: 50%;
-  }
-
-  .xl\:inset-1\/3 {
-    top: 33.333333%;
-    right: 33.333333%;
-    bottom: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .xl\:inset-2\/3 {
-    top: 66.666667%;
-    right: 66.666667%;
-    bottom: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .xl\:inset-1\/4 {
-    top: 25%;
-    right: 25%;
-    bottom: 25%;
-    left: 25%;
-  }
-
-  .xl\:inset-2\/4 {
-    top: 50%;
-    right: 50%;
-    bottom: 50%;
-    left: 50%;
-  }
-
-  .xl\:inset-3\/4 {
-    top: 75%;
-    right: 75%;
-    bottom: 75%;
-    left: 75%;
-  }
-
-  .xl\:inset-1\/5 {
-    top: 20%;
-    right: 20%;
-    bottom: 20%;
-    left: 20%;
-  }
-
-  .xl\:inset-2\/5 {
-    top: 40%;
-    right: 40%;
-    bottom: 40%;
-    left: 40%;
-  }
-
-  .xl\:inset-3\/5 {
-    top: 60%;
-    right: 60%;
-    bottom: 60%;
-    left: 60%;
-  }
-
-  .xl\:inset-4\/5 {
-    top: 80%;
-    right: 80%;
-    bottom: 80%;
-    left: 80%;
-  }
-
-  .xl\:inset-1\/6 {
-    top: 16.666667%;
-    right: 16.666667%;
-    bottom: 16.666667%;
-    left: 16.666667%;
-  }
-
-  .xl\:inset-2\/6 {
-    top: 33.333333%;
-    right: 33.333333%;
-    bottom: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .xl\:inset-3\/6 {
-    top: 50%;
-    right: 50%;
-    bottom: 50%;
-    left: 50%;
-  }
-
-  .xl\:inset-4\/6 {
-    top: 66.666667%;
-    right: 66.666667%;
-    bottom: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .xl\:inset-5\/6 {
-    top: 83.333333%;
-    right: 83.333333%;
-    bottom: 83.333333%;
-    left: 83.333333%;
-  }
-
-  .xl\:inset-1\/12 {
-    top: 8.333333%;
-    right: 8.333333%;
-    bottom: 8.333333%;
-    left: 8.333333%;
-  }
-
-  .xl\:inset-2\/12 {
-    top: 16.666667%;
-    right: 16.666667%;
-    bottom: 16.666667%;
-    left: 16.666667%;
-  }
-
-  .xl\:inset-3\/12 {
-    top: 25%;
-    right: 25%;
-    bottom: 25%;
-    left: 25%;
-  }
-
-  .xl\:inset-4\/12 {
-    top: 33.333333%;
-    right: 33.333333%;
-    bottom: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .xl\:inset-5\/12 {
-    top: 41.666667%;
-    right: 41.666667%;
-    bottom: 41.666667%;
-    left: 41.666667%;
-  }
-
-  .xl\:inset-6\/12 {
-    top: 50%;
-    right: 50%;
-    bottom: 50%;
-    left: 50%;
-  }
-
-  .xl\:inset-7\/12 {
-    top: 58.333333%;
-    right: 58.333333%;
-    bottom: 58.333333%;
-    left: 58.333333%;
-  }
-
-  .xl\:inset-8\/12 {
-    top: 66.666667%;
-    right: 66.666667%;
-    bottom: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .xl\:inset-9\/12 {
-    top: 75%;
-    right: 75%;
-    bottom: 75%;
-    left: 75%;
-  }
-
-  .xl\:inset-10\/12 {
-    top: 83.333333%;
-    right: 83.333333%;
-    bottom: 83.333333%;
-    left: 83.333333%;
-  }
-
-  .xl\:inset-11\/12 {
-    top: 91.666667%;
-    right: 91.666667%;
-    bottom: 91.666667%;
-    left: 91.666667%;
-  }
-
-  .xl\:inset-full {
-    top: 100%;
-    right: 100%;
-    bottom: 100%;
-    left: 100%;
+  .xl\:inset-inverse-right-30 {
+    top: -3rem;
+    right: -3rem;
+    bottom: -3rem;
+    left: -3rem;
   }
 
   .xl\:inset-y-0 {
@@ -197084,316 +189669,6 @@ video {
     left: 0;
   }
 
-  .xl\:inset-y-1 {
-    top: 0.25rem;
-    bottom: 0.25rem;
-  }
-
-  .xl\:inset-x-1 {
-    right: 0.25rem;
-    left: 0.25rem;
-  }
-
-  .xl\:inset-y-2 {
-    top: 0.5rem;
-    bottom: 0.5rem;
-  }
-
-  .xl\:inset-x-2 {
-    right: 0.5rem;
-    left: 0.5rem;
-  }
-
-  .xl\:inset-y-3 {
-    top: 0.75rem;
-    bottom: 0.75rem;
-  }
-
-  .xl\:inset-x-3 {
-    right: 0.75rem;
-    left: 0.75rem;
-  }
-
-  .xl\:inset-y-4 {
-    top: 1rem;
-    bottom: 1rem;
-  }
-
-  .xl\:inset-x-4 {
-    right: 1rem;
-    left: 1rem;
-  }
-
-  .xl\:inset-y-5 {
-    top: 1.25rem;
-    bottom: 1.25rem;
-  }
-
-  .xl\:inset-x-5 {
-    right: 1.25rem;
-    left: 1.25rem;
-  }
-
-  .xl\:inset-y-6 {
-    top: 1.5rem;
-    bottom: 1.5rem;
-  }
-
-  .xl\:inset-x-6 {
-    right: 1.5rem;
-    left: 1.5rem;
-  }
-
-  .xl\:inset-y-7 {
-    top: 1.75rem;
-    bottom: 1.75rem;
-  }
-
-  .xl\:inset-x-7 {
-    right: 1.75rem;
-    left: 1.75rem;
-  }
-
-  .xl\:inset-y-8 {
-    top: 2rem;
-    bottom: 2rem;
-  }
-
-  .xl\:inset-x-8 {
-    right: 2rem;
-    left: 2rem;
-  }
-
-  .xl\:inset-y-9 {
-    top: 2.25rem;
-    bottom: 2.25rem;
-  }
-
-  .xl\:inset-x-9 {
-    right: 2.25rem;
-    left: 2.25rem;
-  }
-
-  .xl\:inset-y-10 {
-    top: 2.5rem;
-    bottom: 2.5rem;
-  }
-
-  .xl\:inset-x-10 {
-    right: 2.5rem;
-    left: 2.5rem;
-  }
-
-  .xl\:inset-y-11 {
-    top: 2.75rem;
-    bottom: 2.75rem;
-  }
-
-  .xl\:inset-x-11 {
-    right: 2.75rem;
-    left: 2.75rem;
-  }
-
-  .xl\:inset-y-12 {
-    top: 3rem;
-    bottom: 3rem;
-  }
-
-  .xl\:inset-x-12 {
-    right: 3rem;
-    left: 3rem;
-  }
-
-  .xl\:inset-y-13 {
-    top: 3.25rem;
-    bottom: 3.25rem;
-  }
-
-  .xl\:inset-x-13 {
-    right: 3.25rem;
-    left: 3.25rem;
-  }
-
-  .xl\:inset-y-14 {
-    top: 3.5rem;
-    bottom: 3.5rem;
-  }
-
-  .xl\:inset-x-14 {
-    right: 3.5rem;
-    left: 3.5rem;
-  }
-
-  .xl\:inset-y-15 {
-    top: 3.75rem;
-    bottom: 3.75rem;
-  }
-
-  .xl\:inset-x-15 {
-    right: 3.75rem;
-    left: 3.75rem;
-  }
-
-  .xl\:inset-y-16 {
-    top: 4rem;
-    bottom: 4rem;
-  }
-
-  .xl\:inset-x-16 {
-    right: 4rem;
-    left: 4rem;
-  }
-
-  .xl\:inset-y-20 {
-    top: 5rem;
-    bottom: 5rem;
-  }
-
-  .xl\:inset-x-20 {
-    right: 5rem;
-    left: 5rem;
-  }
-
-  .xl\:inset-y-24 {
-    top: 6rem;
-    bottom: 6rem;
-  }
-
-  .xl\:inset-x-24 {
-    right: 6rem;
-    left: 6rem;
-  }
-
-  .xl\:inset-y-28 {
-    top: 7rem;
-    bottom: 7rem;
-  }
-
-  .xl\:inset-x-28 {
-    right: 7rem;
-    left: 7rem;
-  }
-
-  .xl\:inset-y-32 {
-    top: 8rem;
-    bottom: 8rem;
-  }
-
-  .xl\:inset-x-32 {
-    right: 8rem;
-    left: 8rem;
-  }
-
-  .xl\:inset-y-36 {
-    top: 9rem;
-    bottom: 9rem;
-  }
-
-  .xl\:inset-x-36 {
-    right: 9rem;
-    left: 9rem;
-  }
-
-  .xl\:inset-y-40 {
-    top: 10rem;
-    bottom: 10rem;
-  }
-
-  .xl\:inset-x-40 {
-    right: 10rem;
-    left: 10rem;
-  }
-
-  .xl\:inset-y-44 {
-    top: 11rem;
-    bottom: 11rem;
-  }
-
-  .xl\:inset-x-44 {
-    right: 11rem;
-    left: 11rem;
-  }
-
-  .xl\:inset-y-48 {
-    top: 12rem;
-    bottom: 12rem;
-  }
-
-  .xl\:inset-x-48 {
-    right: 12rem;
-    left: 12rem;
-  }
-
-  .xl\:inset-y-52 {
-    top: 13rem;
-    bottom: 13rem;
-  }
-
-  .xl\:inset-x-52 {
-    right: 13rem;
-    left: 13rem;
-  }
-
-  .xl\:inset-y-56 {
-    top: 14rem;
-    bottom: 14rem;
-  }
-
-  .xl\:inset-x-56 {
-    right: 14rem;
-    left: 14rem;
-  }
-
-  .xl\:inset-y-60 {
-    top: 15rem;
-    bottom: 15rem;
-  }
-
-  .xl\:inset-x-60 {
-    right: 15rem;
-    left: 15rem;
-  }
-
-  .xl\:inset-y-64 {
-    top: 16rem;
-    bottom: 16rem;
-  }
-
-  .xl\:inset-x-64 {
-    right: 16rem;
-    left: 16rem;
-  }
-
-  .xl\:inset-y-72 {
-    top: 18rem;
-    bottom: 18rem;
-  }
-
-  .xl\:inset-x-72 {
-    right: 18rem;
-    left: 18rem;
-  }
-
-  .xl\:inset-y-80 {
-    top: 20rem;
-    bottom: 20rem;
-  }
-
-  .xl\:inset-x-80 {
-    right: 20rem;
-    left: 20rem;
-  }
-
-  .xl\:inset-y-96 {
-    top: 24rem;
-    bottom: 24rem;
-  }
-
-  .xl\:inset-x-96 {
-    right: 24rem;
-    left: 24rem;
-  }
-
   .xl\:inset-y-auto {
     top: auto;
     bottom: auto;
@@ -197404,324 +189679,24 @@ video {
     left: auto;
   }
 
-  .xl\:inset-y-px {
-    top: 1px;
-    bottom: 1px;
+  .xl\:inset-y-inverse-right-10 {
+    top: -1rem;
+    bottom: -1rem;
   }
 
-  .xl\:inset-x-px {
-    right: 1px;
-    left: 1px;
+  .xl\:inset-x-inverse-right-10 {
+    right: -1rem;
+    left: -1rem;
   }
 
-  .xl\:inset-y-0\.5 {
-    top: 0.125rem;
-    bottom: 0.125rem;
+  .xl\:inset-y-inverse-right-30 {
+    top: -3rem;
+    bottom: -3rem;
   }
 
-  .xl\:inset-x-0\.5 {
-    right: 0.125rem;
-    left: 0.125rem;
-  }
-
-  .xl\:inset-y-1\.5 {
-    top: 0.375rem;
-    bottom: 0.375rem;
-  }
-
-  .xl\:inset-x-1\.5 {
-    right: 0.375rem;
-    left: 0.375rem;
-  }
-
-  .xl\:inset-y-2\.5 {
-    top: 0.625rem;
-    bottom: 0.625rem;
-  }
-
-  .xl\:inset-x-2\.5 {
-    right: 0.625rem;
-    left: 0.625rem;
-  }
-
-  .xl\:inset-y-3\.5 {
-    top: 0.875rem;
-    bottom: 0.875rem;
-  }
-
-  .xl\:inset-x-3\.5 {
-    right: 0.875rem;
-    left: 0.875rem;
-  }
-
-  .xl\:inset-y-1\/2 {
-    top: 50%;
-    bottom: 50%;
-  }
-
-  .xl\:inset-x-1\/2 {
-    right: 50%;
-    left: 50%;
-  }
-
-  .xl\:inset-y-1\/3 {
-    top: 33.333333%;
-    bottom: 33.333333%;
-  }
-
-  .xl\:inset-x-1\/3 {
-    right: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .xl\:inset-y-2\/3 {
-    top: 66.666667%;
-    bottom: 66.666667%;
-  }
-
-  .xl\:inset-x-2\/3 {
-    right: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .xl\:inset-y-1\/4 {
-    top: 25%;
-    bottom: 25%;
-  }
-
-  .xl\:inset-x-1\/4 {
-    right: 25%;
-    left: 25%;
-  }
-
-  .xl\:inset-y-2\/4 {
-    top: 50%;
-    bottom: 50%;
-  }
-
-  .xl\:inset-x-2\/4 {
-    right: 50%;
-    left: 50%;
-  }
-
-  .xl\:inset-y-3\/4 {
-    top: 75%;
-    bottom: 75%;
-  }
-
-  .xl\:inset-x-3\/4 {
-    right: 75%;
-    left: 75%;
-  }
-
-  .xl\:inset-y-1\/5 {
-    top: 20%;
-    bottom: 20%;
-  }
-
-  .xl\:inset-x-1\/5 {
-    right: 20%;
-    left: 20%;
-  }
-
-  .xl\:inset-y-2\/5 {
-    top: 40%;
-    bottom: 40%;
-  }
-
-  .xl\:inset-x-2\/5 {
-    right: 40%;
-    left: 40%;
-  }
-
-  .xl\:inset-y-3\/5 {
-    top: 60%;
-    bottom: 60%;
-  }
-
-  .xl\:inset-x-3\/5 {
-    right: 60%;
-    left: 60%;
-  }
-
-  .xl\:inset-y-4\/5 {
-    top: 80%;
-    bottom: 80%;
-  }
-
-  .xl\:inset-x-4\/5 {
-    right: 80%;
-    left: 80%;
-  }
-
-  .xl\:inset-y-1\/6 {
-    top: 16.666667%;
-    bottom: 16.666667%;
-  }
-
-  .xl\:inset-x-1\/6 {
-    right: 16.666667%;
-    left: 16.666667%;
-  }
-
-  .xl\:inset-y-2\/6 {
-    top: 33.333333%;
-    bottom: 33.333333%;
-  }
-
-  .xl\:inset-x-2\/6 {
-    right: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .xl\:inset-y-3\/6 {
-    top: 50%;
-    bottom: 50%;
-  }
-
-  .xl\:inset-x-3\/6 {
-    right: 50%;
-    left: 50%;
-  }
-
-  .xl\:inset-y-4\/6 {
-    top: 66.666667%;
-    bottom: 66.666667%;
-  }
-
-  .xl\:inset-x-4\/6 {
-    right: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .xl\:inset-y-5\/6 {
-    top: 83.333333%;
-    bottom: 83.333333%;
-  }
-
-  .xl\:inset-x-5\/6 {
-    right: 83.333333%;
-    left: 83.333333%;
-  }
-
-  .xl\:inset-y-1\/12 {
-    top: 8.333333%;
-    bottom: 8.333333%;
-  }
-
-  .xl\:inset-x-1\/12 {
-    right: 8.333333%;
-    left: 8.333333%;
-  }
-
-  .xl\:inset-y-2\/12 {
-    top: 16.666667%;
-    bottom: 16.666667%;
-  }
-
-  .xl\:inset-x-2\/12 {
-    right: 16.666667%;
-    left: 16.666667%;
-  }
-
-  .xl\:inset-y-3\/12 {
-    top: 25%;
-    bottom: 25%;
-  }
-
-  .xl\:inset-x-3\/12 {
-    right: 25%;
-    left: 25%;
-  }
-
-  .xl\:inset-y-4\/12 {
-    top: 33.333333%;
-    bottom: 33.333333%;
-  }
-
-  .xl\:inset-x-4\/12 {
-    right: 33.333333%;
-    left: 33.333333%;
-  }
-
-  .xl\:inset-y-5\/12 {
-    top: 41.666667%;
-    bottom: 41.666667%;
-  }
-
-  .xl\:inset-x-5\/12 {
-    right: 41.666667%;
-    left: 41.666667%;
-  }
-
-  .xl\:inset-y-6\/12 {
-    top: 50%;
-    bottom: 50%;
-  }
-
-  .xl\:inset-x-6\/12 {
-    right: 50%;
-    left: 50%;
-  }
-
-  .xl\:inset-y-7\/12 {
-    top: 58.333333%;
-    bottom: 58.333333%;
-  }
-
-  .xl\:inset-x-7\/12 {
-    right: 58.333333%;
-    left: 58.333333%;
-  }
-
-  .xl\:inset-y-8\/12 {
-    top: 66.666667%;
-    bottom: 66.666667%;
-  }
-
-  .xl\:inset-x-8\/12 {
-    right: 66.666667%;
-    left: 66.666667%;
-  }
-
-  .xl\:inset-y-9\/12 {
-    top: 75%;
-    bottom: 75%;
-  }
-
-  .xl\:inset-x-9\/12 {
-    right: 75%;
-    left: 75%;
-  }
-
-  .xl\:inset-y-10\/12 {
-    top: 83.333333%;
-    bottom: 83.333333%;
-  }
-
-  .xl\:inset-x-10\/12 {
-    right: 83.333333%;
-    left: 83.333333%;
-  }
-
-  .xl\:inset-y-11\/12 {
-    top: 91.666667%;
-    bottom: 91.666667%;
-  }
-
-  .xl\:inset-x-11\/12 {
-    right: 91.666667%;
-    left: 91.666667%;
-  }
-
-  .xl\:inset-y-full {
-    top: 100%;
-    bottom: 100%;
-  }
-
-  .xl\:inset-x-full {
-    right: 100%;
-    left: 100%;
+  .xl\:inset-x-inverse-right-30 {
+    right: -3rem;
+    left: -3rem;
   }
 
   .xl\:top-0 {
@@ -197740,502 +189715,6 @@ video {
     left: 0;
   }
 
-  .xl\:top-1 {
-    top: 0.25rem;
-  }
-
-  .xl\:right-1 {
-    right: 0.25rem;
-  }
-
-  .xl\:bottom-1 {
-    bottom: 0.25rem;
-  }
-
-  .xl\:left-1 {
-    left: 0.25rem;
-  }
-
-  .xl\:top-2 {
-    top: 0.5rem;
-  }
-
-  .xl\:right-2 {
-    right: 0.5rem;
-  }
-
-  .xl\:bottom-2 {
-    bottom: 0.5rem;
-  }
-
-  .xl\:left-2 {
-    left: 0.5rem;
-  }
-
-  .xl\:top-3 {
-    top: 0.75rem;
-  }
-
-  .xl\:right-3 {
-    right: 0.75rem;
-  }
-
-  .xl\:bottom-3 {
-    bottom: 0.75rem;
-  }
-
-  .xl\:left-3 {
-    left: 0.75rem;
-  }
-
-  .xl\:top-4 {
-    top: 1rem;
-  }
-
-  .xl\:right-4 {
-    right: 1rem;
-  }
-
-  .xl\:bottom-4 {
-    bottom: 1rem;
-  }
-
-  .xl\:left-4 {
-    left: 1rem;
-  }
-
-  .xl\:top-5 {
-    top: 1.25rem;
-  }
-
-  .xl\:right-5 {
-    right: 1.25rem;
-  }
-
-  .xl\:bottom-5 {
-    bottom: 1.25rem;
-  }
-
-  .xl\:left-5 {
-    left: 1.25rem;
-  }
-
-  .xl\:top-6 {
-    top: 1.5rem;
-  }
-
-  .xl\:right-6 {
-    right: 1.5rem;
-  }
-
-  .xl\:bottom-6 {
-    bottom: 1.5rem;
-  }
-
-  .xl\:left-6 {
-    left: 1.5rem;
-  }
-
-  .xl\:top-7 {
-    top: 1.75rem;
-  }
-
-  .xl\:right-7 {
-    right: 1.75rem;
-  }
-
-  .xl\:bottom-7 {
-    bottom: 1.75rem;
-  }
-
-  .xl\:left-7 {
-    left: 1.75rem;
-  }
-
-  .xl\:top-8 {
-    top: 2rem;
-  }
-
-  .xl\:right-8 {
-    right: 2rem;
-  }
-
-  .xl\:bottom-8 {
-    bottom: 2rem;
-  }
-
-  .xl\:left-8 {
-    left: 2rem;
-  }
-
-  .xl\:top-9 {
-    top: 2.25rem;
-  }
-
-  .xl\:right-9 {
-    right: 2.25rem;
-  }
-
-  .xl\:bottom-9 {
-    bottom: 2.25rem;
-  }
-
-  .xl\:left-9 {
-    left: 2.25rem;
-  }
-
-  .xl\:top-10 {
-    top: 2.5rem;
-  }
-
-  .xl\:right-10 {
-    right: 2.5rem;
-  }
-
-  .xl\:bottom-10 {
-    bottom: 2.5rem;
-  }
-
-  .xl\:left-10 {
-    left: 2.5rem;
-  }
-
-  .xl\:top-11 {
-    top: 2.75rem;
-  }
-
-  .xl\:right-11 {
-    right: 2.75rem;
-  }
-
-  .xl\:bottom-11 {
-    bottom: 2.75rem;
-  }
-
-  .xl\:left-11 {
-    left: 2.75rem;
-  }
-
-  .xl\:top-12 {
-    top: 3rem;
-  }
-
-  .xl\:right-12 {
-    right: 3rem;
-  }
-
-  .xl\:bottom-12 {
-    bottom: 3rem;
-  }
-
-  .xl\:left-12 {
-    left: 3rem;
-  }
-
-  .xl\:top-13 {
-    top: 3.25rem;
-  }
-
-  .xl\:right-13 {
-    right: 3.25rem;
-  }
-
-  .xl\:bottom-13 {
-    bottom: 3.25rem;
-  }
-
-  .xl\:left-13 {
-    left: 3.25rem;
-  }
-
-  .xl\:top-14 {
-    top: 3.5rem;
-  }
-
-  .xl\:right-14 {
-    right: 3.5rem;
-  }
-
-  .xl\:bottom-14 {
-    bottom: 3.5rem;
-  }
-
-  .xl\:left-14 {
-    left: 3.5rem;
-  }
-
-  .xl\:top-15 {
-    top: 3.75rem;
-  }
-
-  .xl\:right-15 {
-    right: 3.75rem;
-  }
-
-  .xl\:bottom-15 {
-    bottom: 3.75rem;
-  }
-
-  .xl\:left-15 {
-    left: 3.75rem;
-  }
-
-  .xl\:top-16 {
-    top: 4rem;
-  }
-
-  .xl\:right-16 {
-    right: 4rem;
-  }
-
-  .xl\:bottom-16 {
-    bottom: 4rem;
-  }
-
-  .xl\:left-16 {
-    left: 4rem;
-  }
-
-  .xl\:top-20 {
-    top: 5rem;
-  }
-
-  .xl\:right-20 {
-    right: 5rem;
-  }
-
-  .xl\:bottom-20 {
-    bottom: 5rem;
-  }
-
-  .xl\:left-20 {
-    left: 5rem;
-  }
-
-  .xl\:top-24 {
-    top: 6rem;
-  }
-
-  .xl\:right-24 {
-    right: 6rem;
-  }
-
-  .xl\:bottom-24 {
-    bottom: 6rem;
-  }
-
-  .xl\:left-24 {
-    left: 6rem;
-  }
-
-  .xl\:top-28 {
-    top: 7rem;
-  }
-
-  .xl\:right-28 {
-    right: 7rem;
-  }
-
-  .xl\:bottom-28 {
-    bottom: 7rem;
-  }
-
-  .xl\:left-28 {
-    left: 7rem;
-  }
-
-  .xl\:top-32 {
-    top: 8rem;
-  }
-
-  .xl\:right-32 {
-    right: 8rem;
-  }
-
-  .xl\:bottom-32 {
-    bottom: 8rem;
-  }
-
-  .xl\:left-32 {
-    left: 8rem;
-  }
-
-  .xl\:top-36 {
-    top: 9rem;
-  }
-
-  .xl\:right-36 {
-    right: 9rem;
-  }
-
-  .xl\:bottom-36 {
-    bottom: 9rem;
-  }
-
-  .xl\:left-36 {
-    left: 9rem;
-  }
-
-  .xl\:top-40 {
-    top: 10rem;
-  }
-
-  .xl\:right-40 {
-    right: 10rem;
-  }
-
-  .xl\:bottom-40 {
-    bottom: 10rem;
-  }
-
-  .xl\:left-40 {
-    left: 10rem;
-  }
-
-  .xl\:top-44 {
-    top: 11rem;
-  }
-
-  .xl\:right-44 {
-    right: 11rem;
-  }
-
-  .xl\:bottom-44 {
-    bottom: 11rem;
-  }
-
-  .xl\:left-44 {
-    left: 11rem;
-  }
-
-  .xl\:top-48 {
-    top: 12rem;
-  }
-
-  .xl\:right-48 {
-    right: 12rem;
-  }
-
-  .xl\:bottom-48 {
-    bottom: 12rem;
-  }
-
-  .xl\:left-48 {
-    left: 12rem;
-  }
-
-  .xl\:top-52 {
-    top: 13rem;
-  }
-
-  .xl\:right-52 {
-    right: 13rem;
-  }
-
-  .xl\:bottom-52 {
-    bottom: 13rem;
-  }
-
-  .xl\:left-52 {
-    left: 13rem;
-  }
-
-  .xl\:top-56 {
-    top: 14rem;
-  }
-
-  .xl\:right-56 {
-    right: 14rem;
-  }
-
-  .xl\:bottom-56 {
-    bottom: 14rem;
-  }
-
-  .xl\:left-56 {
-    left: 14rem;
-  }
-
-  .xl\:top-60 {
-    top: 15rem;
-  }
-
-  .xl\:right-60 {
-    right: 15rem;
-  }
-
-  .xl\:bottom-60 {
-    bottom: 15rem;
-  }
-
-  .xl\:left-60 {
-    left: 15rem;
-  }
-
-  .xl\:top-64 {
-    top: 16rem;
-  }
-
-  .xl\:right-64 {
-    right: 16rem;
-  }
-
-  .xl\:bottom-64 {
-    bottom: 16rem;
-  }
-
-  .xl\:left-64 {
-    left: 16rem;
-  }
-
-  .xl\:top-72 {
-    top: 18rem;
-  }
-
-  .xl\:right-72 {
-    right: 18rem;
-  }
-
-  .xl\:bottom-72 {
-    bottom: 18rem;
-  }
-
-  .xl\:left-72 {
-    left: 18rem;
-  }
-
-  .xl\:top-80 {
-    top: 20rem;
-  }
-
-  .xl\:right-80 {
-    right: 20rem;
-  }
-
-  .xl\:bottom-80 {
-    bottom: 20rem;
-  }
-
-  .xl\:left-80 {
-    left: 20rem;
-  }
-
-  .xl\:top-96 {
-    top: 24rem;
-  }
-
-  .xl\:right-96 {
-    right: 24rem;
-  }
-
-  .xl\:bottom-96 {
-    bottom: 24rem;
-  }
-
-  .xl\:left-96 {
-    left: 24rem;
-  }
-
   .xl\:top-auto {
     top: auto;
   }
@@ -198252,516 +189731,36 @@ video {
     left: auto;
   }
 
-  .xl\:top-px {
-    top: 1px;
+  .xl\:top-inverse-right-10 {
+    top: -1rem;
   }
 
-  .xl\:right-px {
-    right: 1px;
+  .xl\:right-inverse-right-10 {
+    right: -1rem;
   }
 
-  .xl\:bottom-px {
-    bottom: 1px;
+  .xl\:bottom-inverse-right-10 {
+    bottom: -1rem;
   }
 
-  .xl\:left-px {
-    left: 1px;
+  .xl\:left-inverse-right-10 {
+    left: -1rem;
   }
 
-  .xl\:top-0\.5 {
-    top: 0.125rem;
+  .xl\:top-inverse-right-30 {
+    top: -3rem;
   }
 
-  .xl\:right-0\.5 {
-    right: 0.125rem;
+  .xl\:right-inverse-right-30 {
+    right: -3rem;
   }
 
-  .xl\:bottom-0\.5 {
-    bottom: 0.125rem;
+  .xl\:bottom-inverse-right-30 {
+    bottom: -3rem;
   }
 
-  .xl\:left-0\.5 {
-    left: 0.125rem;
-  }
-
-  .xl\:top-1\.5 {
-    top: 0.375rem;
-  }
-
-  .xl\:right-1\.5 {
-    right: 0.375rem;
-  }
-
-  .xl\:bottom-1\.5 {
-    bottom: 0.375rem;
-  }
-
-  .xl\:left-1\.5 {
-    left: 0.375rem;
-  }
-
-  .xl\:top-2\.5 {
-    top: 0.625rem;
-  }
-
-  .xl\:right-2\.5 {
-    right: 0.625rem;
-  }
-
-  .xl\:bottom-2\.5 {
-    bottom: 0.625rem;
-  }
-
-  .xl\:left-2\.5 {
-    left: 0.625rem;
-  }
-
-  .xl\:top-3\.5 {
-    top: 0.875rem;
-  }
-
-  .xl\:right-3\.5 {
-    right: 0.875rem;
-  }
-
-  .xl\:bottom-3\.5 {
-    bottom: 0.875rem;
-  }
-
-  .xl\:left-3\.5 {
-    left: 0.875rem;
-  }
-
-  .xl\:top-1\/2 {
-    top: 50%;
-  }
-
-  .xl\:right-1\/2 {
-    right: 50%;
-  }
-
-  .xl\:bottom-1\/2 {
-    bottom: 50%;
-  }
-
-  .xl\:left-1\/2 {
-    left: 50%;
-  }
-
-  .xl\:top-1\/3 {
-    top: 33.333333%;
-  }
-
-  .xl\:right-1\/3 {
-    right: 33.333333%;
-  }
-
-  .xl\:bottom-1\/3 {
-    bottom: 33.333333%;
-  }
-
-  .xl\:left-1\/3 {
-    left: 33.333333%;
-  }
-
-  .xl\:top-2\/3 {
-    top: 66.666667%;
-  }
-
-  .xl\:right-2\/3 {
-    right: 66.666667%;
-  }
-
-  .xl\:bottom-2\/3 {
-    bottom: 66.666667%;
-  }
-
-  .xl\:left-2\/3 {
-    left: 66.666667%;
-  }
-
-  .xl\:top-1\/4 {
-    top: 25%;
-  }
-
-  .xl\:right-1\/4 {
-    right: 25%;
-  }
-
-  .xl\:bottom-1\/4 {
-    bottom: 25%;
-  }
-
-  .xl\:left-1\/4 {
-    left: 25%;
-  }
-
-  .xl\:top-2\/4 {
-    top: 50%;
-  }
-
-  .xl\:right-2\/4 {
-    right: 50%;
-  }
-
-  .xl\:bottom-2\/4 {
-    bottom: 50%;
-  }
-
-  .xl\:left-2\/4 {
-    left: 50%;
-  }
-
-  .xl\:top-3\/4 {
-    top: 75%;
-  }
-
-  .xl\:right-3\/4 {
-    right: 75%;
-  }
-
-  .xl\:bottom-3\/4 {
-    bottom: 75%;
-  }
-
-  .xl\:left-3\/4 {
-    left: 75%;
-  }
-
-  .xl\:top-1\/5 {
-    top: 20%;
-  }
-
-  .xl\:right-1\/5 {
-    right: 20%;
-  }
-
-  .xl\:bottom-1\/5 {
-    bottom: 20%;
-  }
-
-  .xl\:left-1\/5 {
-    left: 20%;
-  }
-
-  .xl\:top-2\/5 {
-    top: 40%;
-  }
-
-  .xl\:right-2\/5 {
-    right: 40%;
-  }
-
-  .xl\:bottom-2\/5 {
-    bottom: 40%;
-  }
-
-  .xl\:left-2\/5 {
-    left: 40%;
-  }
-
-  .xl\:top-3\/5 {
-    top: 60%;
-  }
-
-  .xl\:right-3\/5 {
-    right: 60%;
-  }
-
-  .xl\:bottom-3\/5 {
-    bottom: 60%;
-  }
-
-  .xl\:left-3\/5 {
-    left: 60%;
-  }
-
-  .xl\:top-4\/5 {
-    top: 80%;
-  }
-
-  .xl\:right-4\/5 {
-    right: 80%;
-  }
-
-  .xl\:bottom-4\/5 {
-    bottom: 80%;
-  }
-
-  .xl\:left-4\/5 {
-    left: 80%;
-  }
-
-  .xl\:top-1\/6 {
-    top: 16.666667%;
-  }
-
-  .xl\:right-1\/6 {
-    right: 16.666667%;
-  }
-
-  .xl\:bottom-1\/6 {
-    bottom: 16.666667%;
-  }
-
-  .xl\:left-1\/6 {
-    left: 16.666667%;
-  }
-
-  .xl\:top-2\/6 {
-    top: 33.333333%;
-  }
-
-  .xl\:right-2\/6 {
-    right: 33.333333%;
-  }
-
-  .xl\:bottom-2\/6 {
-    bottom: 33.333333%;
-  }
-
-  .xl\:left-2\/6 {
-    left: 33.333333%;
-  }
-
-  .xl\:top-3\/6 {
-    top: 50%;
-  }
-
-  .xl\:right-3\/6 {
-    right: 50%;
-  }
-
-  .xl\:bottom-3\/6 {
-    bottom: 50%;
-  }
-
-  .xl\:left-3\/6 {
-    left: 50%;
-  }
-
-  .xl\:top-4\/6 {
-    top: 66.666667%;
-  }
-
-  .xl\:right-4\/6 {
-    right: 66.666667%;
-  }
-
-  .xl\:bottom-4\/6 {
-    bottom: 66.666667%;
-  }
-
-  .xl\:left-4\/6 {
-    left: 66.666667%;
-  }
-
-  .xl\:top-5\/6 {
-    top: 83.333333%;
-  }
-
-  .xl\:right-5\/6 {
-    right: 83.333333%;
-  }
-
-  .xl\:bottom-5\/6 {
-    bottom: 83.333333%;
-  }
-
-  .xl\:left-5\/6 {
-    left: 83.333333%;
-  }
-
-  .xl\:top-1\/12 {
-    top: 8.333333%;
-  }
-
-  .xl\:right-1\/12 {
-    right: 8.333333%;
-  }
-
-  .xl\:bottom-1\/12 {
-    bottom: 8.333333%;
-  }
-
-  .xl\:left-1\/12 {
-    left: 8.333333%;
-  }
-
-  .xl\:top-2\/12 {
-    top: 16.666667%;
-  }
-
-  .xl\:right-2\/12 {
-    right: 16.666667%;
-  }
-
-  .xl\:bottom-2\/12 {
-    bottom: 16.666667%;
-  }
-
-  .xl\:left-2\/12 {
-    left: 16.666667%;
-  }
-
-  .xl\:top-3\/12 {
-    top: 25%;
-  }
-
-  .xl\:right-3\/12 {
-    right: 25%;
-  }
-
-  .xl\:bottom-3\/12 {
-    bottom: 25%;
-  }
-
-  .xl\:left-3\/12 {
-    left: 25%;
-  }
-
-  .xl\:top-4\/12 {
-    top: 33.333333%;
-  }
-
-  .xl\:right-4\/12 {
-    right: 33.333333%;
-  }
-
-  .xl\:bottom-4\/12 {
-    bottom: 33.333333%;
-  }
-
-  .xl\:left-4\/12 {
-    left: 33.333333%;
-  }
-
-  .xl\:top-5\/12 {
-    top: 41.666667%;
-  }
-
-  .xl\:right-5\/12 {
-    right: 41.666667%;
-  }
-
-  .xl\:bottom-5\/12 {
-    bottom: 41.666667%;
-  }
-
-  .xl\:left-5\/12 {
-    left: 41.666667%;
-  }
-
-  .xl\:top-6\/12 {
-    top: 50%;
-  }
-
-  .xl\:right-6\/12 {
-    right: 50%;
-  }
-
-  .xl\:bottom-6\/12 {
-    bottom: 50%;
-  }
-
-  .xl\:left-6\/12 {
-    left: 50%;
-  }
-
-  .xl\:top-7\/12 {
-    top: 58.333333%;
-  }
-
-  .xl\:right-7\/12 {
-    right: 58.333333%;
-  }
-
-  .xl\:bottom-7\/12 {
-    bottom: 58.333333%;
-  }
-
-  .xl\:left-7\/12 {
-    left: 58.333333%;
-  }
-
-  .xl\:top-8\/12 {
-    top: 66.666667%;
-  }
-
-  .xl\:right-8\/12 {
-    right: 66.666667%;
-  }
-
-  .xl\:bottom-8\/12 {
-    bottom: 66.666667%;
-  }
-
-  .xl\:left-8\/12 {
-    left: 66.666667%;
-  }
-
-  .xl\:top-9\/12 {
-    top: 75%;
-  }
-
-  .xl\:right-9\/12 {
-    right: 75%;
-  }
-
-  .xl\:bottom-9\/12 {
-    bottom: 75%;
-  }
-
-  .xl\:left-9\/12 {
-    left: 75%;
-  }
-
-  .xl\:top-10\/12 {
-    top: 83.333333%;
-  }
-
-  .xl\:right-10\/12 {
-    right: 83.333333%;
-  }
-
-  .xl\:bottom-10\/12 {
-    bottom: 83.333333%;
-  }
-
-  .xl\:left-10\/12 {
-    left: 83.333333%;
-  }
-
-  .xl\:top-11\/12 {
-    top: 91.666667%;
-  }
-
-  .xl\:right-11\/12 {
-    right: 91.666667%;
-  }
-
-  .xl\:bottom-11\/12 {
-    bottom: 91.666667%;
-  }
-
-  .xl\:left-11\/12 {
-    left: 91.666667%;
-  }
-
-  .xl\:top-full {
-    top: 100%;
-  }
-
-  .xl\:right-full {
-    right: 100%;
-  }
-
-  .xl\:bottom-full {
-    bottom: 100%;
-  }
-
-  .xl\:left-full {
-    left: 100%;
+  .xl\:left-inverse-right-30 {
+    left: -3rem;
   }
 
   .xl\:resize-none {
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/tile.png b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/tile.png
new file mode 100644
index 0000000000000000000000000000000000000000..aab827d20eb67821557a13f1f6ffdc26fb5b7a6b
GIT binary patch
literal 10561
zcmeI2c~H~Iw#Pd$AOQqrQvvZh5<(CnqN2#|0)(9aVOJPg6h%M~j35R^aTF9~-^sA)
z6+{fmVpuXdYzYL#0fey1<^lx6Fag<K2k(9L-v6)aR=pxssgPbypZ<3D`Efp-JGR!Q
zTSVnW0RUSFW+#aN2;l^85n)&oC;5vs{6Ghpxr6{92LBe5Mu5!h9k37)LNq-N%GipZ
z;TM#jv6V3Z&lAL!y@UWz?IxTwcDRa|8tA>G;3OyXR@#N8F1hpF+S)HU)*s2FkODL3
z%c^$@4`;i*lnb)6rT}Yw8Et;f6KHDVwV}X<0vif!DDeM60lDc%$l-VXdZ+ItbscrR
zH#&cCbcs8b*0u0TezN4-`IQcGlsW*Zs^kM?p0~cz)8=>I$#z=aw6Qd?j<J@GuZVJI
zb92u-yy=Kn@;3gWiB<C&mW;>-`Q7F%D3D%Z8I;#ub!Udtl7!Pt+M9$;+See%h*8Bw
z7gal38kEt~Y!{1*AK*NZAbvlYx9FeU)!<|{cuOWF(83F?elt-josMepJ1m<lIo}>p
zCI5`|#T-z!`NS-p8t6F5cTB{dNuf!lAHZNVop4xbm5wI~Z82*euQ7ljax6J%$ex6(
zC@Mrv_*QJ0beUgiLZ<<69dlxpSf@g7;9t{ci+QRfCo{6WQ<r*P<sFQPau8+8q;N$6
z1+Vokrz>giGRZo(4WE-Bq`3)BQ-Y^qkse7Jef~rW43A)JR!`SehH=&QshyE!3`0Ag
zX#TvauA~19E}|}1$fN)uxkpEfeEH_UQKyI4=#hKN+l0-iZSnlzd()4L9jQ9@pX?DJ
z=uB?6gRN562Oj?hO@23N^a4WMjDU{!$4B$>-)EAlb)7`O@XUBMHSdCfu6R;hNUsga
zJ_=9y9m=?^h}w29E<}&^)8s#JY6vhx5@k*vHf()(*WA+#dVHw2iFctrD<Aqh)Ao{D
ztD50rhZa8t&3lIkk4xcK%<XW_NYG!Fy=gT+bq~37X9`0T&P0`0XKt+X=%8v~;?7w<
zM$ja-U1QMV;hhz$T)q922|=4xd)BfqIu!uJOLwFPAFd6RK8|z(?KtSxSa;)l*J2c_
z?YkJPzinYmCbE);R$Lqxe*^ONMC5?a1V7ESGP0y1kq0#>f0k`bCb3d2b1Zf?$QapM
zxP6g`#~iE=X=sgbs)_FWLkcjW67wdalK5qbC22tjjHW6E^ETt>nXJfXvXuZVxiGB;
z>1Jh7Bwz){FKfHD#u=RlVA$8sCyUP~5?xW?MPVW8mDbm~96l11E7W`*>O@@KZ)9O^
zPAzDg$($c#`@_AJg|TowP@NOLNznS37Cl0ryBQ2$vx)n9G)wB7DFGdNR(8C-v={}d
z`v|S(M+k#q?~lB_n<(|kgxcSpgan=nC8)quJj36fDhpk_SN=kwVh8|E#$SW?2!ZQm
zgvx7TDfCwUQXv4<s*PC|USUc70i6oxPC)bd)c%CtKtN%Q6|8({M7{V8y0J}-KYASj
z+<iME40+0LW8r9HFFrIE&~nhg^MrQaP%z>UZ1<{V@h<z1-n=d(0Me6JxchS`KW{&0
z42|wl+-0(3Ge}Rb)sN>3zo5dlTklI0^b7s3BHPMcCXeB%UAP{x!xWFuSon35$AZ$2
zvTD?Xrb=D3Tr$#VJBg^IG8B9Y1Ik0AI7)2#CfC^m$XB!a$FjpW1N9sN=M6dBNG$3D
z(nG`)fS|R%kVaw#CW3Iu_=QM>&cTCWPCyGj^#se<nD){3j2Q6jWyhUp9WfGvD<bwg
zFKBQV96%*Na&iEn0k=BdVEb*&xh+8RVVp!kA<EU32<@lbwwpl$O9R>453ta=WTWlJ
z$GvXCb-Y91zPTFs!<G-nE13=@srjTisPHxhs`t~uYCNSk&lU|d7o8PfM{HWRHpaMg
zixWkha*Y-Rng>4DHAo7*g(2wENwdBL;&w1h3vV<S3#4v=F5h|ZB9AWw7^f=nT+>zI
zKIlx2w-1#g6#l3XZVmOKER7+0aOl?coiP#cJgydtPz1wTliA!EE5xCExBzy<nI^IY
z+!=LhVO~xW>n&9(hS*ZCPFGG`g~D+#*xshdI(6}&HmUX6mMQ*x?QTH%T8A$?TXN*>
zedyb#vo5%+DQ#CdU$%gtI(O>XqTw*|5mF{{8cJ4HD%a1BK!9qO`&$#UDwiGsd8ogK
z52nZ>6kl;y3V4RMT7^xzPpF$yHQ=mVd>cCA?iq>!%5`U}MJp!3?+P+NUyV}F?iqd2
zGBUvx)D)((K4v#JvS>7!b8T>`=*b}#lJ@AH{jl<c_xx~Y)lt8!s<XdPx?zkES$#4t
z%qmrW*{%SFgKAD<$(R4xEYdr%Mf~@$Ku;7p*~N-nDR0<C8&fQjgnA~J*=5jX2pSzX
zSms1e03(=;g?K7Xbw~z)s*$<xHHCBR5bp=*Ku-}^r)(jbio*_=pg|Cwrt62>{yBYC
zI2MX)Qc-i#kA2EVLOa|}0x$+zn6F1+TwXLc{;X*3sS3NE48f}%<UFOq#d70bsNbh1
zo6L9s9ezx7m^hxJBb)M!DF;vC5>2Nh*qY4aW`>Oead`aWr|hjpw0`G3Zc3re=Siu;
zkjwG?sJl<?#*^UjnAWuvi_4T~7=hl6cXKcHv}PRN8}%Lq_v7u9JKXS+Z-q_S3)c6S
zOX@we(3;Bdv9&p4C8}z5&Wv;A@~Ss-JPiqk_h4*PvhIai`>e8c)IN=W?*Jzh$U3?V
z?Tkory}V7yv$n8F&A9|2V05H4>4pRMlzwZH4!*_vh^7LZSQ(o%dTL%Y4gD}<I?4%v
z(4GS}nNz~P76f$LK<_oZG40vxkmTtTOah>M3sv2hlEj#T{uZ?~9_vNs(s%|)U$&6>
zuQDnKFtNwavADeU+1Xo(*rD!FLZKeIEjLlhIlsUEs%zC5=S%om!mp8MBs5`UDOkQA
zMN`TUX=vBWP<U10ujQge4;~|U9)Oy5VjNW5eSMd!ixqa+ge`Clo|&>UEGf&*68O!)
zIp4c^RIJ1F>*N)pfr>6O30yEYr%dy%>-F)t4XHZ=0Jx-LvmP`A0b}E}p}>X$8wzYF
zu%W<)0vif!D6pZxh64W~1>z?kAw9DqcPCUXFFh*>J`Iz7eX^9NBuqm-D?M$3DVNI{
zd9JoKZGIutD-sVm;zV_^cuiogWt83-L&LJXGoqfq2@-@cdfM=Uw|*G<0o}Z1xm=#x
z^F~|;FqV~VR7`Wr@~Rf;$1pykEUR3Uvp5D*F5{w+v32pq441>dba=2^<`4qxaN~`|
zWvbM2_u5<%W%c+pOOy+;#~E!eUa)>Ps?F(e3ItK{XDj@9WGl|A-R4ZDWfUukaS`S|
zHD7G4qikFt47gvB$r}q$lKiUxrY@Dxvwr21tFCp-RxZYU)kVT&Gx+p))LX!lic6ER
z(Y-M358;&-8|g5srrZ5%At^m(7HgRb5n&5C<(a6bFf^eUUw)0JMsh>~y;}F!Ik)+~
zzPgfZr^WErB*w7GGT7vvY_z!aT_?XFldXH#1}4GRBV6r`$qr|k-0$u)b6$t*<rq|G
zsD&o$H)d4x&~f_F*U4s>DAs#N@H-B#;@^yoc#qC$ecK`qsY?8p#%pba$`Y(+lqvu-
zuFTfS!~0e0qrKonw-se)yHWei?8vq9f?S@SIM<fft%tEuQ;Qyfyx?714Yj{zF_Yu~
zdEdQKYW4-=n%^FyVj*rZNel^_sBBzPi@^ZKwA<^Od=sAcrR7z3unCG#(8B-1ca{4c
zV#dGK&%ch?OYVF+#Mo-mux-0@tW5HaKec>xJA)Bmc5fm!jbv*QHRqRq<1Y>?S_pRD
zYesed!VDC2ZdNv3v17H{Tl7CfiMNCWQt1`06Q%r9I5p`f9)+7gdBc>Y&Ql*&;M!c*
zf&;K}fo!Yt&j20Hn0Qe$RL&p~n<x8F?3XDvq7Rae91U_7Ut81-P*&9E-RA;$OKWM!
zb5Nwvl*_!*YSn$XI%z-|P(G3|Td&UjV@8pRffS_cS)(?|9toyQF7-ir;tCDz(#IdH
zb$b3<1_DKr-D#_C;UA?MWuvp<5XiV_T!ozQ2OcaMZntJm9RUo-#H7;v+S7v%v+AQs
z5KSGix$BX>A`CvT%d!VP<ZOB&pg`MF!$RDB8xWvAZKyhIe99z4Oi+HTRomAsBrJ(r
z<@gAIv>Z9Q`HTUc0%5fgmhIA?0NGPe2BClD>KP-L^i!qxoHrcY4j4Wp;!N`raveuG
z@2t*?d=roWlk>4p|L_arHbXrH?CMqw4{|WTI5|?;5Q_X45&Kwp^d?_;9j=Ym{orjE
z-3;RSO=}!_RgN}WRg|Gn)E-^=Wy#PxQ#+v3)7t0!MYNdc-#3R>IwJE9#q{5*DNpTL
zm4tSCwG;juGERIO1VAOWYVO}KF3)sM1d?&-nsZ9rE$57JAaq2fX|Yxpcuq%F<#Y&O
zq8BRED@Hf3<1#E0515>rp~yu(hu7AW`A#vQv7osQ1FZi=5VMmZ1^WmQFr_EV9&8bS
z!kYy@?1|T|_Z3jV*Y6?)I58}?a?V562(o-?oYjG59|YLi)2Jvs_=6LUoKq@+*XsY%
zTUf+_SL-SyB75)cP3su)B0qOB9{>>_jvmv4Dg*^R_4=X4P;*5h<Y_;Dx?ZceOW6h~
zXliZQkPzab0_m?V?cFyS`ub8O1vVbII1hIL)<)^yOSSB#cmjgg57^zinxSigMIx~O
z*p@7j^wg3Bf$0<rf?XX$OIqRdw{;^5@40VOA$w9{zFoQyEJ9DGtZy*1Me$I_68w#T
zUentp%`i>GQ|QGd%Z9u($7CmXJkDwtQ6j8)l}`ta_Q7%XmZ0){FF-!_eifg~vq2n!
z=lmGcp~s)uJU*a`Lx5c0!{cj^6P_aoj?Cw>3fyj*8ieYam*0<;=A#5>z{BU&KBH;Y
zpByy^x!yo(XnWVKL^V1UitbmLKV{#C1d5X#5YAz1`g*xWZh@lIXDB9%K3UuH=Mt3h
zXw&rHWT!|q7>$}>pKvr0-qTce?;9UG107b}dF@f5`y78rymprY>V+@;h-S>ikoqTA
z%n2nB-7OgO{$1DYc$0l?bF3$XX)zbywfev2zpNi&?tVEKBL{|ylx-%Ya$fG*n;gSC
ztCJ?ZgOVt<qY>{MRUN_h-(@hQKO_n$X+ie(=lS*Bdlq{c3OgWO-_e>G<HO!^dFdy>
zVD-s{U8pw0y7eCs(iDM%WTIF_+f#6=ISME+dv@wB9V7TQ-GW#LkD)KG6CLmYU#nsS
z;mpn7E<<CmCiI=vAR`Ed@W({rgjNoUg>f&g5KD&4o6_?jUu)+@+$o<hg>i9a9CF74
zIJ^t{ahrDPyTBDWxW?9_v|`8G1(U7IyYQ`u*kTxq(?0WOVluWp8pf#@c00geJ^MWo
zdvJk$;J9JW)x=xyX2%L4Zb?9^H~KEc(^ho7j!xP{!N;$)Mz8vtQStls4)-5m=WeVx
z+!sU2{d|7AHBh$A9nx=bJcCZeVFRICmuTseJ(*fQrmYWZ&V93hkE-=cyDvNN2Xkzw
z{gB2EtY3fKmtmIck~{5;86V+REBb0nQo|xZQ_A$v<ds)?8C}p^#bu%nT0IqV!?@&>
zKyI$&{IU15{iW$yKLxx&0O#1T)_&xwMIC!ZVmk*bRHTPi7cj;G53h^|8LxR512JjE
z@HD=%<!LzpEK<5sT9de6#)XIJdjCvEk>JMEywxU?W*Bh8kh8jEHGRWcMfLR1QU=y%
z%n^q{fNu3$<13aKEX9t>hM{mno700!H8{5##DC~Nrj21Y6xdK;LxBwi{?8TYo-&NP
W_grym0wpf6O*mzJvh28L%zpun$wcS?

literal 0
HcmV?d00001

diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflow-designer.html b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflow-designer.html
new file mode 100644
index 000000000..d213724ad
--- /dev/null
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflow-designer.html
@@ -0,0 +1,405 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Elsa Dashboard</title>
+    <base href="~/">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+    <link rel="stylesheet" href="/tailwind.css">
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.0/joint.css">
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.js" defer=""></script>
+</head>
+<body class="antialiased font-sans bg-gray-200 overflow-hidden">
+<div>
+    <div style="min-height: 640px;" class="bg-gray-100">
+
+        <div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" x-keydown.window.escape="sidebarOpen = false">
+            <div x-show="sidebarOpen" class="md:hidden" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state." style="display: none;">
+    <div class="fixed inset-0 flex z-40">
+        <div x-on:click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0" style="display: none;">
+            <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
+        </div>
+        <div x-show="sidebarOpen" x-description="Off-canvas menu, show/hide based on off-canvas menu state." x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="relative flex-1 flex flex-col max-w-xs w-full bg-white" style="display: none;">
+            <div class="absolute top-0 right-0 -mr-14 p-1">
+                <button x-show="sidebarOpen" x-on:click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar" style="display: none;">
+                    <svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                    </svg>
+                </button>
+            </div>
+            <div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
+                <div class="flex-shrink-0 flex items-center px-4">
+                    <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-logo-on-white.svg" alt="Workflow">
+                </div>
+                <nav class="mt-5 px-2 space-y-1">
+                    
+                    <a href="/workflows.html" class="group flex items-center px-2 py-2 text-base leading-6 font-medium text-gray-600 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-100 transition ease-in-out duration-150">
+                        <svg class="mr-4 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" x-description="Heroicon name: folder" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
+                        </svg>
+                        Workflows
+                    </a>
+
+                    <a href="/custom-activities.html" class="group flex items-center px-2 py-2 text-base leading-6 font-medium text-gray-600 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-100 transition ease-in-out duration-150">
+                        <svg class="mr-4 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" x-description="Heroicon name: folder" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
+                        </svg>
+                        Custom Activities
+                    </a>
+
+                </nav>
+            </div>
+            <div class="flex-shrink-0 flex border-t border-gray-200 p-4">
+                <a href="#" class="flex-shrink-0 group block focus:outline-none">
+                    <div class="flex items-center">
+                        <div>
+                            <img class="inline-block h-10 w-10 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="ml-3">
+                            <p class="text-base leading-6 font-medium text-gray-700 group-hover:text-gray-900">
+                                Tom Cook
+                            </p>
+                            <p class="text-sm leading-5 font-medium text-gray-500 group-hover:text-gray-700 group-focus:underline transition ease-in-out duration-150">
+                                View profile
+                            </p>
+                        </div>
+                    </div>
+                </a>
+            </div>
+        </div>
+        <div class="flex-shrink-0 w-14">
+            <!-- Force sidebar to shrink to fit close icon -->
+        </div>
+    </div>
+</div>
+
+<!-- Static sidebar for desktop -->
+<div class="hidden md:flex md:flex-shrink-0">
+    <div class="flex flex-col w-64">
+        <!-- Sidebar component, swap this element with another sidebar if you like -->
+        <div class="flex flex-col h-0 flex-1 border-r border-gray-200 bg-white">
+            <div class="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
+                <div class="flex items-center flex-shrink-0 px-4">
+                    <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-logo-on-white.svg" alt="Workflow">
+                </div>
+                <nav class="mt-5 flex-1 px-2 bg-white space-y-1">
+
+                    <a href="/workflows.html" class="group flex items-center px-2 py-2 text-sm leading-5 font-medium text-gray-600 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition ease-in-out duration-150">
+                        <svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" x-description="Heroicon name: folder" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
+                        </svg>
+                        Workflows
+                    </a>
+                    
+                    <a href="/custom-activities.html" class="group flex items-center px-2 py-2 text-sm leading-5 font-medium text-gray-600 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition ease-in-out duration-150">
+                        <svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" x-description="Heroicon name: folder" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
+                        </svg>
+                        Custom Activities
+                    </a>
+
+                </nav>
+            </div>
+            <div class="flex-shrink-0 flex border-t border-gray-200 p-4">
+                <a href="#" class="flex-shrink-0 w-full group block">
+                    <div class="flex items-center">
+                        <div>
+                            <img class="inline-block h-9 w-9 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="ml-3">
+                            <p class="text-sm leading-5 font-medium text-gray-700 group-hover:text-gray-900">
+                                Tom Cook
+                            </p>
+                            <p class="text-xs leading-4 font-medium text-gray-500 group-hover:text-gray-700 transition ease-in-out duration-150">
+                                View profile
+                            </p>
+                        </div>
+                    </div>
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+            <div class="flex flex-col w-0 flex-1 overflow-hidden">
+                <div class="md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3">
+                    <button x-on:click.stop="sidebarOpen = true" class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:bg-gray-200 transition ease-in-out duration-150" aria-label="Open sidebar">
+                        <svg class="h-6 w-6" x-description="Heroicon name: menu" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                        </svg>
+                    </button>
+                </div>
+                <main class="flex flex-1 flex-col relative z-0 overflow-y-auto focus:outline-none" tabindex="0" x-data="" x-init="$el.focus()">
+                    
+
+
+    <!-- Page title & actions -->
+    <div class="flex-0 border-b border-gray-200 px-4 py-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8">
+        <div class="flex-1 min-w-0">
+            <h1 class="text-lg font-medium leading-6 text-gray-900 sm:truncate">
+                Workflow Editor
+            </h1>
+        </div>
+        <div class="mt-4 flex sm:mt-0 sm:ml-4">
+        <span class="order-0 sm:order-1 sm:ml-3 shadow-sm rounded-md">
+            <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-500 hover:bg-blue-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-700 active:bg-blue-700 transition duration-150 ease-in-out">
+                Publish
+            </button>
+        </span>
+        </div>
+    </div>
+
+    <div id="workflow-canvas" class="flex-1 flex">
+        <div class="flex-1 text-gray-200">
+            <div class="p-10">
+                <div class="canvas mx-auto">
+                    <ul>
+                        <li>
+                            <div x-data="{ open: false }" x-on:keydown.escape="open = false" x-on:click.away="open = false" class="box border-2 border-solid border-white rounded bg-white text-left text-black text-lg relative hover:border-blue-600" id="ceo">
+                                <div class="p-6 border-b border-b-solid">
+                                    <div class="flex">
+                                        <div class="flex-1">
+                                            <p>Timer</p>
+                                        </div>
+                                        <div class="flex-shrink-0">
+                                            <button x-on:click="open = !open" id="pinned-project-options-menu-0" aria-haspopup="true" class="w-8 h-8 inline-flex items-center justify-center text-gray-400 rounded-full bg-transparent hover:text-gray-500 focus:outline-none focus:text-gray-500 focus:bg-gray-100 transition ease-in-out duration-150">
+                                                <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                                    <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 x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="z-10 mx-3 origin-top-left absolute inverse-right-30 top-3 w-48 mt-1 rounded-md shadow-lg">
+                                                <div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="pinned-project-options-menu-0">
+                                                    <div class="py-1">
+                                                        <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Edit</a>
+                                                    </div>
+                                                    <div class="border-t border-gray-100"></div>
+                                                    <div class="py-1">
+                                                        <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
+                                                            Removed
+                                                            from pinned
+                                                        </a>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                </div>
+                                <div class="p-6 text-gray-400 text-base">
+                                    Every <a href="#" class="font-bold border-b border-solid border-gray-200 text-black">5 minutes</a>
+                                </div>
+                            </div>
+                        </li>
+                        <li>
+                            <ul class="children">
+                                <li>
+                                    <div class="box border-solid border-2 rounded bg-white text-black overflow-hidden relative p-3 hover:border-blue-600" id="manager1">
+                                        <p>Manager 1</p>
+                                    </div>
+                                </li>
+                                <li>
+                                    <div class="box border-solid border-2 rounded bg-white text-black overflow-hidden relative p-3 hover:border-blue-600" id="manager2">
+                                        <p>Manager 2</p>
+                                    </div>
+                                </li>
+                            </ul>
+                        </li>
+                        <li>
+                            <ul class="children">
+                                <li>
+                                    <div class="box border-solid border-2 rounded bg-white text-black overflow-hidden relative p-3 hover:border-blue-600" id="child1">
+                                        <p>Child 1</p>
+                                    </div>
+                                </li>
+                                <li>
+                                    <div class="box border-solid border-2 rounded bg-white text-black overflow-hidden relative p-3 hover:border-blue-600" id="child2">
+                                        <p>Child 2</p>
+                                    </div>
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script type="text/javascript">
+
+
+    </script>
+
+                </main>
+            </div>
+            <div x-data="{open: false}">
+    <section x-on:click.away="open = false;" class="absolute inset-y-0 max-w-full right-0 flex">
+        <div class="w-screen max-w-md" x-description="Slide-over panel, show/hide based on slide-over state." x-show="open" x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full">
+            <div class="h-full divide-y divide-gray-200 flex flex-col bg-white shadow-xl">
+                <div class="flex-1 h-0 overflow-y-auto">
+                    <header class="space-y-1 py-6 px-4 bg-indigo-700 sm:px-6">
+                        <div class="flex items-center justify-between space-x-3">
+                            <h2 class="text-lg leading-7 font-medium text-white">
+                                New Project
+                            </h2>
+                            <div class="h-7 flex items-center">
+                                <button x-on:click="open = false;" aria-label="Close panel" class="text-indigo-200 hover:text-white transition ease-in-out duration-150">
+                                    <svg class="h-6 w-6" x-description="Heroicon name: x" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+                        <div>
+                            <p class="text-sm leading-5 text-indigo-300">
+                                Get started by filling in the information below to create your new project.
+                            </p>
+                        </div>
+                    </header>
+                    <div class="flex-1 flex flex-col justify-between">
+                        <div class="px-4 divide-y divide-gray-200 sm:px-6">
+                            <div class="space-y-6 pt-6 pb-5">
+                                <div class="space-y-1">
+                                    <label for="project_name" class="block text-sm font-medium leading-5 text-gray-900">
+                                        Project name
+                                    </label>
+                                    <div class="relative rounded-md shadow-sm">
+                                        <input id="project_name" class="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150">
+                                    </div>
+                                </div>
+                                <div class="space-y-1">
+                                    <label for="description" class="block text-sm font-medium leading-5 text-gray-900">
+                                        Description
+                                    </label>
+                                    <div class="relative rounded-md shadow-sm">
+                                        <textarea id="description" rows="4" class="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"></textarea>
+                                    </div>
+                                </div>
+                                <div class="space-y-2">
+                                    <h3 class="text-sm font-medium leading-5 text-gray-900">
+                                        Team Members
+                                    </h3>
+                                    <div>
+                                        <div class="flex space-x-2">
+                                            <a href="#" class="rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
+                                                <img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?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="Tom Warner">
+                                            </a>
+                                            <a href="#" class="rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
+                                                <img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="Sally Preston">
+                                            </a>
+                                            <a href="#" class="rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
+                                                <img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2.25&amp;w=256&amp;h=256&amp;q=80" alt="Dave Gusman">
+                                            </a>
+                                            <a href="#" class="rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
+                                                <img class="inline-block h-8 w-8 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="Tom Cook">
+                                            </a>
+                                            <a href="#" class="rounded-full hover:opacity-75 focus:outline-none focus:shadow-outline transition ease-in-out duration-150">
+                                                <img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1586297098710-0382a496c814?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2.5&amp;w=256&amp;h=256&amp;q=80" alt="Brandon Rogers">
+                                            </a>
+                                            <button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-full border-2 border-dashed border-gray-200 text-gray-400 hover:text-gray-500 hover:border-gray-300 focus:text-gray-500 focus:border-gray-300 focus:outline-none transition ease-in-out duration-150" aria-label="Add team member">
+                                                <svg class="h-5 w-5" x-description="Heroicon name: plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                                    <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path>
+                                                </svg>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                                <fieldset class="space-y-2">
+                                    <legend class="text-sm leading-5 font-medium text-gray-900">
+                                        Privacy
+                                    </legend>
+                                    <div class="space-y-5">
+                                        <div class="relative flex items-start">
+                                            <div class="absolute flex items-center h-5">
+                                                <input id="privacy_public" aria-describedby="privacy_public_description" type="radio" name="privacy" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
+                                            </div>
+                                            <div class="pl-7 text-sm leading-5">
+                                                <label for="privacy_public" class="font-medium text-gray-900">
+                                                    Public access
+                                                </label>
+                                                <p id="privacy_public_description" class="text-gray-500">
+                                                    Everyone with the link will see this project.
+                                                </p>
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <div class="relative flex items-start">
+                                                <div class="absolute flex items-center h-5">
+                                                    <input id="privacy_private-to-project" aria-describedby="privacy_private-to-project_description" type="radio" name="privacy" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
+                                                </div>
+                                                <div class="pl-7 text-sm leading-5">
+                                                    <label for="privacy_private-to-project" class="font-medium text-gray-900">
+                                                        Private to project members
+                                                    </label>
+                                                    <p id="privacy_private-to-project_description" class="text-gray-500">
+                                                        Only members of this project would be able to access.
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <div class="relative flex items-start">
+                                                <div class="absolute flex items-center h-5">
+                                                    <input id="privacy_private" aria-describedby="privacy_private-to-project_description" type="radio" name="privacy" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
+                                                </div>
+                                                <div class="pl-7 text-sm leading-5">
+                                                    <label for="privacy_private" class="font-medium text-gray-900">
+                                                        Private to you
+                                                    </label>
+                                                    <p id="privacy_private_description" class="text-gray-500">
+                                                        You are the only one able to access this project.
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </fieldset>
+                            </div>
+                            <div class="space-y-4 pt-4 pb-6">
+                                <div class="flex text-sm leading-5">
+                                    <a href="#" class="group space-x-2 inline-flex items-center font-medium text-indigo-600 hover:text-indigo-900 transition ease-in-out duration-150">
+                                        <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-900 transition ease-in-out duration-150" x-description="Heroicon name: link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                            <path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"></path>
+                                        </svg>
+                                        <span>
+                                            Copy link
+                                        </span>
+                                    </a>
+                                </div>
+                                <div class="flex text-sm leading-5">
+                                    <a href="#" class="group space-x-2 inline-flex items-center text-gray-500 hover:text-gray-900 transition ease-in-out duration-150">
+                                        <svg class="h-5 w-5 text-gray-400 group-hover:text-gray-500 transition ease-in-out duration-150" x-description="Heroicon name: question-mark-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
+                                        </svg>
+                                        <span>
+                                            Learn more about sharing
+                                        </span>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex-shrink-0 px-4 py-4 space-x-4 flex justify-end">
+                    <span class="inline-flex rounded-md shadow-sm">
+                        <button x-on:click="open = false; setTimeout(() => open = true, 1000);" type="button" class="py-2 px-4 border border-gray-300 rounded-md text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out">
+                            Cancel
+                        </button>
+                    </span>
+                    <span class="inline-flex rounded-md shadow-sm">
+                        <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
+                            Save
+                        </button>
+                    </span>
+                </div>
+            </div>
+        </div>
+    </section>
+</div>
+        </div>
+    </div>
+</div>
+<div style="clear: both; display: block; height: 0px;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflow-instances.html b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflow-instances.html
index b9cffff96..775180c2f 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflow-instances.html
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflow-instances.html
@@ -9,6 +9,7 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
     <link rel="stylesheet" href="/tailwind.css">
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.0/joint.css">
     <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.js" defer=""></script>
 </head>
 <body class="antialiased font-sans bg-gray-200 overflow-hidden">
@@ -18,12 +19,12 @@
         <div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" x-keydown.window.escape="sidebarOpen = false">
             <div x-show="sidebarOpen" class="md:hidden" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state." style="display: none;">
     <div class="fixed inset-0 flex z-40">
-        <div @click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0" style="display: none;">
+        <div x-on:click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0" style="display: none;">
             <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
         </div>
         <div x-show="sidebarOpen" x-description="Off-canvas menu, show/hide based on off-canvas menu state." x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="relative flex-1 flex flex-col max-w-xs w-full bg-white" style="display: none;">
             <div class="absolute top-0 right-0 -mr-14 p-1">
-                <button x-show="sidebarOpen" @click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar" style="display: none;">
+                <button x-show="sidebarOpen" x-on:click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar" style="display: none;">
                     <svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                     </svg>
@@ -130,7 +131,7 @@
                         </svg>
                     </button>
                 </div>
-                <main class="flex-1 relative z-0 overflow-y-auto focus:outline-none" tabindex="0" x-data="" x-init="$el.focus()">
+                <main class="flex flex-1 flex-col relative z-0 overflow-y-auto focus:outline-none" tabindex="0" x-data="" x-init="$el.focus()">
                     
 
 
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflows.html b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflows.html
index 0e89ea0aa..3116fea95 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflows.html
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/public/workflows.html
@@ -9,6 +9,7 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
     <link rel="stylesheet" href="/tailwind.css">
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.0/joint.css">
     <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.js" defer=""></script>
 </head>
 <body class="antialiased font-sans bg-gray-200 overflow-hidden">
@@ -18,12 +19,12 @@
         <div class="h-screen flex overflow-hidden bg-white" x-data="{ sidebarOpen: false }" x-keydown.window.escape="sidebarOpen = false">
             <div x-show="sidebarOpen" class="md:hidden" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state." style="display: none;">
     <div class="fixed inset-0 flex z-40">
-        <div @click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0" style="display: none;">
+        <div x-on:click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0" style="display: none;">
             <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
         </div>
         <div x-show="sidebarOpen" x-description="Off-canvas menu, show/hide based on off-canvas menu state." x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="relative flex-1 flex flex-col max-w-xs w-full bg-white" style="display: none;">
             <div class="absolute top-0 right-0 -mr-14 p-1">
-                <button x-show="sidebarOpen" @click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar" style="display: none;">
+                <button x-show="sidebarOpen" x-on:click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar" style="display: none;">
                     <svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                     </svg>
@@ -130,7 +131,7 @@
                         </svg>
                     </button>
                 </div>
-                <main class="flex-1 relative z-0 overflow-y-auto focus:outline-none" tabindex="0" x-data="" x-init="$el.focus()">
+                <main class="flex flex-1 flex-col relative z-0 overflow-y-auto focus:outline-none" tabindex="0" x-data="" x-init="$el.focus()">
                     
     <!-- Page title & actions -->
     <div class="border-b border-gray-200 px-4 py-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8">
@@ -141,9 +142,9 @@
         </div>
         <div class="mt-4 flex sm:mt-0 sm:ml-4">
         <span class="order-0 sm:order-1 sm:ml-3 shadow-sm rounded-md">
-            <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-500 hover:bg-blue-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-700 active:bg-blue-700 transition duration-150 ease-in-out">
+            <a href="/workflow-designer.html" type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-500 hover:bg-blue-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-700 active:bg-blue-700 transition duration-150 ease-in-out">
                 Create
-            </button>
+            </a>
         </span>
         </div>
     </div>
@@ -164,7 +165,6 @@
                     </div>
                     <div class="flex-shrink-0 pr-2">
                         <button x-on:click="open = !open" id="pinned-project-options-menu-0" aria-haspopup="true" class="w-8 h-8 inline-flex items-center justify-center text-gray-400 rounded-full bg-transparent hover:text-gray-500 focus:outline-none focus:text-gray-500 focus:bg-gray-100 transition ease-in-out duration-150">
-                            <!-- Heroicon name: dots-vertical -->
                             <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                 <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>
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/index.html b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/index.html
index e51c832cc..4ec4ec6bb 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/index.html
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/index.html
@@ -1,3 +1,9 @@
 <module href="./src/partials/layout.html">
-    HUUUUUU
+    <div class="border-b border-gray-200 px-4 py-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8">
+        <div class="flex-1 min-w-0">
+            <h1 class="text-lg font-medium leading-6 text-gray-900 sm:truncate">
+                Home
+            </h1>
+        </div>
+    </div>
 </module>
\ No newline at end of file
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/layout.html b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/layout.html
index 7bbd58331..c29e188ae 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/layout.html
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/layout.html
@@ -9,6 +9,7 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
     <link rel="stylesheet" href="/tailwind.css">
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.0/joint.css" />
     <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.js" defer=""></script>
 </head>
 <body class="antialiased font-sans bg-gray-200 overflow-hidden">
@@ -25,7 +26,7 @@
                         </svg>
                     </button>
                 </div>
-                <main class="flex-1 relative z-0 overflow-y-auto focus:outline-none" tabindex="0" x-data="" x-init="$el.focus()">
+                <main class="flex flex-1 flex-col relative z-0 overflow-y-auto focus:outline-none" tabindex="0" x-data="" x-init="$el.focus()">
                     <content></content>
                 </main>
             </div>
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/navmenu.html b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/navmenu.html
index c194d837e..c22296617 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/navmenu.html
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/partials/navmenu.html
@@ -1,11 +1,11 @@
 <div x-show="sidebarOpen" class="md:hidden" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state." style="display: none;">
     <div class="fixed inset-0 flex z-40">
-        <div @click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0" style="display: none;">
+        <div x-on:click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0" style="display: none;">
             <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
         </div>
         <div x-show="sidebarOpen" x-description="Off-canvas menu, show/hide based on off-canvas menu state." x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="relative flex-1 flex flex-col max-w-xs w-full bg-white" style="display: none;">
             <div class="absolute top-0 right-0 -mr-14 p-1">
-                <button x-show="sidebarOpen" @click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar" style="display: none;">
+                <button x-show="sidebarOpen" x-on:click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar" style="display: none;">
                     <svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                     </svg>
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/tailwind.css b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/tailwind.css
index c543effe4..afbdc6283 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/tailwind.css
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/tailwind.css
@@ -4,4 +4,67 @@
 
 #blazor-error-ui {
     display: none;
+}
+
+#workflow-canvas{
+    background-image: url(tile.png);
+    background-repeat: repeat;
+    background-size: 30px 30px;
+    background-color: #FBFBFB;
+}
+
+.canvas {
+    width: 100%;
+    height: 100%;
+}
+
+.box {
+    display: inline-block;
+    width: 80%;
+    min-width: 300px;
+    max-width: 300px;
+    min-height: 50px;
+    margin-left: 1rem;
+}
+
+.canvas ul {
+    padding: 0;
+    list-style-type: none;
+    display: inline-block;
+    height: 100%;
+}
+
+.canvas li {
+    margin-top: 50px;
+    height: 100%;
+    text-align: center;
+}
+
+.children ul {
+    display: inline-block;
+    padding: 0;
+    overflow: hidden;
+    text-align: center;
+    height: 100%;
+}
+
+h4 {
+    margin-block-start: 1em;
+}
+
+.children li {
+    float: left;
+    width: 50%;
+}
+
+._jsPlumb_connector {
+    z-index: 1;
+}
+
+._jsPlumb_overlay {
+    z-index: 1;
+}
+
+li {
+    height: 50px;
 }
\ No newline at end of file
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/workflow-designer.html b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/workflow-designer.html
new file mode 100644
index 000000000..a8c239157
--- /dev/null
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/workflow-designer.html
@@ -0,0 +1,106 @@
+<module href="./src/partials/layout.html">
+
+
+    <!-- Page title & actions -->
+    <div class="flex-0 border-b border-gray-200 px-4 py-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8">
+        <div class="flex-1 min-w-0">
+            <h1 class="text-lg font-medium leading-6 text-gray-900 sm:truncate">
+                Workflow Editor
+            </h1>
+        </div>
+        <div class="mt-4 flex sm:mt-0 sm:ml-4">
+        <span class="order-0 sm:order-1 sm:ml-3 shadow-sm rounded-md">
+            <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-500 hover:bg-blue-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-700 active:bg-blue-700 transition duration-150 ease-in-out">
+                Publish
+            </button>
+        </span>
+        </div>
+    </div>
+
+    <div id="workflow-canvas" class="flex-1 flex">
+        <div class="flex-1 text-gray-200">
+            <div class="p-10">
+                <div class="canvas mx-auto">
+                    <ul>
+                        <li>
+                            <div x-data="{ open: false }" x-on:keydown.escape="open = false" x-on:click.away="open = false" class="box border-2 border-solid border-white rounded bg-white text-left text-black text-lg relative hover:border-blue-600" id="ceo">
+                                <div class="p-6 border-b border-b-solid">
+                                    <div class="flex">
+                                        <div class="flex-1">
+                                            <p>Timer</p>
+                                        </div>
+                                        <div class="flex-shrink-0">
+                                            <button x-on:click="open = !open" id="pinned-project-options-menu-0" aria-haspopup="true" class="w-8 h-8 inline-flex items-center justify-center text-gray-400 rounded-full bg-transparent hover:text-gray-500 focus:outline-none focus:text-gray-500 focus:bg-gray-100 transition ease-in-out duration-150">
+                                                <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                                    <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"/>
+                                                </svg>
+                                            </button>
+                                            <div x-show="open"
+                                                 x-transition:enter="transition ease-out duration-100"
+                                                 x-transition:enter-start="transform opacity-0 scale-95"
+                                                 x-transition:enter-end="transform opacity-100 scale-100"
+                                                 x-transition:leave="transition ease-in duration-75"
+                                                 x-transition:leave-start="transform opacity-100 scale-100"
+                                                 x-transition:leave-end="transform opacity-0 scale-95"
+                                                 class="z-10 mx-3 origin-top-left absolute inverse-right-30 top-3 w-48 mt-1 rounded-md shadow-lg">
+                                                <div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="pinned-project-options-menu-0">
+                                                    <div class="py-1">
+                                                        <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">Edit</a>
+                                                    </div>
+                                                    <div class="border-t border-gray-100"></div>
+                                                    <div class="py-1">
+                                                        <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
+                                                            Removed
+                                                            from pinned
+                                                        </a>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                </div>
+                                <div class="p-6 text-gray-400 text-base">
+                                    Every <a href="#" class="font-bold border-b border-solid border-gray-200 text-black">5 minutes</a>
+                                </div>
+                            </div>
+                        </li>
+                        <li>
+                            <ul class="children">
+                                <li>
+                                    <div class="box border-solid border-2 rounded bg-white text-black overflow-hidden relative p-3 hover:border-blue-600" id="manager1">
+                                        <p>Manager 1</p>
+                                    </div>
+                                </li>
+                                <li>
+                                    <div class="box border-solid border-2 rounded bg-white text-black overflow-hidden relative p-3 hover:border-blue-600" id="manager2">
+                                        <p>Manager 2</p>
+                                    </div>
+                                </li>
+                            </ul>
+                        </li>
+                        <li>
+                            <ul class="children">
+                                <li>
+                                    <div class="box border-solid border-2 rounded bg-white text-black overflow-hidden relative p-3 hover:border-blue-600" id="child1">
+                                        <p>Child 1</p>
+                                    </div>
+                                </li>
+                                <li>
+                                    <div class="box border-solid border-2 rounded bg-white text-black overflow-hidden relative p-3 hover:border-blue-600" id="child2">
+                                        <p>Child 2</p>
+                                    </div>
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script type="text/javascript">
+
+
+    </script>
+</module>
\ No newline at end of file
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/workflows.html b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/workflows.html
index 578ab058c..4157b2edd 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/workflows.html
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/src/workflows.html
@@ -8,9 +8,9 @@
         </div>
         <div class="mt-4 flex sm:mt-0 sm:ml-4">
         <span class="order-0 sm:order-1 sm:ml-3 shadow-sm rounded-md">
-            <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-500 hover:bg-blue-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-700 active:bg-blue-700 transition duration-150 ease-in-out">
+            <a href="/workflow-designer.html" type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-500 hover:bg-blue-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-700 active:bg-blue-700 transition duration-150 ease-in-out">
                 Create
-            </button>
+            </a>
         </span>
         </div>
     </div>
@@ -31,7 +31,6 @@
                     </div>
                     <div class="flex-shrink-0 pr-2">
                         <button x-on:click="open = !open" id="pinned-project-options-menu-0" aria-haspopup="true" class="w-8 h-8 inline-flex items-center justify-center text-gray-400 rounded-full bg-transparent hover:text-gray-500 focus:outline-none focus:text-gray-500 focus:bg-gray-100 transition ease-in-out duration-150">
-                            <!-- Heroicon name: dots-vertical -->
                             <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                 <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"/>
                             </svg>
diff --git a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/tailwind.config.js b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/tailwind.config.js
index b2ead050d..a53169046 100644
--- a/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/tailwind.config.js
+++ b/src/dashboards/blazor/ElsaDashboard.Blazor/Shared/ClientApp/tailwind.config.js
@@ -1,18 +1,26 @@
 const defaultTheme = require('tailwindcss/defaultTheme');
 
 module.exports = {
-  purge: ["./src/**/*.html"],
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
-      },
+    purge: ["./src/**/*.html"],
+    theme: {
+        extend: {
+            fontFamily: {
+                sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+            },
+        },
+        inset: {
+            '0': 0,
+            auto: 'auto',
+            'inverse-right-10': '-1rem',
+            'inverse-right-30': '-3rem'
+        }
     },
-  },
-  variants: {},
-  plugins: [
-    require('@tailwindcss/ui')({
-      layout: 'sidebar',
-    })
-  ],
+    variants: {
+        borderWidth: ['responsive', 'hover', 'focus'],
+    },
+    plugins: [
+        require('@tailwindcss/ui')({
+            layout: 'sidebar',
+        })
+    ],
 };
