diff --git a/package-lock.json b/package-lock.json
index baae450..584fb07 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,13 +10,16 @@
       "dependencies": {
         "@apollo/client": "^3.8.10",
         "@apollo/link-context": "^2.0.0-beta.3",
+        "@flavorly/vanilla-components": "^0.7.65",
         "@headlessui/tailwindcss": "^0.2.0",
-        "@headlessui/vue": "^1.7.16",
+        "@headlessui/vue": "^1.7.19",
         "@heroicons/vue": "^2.0.18",
         "@lottiefiles/lottie-player": "^2.0.2",
         "@phosphor-icons/vue": "^2.1.6",
+        "@popperjs/core": "^2.11.8",
         "@types/qs": "^6.9.9",
         "@types/uuid": "^9.0.2",
+        "@types/vue-select": "^3.16.8",
         "@vue/apollo-components": "^4.0.0",
         "@vue/apollo-composable": "^4.0.1",
         "@vue/apollo-option": "^4.0.0",
@@ -43,7 +46,7 @@
         "@rushstack/eslint-patch": "^1.5.1",
         "@tailwindcss/aspect-ratio": "^0.4.2",
         "@tailwindcss/container-queries": "^0.1.1",
-        "@tailwindcss/forms": "^0.5.6",
+        "@tailwindcss/forms": "^0.5.7",
         "@tailwindcss/typography": "^0.5.10",
         "@tsconfig/node18": "^2.0.1",
         "@types/file-saver": "^2.0.6",
@@ -494,9 +497,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
-      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
+      "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -1104,6 +1107,27 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz",
       "integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ=="
     },
+    "node_modules/@flavorly/vanilla-components": {
+      "version": "0.7.65",
+      "resolved": "https://registry.npmjs.org/@flavorly/vanilla-components/-/vanilla-components-0.7.65.tgz",
+      "integrity": "sha512-qgXio7iR83WoR+PD6htb+7PReG9AJ8yAngmtjAyKYeMJKo7Dvxm4Wgi6NrwskqtyuS45MQvrfEr4+uAJLjwPbA==",
+      "dependencies": {
+        "@headlessui/vue": "^1.7.4",
+        "@popperjs/core": "^2.11.6"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "optionalDependencies": {
+        "v-calendar": "^3.0.3"
+      },
+      "peerDependencies": {
+        "@headlessui/vue": "^1.7.0",
+        "@popperjs/core": "^2.11.6",
+        "v-calendar": "^3.0.3",
+        "vue": "^3.2.45"
+      }
+    },
     "node_modules/@graphql-typed-document-node/core": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz",
@@ -1124,9 +1148,12 @@
       }
     },
     "node_modules/@headlessui/vue": {
-      "version": "1.7.16",
-      "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.16.tgz",
-      "integrity": "sha512-nKT+nf/q6x198SsyK54mSszaQl/z+QxtASmgMEJtpxSX2Q0OPJX0upS/9daDyiECpeAsvjkoOrm2O/6PyBQ+Qg==",
+      "version": "1.7.19",
+      "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.19.tgz",
+      "integrity": "sha512-VFjKPybogux/5/QYGSq4zgG/x3RcxId15W8uguAJAjPBxelI23dwjOjTx/mIiMkM/Hd3rzFxcf2aIp56eEWRcA==",
+      "dependencies": {
+        "@tanstack/vue-virtual": "^3.0.0-beta.60"
+      },
       "engines": {
         "node": ">=10"
       },
@@ -1330,6 +1357,15 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
       "dev": true
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz",
@@ -1412,9 +1448,9 @@
       }
     },
     "node_modules/@tailwindcss/forms": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.6.tgz",
-      "integrity": "sha512-Fw+2BJ0tmAwK/w01tEFL5TiaJBX1NLT1/YbWgvm7ws3Qcn11kiXxzNTEQDMs5V3mQemhB56l3u0i9dwdzSQldA==",
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
+      "integrity": "sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==",
       "dev": true,
       "dependencies": {
         "mini-svg-data-uri": "^1.2.3"
@@ -1438,6 +1474,30 @@
         "tailwindcss": ">=3.0.0 || insiders"
       }
     },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.1.2.tgz",
+      "integrity": "sha512-DATZJs8iejkIUqXZe6ruDAnjFo78BKnIIgqQZrc7CmEFqfLEN/TPD91n4hRfo6hpRB6xC00bwKxv7vdjFNEmOg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/vue-virtual": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.1.2.tgz",
+      "integrity": "sha512-RmUnhsFtRw9p4Ti/+rG2Hr3y4yFhs8Xdsn7x9tkPoKINbVya/5RSCoNUCCAg2iXNjOI5a55iBNzNV0SVwxMwKA==",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.1.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.0.0"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -1491,6 +1551,12 @@
       "integrity": "sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.202",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
+      "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==",
+      "optional": true
+    },
     "node_modules/@types/node": {
       "version": "18.18.4",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.18.4.tgz",
@@ -1513,6 +1579,12 @@
       "integrity": "sha512-sM4HyDVlDFl4goOXPF+g9nNHJFZQGot+HgySjM4cRjqXzjdatcEvYrtG4Ia8XumR9T6k8G2tW9B7hnUj51Uf0A==",
       "optional": true
     },
+    "node_modules/@types/resize-observer-browser": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.11.tgz",
+      "integrity": "sha512-cNw5iH8JkMkb3QkCoe7DaZiawbDQEUX8t7iuQaRTyLOyQCR2h+ibBD4GJt7p5yhUHrlOeL7ZtbxNHeipqNsBzQ==",
+      "optional": true
+    },
     "node_modules/@types/semver": {
       "version": "7.5.3",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.3.tgz",
@@ -1535,6 +1607,52 @@
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.5.tgz",
       "integrity": "sha512-xfHdwa1FMJ082prjSJpoEI57GZITiQz10r3vEJCHa2khEFQjKy91aWKz6+zybzssCvXUwE1LQWgWVwZ4nYUvHQ=="
     },
+    "node_modules/@types/vue-select": {
+      "version": "3.16.8",
+      "resolved": "https://registry.npmjs.org/@types/vue-select/-/vue-select-3.16.8.tgz",
+      "integrity": "sha512-ZBovlBrWf/wnPqCmMw24ryIC7ghQLfIBmkl1qssqBGONdx7yOmi/GLwtPxll/6UwXWGNWMeokleOgVAZPis+Ag==",
+      "dependencies": {
+        "vue": "^2.0.0"
+      }
+    },
+    "node_modules/@types/vue-select/node_modules/@vue/compiler-sfc": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
+      "integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
+      "dependencies": {
+        "@babel/parser": "^7.23.5",
+        "postcss": "^8.4.14",
+        "source-map": "^0.6.1"
+      },
+      "optionalDependencies": {
+        "prettier": "^1.18.2 || ^2.0.0"
+      }
+    },
+    "node_modules/@types/vue-select/node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "optional": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/@types/vue-select/node_modules/vue": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.16.tgz",
+      "integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
+      "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
+      "dependencies": {
+        "@vue/compiler-sfc": "2.7.16",
+        "csstype": "^3.1.0"
+      }
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.18",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.18.tgz",
@@ -3610,6 +3728,31 @@
         "node": ">=14"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
+    "node_modules/date-fns-tz": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.0.tgz",
+      "integrity": "sha512-OAtcLdB9vxSXTWHdT8b398ARImVwQMyjfYGkKD2zaGpHseG2UPHbHjXELReErZFxWdSLph3c2zOaaTyHfOhERQ==",
+      "optional": true,
+      "peerDependencies": {
+        "date-fns": ">=2.0.0"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.10",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
@@ -6326,7 +6469,7 @@
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/lodash.castarray": {
       "version": "4.4.0",
@@ -8279,6 +8422,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -9246,6 +9397,24 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/v-calendar": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/v-calendar/-/v-calendar-3.1.2.tgz",
+      "integrity": "sha512-QDWrnp4PWCpzUblctgo4T558PrHgHzDtQnTeUNzKxfNf29FkCeFpwGd9bKjAqktaa2aJLcyRl45T5ln1ku34kg==",
+      "optional": true,
+      "dependencies": {
+        "@types/lodash": "^4.14.165",
+        "@types/resize-observer-browser": "^0.1.7",
+        "date-fns": "^2.16.1",
+        "date-fns-tz": "^2.0.0",
+        "lodash": "^4.17.20",
+        "vue-screen-utils": "^1.0.0-beta.13"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -9532,6 +9701,15 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-screen-utils": {
+      "version": "1.0.0-beta.13",
+      "resolved": "https://registry.npmjs.org/vue-screen-utils/-/vue-screen-utils-1.0.0-beta.13.tgz",
+      "integrity": "sha512-EJ/8TANKhFj+LefDuOvZykwMr3rrLFPLNb++lNBqPOpVigT2ActRg6icH9RFQVm4nHwlHIHSGm5OY/Clar9yIg==",
+      "optional": true,
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-tailwind-datepicker": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/vue-tailwind-datepicker/-/vue-tailwind-datepicker-1.6.1.tgz",
diff --git a/package.json b/package.json
index 81bf18d..f9bb654 100644
--- a/package.json
+++ b/package.json
@@ -17,13 +17,16 @@
   "dependencies": {
     "@apollo/client": "^3.8.10",
     "@apollo/link-context": "^2.0.0-beta.3",
+    "@flavorly/vanilla-components": "^0.7.65",
     "@headlessui/tailwindcss": "^0.2.0",
-    "@headlessui/vue": "^1.7.16",
+    "@headlessui/vue": "^1.7.19",
     "@heroicons/vue": "^2.0.18",
     "@lottiefiles/lottie-player": "^2.0.2",
     "@phosphor-icons/vue": "^2.1.6",
+    "@popperjs/core": "^2.11.8",
     "@types/qs": "^6.9.9",
     "@types/uuid": "^9.0.2",
+    "@types/vue-select": "^3.16.8",
     "@vue/apollo-components": "^4.0.0",
     "@vue/apollo-composable": "^4.0.1",
     "@vue/apollo-option": "^4.0.0",
@@ -50,7 +53,7 @@
     "@rushstack/eslint-patch": "^1.5.1",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/forms": "^0.5.6",
+    "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "@tsconfig/node18": "^2.0.1",
     "@types/file-saver": "^2.0.6",
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 229b801..1ec15cd 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -567,10 +567,26 @@ select {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
 }
 
+@media (forced-colors: active)  {
+  [type='checkbox']:checked {
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
 [type='radio']:checked {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
 }
 
+@media (forced-colors: active)  {
+  [type='radio']:checked {
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
 [type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
   border-color: transparent;
   background-color: currentColor;
@@ -585,6 +601,14 @@ select {
   background-repeat: no-repeat;
 }
 
+@media (forced-colors: active)  {
+  [type='checkbox']:indeterminate {
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
 [type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
   border-color: transparent;
   background-color: currentColor;
@@ -917,6 +941,10 @@ body {
   visibility: visible;
 }
 
+.invisible {
+  visibility: hidden;
+}
+
 .static {
   position: static;
 }
@@ -941,6 +969,11 @@ body {
   inset: 0px;
 }
 
+.inset-x-0 {
+  left: 0px;
+  right: 0px;
+}
+
 .inset-y-0 {
   top: 0px;
   bottom: 0px;
@@ -990,12 +1023,28 @@ body {
   top: 0.875rem;
 }
 
+.top-5 {
+  top: 1.25rem;
+}
+
+.top-\[-5px\] {
+  top: -5px;
+}
+
+.top-\[0\.8rem\] {
+  top: 0.8rem;
+}
+
 .top-full {
   top: 100%;
 }
 
-.top-16 {
-  top: 4rem;
+.-z-\[1\] {
+  z-index: -1;
+}
+
+.z-0 {
+  z-index: 0;
 }
 
 .z-10 {
@@ -1006,6 +1055,10 @@ body {
   z-index: 20;
 }
 
+.z-30 {
+  z-index: 30;
+}
+
 .z-40 {
   z-index: 40;
 }
@@ -1014,6 +1067,22 @@ body {
   z-index: 50;
 }
 
+.z-\[100\] {
+  z-index: 100;
+}
+
+.z-\[30\] {
+  z-index: 30;
+}
+
+.z-\[40\] {
+  z-index: 40;
+}
+
+.z-\[99\] {
+  z-index: 99;
+}
+
 .order-last {
   order: 9999;
 }
@@ -1022,10 +1091,57 @@ body {
   grid-column: span 7 / span 7;
 }
 
+.m-0 {
+  margin: 0px;
+}
+
+.m-0\.5 {
+  margin: 0.125rem;
+}
+
+.m-1 {
+  margin: 0.25rem;
+}
+
 .m-auto {
   margin: auto;
 }
 
+.-mx-1 {
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+}
+
+.-mx-1\.5 {
+  margin-left: -0.375rem;
+  margin-right: -0.375rem;
+}
+
+.-mx-2 {
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+}
+
+.-my-1 {
+  margin-top: -0.25rem;
+  margin-bottom: -0.25rem;
+}
+
+.-my-1\.5 {
+  margin-top: -0.375rem;
+  margin-bottom: -0.375rem;
+}
+
+.-my-2 {
+  margin-top: -0.5rem;
+  margin-bottom: -0.5rem;
+}
+
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -1036,6 +1152,11 @@ body {
   margin-right: 0.75rem;
 }
 
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -1046,11 +1167,28 @@ body {
   margin-bottom: 0.25rem;
 }
 
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
 .my-auto {
   margin-top: auto;
   margin-bottom: auto;
 }
 
+.-ml-1 {
+  margin-left: -0.25rem;
+}
+
+.-ml-1\.5 {
+  margin-left: -0.375rem;
+}
+
+.-ml-px {
+  margin-left: -1px;
+}
+
 .-mr-1 {
   margin-right: -0.25rem;
 }
@@ -1059,6 +1197,14 @@ body {
   margin-right: -3rem;
 }
 
+.-mr-2 {
+  margin-right: -0.5rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1083,6 +1229,14 @@ body {
   margin-inline-end: 0.25rem;
 }
 
+.ml-0 {
+  margin-left: 0px;
+}
+
+.ml-0\.5 {
+  margin-left: 0.125rem;
+}
+
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -1099,6 +1253,10 @@ body {
   margin-left: 1rem;
 }
 
+.ml-auto {
+  margin-left: auto;
+}
+
 .mr-1 {
   margin-right: 0.25rem;
 }
@@ -1107,6 +1265,10 @@ body {
   margin-right: 0.5rem;
 }
 
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
 .mt-0 {
   margin-top: 0px;
 }
@@ -1166,6 +1328,10 @@ body {
   display: inline-block;
 }
 
+.inline {
+  display: inline;
+}
+
 .flex {
   display: flex;
 }
@@ -1186,6 +1352,14 @@ body {
   height: 0px;
 }
 
+.h-1 {
+  height: 0.25rem;
+}
+
+.h-1\.5 {
+  height: 0.375rem;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -1202,6 +1376,26 @@ body {
   height: 4rem;
 }
 
+.h-2 {
+  height: 0.5rem;
+}
+
+.h-20 {
+  height: 5rem;
+}
+
+.h-28 {
+  height: 7rem;
+}
+
+.h-3 {
+  height: 0.75rem;
+}
+
+.h-3\.5 {
+  height: 0.875rem;
+}
+
 .h-4 {
   height: 1rem;
 }
@@ -1271,6 +1465,10 @@ body {
   max-height: 1000px;
 }
 
+.max-h-\[10rem\] {
+  max-height: 10rem;
+}
+
 .max-h-\[calc\(100vh-140px\)\] {
   max-height: calc(100vh - 140px);
 }
@@ -1287,6 +1485,14 @@ body {
   width: 0px;
 }
 
+.w-1 {
+  width: 0.25rem;
+}
+
+.w-1\.5 {
+  width: 0.375rem;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -1295,6 +1501,10 @@ body {
   width: 2.5rem;
 }
 
+.w-11 {
+  width: 2.75rem;
+}
+
 .w-12 {
   width: 3rem;
 }
@@ -1307,10 +1517,34 @@ body {
   width: 4rem;
 }
 
+.w-2 {
+  width: 0.5rem;
+}
+
+.w-20 {
+  width: 5rem;
+}
+
+.w-28 {
+  width: 7rem;
+}
+
+.w-3 {
+  width: 0.75rem;
+}
+
+.w-3\.5 {
+  width: 0.875rem;
+}
+
 .w-4 {
   width: 1rem;
 }
 
+.w-48 {
+  width: 12rem;
+}
+
 .w-5 {
   width: 1.25rem;
 }
@@ -1323,6 +1557,14 @@ body {
   width: 1.5rem;
 }
 
+.w-64 {
+  width: 16rem;
+}
+
+.w-72 {
+  width: 18rem;
+}
+
 .w-8 {
   width: 2rem;
 }
@@ -1335,6 +1577,14 @@ body {
   width: 2.25rem;
 }
 
+.w-96 {
+  width: 24rem;
+}
+
+.w-\[10px\] {
+  width: 10px;
+}
+
 .w-\[170px\] {
   width: 170px;
 }
@@ -1347,6 +1597,10 @@ body {
   width: 266px;
 }
 
+.w-\[60px\] {
+  width: 60px;
+}
+
 .w-auto {
   width: auto;
 }
@@ -1355,8 +1609,12 @@ body {
   width: 100%;
 }
 
-.w-72 {
-  width: 18rem;
+.w-screen {
+  width: 100vw;
+}
+
+.min-w-full {
+  min-width: 100%;
 }
 
 .max-w-2xl {
@@ -1367,6 +1625,18 @@ body {
   max-width: 80rem;
 }
 
+.max-w-full {
+  max-width: 100%;
+}
+
+.max-w-lg {
+  max-width: 32rem;
+}
+
+.max-w-md {
+  max-width: 28rem;
+}
+
 .max-w-sm {
   max-width: 24rem;
 }
@@ -1383,6 +1653,10 @@ body {
   flex: none;
 }
 
+.flex-shrink {
+  flex-shrink: 1;
+}
+
 .flex-shrink-0 {
   flex-shrink: 0;
 }
@@ -1399,20 +1673,38 @@ body {
   flex-grow: 1;
 }
 
+.table-fixed {
+  table-layout: fixed;
+}
+
 .origin-top-left {
   transform-origin: top left;
 }
 
+.origin-top-right {
+  transform-origin: top right;
+}
+
 .-translate-x-full {
   --tw-translate-x: -100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .-translate-y-2\/4 {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.-translate-y-full {
+  --tw-translate-y: -100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .translate-x-0 {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1423,6 +1715,16 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.translate-x-5 {
+  --tw-translate-x: 1.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-x-full {
+  --tw-translate-x: 100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .translate-y-0 {
   --tw-translate-y: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1438,6 +1740,11 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.translate-y-full {
+  --tw-translate-y: 100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .rotate-180 {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1459,6 +1766,27 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+.animate-ping {
+  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -1473,6 +1801,10 @@ body {
   cursor: default;
 }
 
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -1483,11 +1815,21 @@ body {
           user-select: none;
 }
 
+.resize-y {
+  resize: vertical;
+}
+
 .scroll-py-2 {
   scroll-padding-top: 0.5rem;
   scroll-padding-bottom: 0.5rem;
 }
 
+.appearance-none {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
 .auto-cols-auto {
   grid-auto-columns: auto;
 }
@@ -1496,6 +1838,10 @@ body {
   grid-auto-flow: column;
 }
 
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -1520,10 +1866,18 @@ body {
   place-items: center;
 }
 
+.content-center {
+  align-content: center;
+}
+
 .items-start {
   align-items: flex-start;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1588,6 +1942,16 @@ body {
   row-gap: 0.25rem;
 }
 
+.gap-y-2 {
+  row-gap: 0.5rem;
+}
+
+.-space-y-px > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(-1px * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(-1px * var(--tw-space-y-reverse));
+}
+
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -1600,6 +1964,18 @@ body {
   margin-left: calc(0.375rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1618,18 +1994,17 @@ body {
   margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
 
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-}
-
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
+.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
+}
+
 .divide-gray-500 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(107 114 128 / var(--tw-divide-opacity));
@@ -1647,6 +2022,10 @@ body {
   overflow: hidden;
 }
 
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
 .overflow-y-auto {
   overflow-y: auto;
 }
@@ -1685,6 +2064,10 @@ body {
   border-radius: 0.375rem;
 }
 
+.rounded-none {
+  border-radius: 0px;
+}
+
 .rounded-xl {
   border-radius: 0.75rem;
 }
@@ -1694,21 +2077,118 @@ body {
   border-bottom-left-radius: 1rem;
 }
 
+.rounded-b-lg {
+  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+
+.rounded-b-md {
+  border-bottom-right-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+
+.rounded-b-none {
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
 .rounded-l-full {
   border-top-left-radius: 9999px;
   border-bottom-left-radius: 9999px;
 }
 
+.rounded-l-lg {
+  border-top-left-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+
+.rounded-l-md {
+  border-top-left-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+
+.rounded-l-none {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+.rounded-r {
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+
 .rounded-r-full {
   border-top-right-radius: 9999px;
   border-bottom-right-radius: 9999px;
 }
 
+.rounded-r-lg {
+  border-top-right-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
+
+.rounded-r-md {
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+}
+
+.rounded-r-none {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
 .rounded-t-2xl {
   border-top-left-radius: 1rem;
   border-top-right-radius: 1rem;
 }
 
+.rounded-t-lg {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+
+.rounded-t-md {
+  border-top-left-radius: 0.375rem;
+  border-top-right-radius: 0.375rem;
+}
+
+.rounded-t-none {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+
+.rounded-bl-lg {
+  border-bottom-left-radius: 0.5rem;
+}
+
+.rounded-bl-md {
+  border-bottom-left-radius: 0.375rem;
+}
+
+.rounded-br-lg {
+  border-bottom-right-radius: 0.5rem;
+}
+
+.rounded-br-md {
+  border-bottom-right-radius: 0.375rem;
+}
+
+.rounded-tl-lg {
+  border-top-left-radius: 0.5rem;
+}
+
+.rounded-tl-md {
+  border-top-left-radius: 0.375rem;
+}
+
+.rounded-tr-lg {
+  border-top-right-radius: 0.5rem;
+}
+
+.rounded-tr-md {
+  border-top-right-radius: 0.375rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1717,6 +2197,10 @@ body {
   border-width: 0px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -1725,6 +2209,10 @@ body {
   border-bottom-width: 0px;
 }
 
+.border-l-4 {
+  border-left-width: 4px;
+}
+
 .border-r {
   border-right-width: 1px;
 }
@@ -1733,6 +2221,10 @@ body {
   border-top-width: 1px;
 }
 
+.border-t-0 {
+  border-top-width: 0px;
+}
+
 .border-solid {
   border-style: solid;
 }
@@ -1745,35 +2237,123 @@ body {
   border-color: rgb(0 0 0 / .1);
 }
 
+.border-blue-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(96 165 250 / var(--tw-border-opacity));
+}
+
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-gray-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
+
 .border-gray-600 {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
 
+.border-green-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(187 247 208 / var(--tw-border-opacity));
+}
+
+.border-green-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(74 222 128 / var(--tw-border-opacity));
+}
+
+.border-orange-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 215 170 / var(--tw-border-opacity));
+}
+
+.border-primary-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(154 189 198 / var(--tw-border-opacity));
+}
+
+.border-primary-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(53 124 141 / var(--tw-border-opacity));
+}
+
 .border-primary-500 {
   --tw-border-opacity: 1;
   border-color: rgb(3 91 113 / var(--tw-border-opacity));
 }
 
+.border-purple-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(233 213 255 / var(--tw-border-opacity));
+}
+
+.border-red-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 153 153 / var(--tw-border-opacity));
+}
+
+.border-red-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 102 102 / var(--tw-border-opacity));
+}
+
+.border-red-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 51 51 / var(--tw-border-opacity));
+}
+
 .border-transparent {
   border-color: transparent;
 }
 
+.border-yellow-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 51 / var(--tw-border-opacity));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
+.bg-black\/50 {
+  background-color: rgb(0 0 0 / 0.5);
+}
+
+.bg-blue-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+}
+
+.bg-blue-300\/10 {
+  background-color: rgb(147 197 253 / 0.1);
+}
+
+.bg-blue-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
+}
+
 .bg-blue-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity));
 }
 
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1799,11 +2379,53 @@ body {
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
 
+.bg-gray-600\/50 {
+  background-color: rgb(75 85 99 / 0.5);
+}
+
+.bg-gray-700\/50 {
+  background-color: rgb(55 65 81 / 0.5);
+}
+
 .bg-gray-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
+.bg-green-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+}
+
+.bg-green-300\/10 {
+  background-color: rgb(134 239 172 / 0.1);
+}
+
+.bg-green-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
+}
+
+.bg-green-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
+}
+
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+
+.bg-green-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
+}
+
+.bg-indigo-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(99 102 241 / var(--tw-bg-opacity));
+}
+
 .bg-indigo-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
@@ -1814,11 +2436,34 @@ body {
   background-color: rgb(243 247 249 / var(--tw-bg-opacity));
 }
 
+.bg-orange-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
+}
+
+.bg-orange-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
+}
+
+.bg-orange-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(234 88 12 / var(--tw-bg-opacity));
+}
+
 .bg-primary-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(205 222 227 / var(--tw-bg-opacity));
 }
 
+.bg-primary-100\/50 {
+  background-color: rgb(205 222 227 / 0.5);
+}
+
+.bg-primary-300\/10 {
+  background-color: rgb(104 157 170 / 0.1);
+}
+
 .bg-primary-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(53 124 141 / var(--tw-bg-opacity));
@@ -1834,16 +2479,59 @@ body {
   background-color: rgb(3 91 113 / var(--tw-bg-opacity));
 }
 
+.bg-primary-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(2 73 90 / var(--tw-bg-opacity));
+}
+
+.bg-purple-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 232 255 / var(--tw-bg-opacity));
+}
+
+.bg-purple-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 51 234 / var(--tw-bg-opacity));
+}
+
 .bg-red-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 204 204 / var(--tw-bg-opacity));
 }
 
+.bg-red-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 102 102 / var(--tw-bg-opacity));
+}
+
+.bg-red-300\/10 {
+  background-color: rgb(255 102 102 / 0.1);
+}
+
+.bg-red-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 51 51 / var(--tw-bg-opacity));
+}
+
+.bg-red-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 229 229 / var(--tw-bg-opacity));
+}
+
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 0 0 / var(--tw-bg-opacity));
+}
+
 .bg-red-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(204 0 0 / var(--tw-bg-opacity));
 }
 
+.bg-red-600\/50 {
+  background-color: rgb(204 0 0 / 0.5);
+}
+
 .bg-secondary-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(204 235 239 / var(--tw-bg-opacity));
@@ -1854,6 +2542,10 @@ body {
   background-color: rgb(13 148 136 / var(--tw-bg-opacity));
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
 .bg-vtd-primary-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(205 222 227 / var(--tw-bg-opacity));
@@ -1879,24 +2571,28 @@ body {
   background-color: rgb(255 255 204 / var(--tw-bg-opacity));
 }
 
+.bg-yellow-300\/10 {
+  background-color: rgb(255 255 102 / 0.1);
+}
+
+.bg-yellow-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 51 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 229 / var(--tw-bg-opacity));
+}
+
 .bg-yellow-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(204 204 0 / var(--tw-bg-opacity));
 }
 
-.bg-red-500 {
+.bg-teal-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 0 0 / var(--tw-bg-opacity));
-}
-
-.bg-blue-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-}
-
-.bg-secondary-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(102 194 208 / var(--tw-bg-opacity));
+  background-color: rgb(240 253 250 / var(--tw-bg-opacity));
 }
 
 .bg-opacity-100 {
@@ -1923,10 +2619,40 @@ body {
   --tw-bg-opacity: 0.8;
 }
 
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
 .bg-none {
   background-image: none;
 }
 
+.from-gray-100 {
+  --tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.to-gray-200 {
+  --tw-gradient-to: #e5e7eb var(--tw-gradient-to-position);
+}
+
+.bg-cover {
+  background-size: cover;
+}
+
+.bg-center {
+  background-position: center;
+}
+
+.fill-\[\#4f46e5\] {
+  fill: #4f46e5;
+}
+
+.fill-current {
+  fill: currentColor;
+}
+
 .fill-gray-500 {
   fill: #6b7280;
 }
@@ -1935,10 +2661,18 @@ body {
   fill: #4b5563;
 }
 
+.fill-green-300 {
+  fill: #86efac;
+}
+
 .fill-green-600 {
   fill: #16a34a;
 }
 
+.fill-orange-300 {
+  fill: #fdba74;
+}
+
 .fill-primary-300 {
   fill: #689daa;
 }
@@ -1947,6 +2681,14 @@ body {
   fill: #035b71;
 }
 
+.fill-purple-300 {
+  fill: #d8b4fe;
+}
+
+.fill-red-300 {
+  fill: #ff6666;
+}
+
 .fill-red-600 {
   fill: #cc0000;
 }
@@ -1964,6 +2706,11 @@ body {
      object-fit: contain;
 }
 
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
 .p-0 {
   padding: 0px;
 }
@@ -1988,6 +2735,10 @@ body {
   padding: 1rem;
 }
 
+.p-5 {
+  padding: 1.25rem;
+}
+
 .px-0 {
   padding-left: 0px;
   padding-right: 0px;
@@ -2028,6 +2779,11 @@ body {
   padding-right: 1rem;
 }
 
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -2038,6 +2794,11 @@ body {
   padding-bottom: 0px;
 }
 
+.py-0\.5 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -2073,19 +2834,37 @@ body {
   padding-bottom: 0.75rem;
 }
 
+.py-3\.5 {
+  padding-top: 0.875rem;
+  padding-bottom: 0.875rem;
+}
+
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
 
+.py-5 {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
 .py-6 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
 
-.py-5 {
-  padding-top: 1.25rem;
-  padding-bottom: 1.25rem;
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.pb-10 {
+  padding-bottom: 2.5rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
 }
 
 .pb-4 {
@@ -2104,6 +2883,10 @@ body {
   padding-left: 2.75rem;
 }
 
+.pl-12 {
+  padding-left: 3rem;
+}
+
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -2112,6 +2895,14 @@ body {
   padding-left: 0.75rem;
 }
 
+.pr-0 {
+  padding-right: 0px;
+}
+
+.pr-0\.5 {
+  padding-right: 0.125rem;
+}
+
 .pr-10 {
   padding-right: 2.5rem;
 }
@@ -2124,6 +2915,10 @@ body {
   padding-right: 0.5rem;
 }
 
+.pr-3 {
+  padding-right: 0.75rem;
+}
+
 .pr-4 {
   padding-right: 1rem;
 }
@@ -2136,6 +2931,10 @@ body {
   padding-right: 1.75rem;
 }
 
+.pr-8 {
+  padding-right: 2rem;
+}
+
 .pt-0 {
   padding-top: 0px;
 }
@@ -2144,6 +2943,14 @@ body {
   padding-top: 0.125rem;
 }
 
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
+.pt-10 {
+  padding-top: 2.5rem;
+}
+
 .pt-2 {
   padding-top: 0.5rem;
 }
@@ -2160,10 +2967,18 @@ body {
   text-align: center;
 }
 
+.text-right {
+  text-align: right;
+}
+
 .text-start {
   text-align: start;
 }
 
+.align-middle {
+  vertical-align: middle;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -2236,6 +3051,10 @@ body {
   font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
 }
 
+.leading-4 {
+  line-height: 1rem;
+}
+
 .leading-5 {
   line-height: 1.25rem;
 }
@@ -2264,6 +3083,10 @@ body {
   letter-spacing: 0.025em;
 }
 
+.tracking-wider {
+  letter-spacing: 0.05em;
+}
+
 .text-aside {
   --tw-text-opacity: 1;
   color: rgb(46 53 54 / var(--tw-text-opacity));
@@ -2274,11 +3097,26 @@ body {
   color: rgb(96 165 250 / var(--tw-text-opacity));
 }
 
+.text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
+
+.text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
+}
+
 .text-blue-700 {
   --tw-text-opacity: 1;
   color: rgb(29 78 216 / var(--tw-text-opacity));
 }
 
+.text-blue-800 {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity));
+}
+
 .text-dark {
   --tw-text-opacity: 1;
   color: rgb(21 22 23 / var(--tw-text-opacity));
@@ -2304,6 +3142,10 @@ body {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
+.text-gray-500\/90 {
+  color: rgb(107 114 128 / 0.9);
+}
+
 .text-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
@@ -2329,11 +3171,31 @@ body {
   color: rgb(74 222 128 / var(--tw-text-opacity));
 }
 
+.text-green-500 {
+  --tw-text-opacity: 1;
+  color: rgb(34 197 94 / var(--tw-text-opacity));
+}
+
 .text-green-600 {
   --tw-text-opacity: 1;
   color: rgb(22 163 74 / var(--tw-text-opacity));
 }
 
+.text-green-700 {
+  --tw-text-opacity: 1;
+  color: rgb(21 128 61 / var(--tw-text-opacity));
+}
+
+.text-green-800 {
+  --tw-text-opacity: 1;
+  color: rgb(22 101 52 / var(--tw-text-opacity));
+}
+
+.text-green-900 {
+  --tw-text-opacity: 1;
+  color: rgb(20 83 45 / var(--tw-text-opacity));
+}
+
 .text-indigo-600 {
   --tw-text-opacity: 1;
   color: rgb(79 70 229 / var(--tw-text-opacity));
@@ -2349,6 +3211,21 @@ body {
   color: rgb(234 88 12 / var(--tw-text-opacity));
 }
 
+.text-orange-700 {
+  --tw-text-opacity: 1;
+  color: rgb(194 65 12 / var(--tw-text-opacity));
+}
+
+.text-orange-900 {
+  --tw-text-opacity: 1;
+  color: rgb(124 45 18 / var(--tw-text-opacity));
+}
+
+.text-primary-400 {
+  --tw-text-opacity: 1;
+  color: rgb(53 124 141 / var(--tw-text-opacity));
+}
+
 .text-primary-50 {
   --tw-text-opacity: 1;
   color: rgb(230 239 241 / var(--tw-text-opacity));
@@ -2359,21 +3236,71 @@ body {
   color: rgb(3 91 113 / var(--tw-text-opacity));
 }
 
+.text-primary-600 {
+  --tw-text-opacity: 1;
+  color: rgb(2 73 90 / var(--tw-text-opacity));
+}
+
+.text-primary-700 {
+  --tw-text-opacity: 1;
+  color: rgb(2 73 90 / var(--tw-text-opacity));
+}
+
 .text-primary-800 {
   --tw-text-opacity: 1;
   color: rgb(1 36 45 / var(--tw-text-opacity));
 }
 
+.text-primary-900 {
+  --tw-text-opacity: 1;
+  color: rgb(1 18 23 / var(--tw-text-opacity));
+}
+
+.text-purple-700 {
+  --tw-text-opacity: 1;
+  color: rgb(126 34 206 / var(--tw-text-opacity));
+}
+
+.text-purple-900 {
+  --tw-text-opacity: 1;
+  color: rgb(88 28 135 / var(--tw-text-opacity));
+}
+
+.text-red-300 {
+  --tw-text-opacity: 1;
+  color: rgb(255 102 102 / var(--tw-text-opacity));
+}
+
 .text-red-400 {
   --tw-text-opacity: 1;
   color: rgb(255 51 51 / var(--tw-text-opacity));
 }
 
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(255 0 0 / var(--tw-text-opacity));
+}
+
 .text-red-600 {
   --tw-text-opacity: 1;
   color: rgb(204 0 0 / var(--tw-text-opacity));
 }
 
+.text-red-700 {
+  --tw-text-opacity: 1;
+  color: rgb(153 0 0 / var(--tw-text-opacity));
+}
+
+.text-red-800 {
+  --tw-text-opacity: 1;
+  color: rgb(102 0 0 / var(--tw-text-opacity));
+}
+
+.text-red-900 {
+  --tw-text-opacity: 1;
+  color: rgb(51 0 0 / var(--tw-text-opacity));
+}
+
 .text-slate-600 {
   --tw-text-opacity: 1;
   color: rgb(71 85 105 / var(--tw-text-opacity));
@@ -2404,15 +3331,39 @@ body {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-yellow-400 {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 51 / var(--tw-text-opacity));
+}
+
+.text-yellow-500 {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 0 / var(--tw-text-opacity));
+}
+
+.text-yellow-600 {
+  --tw-text-opacity: 1;
+  color: rgb(204 204 0 / var(--tw-text-opacity));
+}
+
 .text-yellow-700 {
   --tw-text-opacity: 1;
   color: rgb(153 153 0 / var(--tw-text-opacity));
 }
 
+.text-yellow-800 {
+  --tw-text-opacity: 1;
+  color: rgb(102 102 0 / var(--tw-text-opacity));
+}
+
 .text-opacity-40 {
   --tw-text-opacity: 0.4;
 }
 
+.underline {
+  text-decoration-line: underline;
+}
+
 .placeholder-gray-500::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(107 114 128 / var(--tw-placeholder-opacity));
@@ -2423,6 +3374,34 @@ body {
   color: rgb(107 114 128 / var(--tw-placeholder-opacity));
 }
 
+.placeholder-gray-500\/60::-moz-placeholder {
+  color: rgb(107 114 128 / 0.6);
+}
+
+.placeholder-gray-500\/60::placeholder {
+  color: rgb(107 114 128 / 0.6);
+}
+
+.placeholder-red-300::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(255 102 102 / var(--tw-placeholder-opacity));
+}
+
+.placeholder-red-300::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(255 102 102 / var(--tw-placeholder-opacity));
+}
+
+.placeholder-red-400::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(255 51 51 / var(--tw-placeholder-opacity));
+}
+
+.placeholder-red-400::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(255 51 51 / var(--tw-placeholder-opacity));
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -2447,6 +3426,10 @@ body {
   opacity: 0.5;
 }
 
+.opacity-60 {
+  opacity: 0.6;
+}
+
 .opacity-75 {
   opacity: 0.75;
 }
@@ -2463,6 +3446,12 @@ body {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-inner {
+  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -2492,6 +3481,11 @@ body {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 .outline {
   outline-style: solid;
 }
@@ -2512,6 +3506,12 @@ body {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.ring-2 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .ring-inset {
   --tw-ring-inset: inset;
 }
@@ -2521,6 +3521,10 @@ body {
   --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
 }
 
+.ring-blue-400\/50 {
+  --tw-ring-color: rgb(96 165 250 / 0.5);
+}
+
 .ring-blue-700\/10 {
   --tw-ring-color: rgb(29 78 216 / 0.1);
 }
@@ -2530,14 +3534,111 @@ body {
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }
 
-.ring-black\/5 {
-  --tw-ring-color: rgb(0 0 0 / 0.05);
+.ring-gray-400\/50 {
+  --tw-ring-color: rgb(156 163 175 / 0.5);
+}
+
+.ring-gray-500\/20 {
+  --tw-ring-color: rgb(107 114 128 / 0.2);
+}
+
+.ring-gray-900\/10 {
+  --tw-ring-color: rgb(17 24 39 / 0.1);
+}
+
+.ring-green-400\/50 {
+  --tw-ring-color: rgb(74 222 128 / 0.5);
+}
+
+.ring-green-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity));
+}
+
+.ring-green-600 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(22 163 74 / var(--tw-ring-opacity));
+}
+
+.ring-orange-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(249 115 22 / var(--tw-ring-opacity));
+}
+
+.ring-orange-600 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(234 88 12 / var(--tw-ring-opacity));
+}
+
+.ring-primary-400\/50 {
+  --tw-ring-color: rgb(53 124 141 / 0.5);
+}
+
+.ring-primary-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(3 91 113 / var(--tw-ring-opacity));
+}
+
+.ring-primary-600 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(2 73 90 / var(--tw-ring-opacity));
+}
+
+.ring-purple-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity));
+}
+
+.ring-purple-600 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(147 51 234 / var(--tw-ring-opacity));
+}
+
+.ring-red-300 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 102 102 / var(--tw-ring-opacity));
+}
+
+.ring-red-400 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 51 51 / var(--tw-ring-opacity));
+}
+
+.ring-red-400\/50 {
+  --tw-ring-color: rgb(255 51 51 / 0.5);
+}
+
+.ring-red-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 0 0 / var(--tw-ring-opacity));
+}
+
+.ring-red-600 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(204 0 0 / var(--tw-ring-opacity));
+}
+
+.ring-yellow-400\/50 {
+  --tw-ring-color: rgb(255 255 51 / 0.5);
+}
+
+.ring-blue-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
 }
 
 .ring-opacity-5 {
   --tw-ring-opacity: 0.05;
 }
 
+.ring-offset-2 {
+  --tw-ring-offset-width: 2px;
+}
+
+.ring-offset-white {
+  --tw-ring-offset-color: #fff;
+}
+
 .blur {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -2553,6 +3654,12 @@ body {
           backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
+.backdrop-blur-sm {
+  --tw-backdrop-blur: blur(4px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -2649,16 +3756,221 @@ body {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
+.before\:visible::before {
+  content: var(--tw-content);
+  visibility: visible;
+}
+
+.before\:absolute::before {
+  content: var(--tw-content);
+  position: absolute;
+}
+
+.before\:h-2::before {
+  content: var(--tw-content);
+  height: 0.5rem;
+}
+
+.before\:w-2::before {
+  content: var(--tw-content);
+  width: 0.5rem;
+}
+
+.before\:rotate-45::before {
+  content: var(--tw-content);
+  --tw-rotate: 45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.before\:rounded-sm::before {
+  content: var(--tw-content);
+  border-radius: 0.125rem;
+}
+
+.before\:border::before {
+  content: var(--tw-content);
+  border-width: 1px;
+}
+
+.before\:border-b-0::before {
+  content: var(--tw-content);
+  border-bottom-width: 0px;
+}
+
+.before\:border-r-0::before {
+  content: var(--tw-content);
+  border-right-width: 0px;
+}
+
+.before\:border-gray-300::before {
+  content: var(--tw-content);
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
+.before\:bg-white::before {
+  content: var(--tw-content);
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.after\:absolute::after {
+  content: var(--tw-content);
+  position: absolute;
+}
+
+.after\:-inset-0::after {
+  content: var(--tw-content);
+  inset: -0px;
+}
+
+.after\:-inset-0\.5::after {
+  content: var(--tw-content);
+  inset: -0.125rem;
+}
+
+.after\:inline-block::after {
+  content: var(--tw-content);
+  display: inline-block;
+}
+
+.after\:h-5::after {
+  content: var(--tw-content);
+  height: 1.25rem;
+}
+
+.after\:w-full::after {
+  content: var(--tw-content);
+  width: 100%;
+}
+
+.after\:min-w-\[2rem\]::after {
+  content: var(--tw-content);
+  min-width: 2rem;
+}
+
+@keyframes pulse {
+  50% {
+    content: var(--tw-content);
+    opacity: .5;
+  }
+}
+
+.after\:animate-pulse::after {
+  content: var(--tw-content);
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.after\:rounded::after {
+  content: var(--tw-content);
+  border-radius: 0.25rem;
+}
+
+.after\:bg-gradient-to-r::after {
+  content: var(--tw-content);
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
+.after\:from-gray-100::after {
+  content: var(--tw-content);
+  --tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.after\:to-gray-200::after {
+  content: var(--tw-content);
+  --tw-gradient-to: #e5e7eb var(--tw-gradient-to-position);
+}
+
+.after\:transition-all::after {
+  content: var(--tw-content);
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.after\:duration-500::after {
+  content: var(--tw-content);
+  transition-duration: 500ms;
+}
+
+.after\:content-\[\'\'\]::after {
+  --tw-content: '';
+  content: var(--tw-content);
+}
+
+.checked\:border-0:checked {
+  border-width: 0px;
+}
+
+.checked\:bg-primary-100:checked {
+  --tw-bg-opacity: 1;
+  background-color: rgb(205 222 227 / var(--tw-bg-opacity));
+}
+
+.checked\:bg-red-100:checked {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 204 204 / var(--tw-bg-opacity));
+}
+
+.checked\:bg-red-600:checked {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 0 0 / var(--tw-bg-opacity));
+}
+
+.checked\:font-semibold:checked {
+  font-weight: 600;
+}
+
+.checked\:text-primary-900:checked {
+  --tw-text-opacity: 1;
+  color: rgb(1 18 23 / var(--tw-text-opacity));
+}
+
+.checked\:text-red-900:checked {
+  --tw-text-opacity: 1;
+  color: rgb(51 0 0 / var(--tw-text-opacity));
+}
+
+.checked\:text-white:checked {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .hover\:border-primary-500:hover {
   --tw-border-opacity: 1;
   border-color: rgb(3 91 113 / var(--tw-border-opacity));
 }
 
+.hover\:bg-blue-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-blue-400\/20:hover {
+  background-color: rgb(96 165 250 / 0.2);
+}
+
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-green-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-green-400\/20:hover {
+  background-color: rgb(74 222 128 / 0.2);
+}
+
 .hover\:bg-indigo-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(99 102 241 / var(--tw-bg-opacity));
@@ -2679,11 +3991,29 @@ body {
   background-color: rgb(154 189 198 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-primary-400\/20:hover {
+  background-color: rgb(53 124 141 / 0.2);
+}
+
 .hover\:bg-primary-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(2 73 90 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-red-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 204 204 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-red-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 153 153 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-red-400\/20:hover {
+  background-color: rgb(255 51 51 / 0.2);
+}
+
 .hover\:bg-red-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 0 0 / var(--tw-bg-opacity));
@@ -2694,45 +4024,141 @@ body {
   background-color: rgb(2 73 90 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-yellow-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 204 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-yellow-400\/20:hover {
+  background-color: rgb(255 255 51 / 0.2);
+}
+
 .hover\:bg-yellow-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 0 / var(--tw-bg-opacity));
 }
 
+.hover\:text-gray-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.hover\:text-gray-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .hover\:text-primary-500:hover {
   --tw-text-opacity: 1;
   color: rgb(3 91 113 / var(--tw-text-opacity));
 }
 
+.hover\:text-red-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(102 0 0 / var(--tw-text-opacity));
+}
+
 .hover\:text-vtd-primary-700:hover {
   --tw-text-opacity: 1;
   color: rgb(2 73 90 / var(--tw-text-opacity));
 }
 
+.hover\:shadow-sm:hover {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.focus\:z-10:focus {
+  z-index: 10;
+}
+
 .focus\:border-0:focus {
   border-width: 0px;
 }
 
+.focus\:border-b:focus {
+  border-bottom-width: 1px;
+}
+
+.focus\:border-t:focus {
+  border-top-width: 1px;
+}
+
+.focus\:border-primary-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(3 91 113 / var(--tw-border-opacity));
+}
+
+.focus\:border-red-400:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 51 51 / var(--tw-border-opacity));
+}
+
 .focus\:border-vtd-primary-300:focus {
   --tw-border-opacity: 1;
   border-color: rgb(104 157 170 / var(--tw-border-opacity));
 }
 
+.focus\:bg-gray-300\/10:focus {
+  background-color: rgb(209 213 219 / 0.1);
+}
+
+.focus\:bg-primary-500:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 91 113 / var(--tw-bg-opacity));
+}
+
+.focus\:bg-red-500:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 0 0 / var(--tw-bg-opacity));
+}
+
 .focus\:bg-vtd-primary-50:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(230 239 241 / var(--tw-bg-opacity));
 }
 
+.focus\:text-gray-200:focus {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
 .focus\:text-gray-500:focus {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
+.focus\:text-gray-600:focus {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+.focus\:text-red-600:focus {
+  --tw-text-opacity: 1;
+  color: rgb(204 0 0 / var(--tw-text-opacity));
+}
+
 .focus\:text-vtd-primary-600:focus {
   --tw-text-opacity: 1;
   color: rgb(2 73 90 / var(--tw-text-opacity));
 }
 
+.focus\:text-white:focus {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.focus\:underline:focus {
+  text-decoration-line: underline;
+}
+
+.focus\:shadow-none:focus {
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2764,6 +4190,21 @@ body {
   --tw-ring-inset: inset;
 }
 
+.focus\:ring-blue-600:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-green-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-green-600:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(22 163 74 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-indigo-500:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
@@ -2774,6 +4215,21 @@ body {
   --tw-ring-color: rgb(3 91 113 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-primary-600:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(2 73 90 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-red-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 0 0 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-red-600:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(204 0 0 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-vtd-primary-500:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(3 91 113 / var(--tw-ring-opacity));
@@ -2784,10 +4240,23 @@ body {
   --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-yellow-600:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(204 204 0 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-opacity-10:focus {
   --tw-ring-opacity: 0.1;
 }
 
+.focus\:ring-opacity-50:focus {
+  --tw-ring-opacity: 0.5;
+}
+
+.focus\:ring-opacity-70:focus {
+  --tw-ring-opacity: 0.7;
+}
+
 .focus\:ring-offset-0:focus {
   --tw-ring-offset-width: 0px;
 }
@@ -2796,6 +4265,26 @@ body {
   --tw-ring-offset-width: 2px;
 }
 
+.focus\:ring-offset-blue-50:focus {
+  --tw-ring-offset-color: #eff6ff;
+}
+
+.focus\:ring-offset-green-50:focus {
+  --tw-ring-offset-color: #f0fdf4;
+}
+
+.focus\:ring-offset-red-50:focus {
+  --tw-ring-offset-color: #ffe5e5;
+}
+
+.focus\:ring-offset-white:focus {
+  --tw-ring-offset-color: #fff;
+}
+
+.focus\:ring-offset-yellow-50:focus {
+  --tw-ring-offset-color: #ffffe5;
+}
+
 .focus-visible\:outline:focus-visible {
   outline-style: solid;
 }
@@ -2818,15 +4307,21 @@ body {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus-visible\:ring-primary-600:focus-visible {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(2 73 90 / var(--tw-ring-opacity));
+}
+
+.focus-visible\:ring-red-500:focus-visible {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 0 0 / var(--tw-ring-opacity));
+}
+
 .focus-visible\:ring-white:focus-visible {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
 }
 
-.focus-visible\:ring-white\/75:focus-visible {
-  --tw-ring-color: rgb(255 255 255 / 0.75);
-}
-
 .focus-visible\:ring-opacity-75:focus-visible {
   --tw-ring-opacity: 0.75;
 }
@@ -2873,10 +4368,23 @@ body {
   color: rgb(53 124 141 / var(--tw-text-opacity));
 }
 
+.disabled\:opacity-50:disabled {
+  opacity: 0.5;
+}
+
+.group:hover .group-hover\:visible {
+  visibility: visible;
+}
+
 .group:hover .group-hover\:block {
   display: block;
 }
 
+.group:hover .group-hover\:bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
 .group:hover .group-hover\:bg-primary-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(3 91 113 / var(--tw-bg-opacity));
@@ -2909,51 +4417,745 @@ body {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.group:focus .group-focus\:visible {
+  visibility: visible;
+}
+
 .peer:checked ~ .peer-checked\:text-primary-500 {
   --tw-text-opacity: 1;
   color: rgb(3 91 113 / var(--tw-text-opacity));
 }
 
-@media (prefers-color-scheme: dark) {
-  .dark\:bg-opacity-50 {
-    --tw-bg-opacity: 0.5;
-  }
+:is(.dark .dark\:divide-gray-700) > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-divide-opacity));
+}
 
-  .dark\:text-vtd-primary-400 {
-    --tw-text-opacity: 1;
-    color: rgb(53 124 141 / var(--tw-text-opacity));
-  }
+:is(.dark .dark\:divide-gray-700\/90) > :not([hidden]) ~ :not([hidden]) {
+  border-color: rgb(55 65 81 / 0.9);
+}
 
-  .dark\:text-opacity-70 {
-    --tw-text-opacity: 0.7;
-  }
+:is(.dark .dark\:divide-gray-800) > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(31 41 55 / var(--tw-divide-opacity));
+}
 
-  .dark\:hover\:text-vtd-primary-300:hover {
-    --tw-text-opacity: 1;
-    color: rgb(104 157 170 / var(--tw-text-opacity));
-  }
+:is(.dark .dark\:divide-gray-900) > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(17 24 39 / var(--tw-divide-opacity));
+}
 
-  .dark\:focus\:border-vtd-primary-500:focus {
-    --tw-border-opacity: 1;
-    border-color: rgb(3 91 113 / var(--tw-border-opacity));
-  }
+:is(.dark .dark\:border) {
+  border-width: 1px;
+}
 
-  .dark\:focus\:bg-opacity-50:focus {
-    --tw-bg-opacity: 0.5;
-  }
+:is(.dark .dark\:border-blue-600) {
+  --tw-border-opacity: 1;
+  border-color: rgb(37 99 235 / var(--tw-border-opacity));
+}
 
-  .dark\:focus\:text-vtd-primary-300:focus {
-    --tw-text-opacity: 1;
-    color: rgb(104 157 170 / var(--tw-text-opacity));
-  }
+:is(.dark .dark\:border-gray-500) {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
 
-  .dark\:focus\:ring-opacity-20:focus {
-    --tw-ring-opacity: 0.2;
-  }
+:is(.dark .dark\:border-gray-600) {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
 
-  .dark\:focus\:ring-opacity-25:focus {
-    --tw-ring-opacity: 0.25;
-  }
+:is(.dark .dark\:border-gray-700) {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity));
+}
+
+:is(.dark .dark\:border-green-500) {
+  --tw-border-opacity: 1;
+  border-color: rgb(34 197 94 / var(--tw-border-opacity));
+}
+
+:is(.dark .dark\:border-green-600) {
+  --tw-border-opacity: 1;
+  border-color: rgb(22 163 74 / var(--tw-border-opacity));
+}
+
+:is(.dark .dark\:border-orange-500) {
+  --tw-border-opacity: 1;
+  border-color: rgb(249 115 22 / var(--tw-border-opacity));
+}
+
+:is(.dark .dark\:border-primary-500) {
+  --tw-border-opacity: 1;
+  border-color: rgb(3 91 113 / var(--tw-border-opacity));
+}
+
+:is(.dark .dark\:border-purple-500) {
+  --tw-border-opacity: 1;
+  border-color: rgb(168 85 247 / var(--tw-border-opacity));
+}
+
+:is(.dark .dark\:border-red-500) {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 0 0 / var(--tw-border-opacity));
+}
+
+:is(.dark .dark\:border-red-600) {
+  --tw-border-opacity: 1;
+  border-color: rgb(204 0 0 / var(--tw-border-opacity));
+}
+
+:is(.dark .dark\:border-yellow-600) {
+  --tw-border-opacity: 1;
+  border-color: rgb(204 204 0 / var(--tw-border-opacity));
+}
+
+:is(.dark .dark\:bg-blue-200) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-blue-600\/10) {
+  background-color: rgb(37 99 235 / 0.1);
+}
+
+:is(.dark .dark\:bg-gray-600) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-gray-700) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-gray-700\/50) {
+  background-color: rgb(55 65 81 / 0.5);
+}
+
+:is(.dark .dark\:bg-gray-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-gray-800\/50) {
+  background-color: rgb(31 41 55 / 0.5);
+}
+
+:is(.dark .dark\:bg-gray-800\/70) {
+  background-color: rgb(31 41 55 / 0.7);
+}
+
+:is(.dark .dark\:bg-gray-900) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-gray-900\/80) {
+  background-color: rgb(17 24 39 / 0.8);
+}
+
+:is(.dark .dark\:bg-green-200) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-green-500) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-green-500\/30) {
+  background-color: rgb(34 197 94 / 0.3);
+}
+
+:is(.dark .dark\:bg-green-600\/10) {
+  background-color: rgb(22 163 74 / 0.1);
+}
+
+:is(.dark .dark\:bg-green-700) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-orange-500) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-orange-500\/30) {
+  background-color: rgb(249 115 22 / 0.3);
+}
+
+:is(.dark .dark\:bg-orange-700) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(194 65 12 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-primary-300) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(104 157 170 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-primary-400) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(53 124 141 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-primary-500) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 91 113 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-primary-500\/20) {
+  background-color: rgb(3 91 113 / 0.2);
+}
+
+:is(.dark .dark\:bg-primary-500\/60) {
+  background-color: rgb(3 91 113 / 0.6);
+}
+
+:is(.dark .dark\:bg-primary-600\/10) {
+  background-color: rgb(2 73 90 / 0.1);
+}
+
+:is(.dark .dark\:bg-purple-500) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(168 85 247 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-purple-500\/30) {
+  background-color: rgb(168 85 247 / 0.3);
+}
+
+:is(.dark .dark\:bg-purple-700) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(126 34 206 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-red-200) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 153 153 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-red-500) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 0 0 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-red-500\/20) {
+  background-color: rgb(255 0 0 / 0.2);
+}
+
+:is(.dark .dark\:bg-red-500\/30) {
+  background-color: rgb(255 0 0 / 0.3);
+}
+
+:is(.dark .dark\:bg-red-500\/70) {
+  background-color: rgb(255 0 0 / 0.7);
+}
+
+:is(.dark .dark\:bg-red-600\/10) {
+  background-color: rgb(204 0 0 / 0.1);
+}
+
+:is(.dark .dark\:bg-red-700) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(153 0 0 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-yellow-200) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 153 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-yellow-600\/10) {
+  background-color: rgb(204 204 0 / 0.1);
+}
+
+:is(.dark .dark\:bg-opacity-50) {
+  --tw-bg-opacity: 0.5;
+}
+
+:is(.dark .dark\:from-gray-500) {
+  --tw-gradient-from: #6b7280 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(107 114 128 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+:is(.dark .dark\:to-gray-700) {
+  --tw-gradient-to: #374151 var(--tw-gradient-to-position);
+}
+
+:is(.dark .dark\:fill-\[\#fff\]) {
+  fill: #fff;
+}
+
+:is(.dark .dark\:text-black) {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-blue-200) {
+  --tw-text-opacity: 1;
+  color: rgb(191 219 254 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-blue-400) {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-blue-700) {
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-blue-900) {
+  --tw-text-opacity: 1;
+  color: rgb(30 58 138 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-blue-900\/90) {
+  color: rgb(30 58 138 / 0.9);
+}
+
+:is(.dark .dark\:text-gray-200) {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-gray-300) {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-gray-400) {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-gray-50) {
+  --tw-text-opacity: 1;
+  color: rgb(249 250 251 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-gray-500) {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-gray-600) {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-gray-700) {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-gray-900) {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-green-200) {
+  --tw-text-opacity: 1;
+  color: rgb(187 247 208 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-green-400) {
+  --tw-text-opacity: 1;
+  color: rgb(74 222 128 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-green-600) {
+  --tw-text-opacity: 1;
+  color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-green-700) {
+  --tw-text-opacity: 1;
+  color: rgb(21 128 61 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-green-900) {
+  --tw-text-opacity: 1;
+  color: rgb(20 83 45 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-green-900\/90) {
+  color: rgb(20 83 45 / 0.9);
+}
+
+:is(.dark .dark\:text-primary-200) {
+  --tw-text-opacity: 1;
+  color: rgb(154 189 198 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-primary-400) {
+  --tw-text-opacity: 1;
+  color: rgb(53 124 141 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-red-200) {
+  --tw-text-opacity: 1;
+  color: rgb(255 153 153 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-red-300) {
+  --tw-text-opacity: 1;
+  color: rgb(255 102 102 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-red-300\/70) {
+  color: rgb(255 102 102 / 0.7);
+}
+
+:is(.dark .dark\:text-red-400) {
+  --tw-text-opacity: 1;
+  color: rgb(255 51 51 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-red-600) {
+  --tw-text-opacity: 1;
+  color: rgb(204 0 0 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-red-700) {
+  --tw-text-opacity: 1;
+  color: rgb(153 0 0 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-red-900) {
+  --tw-text-opacity: 1;
+  color: rgb(51 0 0 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-red-900\/90) {
+  color: rgb(51 0 0 / 0.9);
+}
+
+:is(.dark .dark\:text-vtd-primary-400) {
+  --tw-text-opacity: 1;
+  color: rgb(53 124 141 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-white) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-yellow-200) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 153 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-yellow-400) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 51 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-yellow-600) {
+  --tw-text-opacity: 1;
+  color: rgb(204 204 0 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-yellow-700) {
+  --tw-text-opacity: 1;
+  color: rgb(153 153 0 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-yellow-900) {
+  --tw-text-opacity: 1;
+  color: rgb(51 51 0 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-yellow-900\/90) {
+  color: rgb(51 51 0 / 0.9);
+}
+
+:is(.dark .dark\:text-opacity-70) {
+  --tw-text-opacity: 0.7;
+}
+
+:is(.dark .dark\:ring-gray-200\/20) {
+  --tw-ring-color: rgb(229 231 235 / 0.2);
+}
+
+:is(.dark .dark\:ring-gray-600\/60) {
+  --tw-ring-color: rgb(75 85 99 / 0.6);
+}
+
+:is(.dark .dark\:ring-red-400) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 51 51 / var(--tw-ring-opacity));
+}
+
+:is(.dark .dark\:ring-red-500\/60) {
+  --tw-ring-color: rgb(255 0 0 / 0.6);
+}
+
+:is(.dark .dark\:ring-white\/10) {
+  --tw-ring-color: rgb(255 255 255 / 0.1);
+}
+
+:is(.dark .dark\:ring-white\/20) {
+  --tw-ring-color: rgb(255 255 255 / 0.2);
+}
+
+:is(.dark .dark\:ring-white\/30) {
+  --tw-ring-color: rgb(255 255 255 / 0.3);
+}
+
+:is(.dark .dark\:ring-offset-gray-900) {
+  --tw-ring-offset-color: #111827;
+}
+
+:is(.dark .before\:dark\:border-gray-700)::before {
+  content: var(--tw-content);
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity));
+}
+
+:is(.dark .before\:dark\:bg-gray-900)::before {
+  content: var(--tw-content);
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:after\:from-gray-500)::after {
+  content: var(--tw-content);
+  --tw-gradient-from: #6b7280 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(107 114 128 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+:is(.dark .dark\:after\:to-gray-700)::after {
+  content: var(--tw-content);
+  --tw-gradient-to: #374151 var(--tw-gradient-to-position);
+}
+
+:is(.dark .checked\:dark\:bg-primary-300):checked {
+  --tw-bg-opacity: 1;
+  background-color: rgb(104 157 170 / var(--tw-bg-opacity));
+}
+
+:is(.dark .checked\:dark\:bg-red-300):checked {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 102 102 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:checked\:bg-primary-600:checked) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(2 73 90 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:checked\:bg-red-600:checked) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 0 0 / var(--tw-bg-opacity));
+}
+
+:is(.dark .checked\:dark\:text-black):checked {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:hover\:bg-blue-300:hover) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:hover\:bg-blue-700\/20:hover) {
+  background-color: rgb(29 78 216 / 0.2);
+}
+
+:is(.dark .dark\:hover\:bg-gray-700:hover) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:hover\:bg-green-300:hover) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(134 239 172 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:hover\:bg-green-700\/20:hover) {
+  background-color: rgb(21 128 61 / 0.2);
+}
+
+:is(.dark .dark\:hover\:bg-primary-400\/20:hover) {
+  background-color: rgb(53 124 141 / 0.2);
+}
+
+:is(.dark .dark\:hover\:bg-primary-700\/20:hover) {
+  background-color: rgb(2 73 90 / 0.2);
+}
+
+:is(.dark .dark\:hover\:bg-red-300:hover) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 102 102 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:hover\:bg-red-400\/20:hover) {
+  background-color: rgb(255 51 51 / 0.2);
+}
+
+:is(.dark .dark\:hover\:bg-red-700\/20:hover) {
+  background-color: rgb(153 0 0 / 0.2);
+}
+
+:is(.dark .dark\:hover\:bg-yellow-300:hover) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 102 / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:hover\:bg-yellow-700\/20:hover) {
+  background-color: rgb(153 153 0 / 0.2);
+}
+
+:is(.dark .dark\:hover\:text-gray-100:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:hover\:text-gray-300:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:hover\:text-red-200:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(255 153 153 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:hover\:text-vtd-primary-300:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(104 157 170 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:hover\:text-white:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:focus\:border-primary-600:focus) {
+  --tw-border-opacity: 1;
+  border-color: rgb(2 73 90 / var(--tw-border-opacity));
+}
+
+:is(.dark .dark\:focus\:border-red-400:focus) {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 51 51 / var(--tw-border-opacity));
+}
+
+:is(.dark .dark\:focus\:border-vtd-primary-500:focus) {
+  --tw-border-opacity: 1;
+  border-color: rgb(3 91 113 / var(--tw-border-opacity));
+}
+
+:is(.dark .dark\:focus\:bg-primary-500\/20:focus) {
+  background-color: rgb(3 91 113 / 0.2);
+}
+
+:is(.dark .dark\:focus\:bg-red-500\/20:focus) {
+  background-color: rgb(255 0 0 / 0.2);
+}
+
+:is(.dark .dark\:focus\:bg-opacity-50:focus) {
+  --tw-bg-opacity: 0.5;
+}
+
+:is(.dark .dark\:focus\:text-vtd-primary-300:focus) {
+  --tw-text-opacity: 1;
+  color: rgb(104 157 170 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:focus\:text-white:focus) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:focus\:ring-blue-800:focus) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
+}
+
+:is(.dark .dark\:focus\:ring-green-800:focus) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(22 101 52 / var(--tw-ring-opacity));
+}
+
+:is(.dark .dark\:focus\:ring-primary-500:focus) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(3 91 113 / var(--tw-ring-opacity));
+}
+
+:is(.dark .dark\:focus\:ring-primary-600:focus) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(2 73 90 / var(--tw-ring-opacity));
+}
+
+:is(.dark .dark\:focus\:ring-red-400:focus) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 51 51 / var(--tw-ring-opacity));
+}
+
+:is(.dark .dark\:focus\:ring-red-500:focus) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 0 0 / var(--tw-ring-opacity));
+}
+
+:is(.dark .dark\:focus\:ring-red-800:focus) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(102 0 0 / var(--tw-ring-opacity));
+}
+
+:is(.dark .dark\:focus\:ring-yellow-800:focus) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(102 102 0 / var(--tw-ring-opacity));
+}
+
+:is(.dark .dark\:focus\:ring-opacity-20:focus) {
+  --tw-ring-opacity: 0.2;
+}
+
+:is(.dark .dark\:focus\:ring-opacity-25:focus) {
+  --tw-ring-opacity: 0.25;
+}
+
+:is(.dark .dark\:focus\:ring-offset-blue-200:focus) {
+  --tw-ring-offset-color: #bfdbfe;
+}
+
+:is(.dark .dark\:focus\:ring-offset-gray-800:focus) {
+  --tw-ring-offset-color: #1f2937;
+}
+
+:is(.dark .dark\:focus\:ring-offset-gray-900:focus) {
+  --tw-ring-offset-color: #111827;
+}
+
+:is(.dark .dark\:focus\:ring-offset-green-200:focus) {
+  --tw-ring-offset-color: #bbf7d0;
+}
+
+:is(.dark .dark\:focus\:ring-offset-red-200:focus) {
+  --tw-ring-offset-color: #ff9999;
+}
+
+:is(.dark .dark\:focus\:ring-offset-yellow-200:focus) {
+  --tw-ring-offset-color: #ffff99;
+}
+
+:is(.dark .dark\:focus-visible\:ring-red-500:focus-visible) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 0 0 / var(--tw-ring-opacity));
+}
+
+:is(.dark .group:hover .dark\:group-hover\:bg-gray-600) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
 
 @media (min-width: 640px) {
@@ -2965,6 +5167,10 @@ body {
     position: relative;
   }
 
+  .sm\:left-auto {
+    left: auto;
+  }
+
   .sm\:z-auto {
     z-index: auto;
   }
@@ -2973,6 +5179,10 @@ body {
     order: 0;
   }
 
+  .sm\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
   .sm\:col-start-1 {
     grid-column-start: 1;
   }
@@ -3020,6 +5230,10 @@ body {
     margin-left: 1rem;
   }
 
+  .sm\:mr-1 {
+    margin-right: 0.25rem;
+  }
+
   .sm\:mr-2 {
     margin-right: 0.5rem;
   }
@@ -3052,6 +5266,18 @@ body {
     margin-top: 1.5rem;
   }
 
+  .sm\:mt-px {
+    margin-top: 1px;
+  }
+
+  .sm\:block {
+    display: block;
+  }
+
+  .sm\:inline {
+    display: inline;
+  }
+
   .sm\:flex {
     display: flex;
   }
@@ -3084,10 +5310,18 @@ body {
     max-width: 32rem;
   }
 
+  .sm\:max-w-md {
+    max-width: 28rem;
+  }
+
   .sm\:max-w-sm {
     max-width: 24rem;
   }
 
+  .sm\:max-w-xs {
+    max-width: 20rem;
+  }
+
   .sm\:flex-1 {
     flex: 1 1 0%;
   }
@@ -3113,6 +5347,10 @@ body {
     grid-auto-flow: row dense;
   }
 
+  .sm\:grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
   .sm\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -3121,6 +5359,10 @@ body {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .sm\:flex-row {
+    flex-direction: row;
+  }
+
   .sm\:flex-row-reverse {
     flex-direction: row-reverse;
   }
@@ -3141,18 +5383,33 @@ body {
     justify-content: flex-start;
   }
 
+  .sm\:justify-end {
+    justify-content: flex-end;
+  }
+
   .sm\:justify-between {
     justify-content: space-between;
   }
 
+  .sm\:gap-2 {
+    gap: 0.5rem;
+  }
+
   .sm\:gap-3 {
     gap: 0.75rem;
   }
 
-  .sm\:space-x-10 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(2.5rem * var(--tw-space-x-reverse));
-    margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
+  .sm\:gap-4 {
+    gap: 1rem;
+  }
+
+  .sm\:gap-x-2 {
+    -moz-column-gap: 0.5rem;
+         column-gap: 0.5rem;
+  }
+
+  .sm\:gap-y-0 {
+    row-gap: 0px;
   }
 
   .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
@@ -3177,6 +5434,17 @@ body {
     --tw-space-x-reverse: 1;
   }
 
+  .sm\:divide-y > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-y-reverse: 0;
+    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+  }
+
+  .sm\:divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-opacity: 1;
+    border-color: rgb(229 231 235 / var(--tw-divide-opacity));
+  }
+
   .sm\:overflow-visible {
     overflow: visible;
   }
@@ -3225,6 +5493,16 @@ body {
     padding-right: 1rem;
   }
 
+  .sm\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .sm\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
   .sm\:py-32 {
     padding-top: 8rem;
     padding-bottom: 8rem;
@@ -3235,6 +5513,11 @@ body {
     padding-bottom: 1rem;
   }
 
+  .sm\:py-8 {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
   .sm\:pb-4 {
     padding-bottom: 1rem;
   }
@@ -3243,6 +5526,10 @@ body {
     padding-right: 1.5rem;
   }
 
+  .sm\:pt-0 {
+    padding-top: 0px;
+  }
+
   .sm\:text-left {
     text-align: left;
   }
@@ -3270,6 +5557,10 @@ body {
     --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
+
+  .sm\:duration-700 {
+    transition-duration: 700ms;
+  }
 }
 
 @media (min-width: 768px) {
diff --git a/src/components/Select.vue b/src/components/Select.vue
index 2ec4d57..bec93bd 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -4,16 +4,8 @@ interface DataItem {
   name: any
 }
 
-import { ref, computed, watch } from 'vue'
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxButton,
-  ComboboxOptions,
-  ComboboxOption,
-  TransitionRoot
-} from '@headlessui/vue'
-import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
+import { ref, computed } from 'vue'
+import { RichSelect } from '@flavorly/vanilla-components'
 
 const props = defineProps({
   placeholder: {
@@ -32,106 +24,24 @@ const props = defineProps({
 const emit = defineEmits(['update:selected'])
 
 const data = computed(() => [{ id: 0, name: props.placeholder }, ...props.data])
-
-computed(() => {
-  if (props.selected.id === 0) {
-    selected.value = { id: 0, name: props.placeholder }
-  }
-})
-
-watch(
-  () => props.selected,
-  (value) => {
-    if (value.id === 0) {
-      selected.value = { id: 0, name: props.placeholder }
-    }
-  }
-)
-
-let selected = ref<DataItem>(data.value[0])
-let query = ref('')
-let filteredData = computed(() =>
-  query.value === ''
-    ? data.value
-    : data.value.filter((item: DataItem) =>
-        item.name
-          .toLowerCase()
-          .replace(/\s+/g, '')
-          .includes(query.value.toLowerCase().replace(/\s+/g, ''))
-      )
-)
-
-const show = ref(false)
+const selected = ref(data.value[0].id)
 </script>
 
 <template>
-  <Combobox
-    @update:modelValue="(value) => emit('update:selected', value)"
-    v-model="selected"
-    v-slot="{ open }"
-  >
-    <div class="relative mt-1">
-      <div
-        class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm"
-      >
-        <ComboboxInput
-          class="w-full border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
-          :placeholder="selected.name"
-          :displayValue="(item: any) => (show || open ? '' : item.name)"
-          @change="query = $event.target.value"
-        />
-        <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
-          <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
-        </ComboboxButton>
-      </div>
-      <TransitionRoot
-        leave="transition ease-in duration-100"
-        leaveFrom="opacity-100"
-        leaveTo="opacity-0"
-        @after-leave="query = ''"
-      >
-        <ComboboxOptions
-          static
-          class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
-        >
-          <div
-            v-if="filteredData.length === 0 && query !== ''"
-            class="relative cursor-default select-none py-2 px-4 text-gray-700"
-          >
-            Nothing found.
-          </div>
-
-          <ComboboxOption
-            v-for="item in filteredData"
-            as="template"
-            :key="item.id"
-            :value="item"
-            v-slot="{ selected, active }"
-          >
-            <li
-              class="relative cursor-default select-none py-2 pl-10 pr-4"
-              :class="{
-                'bg-teal-600 text-white': active,
-                'text-gray-900': !active
-              }"
-            >
-              <span
-                class="block truncate"
-                :class="{ 'font-medium': selected, 'font-normal': !selected }"
-              >
-                {{ item.name }}
-              </span>
-              <span
-                v-if="selected"
-                class="absolute inset-y-0 left-0 flex items-center pl-3"
-                :class="{ 'text-white': active, 'text-teal-600': !active }"
-              >
-                <CheckIcon class="h-5 w-5" aria-hidden="true" />
-              </span>
-            </li>
-          </ComboboxOption>
-        </ComboboxOptions>
-      </TransitionRoot>
-    </div>
-  </Combobox>
+  <div class="w-full">
+    <RichSelect
+      v-model="selected"
+      :options="data"
+      :clearable="false"
+      valueAttribute="id"
+      textAttribute="name"
+      @update:modelValue="
+        (value: any) =>
+          emit(
+            'update:selected',
+            data.find((item) => item.id === value)
+          )
+      "
+    />
+  </div>
 </template>
diff --git a/src/main.ts b/src/main.ts
index 472bf77..dec27b9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,14 +7,30 @@ import router from './router'
 import { createApp, provide, h } from 'vue'
 import { DefaultApolloClient } from '@vue/apollo-composable'
 import { apolloClient } from './utils/graphql'
+import { VanillaComponents, defineConfiguration } from '@flavorly/vanilla-components'
 
 const app = createApp({
   setup() {
     provide(DefaultApolloClient, apolloClient())
   },
-  render: () => h(App),
+  render: () => h(App)
 })
 
+app.use(
+  VanillaComponents,
+  defineConfiguration({
+    RichSelect: {
+      classes: {
+        trigger:
+          'bg-gray-200 border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 relative flex items-center justify-between w-full focus:z-10 cursor-pointer text-sm transition duration-100 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed px-4 py-3',
+        searchInput:
+          'inline-block focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 w-full  text-sm px-4 py-2.5 text-gray-700 placeholder-gray-500/60 border-0 rounded-lg bg-gray-200',
+        selectedHighlightedOption: 'font-semibold bg-teal-600 focus:outline-none text-white'
+      }
+    }
+  })
+)
+
 app.use(createPinia())
 app.use(router)
-app.mount('#app')
\ No newline at end of file
+app.mount('#app')
diff --git a/src/types/flavorly-vanilla-components.d.ts b/src/types/flavorly-vanilla-components.d.ts
new file mode 100644
index 0000000..1043071
--- /dev/null
+++ b/src/types/flavorly-vanilla-components.d.ts
@@ -0,0 +1 @@
+declare module '@flavorly/vanilla-components'
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index cc340bc..a805d6f 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -1 +1,33 @@
-<template></template>
+<script setup lang="ts">
+import { RichSelect } from '@flavorly/vanilla-components'
+import { ref } from 'vue'
+const value = ref('Option 1')
+
+const options = [
+  { value: 'Option 1', text: 'One Option' },
+  { value: 'Option 2', text: 'Two Options' },
+  { value: [{ anotherObject: true, nested: 'deep' }], text: 'Complex Object' },
+  {
+    value: 'seprator',
+    text: 'A sperator can be usefull',
+    children: [
+      { value: 'Option 4', text: '4th Option' },
+      { value: 'Option 5', text: '5th Option' }
+    ]
+  }
+]
+</script>
+
+<template>
+  <div class="container bg-red-300 m-auto p-5">
+    <div class="w-full">
+      <RichSelect
+        v-model="value"
+        name="test"
+        :options="options"
+        :clearable="true"
+        placeholder="Please select an option"
+      />
+    </div>
+  </div>
+</template>
diff --git a/tailwind.config.js b/tailwind.config.js
index cf4fde5..272aa71 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,102 +1,105 @@
 /** @type {import('tailwindcss').Config} */
-const colors = require("tailwindcss/colors")
+const colors = require('tailwindcss/colors')
 export default {
   content: [
-    "./index.html",
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
-    "./src/**/**/*.{vue,js,ts,jsx,tsx}",
-    "./node_modules/vue-tailwind-datepicker/**/*.js"
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+    './src/**/**/*.{vue,js,ts,jsx,tsx}',
+    './node_modules/vue-tailwind-datepicker/**/*.js',
+    './node_modules/@flavorly/vanilla-components/dist/presets/tailwind/all.json'
   ],
+  mode: 'jit',
+  darkMode: 'class',
   theme: {
     extend: {
       fontFamily: {
-        sans: ['Plus Jakarta Sans', 'sans-serif'],
+        sans: ['Plus Jakarta Sans', 'sans-serif']
       },
       width: {
-        '266': '266px',
-        '320': '320px',
+        266: '266px',
+        320: '320px'
       },
       height: {
         'screen-80': '80vh'
       },
       colors: {
-        "vtd-primary": {
-          '50': '#e6eff1',
-          '100': '#cddee3',
-          '200': '#9abdc6',
-          '300': '#689daa',
-          '400': '#357c8d',
-          '500': '#035b71',
-          '600': '#02495a',
-          '700': '#02495a',
-          '800': '#01242d',
-          '900': '#011217',
+        'vtd-primary': {
+          50: '#e6eff1',
+          100: '#cddee3',
+          200: '#9abdc6',
+          300: '#689daa',
+          400: '#357c8d',
+          500: '#035b71',
+          600: '#02495a',
+          700: '#02495a',
+          800: '#01242d',
+          900: '#011217'
         },
-        'layout': '#F3F7F9',
-        'dark': '#151617',
-        'aside': '#2E3536',
-        'primary': {
-          '50': '#e6eff1',
-          '100': '#cddee3',
-          '200': '#9abdc6',
-          '300': '#689daa',
-          '400': '#357c8d',
-          '500': '#035b71',
-          '600': '#02495a',
-          '700': '#02495a',
-          '800': '#01242d',
-          '900': '#011217',
+        layout: '#F3F7F9',
+        dark: '#151617',
+        aside: '#2E3536',
+        primary: {
+          50: '#e6eff1',
+          100: '#cddee3',
+          200: '#9abdc6',
+          300: '#689daa',
+          400: '#357c8d',
+          500: '#035b71',
+          600: '#02495a',
+          700: '#02495a',
+          800: '#01242d',
+          900: '#011217'
         },
-        'secondary': {
-          '50': '#e5eef7',
-          '100': '#ccebef',
-          '200': '#99d7df',
-          '300': '#66c2d0',
-          '400': '#33aec0',
-          '500': '#00a2b9',
-          '600': '#007b8d',
-          '700': '#005c6a',
-          '800': '#003e46',
-          '900': '#001f23',
+        secondary: {
+          50: '#e5eef7',
+          100: '#ccebef',
+          200: '#99d7df',
+          300: '#66c2d0',
+          400: '#33aec0',
+          500: '#00a2b9',
+          600: '#007b8d',
+          700: '#005c6a',
+          800: '#003e46',
+          900: '#001f23'
         },
-        'red': {
-          '50': '#ffe5e5',
-          '100': '#ffcccc',
-          '200': '#ff9999',
-          '300': '#ff6666',
-          '400': '#ff3333',
-          '500': '#ff0000',
-          '600': '#cc0000',
-          '700': '#990000',
-          '800': '#660000',
-          '900': '#330000',
+        red: {
+          50: '#ffe5e5',
+          100: '#ffcccc',
+          200: '#ff9999',
+          300: '#ff6666',
+          400: '#ff3333',
+          500: '#ff0000',
+          600: '#cc0000',
+          700: '#990000',
+          800: '#660000',
+          900: '#330000'
         },
-        'yellow': {
-          '50': '#ffffe5',
-          '100': '#ffffcc',
-          '200': '#ffff99',
-          '300': '#ffff66',
-          '400': '#ffff33',
-          '500': '#ffff00',
-          '600': '#cccc00',
-          '700': '#999900',
-          '800': '#666600',
-          '900': '#333300',
+        yellow: {
+          50: '#ffffe5',
+          100: '#ffffcc',
+          200: '#ffff99',
+          300: '#ffff66',
+          400: '#ffff33',
+          500: '#ffff00',
+          600: '#cccc00',
+          700: '#999900',
+          800: '#666600',
+          900: '#333300'
         },
-        'gray': {
-          '50': '#f9fafb',
-          '100': '#f3f4f6',
-          '200': '#e5e7eb',
-          '300': '#d1d5db',
-          '400': '#9ca3af',
-          '500': '#6b7280',
-          '600': '#4b5563',
-          '700': '#374151',
-          '800': '#1f2937',
-          '900': '#111827',
-        },
-      },
-    },
+        gray: {
+          50: '#f9fafb',
+          100: '#f3f4f6',
+          200: '#e5e7eb',
+          300: '#d1d5db',
+          400: '#9ca3af',
+          500: '#6b7280',
+          600: '#4b5563',
+          700: '#374151',
+          800: '#1f2937',
+          900: '#111827'
+        }
+      }
+    }
   },
   plugins: [
     require('@tailwindcss/typography'),
@@ -104,6 +107,6 @@ export default {
     require('@tailwindcss/aspect-ratio'),
     require('@tailwindcss/container-queries'),
     require('@headlessui/tailwindcss'),
-    require('@headlessui/tailwindcss')({ prefix: 'ui' }),
-  ],
-}
\ No newline at end of file
+    require('@headlessui/tailwindcss')({ prefix: 'ui' })
+  ]
+}
diff --git a/tsconfig.json b/tsconfig.json
index e72d361..dbc7b2c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,6 +13,7 @@
   ],
   "compilerOptions": {
     "strict": true,
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+    "typeRoots": ["./src/types", "./node_modules/@types"]
   }
-}
\ No newline at end of file
+}