Merge branch 'dev-bagus' into playground

src/assets/css/style.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -32,9 +32,11 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5;
   /* 1 */
   -webkit-text-size-adjust: 100%;
@@ -50,6 +52,8 @@ html {
   /* 5 */
   font-variation-settings: normal;
   /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
 }
 
 /*
@@ -121,8 +125,10 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -131,8 +137,12 @@ samp,
 pre {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   /* 1 */
-  font-size: 1em;
+  font-feature-settings: normal;
   /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
 }
 
 /*
@@ -979,14 +989,30 @@ body {
   bottom: 0px;
 }
 
+.-bottom-px {
+  bottom: -1px;
+}
+
 .-left-2 {
   left: -0.5rem;
 }
 
+.-left-px {
+  left: -1px;
+}
+
+.-right-px {
+  right: -1px;
+}
+
 .bottom-0 {
   bottom: 0px;
 }
 
+.bottom-auto {
+  bottom: auto;
+}
+
 .left-0 {
   left: 0px;
 }
@@ -1197,8 +1223,13 @@ body {
   margin-right: -3rem;
 }
 
+<<<<<<< HEAD
 .-mr-2 {
   margin-right: -0.5rem;
+=======
+.-mt-px {
+  margin-top: -1px;
+>>>>>>> dev-bagus
 }
 
 .mb-1 {
@@ -1269,6 +1300,13 @@ body {
   margin-right: 0.75rem;
 }
 
+<<<<<<< HEAD
+=======
+.mr-3\.5 {
+  margin-right: 0.875rem;
+}
+
+>>>>>>> dev-bagus
 .mt-0 {
   margin-top: 0px;
 }
@@ -1313,6 +1351,14 @@ body {
   margin-top: 1.5rem;
 }
 
+.box-border {
+  box-sizing: border-box;
+}
+
+.box-content {
+  box-sizing: content-box;
+}
+
 .line-clamp-1 {
   overflow: hidden;
   display: -webkit-box;
@@ -1376,6 +1422,7 @@ body {
   height: 4rem;
 }
 
+<<<<<<< HEAD
 .h-2 {
   height: 0.5rem;
 }
@@ -1388,14 +1435,19 @@ body {
   height: 7rem;
 }
 
+=======
+>>>>>>> dev-bagus
 .h-3 {
   height: 0.75rem;
 }
 
+<<<<<<< HEAD
 .h-3\.5 {
   height: 0.875rem;
 }
 
+=======
+>>>>>>> dev-bagus
 .h-4 {
   height: 1rem;
 }
@@ -1449,6 +1501,10 @@ body {
   height: 100%;
 }
 
+.h-px {
+  height: 1px;
+}
+
 .h-screen-80 {
   height: 80vh;
 }
@@ -1521,22 +1577,30 @@ body {
   width: 0.5rem;
 }
 
+<<<<<<< HEAD
 .w-20 {
   width: 5rem;
 }
 
 .w-28 {
   width: 7rem;
+=======
+.w-2\.5 {
+  width: 0.625rem;
+>>>>>>> dev-bagus
 }
 
 .w-3 {
   width: 0.75rem;
 }
 
+<<<<<<< HEAD
 .w-3\.5 {
   width: 0.875rem;
 }
 
+=======
+>>>>>>> dev-bagus
 .w-4 {
   width: 1rem;
 }
@@ -1629,6 +1693,7 @@ body {
   max-width: 100%;
 }
 
+<<<<<<< HEAD
 .max-w-lg {
   max-width: 32rem;
 }
@@ -1637,6 +1702,8 @@ body {
   max-width: 28rem;
 }
 
+=======
+>>>>>>> dev-bagus
 .max-w-sm {
   max-width: 24rem;
 }
@@ -1669,6 +1736,10 @@ body {
   flex-grow: 1;
 }
 
+.flex-grow-0 {
+  flex-grow: 0;
+}
+
 .grow {
   flex-grow: 1;
 }
@@ -1824,6 +1895,13 @@ body {
   scroll-padding-bottom: 0.5rem;
 }
 
+<<<<<<< HEAD
+=======
+.list-none {
+  list-style-type: none;
+}
+
+>>>>>>> dev-bagus
 .appearance-none {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -1902,10 +1980,6 @@ body {
   gap: 0.25rem;
 }
 
-.gap-2 {
-  gap: 0.5rem;
-}
-
 .gap-3 {
   gap: 0.75rem;
 }
@@ -2030,12 +2104,24 @@ body {
   overflow-y: auto;
 }
 
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.whitespace-normal {
+  white-space: normal;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -2044,6 +2130,10 @@ body {
   white-space: pre-wrap;
 }
 
+.break-all {
+  word-break: break-all;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -2064,19 +2154,30 @@ body {
   border-radius: 0.375rem;
 }
 
+<<<<<<< HEAD
 .rounded-none {
   border-radius: 0px;
+=======
+.rounded-sm {
+  border-radius: 0.125rem;
+>>>>>>> dev-bagus
 }
 
 .rounded-xl {
   border-radius: 0.75rem;
 }
 
+.rounded-b {
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
 .rounded-b-2xl {
   border-bottom-right-radius: 1rem;
   border-bottom-left-radius: 1rem;
 }
 
+<<<<<<< HEAD
 .rounded-b-lg {
   border-bottom-right-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
@@ -2087,6 +2188,8 @@ body {
   border-bottom-left-radius: 0.375rem;
 }
 
+=======
+>>>>>>> dev-bagus
 .rounded-b-none {
   border-bottom-right-radius: 0px;
   border-bottom-left-radius: 0px;
@@ -2122,6 +2225,7 @@ body {
   border-bottom-right-radius: 9999px;
 }
 
+<<<<<<< HEAD
 .rounded-r-lg {
   border-top-right-radius: 0.5rem;
   border-bottom-right-radius: 0.5rem;
@@ -2135,6 +2239,11 @@ body {
 .rounded-r-none {
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
+=======
+.rounded-t {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+>>>>>>> dev-bagus
 }
 
 .rounded-t-2xl {
@@ -2142,6 +2251,7 @@ body {
   border-top-right-radius: 1rem;
 }
 
+<<<<<<< HEAD
 .rounded-t-lg {
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
@@ -2152,11 +2262,14 @@ body {
   border-top-right-radius: 0.375rem;
 }
 
+=======
+>>>>>>> dev-bagus
 .rounded-t-none {
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
 }
 
+<<<<<<< HEAD
 .rounded-bl-lg {
   border-bottom-left-radius: 0.5rem;
 }
@@ -2189,6 +2302,8 @@ body {
   border-top-right-radius: 0.375rem;
 }
 
+=======
+>>>>>>> dev-bagus
 .border {
   border-width: 1px;
 }
@@ -2326,6 +2441,7 @@ body {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
+<<<<<<< HEAD
 .bg-black\/50 {
   background-color: rgb(0 0 0 / 0.5);
 }
@@ -2354,6 +2470,8 @@ body {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
+=======
+>>>>>>> dev-bagus
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -2364,6 +2482,11 @@ body {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
 .bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -2392,6 +2515,7 @@ body {
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
+<<<<<<< HEAD
 .bg-green-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity));
@@ -2411,6 +2535,8 @@ body {
   background-color: rgb(240 253 244 / var(--tw-bg-opacity));
 }
 
+=======
+>>>>>>> dev-bagus
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
@@ -2421,11 +2547,14 @@ body {
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
 
+<<<<<<< HEAD
 .bg-indigo-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(99 102 241 / var(--tw-bg-opacity));
 }
 
+=======
+>>>>>>> dev-bagus
 .bg-indigo-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
@@ -2607,6 +2736,10 @@ body {
   --tw-bg-opacity: 0.05;
 }
 
+.bg-opacity-50 {
+  --tw-bg-opacity: 0.5;
+}
+
 .bg-opacity-60 {
   --tw-bg-opacity: 0.6;
 }
@@ -2619,14 +2752,28 @@ body {
   --tw-bg-opacity: 0.8;
 }
 
+<<<<<<< HEAD
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
+=======
+.bg-multiselect-caret {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 320 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'%3e%3c/path%3e%3c/svg%3e");
+}
+
+.bg-multiselect-remove {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 320 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z'%3e%3c/path%3e%3c/svg%3e");
+}
+
+.bg-multiselect-spinner {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 512 512' fill='%2322c55e' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M456.433 371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 5.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 8.042 232.792-4.082 8.369-14.361 11.575-22.424 6.92z'%3e%3c/path%3e%3c/svg%3e");
+>>>>>>> dev-bagus
 }
 
 .bg-none {
   background-image: none;
 }
 
+<<<<<<< HEAD
 .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);
@@ -2641,16 +2788,23 @@ body {
   background-size: cover;
 }
 
+=======
+>>>>>>> dev-bagus
 .bg-center {
   background-position: center;
 }
 
+<<<<<<< HEAD
 .fill-\[\#4f46e5\] {
   fill: #4f46e5;
 }
 
 .fill-current {
   fill: currentColor;
+=======
+.bg-no-repeat {
+  background-repeat: no-repeat;
+>>>>>>> dev-bagus
 }
 
 .fill-gray-500 {
@@ -2715,10 +2869,6 @@ body {
   padding: 0px;
 }
 
-.p-0\.5 {
-  padding: 0.125rem;
-}
-
 .p-1 {
   padding: 0.25rem;
 }
@@ -2895,12 +3045,17 @@ body {
   padding-left: 0.75rem;
 }
 
+<<<<<<< HEAD
 .pr-0 {
   padding-right: 0px;
 }
 
 .pr-0\.5 {
   padding-right: 0.125rem;
+=======
+.pl-3\.5 {
+  padding-left: 0.875rem;
+>>>>>>> dev-bagus
 }
 
 .pr-10 {
@@ -2911,6 +3066,10 @@ body {
   padding-right: 3rem;
 }
 
+.pr-16 {
+  padding-right: 4rem;
+}
+
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -2919,6 +3078,13 @@ body {
   padding-right: 0.75rem;
 }
 
+<<<<<<< HEAD
+=======
+.pr-3\.5 {
+  padding-right: 0.875rem;
+}
+
+>>>>>>> dev-bagus
 .pr-4 {
   padding-right: 1rem;
 }
@@ -2975,8 +3141,13 @@ body {
   text-align: start;
 }
 
+<<<<<<< HEAD
 .align-middle {
   vertical-align: middle;
+=======
+.font-sans {
+  font-family: Plus Jakarta Sans, sans-serif;
+>>>>>>> dev-bagus
 }
 
 .text-2xl {
@@ -3071,10 +3242,18 @@ body {
   line-height: 1;
 }
 
+.leading-normal {
+  line-height: 1.5;
+}
+
 .leading-relaxed {
   line-height: 1.625;
 }
 
+.leading-snug {
+  line-height: 1.375;
+}
+
 .tracking-tight {
   letter-spacing: -0.025em;
 }
@@ -3097,6 +3276,7 @@ body {
   color: rgb(96 165 250 / var(--tw-text-opacity));
 }
 
+<<<<<<< HEAD
 .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
@@ -3117,6 +3297,8 @@ body {
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
 
+=======
+>>>>>>> dev-bagus
 .text-dark {
   --tw-text-opacity: 1;
   color: rgb(21 22 23 / var(--tw-text-opacity));
@@ -3166,6 +3348,11 @@ body {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.text-green-100 {
+  --tw-text-opacity: 1;
+  color: rgb(220 252 231 / var(--tw-text-opacity));
+}
+
 .text-green-400 {
   --tw-text-opacity: 1;
   color: rgb(74 222 128 / var(--tw-text-opacity));
@@ -3316,6 +3503,10 @@ body {
   color: rgb(13 148 136 / var(--tw-text-opacity));
 }
 
+.text-transparent {
+  color: transparent;
+}
+
 .text-vtd-primary-500 {
   --tw-text-opacity: 1;
   color: rgb(3 91 113 / var(--tw-text-opacity));
@@ -3434,6 +3625,10 @@ body {
   opacity: 0.75;
 }
 
+.opacity-90 {
+  opacity: 0.9;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -3521,6 +3716,7 @@ body {
   --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
 }
 
+<<<<<<< HEAD
 .ring-blue-400\/50 {
   --tw-ring-color: rgb(96 165 250 / 0.5);
 }
@@ -3529,6 +3725,8 @@ body {
   --tw-ring-color: rgb(29 78 216 / 0.1);
 }
 
+=======
+>>>>>>> dev-bagus
 .ring-gray-300 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
@@ -3943,6 +4141,7 @@ body {
   border-color: rgb(3 91 113 / var(--tw-border-opacity));
 }
 
+<<<<<<< HEAD
 .hover\:bg-blue-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
@@ -3955,6 +4154,11 @@ body {
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+=======
+.hover\:bg-black:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+>>>>>>> dev-bagus
 }
 
 .hover\:bg-gray-50:hover {
@@ -4038,6 +4242,7 @@ body {
   background-color: rgb(255 255 0 / var(--tw-bg-opacity));
 }
 
+<<<<<<< HEAD
 .hover\:text-gray-400:hover {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -4046,6 +4251,10 @@ body {
 .hover\:text-gray-500:hover {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
+=======
+.hover\:bg-opacity-10:hover {
+  --tw-bg-opacity: 0.1;
+>>>>>>> dev-bagus
 }
 
 .hover\:text-primary-500:hover {
@@ -4063,6 +4272,7 @@ body {
   color: rgb(2 73 90 / var(--tw-text-opacity));
 }
 
+<<<<<<< HEAD
 .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);
@@ -4071,6 +4281,10 @@ body {
 
 .focus\:z-10:focus {
   z-index: 10;
+=======
+.hover\:opacity-80:hover {
+  opacity: 0.8;
+>>>>>>> dev-bagus
 }
 
 .focus\:border-0:focus {
@@ -4417,8 +4631,13 @@ body {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+<<<<<<< HEAD
 .group:focus .group-focus\:visible {
   visibility: visible;
+=======
+.group:hover .group-hover\:opacity-60 {
+  opacity: 0.6;
+>>>>>>> dev-bagus
 }
 
 .peer:checked ~ .peer-checked\:text-primary-500 {
@@ -4426,6 +4645,7 @@ body {
   color: rgb(3 91 113 / var(--tw-text-opacity));
 }
 
+<<<<<<< HEAD
 :is(.dark .dark\:divide-gray-700) > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-divide-opacity));
@@ -5158,6 +5378,8 @@ body {
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
 
+=======
+>>>>>>> dev-bagus
 @media (min-width: 640px) {
   .sm\:static {
     position: static;
@@ -5743,3 +5965,105 @@ body {
     line-height: 1.25rem;
   }
 }
+
+.rtl\:left-auto:where([dir="rtl"], [dir="rtl"] *) {
+  left: auto;
+}
+
+.rtl\:right-0:where([dir="rtl"], [dir="rtl"] *) {
+  right: 0px;
+}
+
+.rtl\:ml-1:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: 0.25rem;
+}
+
+.rtl\:ml-3:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: 0.75rem;
+}
+
+.rtl\:ml-3\.5:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: 0.875rem;
+}
+
+.rtl\:mr-0:where([dir="rtl"], [dir="rtl"] *) {
+  margin-right: 0px;
+}
+
+.rtl\:pl-0:where([dir="rtl"], [dir="rtl"] *) {
+  padding-left: 0px;
+}
+
+.rtl\:pl-2:where([dir="rtl"], [dir="rtl"] *) {
+  padding-left: 0.5rem;
+}
+
+.rtl\:pl-3:where([dir="rtl"], [dir="rtl"] *) {
+  padding-left: 0.75rem;
+}
+
+.rtl\:pl-3\.5:where([dir="rtl"], [dir="rtl"] *) {
+  padding-left: 0.875rem;
+}
+
+.rtl\:pr-0:where([dir="rtl"], [dir="rtl"] *) {
+  padding-right: 0px;
+}
+
+.rtl\:pr-2:where([dir="rtl"], [dir="rtl"] *) {
+  padding-right: 0.5rem;
+}
+
+.rtl\:pr-3:where([dir="rtl"], [dir="rtl"] *) {
+  padding-right: 0.75rem;
+}
+
+.rtl\:pr-3\.5:where([dir="rtl"], [dir="rtl"] *) {
+  padding-right: 0.875rem;
+}
+
+.rtl\:text-right:where([dir="rtl"], [dir="rtl"] *) {
+  text-align: right;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dark\:bg-opacity-50 {
+    --tw-bg-opacity: 0.5;
+  }
+
+  .dark\:text-vtd-primary-400 {
+    --tw-text-opacity: 1;
+    color: rgb(53 124 141 / var(--tw-text-opacity));
+  }
+
+  .dark\:text-opacity-70 {
+    --tw-text-opacity: 0.7;
+  }
+
+  .dark\:hover\:text-vtd-primary-300:hover {
+    --tw-text-opacity: 1;
+    color: rgb(104 157 170 / var(--tw-text-opacity));
+  }
+
+  .dark\:focus\:border-vtd-primary-500:focus {
+    --tw-border-opacity: 1;
+    border-color: rgb(3 91 113 / var(--tw-border-opacity));
+  }
+
+  .dark\:focus\:bg-opacity-50:focus {
+    --tw-bg-opacity: 0.5;
+  }
+
+  .dark\:focus\:text-vtd-primary-300:focus {
+    --tw-text-opacity: 1;
+    color: rgb(104 157 170 / var(--tw-text-opacity));
+  }
+
+  .dark\:focus\:ring-opacity-20:focus {
+    --tw-ring-opacity: 0.2;
+  }
+
+  .dark\:focus\:ring-opacity-25:focus {
+    --tw-ring-opacity: 0.25;
+  }
+}