diff --git a/langs/en.json b/langs/en.json
index 72b2d8cc3..65dec68dd 100644
--- a/langs/en.json
+++ b/langs/en.json
@@ -301,8 +301,11 @@
         "logout": "Log out",
         "mappingsAreHidden": "Some options are hidden. Use search to show more options.",
         "menu": {
+            "aboutCurrentThemeTitle": "About this map",
             "aboutMapComplete": "About MapComplete",
-            "filter": "Filter data"
+            "filter": "Filter data",
+            "moreUtilsTitle": "Discover more",
+            "showIntroduction": "Show introduction"
         },
         "morescreen": {
             "createYourOwnTheme": "Create your own MapComplete theme from scratch",
diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index 75c2e89fd..2cd367143 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -25,7 +25,7 @@
   /* 2 */
   border-style: solid;
   /* 2 */
-  border-color: #e5e7eb;
+  border-color: #E5E7EB;
   /* 2 */
 }
 
@@ -362,7 +362,7 @@ input::placeholder,
 textarea::placeholder {
   opacity: 1;
   /* 1 */
-  color: #9ca3af;
+  color: #9CA3AF;
   /* 2 */
 }
 
@@ -419,6 +419,471 @@ video {
   display: none;
 }
 
+[data-tooltip-style^='light'] + .tooltip > .tooltip-arrow:before {
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+
+[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='top'] > .tooltip-arrow:before {
+  border-bottom-width: 1px;
+  border-right-width: 1px;
+}
+
+[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='right'] > .tooltip-arrow:before {
+  border-bottom-width: 1px;
+  border-left-width: 1px;
+}
+
+[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='bottom'] > .tooltip-arrow:before {
+  border-top-width: 1px;
+  border-left-width: 1px;
+}
+
+[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='left'] > .tooltip-arrow:before {
+  border-top-width: 1px;
+  border-right-width: 1px;
+}
+
+.tooltip[data-popper-placement^='top'] > .tooltip-arrow {
+  bottom: -4px;
+}
+
+.tooltip[data-popper-placement^='bottom'] > .tooltip-arrow {
+  top: -4px;
+}
+
+.tooltip[data-popper-placement^='left'] > .tooltip-arrow {
+  right: -4px;
+}
+
+.tooltip[data-popper-placement^='right'] > .tooltip-arrow {
+  left: -4px;
+}
+
+.tooltip.invisible > .tooltip-arrow:before {
+  visibility: hidden;
+}
+
+[data-popper-arrow],[data-popper-arrow]:before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+
+[data-popper-arrow] {
+  visibility: hidden;
+}
+
+[data-popper-arrow]:before {
+  content: "";
+  visibility: visible;
+  transform: rotate(45deg);
+}
+
+[data-popper-arrow]:after {
+  content: "";
+  visibility: visible;
+  transform: rotate(45deg);
+  position: absolute;
+  width: 9px;
+  height: 9px;
+  background: inherit;
+}
+
+[role="tooltip"] > [data-popper-arrow]:before {
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+
+.dark [role="tooltip"] > [data-popper-arrow]:before {
+  border-style: solid;
+  border-color: #4b5563;
+}
+
+[role="tooltip"] > [data-popper-arrow]:after {
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+
+.dark [role="tooltip"] > [data-popper-arrow]:after {
+  border-style: solid;
+  border-color: #4b5563;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]:before {
+  border-bottom-width: 1px;
+  border-right-width: 1px;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]:after {
+  border-bottom-width: 1px;
+  border-right-width: 1px;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]:before {
+  border-bottom-width: 1px;
+  border-left-width: 1px;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]:after {
+  border-bottom-width: 1px;
+  border-left-width: 1px;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]:before {
+  border-top-width: 1px;
+  border-left-width: 1px;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]:after {
+  border-top-width: 1px;
+  border-left-width: 1px;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]:before {
+  border-top-width: 1px;
+  border-right-width: 1px;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]:after {
+  border-top-width: 1px;
+  border-right-width: 1px;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow] {
+  bottom: -5px;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow] {
+  top: -5px;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow] {
+  right: -5px;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow] {
+  left: -5px;
+}
+
+[role="tooltip"].invisible > [data-popper-arrow]:before {
+  visibility: hidden;
+}
+
+[role="tooltip"].invisible > [data-popper-arrow]:after {
+  visibility: hidden;
+}
+
+[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
+  -webkit-appearance: none;
+          appearance: none;
+  background-color: #fff;
+  border-color: #6B7280;
+  border-width: 1px;
+  border-radius: 0px;
+  padding-top: 0.5rem;
+  padding-right: 0.75rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  --tw-shadow: 0 0 #0000;
+}
+
+[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #1C64F2;
+  --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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  border-color: #1C64F2;
+}
+
+input::placeholder,textarea::placeholder {
+  color: #6B7280;
+  opacity: 1;
+}
+
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+
+::-webkit-date-and-time-value {
+  min-height: 1.5em;
+}
+
+select:not([size]) {
+  background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3e %3c/svg%3e");
+  background-position: right 0.75rem center;
+  background-repeat: no-repeat;
+  background-size: 0.75em 0.75em;
+  padding-right: 2.5rem;
+  -webkit-print-color-adjust: exact;
+          print-color-adjust: exact;
+}
+
+:is([dir=rtl]) select:not([size]) {
+  background-position: left 0.75rem center;
+  padding-right: 0.75rem;
+  padding-left: 0;
+}
+
+[multiple] {
+  background-image: initial;
+  background-position: initial;
+  background-repeat: unset;
+  background-size: initial;
+  padding-right: 0.75rem;
+  -webkit-print-color-adjust: unset;
+          print-color-adjust: unset;
+}
+
+[type='checkbox'],[type='radio'] {
+  -webkit-appearance: none;
+          appearance: none;
+  padding: 0;
+  -webkit-print-color-adjust: exact;
+          print-color-adjust: exact;
+  display: inline-block;
+  vertical-align: middle;
+  background-origin: border-box;
+  -webkit-user-select: none;
+          user-select: none;
+  flex-shrink: 0;
+  height: 1rem;
+  width: 1rem;
+  color: #1C64F2;
+  background-color: #fff;
+  border-color: #6B7280;
+  border-width: 1px;
+  --tw-shadow: 0 0 #0000;
+}
+
+[type='checkbox'] {
+  border-radius: 0px;
+}
+
+[type='radio'] {
+  border-radius: 100%;
+}
+
+[type='checkbox']:focus,[type='radio']:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width: 2px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #1C64F2;
+  --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);
+}
+
+[type='checkbox']:checked,[type='radio']:checked,.dark [type='checkbox']:checked,.dark [type='radio']:checked {
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 0.55em 0.55em;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+[type='checkbox']:checked {
+  background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3e %3c/svg%3e");
+  background-repeat: no-repeat;
+  background-size: 0.55em 0.55em;
+  -webkit-print-color-adjust: exact;
+          print-color-adjust: exact;
+}
+
+[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");
+  background-size: 1em 1em;
+}
+
+.dark [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");
+  background-size: 1em 1em;
+}
+
+[type='checkbox']:indeterminate {
+  background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M0.5 6h14'/%3e %3c/svg%3e");
+  background-color: currentColor;
+  border-color: transparent;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 0.55em 0.55em;
+  -webkit-print-color-adjust: exact;
+          print-color-adjust: exact;
+}
+
+[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
+  border-color: transparent;
+  background-color: currentColor;
+}
+
+[type='file'] {
+  background: unset;
+  border-color: inherit;
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+  font-size: unset;
+  line-height: inherit;
+}
+
+[type='file']:focus {
+  outline: 1px auto inherit;
+}
+
+input[type=file]::-webkit-file-upload-button {
+  color: white;
+  background: #1F2937;
+  border: 0;
+  font-weight: 500;
+  font-size: 0.875rem;
+  cursor: pointer;
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+  padding-left: 2rem;
+  padding-right: 1rem;
+  margin-inline-start: -1rem;
+  margin-inline-end: 1rem;
+}
+
+input[type=file]::file-selector-button {
+  color: white;
+  background: #1F2937;
+  border: 0;
+  font-weight: 500;
+  font-size: 0.875rem;
+  cursor: pointer;
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+  padding-left: 2rem;
+  padding-right: 1rem;
+  margin-inline-start: -1rem;
+  margin-inline-end: 1rem;
+}
+
+input[type=file]::-webkit-file-upload-button:hover {
+  background: #374151;
+}
+
+input[type=file]::file-selector-button:hover {
+  background: #374151;
+}
+
+:is([dir=rtl]) input[type=file]::-webkit-file-upload-button {
+  padding-right: 2rem;
+  padding-left: 1rem;
+}
+
+:is([dir=rtl]) input[type=file]::file-selector-button {
+  padding-right: 2rem;
+  padding-left: 1rem;
+}
+
+.dark input[type=file]::-webkit-file-upload-button {
+  color: white;
+  background: #4B5563;
+}
+
+.dark input[type=file]::file-selector-button {
+  color: white;
+  background: #4B5563;
+}
+
+.dark input[type=file]::-webkit-file-upload-button:hover {
+  background: #6B7280;
+}
+
+.dark input[type=file]::file-selector-button:hover {
+  background: #6B7280;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  height: 1.25rem;
+  width: 1.25rem;
+  background: #1C64F2;
+  border-radius: 9999px;
+  border: 0;
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+}
+
+input[type="range"]:disabled::-webkit-slider-thumb {
+  background: #9CA3AF;
+}
+
+.dark input[type="range"]:disabled::-webkit-slider-thumb {
+  background: #6B7280;
+}
+
+input[type="range"]:focus::-webkit-slider-thumb {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --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(4px + 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);
+  --tw-ring-opacity: 1px;
+  --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
+}
+
+input[type="range"]::-moz-range-thumb {
+  height: 1.25rem;
+  width: 1.25rem;
+  background: #1C64F2;
+  border-radius: 9999px;
+  border: 0;
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+}
+
+input[type="range"]:disabled::-moz-range-thumb {
+  background: #9CA3AF;
+}
+
+.dark input[type="range"]:disabled::-moz-range-thumb {
+  background: #6B7280;
+}
+
+input[type="range"]::-moz-range-progress {
+  background: #3F83F8;
+}
+
+input[type="range"]::-ms-fill-lower {
+  background: #3F83F8;
+}
+
+input[type="range"].range-sm::-webkit-slider-thumb {
+  height: 1rem;
+  width: 1rem;
+}
+
+input[type="range"].range-lg::-webkit-slider-thumb {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+input[type="range"].range-sm::-moz-range-thumb {
+  height: 1rem;
+  width: 1rem;
+}
+
+input[type="range"].range-lg::-moz-range-thumb {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -441,7 +906,7 @@ video {
   --tw-ring-inset:  ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-color: rgb(63 131 248 / 0.5);
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
@@ -488,7 +953,7 @@ video {
   --tw-ring-inset:  ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-color: rgb(63 131 248 / 0.5);
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
@@ -807,18 +1272,22 @@ video {
   isolation: auto;
 }
 
+.z-40 {
+  z-index: 40;
+}
+
 .-z-10 {
   z-index: -10;
 }
 
-.z-10 {
-  z-index: 10;
-}
-
 .z-50 {
   z-index: 50;
 }
 
+.z-10 {
+  z-index: 10;
+}
+
 .z-30 {
   z-index: 30;
 }
@@ -827,10 +1296,6 @@ video {
   z-index: 0;
 }
 
-.z-40 {
-  z-index: 40;
-}
-
 .col-span-2 {
   grid-column: span 2 / span 2;
 }
@@ -863,14 +1328,14 @@ video {
   margin: 0.5rem;
 }
 
-.m-1 {
-  margin: 0.25rem;
-}
-
 .m-0\.5 {
   margin: 0.125rem;
 }
 
+.m-1 {
+  margin: 0.25rem;
+}
+
 .m-11 {
   margin: 2.75rem;
 }
@@ -943,21 +1408,26 @@ video {
   margin-right: 0.25rem;
 }
 
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
 
-.mx-4 {
-  margin-left: 1rem;
-  margin-right: 1rem;
-}
-
 .my-8 {
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
 
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
 .-my-1\.5 {
   margin-top: -0.375rem;
   margin-bottom: -0.375rem;
@@ -968,11 +1438,6 @@ video {
   margin-bottom: -0.25rem;
 }
 
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .-mx-1\.5 {
   margin-left: -0.375rem;
   margin-right: -0.375rem;
@@ -1009,10 +1474,6 @@ video {
   margin-bottom: 4rem;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
 .mr-0\.5 {
   margin-right: 0.125rem;
 }
@@ -1025,6 +1486,10 @@ video {
   margin-right: 0.25rem;
 }
 
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -1037,8 +1502,12 @@ video {
   margin-left: 0.5rem;
 }
 
-.mr-10 {
-  margin-right: 2.5rem;
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mr-16 {
+  margin-right: 4rem;
 }
 
 .mb-1\.5 {
@@ -1053,10 +1522,6 @@ video {
   margin-left: 1rem;
 }
 
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
-
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -1213,6 +1678,14 @@ video {
   display: none !important;
 }
 
+.h-6 {
+  height: 1.5rem;
+}
+
+.h-9 {
+  height: 2.25rem;
+}
+
 .h-24 {
   height: 6rem;
 }
@@ -1252,10 +1725,6 @@ video {
   height: 1rem;
 }
 
-.h-6 {
-  height: 1.5rem;
-}
-
 .h-0 {
   height: 0px;
 }
@@ -1268,6 +1737,10 @@ video {
   height: 0.75rem;
 }
 
+.h-modal {
+  height: calc(100% - 2rem);
+}
+
 .h-7 {
   height: 1.75rem;
 }
@@ -1280,6 +1753,10 @@ video {
   height: 1.25rem;
 }
 
+.h-14 {
+  height: 3.5rem;
+}
+
 .h-16 {
   height: 4rem;
 }
@@ -1420,10 +1897,6 @@ video {
   height: 0.625rem;
 }
 
-.h-14 {
-  height: 3.5rem;
-}
-
 .h-72 {
   height: 18rem;
 }
@@ -1440,6 +1913,10 @@ video {
   max-height: 3rem;
 }
 
+.max-h-full {
+  max-height: 100%;
+}
+
 .max-h-24 {
   max-height: 6rem;
 }
@@ -1452,10 +1929,6 @@ video {
   max-height: 24rem;
 }
 
-.max-h-full {
-  max-height: 100%;
-}
-
 .max-h-60 {
   max-height: 15rem;
 }
@@ -1472,6 +1945,14 @@ video {
   min-height: 3.2rem;
 }
 
+.w-64 {
+  width: 16rem;
+}
+
+.w-1\/2 {
+  width: 50%;
+}
+
 .w-full {
   width: 100%;
 }
@@ -1480,10 +1961,6 @@ video {
   width: 8rem;
 }
 
-.w-64 {
-  width: 16rem;
-}
-
 .w-8 {
   width: 2rem;
 }
@@ -1534,8 +2011,8 @@ video {
   width: 1.25rem;
 }
 
-.w-1\/2 {
-  width: 50%;
+.w-14 {
+  width: 3.5rem;
 }
 
 .w-max {
@@ -1624,10 +2101,6 @@ video {
   width: 2.25rem;
 }
 
-.w-14 {
-  width: 3.5rem;
-}
-
 .w-2 {
   width: 0.5rem;
 }
@@ -1923,6 +2396,14 @@ video {
   grid-auto-flow: row;
 }
 
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.grid-cols-7 {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
 .grid-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
@@ -2003,14 +2484,14 @@ video {
   gap: 1rem;
 }
 
-.gap-2 {
-  gap: 0.5rem;
-}
-
 .gap-3 {
   gap: 0.75rem;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
 .gap-8 {
   gap: 2rem;
 }
@@ -2035,6 +2516,10 @@ video {
   column-gap: 0.25rem;
 }
 
+.gap-x-4 {
+  column-gap: 1rem;
+}
+
 .gap-x-0\.5 {
   column-gap: 0.125rem;
 }
@@ -2047,6 +2532,12 @@ video {
   row-gap: 2rem;
 }
 
+.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));
+}
+
 .space-x-0\.5 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.125rem * var(--tw-space-x-reverse));
@@ -2095,12 +2586,6 @@ video {
   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-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));
-}
-
 .-space-x-px > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(-1px * var(--tw-space-x-reverse));
@@ -2187,37 +2672,37 @@ video {
 
 .divide-red-300 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
-  border-color: rgb(252 165 165 / var(--tw-divide-opacity));
+  border-color: rgb(248 180 180 / var(--tw-divide-opacity));
 }
 
 .divide-yellow-300 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
-  border-color: rgb(253 224 71 / var(--tw-divide-opacity));
+  border-color: rgb(250 202 21 / var(--tw-divide-opacity));
 }
 
 .divide-green-300 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
-  border-color: rgb(134 239 172 / var(--tw-divide-opacity));
+  border-color: rgb(132 225 188 / var(--tw-divide-opacity));
 }
 
 .divide-indigo-300 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
-  border-color: rgb(165 180 252 / var(--tw-divide-opacity));
+  border-color: rgb(180 198 252 / var(--tw-divide-opacity));
 }
 
 .divide-purple-300 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
-  border-color: rgb(216 180 254 / var(--tw-divide-opacity));
+  border-color: rgb(202 191 253 / var(--tw-divide-opacity));
 }
 
 .divide-pink-300 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
-  border-color: rgb(249 168 212 / var(--tw-divide-opacity));
+  border-color: rgb(248 180 217 / var(--tw-divide-opacity));
 }
 
 .divide-blue-300 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
-  border-color: rgb(147 197 253 / var(--tw-divide-opacity));
+  border-color: rgb(164 202 254 / var(--tw-divide-opacity));
 }
 
 .divide-gray-500 > :not([hidden]) ~ :not([hidden]) {
@@ -2225,9 +2710,14 @@ video {
   border-color: rgb(107 114 128 / var(--tw-divide-opacity));
 }
 
+.divide-primary-500 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(254 121 93 / var(--tw-divide-opacity));
+}
+
 .divide-orange-300 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
-  border-color: rgb(253 186 116 / var(--tw-divide-opacity));
+  border-color: rgb(253 186 140 / var(--tw-divide-opacity));
 }
 
 .self-start {
@@ -2360,6 +2850,21 @@ video {
   border-radius: 0.125rem;
 }
 
+.rounded-l-lg {
+  border-top-left-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+
+.rounded-r-lg {
+  border-top-right-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
+
+.rounded-t-lg {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+
 .rounded-b {
   border-bottom-right-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
@@ -2370,26 +2875,11 @@ video {
   border-bottom-left-radius: 0.5rem;
 }
 
-.rounded-t-lg {
-  border-top-left-radius: 0.5rem;
-  border-top-right-radius: 0.5rem;
-}
-
 .rounded-b-\[1rem\] {
   border-bottom-right-radius: 1rem;
   border-bottom-left-radius: 1rem;
 }
 
-.rounded-l-lg {
-  border-top-left-radius: 0.5rem;
-  border-bottom-left-radius: 0.5rem;
-}
-
-.rounded-r-lg {
-  border-top-right-radius: 0.5rem;
-  border-bottom-right-radius: 0.5rem;
-}
-
 .rounded-b-xl {
   border-bottom-right-radius: 0.75rem;
   border-bottom-left-radius: 0.75rem;
@@ -2568,39 +3058,44 @@ video {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
+.border-primary-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 188 173 / var(--tw-border-opacity));
+}
+
 .border-blue-400 {
   --tw-border-opacity: 1;
-  border-color: rgb(96 165 250 / var(--tw-border-opacity));
+  border-color: rgb(118 169 250 / var(--tw-border-opacity));
 }
 
 .border-red-400 {
   --tw-border-opacity: 1;
-  border-color: rgb(248 113 113 / var(--tw-border-opacity));
+  border-color: rgb(249 128 128 / var(--tw-border-opacity));
 }
 
 .border-green-400 {
   --tw-border-opacity: 1;
-  border-color: rgb(74 222 128 / var(--tw-border-opacity));
+  border-color: rgb(49 196 141 / var(--tw-border-opacity));
 }
 
 .border-yellow-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(253 224 71 / var(--tw-border-opacity));
+  border-color: rgb(250 202 21 / var(--tw-border-opacity));
 }
 
 .border-indigo-400 {
   --tw-border-opacity: 1;
-  border-color: rgb(129 140 248 / var(--tw-border-opacity));
+  border-color: rgb(141 162 251 / var(--tw-border-opacity));
 }
 
 .border-purple-400 {
   --tw-border-opacity: 1;
-  border-color: rgb(192 132 252 / var(--tw-border-opacity));
+  border-color: rgb(172 148 250 / var(--tw-border-opacity));
 }
 
 .border-pink-400 {
   --tw-border-opacity: 1;
-  border-color: rgb(244 114 182 / var(--tw-border-opacity));
+  border-color: rgb(241 126 184 / var(--tw-border-opacity));
 }
 
 .border-gray-100 {
@@ -2610,27 +3105,32 @@ video {
 
 .border-blue-700 {
   --tw-border-opacity: 1;
-  border-color: rgb(29 78 216 / var(--tw-border-opacity));
+  border-color: rgb(26 86 219 / var(--tw-border-opacity));
 }
 
 .border-green-700 {
   --tw-border-opacity: 1;
-  border-color: rgb(21 128 61 / var(--tw-border-opacity));
+  border-color: rgb(4 108 78 / var(--tw-border-opacity));
+}
+
+.border-primary-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(235 79 39 / var(--tw-border-opacity));
 }
 
 .border-purple-700 {
   --tw-border-opacity: 1;
-  border-color: rgb(126 34 206 / var(--tw-border-opacity));
+  border-color: rgb(108 43 217 / var(--tw-border-opacity));
 }
 
 .border-red-700 {
   --tw-border-opacity: 1;
-  border-color: rgb(185 28 28 / var(--tw-border-opacity));
+  border-color: rgb(200 30 30 / var(--tw-border-opacity));
 }
 
 .border-yellow-400 {
   --tw-border-opacity: 1;
-  border-color: rgb(250 204 21 / var(--tw-border-opacity));
+  border-color: rgb(227 160 8 / var(--tw-border-opacity));
 }
 
 .border-gray-900 {
@@ -2640,22 +3140,22 @@ video {
 
 .border-green-600 {
   --tw-border-opacity: 1;
-  border-color: rgb(22 163 74 / var(--tw-border-opacity));
+  border-color: rgb(5 122 85 / var(--tw-border-opacity));
 }
 
 .border-red-600 {
   --tw-border-opacity: 1;
-  border-color: rgb(220 38 38 / var(--tw-border-opacity));
+  border-color: rgb(224 36 36 / var(--tw-border-opacity));
 }
 
 .border-green-500 {
   --tw-border-opacity: 1;
-  border-color: rgb(34 197 94 / var(--tw-border-opacity));
+  border-color: rgb(14 159 110 / var(--tw-border-opacity));
 }
 
 .border-red-500 {
   --tw-border-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-border-opacity));
+  border-color: rgb(240 82 82 / var(--tw-border-opacity));
 }
 
 .border-gray-700 {
@@ -2663,53 +3163,73 @@ video {
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
 }
 
+.border-primary-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 86 47 / var(--tw-border-opacity));
+}
+
 .border-transparent {
   border-color: transparent;
 }
 
 .border-red-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(252 165 165 / var(--tw-border-opacity));
+  border-color: rgb(248 180 180 / var(--tw-border-opacity));
 }
 
 .border-green-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(134 239 172 / var(--tw-border-opacity));
+  border-color: rgb(132 225 188 / var(--tw-border-opacity));
 }
 
 .border-indigo-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(165 180 252 / var(--tw-border-opacity));
+  border-color: rgb(180 198 252 / var(--tw-border-opacity));
 }
 
 .border-purple-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(216 180 254 / var(--tw-border-opacity));
+  border-color: rgb(202 191 253 / var(--tw-border-opacity));
 }
 
 .border-pink-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(249 168 212 / var(--tw-border-opacity));
+  border-color: rgb(248 180 217 / var(--tw-border-opacity));
 }
 
 .border-blue-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(147 197 253 / var(--tw-border-opacity));
+  border-color: rgb(164 202 254 / var(--tw-border-opacity));
+}
+
+.border-primary-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 121 93 / var(--tw-border-opacity));
 }
 
 .border-orange-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(253 186 116 / var(--tw-border-opacity));
+  border-color: rgb(253 186 140 / var(--tw-border-opacity));
 }
 
 .border-inherit {
   border-color: inherit;
 }
 
+.border-t-gray-300 {
+  --tw-border-opacity: 1;
+  border-top-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
 .border-opacity-50 {
   --tw-border-opacity: 0.5;
 }
 
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -2722,7 +3242,7 @@ video {
 
 .bg-red-400 {
   --tw-bg-opacity: 1;
-  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+  background-color: rgb(249 128 128 / var(--tw-bg-opacity));
 }
 
 .bg-slate-400 {
@@ -2735,14 +3255,9 @@ video {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.bg-gray-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-
 .bg-indigo-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(224 231 255 / var(--tw-bg-opacity));
+  background-color: rgb(229 237 255 / var(--tw-bg-opacity));
 }
 
 .bg-gray-100 {
@@ -2750,34 +3265,39 @@ video {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
+.bg-primary-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 241 238 / var(--tw-bg-opacity));
+}
+
 .bg-blue-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+  background-color: rgb(225 239 254 / var(--tw-bg-opacity));
 }
 
 .bg-red-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+  background-color: rgb(253 232 232 / var(--tw-bg-opacity));
 }
 
 .bg-green-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+  background-color: rgb(222 247 236 / var(--tw-bg-opacity));
 }
 
 .bg-yellow-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
+  background-color: rgb(253 246 178 / var(--tw-bg-opacity));
 }
 
 .bg-purple-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(243 232 255 / var(--tw-bg-opacity));
+  background-color: rgb(237 235 254 / var(--tw-bg-opacity));
 }
 
 .bg-pink-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(252 231 243 / var(--tw-bg-opacity));
+  background-color: rgb(252 232 243 / var(--tw-bg-opacity));
 }
 
 .bg-gray-50 {
@@ -2792,7 +3312,7 @@ video {
 
 .bg-blue-700 {
   --tw-bg-opacity: 1;
-  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+  background-color: rgb(26 86 219 / var(--tw-bg-opacity));
 }
 
 .bg-gray-800 {
@@ -2802,42 +3322,52 @@ video {
 
 .bg-green-700 {
   --tw-bg-opacity: 1;
-  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
+  background-color: rgb(4 108 78 / var(--tw-bg-opacity));
+}
+
+.bg-primary-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(235 79 39 / var(--tw-bg-opacity));
 }
 
 .bg-purple-700 {
   --tw-bg-opacity: 1;
-  background-color: rgb(126 34 206 / var(--tw-bg-opacity));
+  background-color: rgb(108 43 217 / var(--tw-bg-opacity));
 }
 
 .bg-red-700 {
   --tw-bg-opacity: 1;
-  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+  background-color: rgb(200 30 30 / var(--tw-bg-opacity));
 }
 
 .bg-yellow-400 {
   --tw-bg-opacity: 1;
-  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
+  background-color: rgb(227 160 8 / var(--tw-bg-opacity));
 }
 
 .bg-blue-400 {
   --tw-bg-opacity: 1;
-  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
+  background-color: rgb(118 169 250 / var(--tw-bg-opacity));
 }
 
 .bg-green-400 {
   --tw-bg-opacity: 1;
-  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
+  background-color: rgb(49 196 141 / var(--tw-bg-opacity));
+}
+
+.bg-primary-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 188 173 / var(--tw-bg-opacity));
 }
 
 .bg-purple-400 {
   --tw-bg-opacity: 1;
-  background-color: rgb(192 132 252 / var(--tw-bg-opacity));
+  background-color: rgb(172 148 250 / var(--tw-bg-opacity));
 }
 
 .bg-yellow-300 {
   --tw-bg-opacity: 1;
-  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+  background-color: rgb(250 202 21 / var(--tw-bg-opacity));
 }
 
 .bg-white\/30 {
@@ -2850,12 +3380,12 @@ video {
 
 .bg-green-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
+  background-color: rgb(243 250 247 / var(--tw-bg-opacity));
 }
 
 .bg-red-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
+  background-color: rgb(253 242 242 / var(--tw-bg-opacity));
 }
 
 .bg-gray-300 {
@@ -2869,42 +3399,47 @@ video {
 
 .bg-blue-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+  background-color: rgb(28 100 242 / var(--tw-bg-opacity));
 }
 
 .bg-orange-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(234 88 12 / var(--tw-bg-opacity));
+  background-color: rgb(208 56 1 / var(--tw-bg-opacity));
 }
 
 .bg-green-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+  background-color: rgb(14 159 110 / var(--tw-bg-opacity));
 }
 
 .bg-red-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+  background-color: rgb(240 82 82 / var(--tw-bg-opacity));
 }
 
 .bg-purple-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(168 85 247 / var(--tw-bg-opacity));
+  background-color: rgb(144 97 249 / var(--tw-bg-opacity));
 }
 
 .bg-indigo-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(99 102 241 / var(--tw-bg-opacity));
+  background-color: rgb(104 117 245 / var(--tw-bg-opacity));
 }
 
 .bg-teal-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(20 184 166 / var(--tw-bg-opacity));
+  background-color: rgb(6 148 162 / var(--tw-bg-opacity));
 }
 
 .bg-blue-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
+  background-color: rgb(235 245 255 / var(--tw-bg-opacity));
+}
+
+.bg-primary-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 86 47 / var(--tw-bg-opacity));
 }
 
 .bg-gray-600 {
@@ -2914,22 +3449,32 @@ video {
 
 .bg-red-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
+  background-color: rgb(224 36 36 / var(--tw-bg-opacity));
 }
 
 .bg-green-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
+  background-color: rgb(5 122 85 / var(--tw-bg-opacity));
 }
 
 .bg-purple-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(147 51 234 / var(--tw-bg-opacity));
+  background-color: rgb(126 58 242 / var(--tw-bg-opacity));
 }
 
 .bg-indigo-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
+  background-color: rgb(88 80 236 / var(--tw-bg-opacity));
+}
+
+.bg-primary-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 245 242 / var(--tw-bg-opacity));
+}
+
+.bg-primary-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 121 93 / var(--tw-bg-opacity));
 }
 
 .bg-gray-400 {
@@ -2939,12 +3484,17 @@ video {
 
 .bg-pink-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(236 72 153 / var(--tw-bg-opacity));
+  background-color: rgb(231 70 148 / var(--tw-bg-opacity));
 }
 
 .bg-blue-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+  background-color: rgb(63 131 248 / var(--tw-bg-opacity));
+}
+
+.bg-primary-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 69 34 / var(--tw-bg-opacity));
 }
 
 .bg-gray-700 {
@@ -2954,67 +3504,72 @@ video {
 
 .bg-red-900 {
   --tw-bg-opacity: 1;
-  background-color: rgb(127 29 29 / var(--tw-bg-opacity));
+  background-color: rgb(119 29 29 / var(--tw-bg-opacity));
 }
 
 .bg-yellow-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(202 138 4 / var(--tw-bg-opacity));
+  background-color: rgb(159 88 10 / var(--tw-bg-opacity));
 }
 
 .bg-green-800 {
   --tw-bg-opacity: 1;
-  background-color: rgb(22 101 52 / var(--tw-bg-opacity));
+  background-color: rgb(3 84 63 / var(--tw-bg-opacity));
 }
 
 .bg-indigo-800 {
   --tw-bg-opacity: 1;
-  background-color: rgb(55 48 163 / var(--tw-bg-opacity));
+  background-color: rgb(66 56 157 / var(--tw-bg-opacity));
 }
 
 .bg-purple-800 {
   --tw-bg-opacity: 1;
-  background-color: rgb(107 33 168 / var(--tw-bg-opacity));
+  background-color: rgb(85 33 181 / var(--tw-bg-opacity));
 }
 
 .bg-pink-800 {
   --tw-bg-opacity: 1;
-  background-color: rgb(157 23 77 / var(--tw-bg-opacity));
+  background-color: rgb(153 21 75 / var(--tw-bg-opacity));
 }
 
 .bg-blue-800 {
   --tw-bg-opacity: 1;
-  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
+  background-color: rgb(30 66 159 / var(--tw-bg-opacity));
 }
 
 .bg-yellow-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
+  background-color: rgb(194 120 3 / var(--tw-bg-opacity));
 }
 
 .bg-blue-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
+  background-color: rgb(195 221 253 / var(--tw-bg-opacity));
+}
+
+.bg-primary-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 228 222 / var(--tw-bg-opacity));
 }
 
 .bg-orange-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
+  background-color: rgb(254 236 220 / var(--tw-bg-opacity));
 }
 
 .bg-yellow-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
+  background-color: rgb(253 253 234 / var(--tw-bg-opacity));
 }
 
 .bg-indigo-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(238 242 255 / var(--tw-bg-opacity));
+  background-color: rgb(240 245 255 / var(--tw-bg-opacity));
 }
 
 .bg-purple-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(250 245 255 / var(--tw-bg-opacity));
+  background-color: rgb(246 245 255 / var(--tw-bg-opacity));
 }
 
 .bg-pink-50 {
@@ -3024,7 +3579,7 @@ video {
 
 .bg-orange-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 247 237 / var(--tw-bg-opacity));
+  background-color: rgb(255 248 241 / var(--tw-bg-opacity));
 }
 
 .bg-opacity-75 {
@@ -3044,14 +3599,14 @@ video {
 }
 
 .from-blue-500 {
-  --tw-gradient-from: #3b82f6;
-  --tw-gradient-to: rgb(59 130 246 / 0);
+  --tw-gradient-from: #3F83F8;
+  --tw-gradient-to: rgb(63 131 248 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
 .from-green-400 {
-  --tw-gradient-from: #4ade80;
-  --tw-gradient-to: rgb(74 222 128 / 0);
+  --tw-gradient-from: #31C48D;
+  --tw-gradient-to: rgb(49 196 141 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
@@ -3062,8 +3617,8 @@ video {
 }
 
 .from-teal-400 {
-  --tw-gradient-from: #2dd4bf;
-  --tw-gradient-to: rgb(45 212 191 / 0);
+  --tw-gradient-from: #16BDCA;
+  --tw-gradient-to: rgb(22 189 202 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
@@ -3074,26 +3629,26 @@ video {
 }
 
 .from-red-400 {
-  --tw-gradient-from: #f87171;
-  --tw-gradient-to: rgb(248 113 113 / 0);
+  --tw-gradient-from: #F98080;
+  --tw-gradient-to: rgb(249 128 128 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
 .from-pink-400 {
-  --tw-gradient-from: #f472b6;
-  --tw-gradient-to: rgb(244 114 182 / 0);
+  --tw-gradient-from: #F17EB8;
+  --tw-gradient-to: rgb(241 126 184 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
 .from-purple-500 {
-  --tw-gradient-from: #a855f7;
-  --tw-gradient-to: rgb(168 85 247 / 0);
+  --tw-gradient-from: #9061F9;
+  --tw-gradient-to: rgb(144 97 249 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
 .from-purple-600 {
-  --tw-gradient-from: #9333ea;
-  --tw-gradient-to: rgb(147 51 234 / 0);
+  --tw-gradient-from: #7E3AF2;
+  --tw-gradient-to: rgb(126 58 242 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
@@ -3104,20 +3659,20 @@ video {
 }
 
 .from-pink-500 {
-  --tw-gradient-from: #ec4899;
-  --tw-gradient-to: rgb(236 72 153 / 0);
+  --tw-gradient-from: #E74694;
+  --tw-gradient-to: rgb(231 70 148 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
 .from-teal-200 {
-  --tw-gradient-from: #99f6e4;
-  --tw-gradient-to: rgb(153 246 228 / 0);
+  --tw-gradient-from: #AFECEF;
+  --tw-gradient-to: rgb(175 236 239 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
 .from-red-200 {
-  --tw-gradient-from: #fecaca;
-  --tw-gradient-to: rgb(254 202 202 / 0);
+  --tw-gradient-from: #FBD5D5;
+  --tw-gradient-to: rgb(251 213 213 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
@@ -3128,13 +3683,13 @@ video {
 }
 
 .via-blue-600 {
-  --tw-gradient-to: rgb(37 99 235 / 0);
-  --tw-gradient-stops: var(--tw-gradient-from), #2563eb, var(--tw-gradient-to);
+  --tw-gradient-to: rgb(28 100 242 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #1C64F2, var(--tw-gradient-to);
 }
 
 .via-green-500 {
-  --tw-gradient-to: rgb(34 197 94 / 0);
-  --tw-gradient-stops: var(--tw-gradient-from), #22c55e, var(--tw-gradient-to);
+  --tw-gradient-to: rgb(14 159 110 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #0E9F6E, var(--tw-gradient-to);
 }
 
 .via-cyan-500 {
@@ -3143,8 +3698,8 @@ video {
 }
 
 .via-teal-500 {
-  --tw-gradient-to: rgb(20 184 166 / 0);
-  --tw-gradient-stops: var(--tw-gradient-from), #14b8a6, var(--tw-gradient-to);
+  --tw-gradient-to: rgb(6 148 162 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #0694A2, var(--tw-gradient-to);
 }
 
 .via-lime-400 {
@@ -3153,31 +3708,31 @@ video {
 }
 
 .via-red-500 {
-  --tw-gradient-to: rgb(239 68 68 / 0);
-  --tw-gradient-stops: var(--tw-gradient-from), #ef4444, var(--tw-gradient-to);
+  --tw-gradient-to: rgb(240 82 82 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #F05252, var(--tw-gradient-to);
 }
 
 .via-pink-500 {
-  --tw-gradient-to: rgb(236 72 153 / 0);
-  --tw-gradient-stops: var(--tw-gradient-from), #ec4899, var(--tw-gradient-to);
+  --tw-gradient-to: rgb(231 70 148 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #E74694, var(--tw-gradient-to);
 }
 
 .via-purple-600 {
-  --tw-gradient-to: rgb(147 51 234 / 0);
-  --tw-gradient-stops: var(--tw-gradient-from), #9333ea, var(--tw-gradient-to);
+  --tw-gradient-to: rgb(126 58 242 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #7E3AF2, var(--tw-gradient-to);
 }
 
 .via-red-300 {
-  --tw-gradient-to: rgb(252 165 165 / 0);
-  --tw-gradient-stops: var(--tw-gradient-from), #fca5a5, var(--tw-gradient-to);
+  --tw-gradient-to: rgb(248 180 180 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #F8B4B4, var(--tw-gradient-to);
 }
 
 .to-blue-700 {
-  --tw-gradient-to: #1d4ed8;
+  --tw-gradient-to: #1A56DB;
 }
 
 .to-green-600 {
-  --tw-gradient-to: #16a34a;
+  --tw-gradient-to: #057A55;
 }
 
 .to-cyan-600 {
@@ -3185,7 +3740,7 @@ video {
 }
 
 .to-teal-600 {
-  --tw-gradient-to: #0d9488;
+  --tw-gradient-to: #047481;
 }
 
 .to-lime-500 {
@@ -3193,31 +3748,31 @@ video {
 }
 
 .to-red-600 {
-  --tw-gradient-to: #dc2626;
+  --tw-gradient-to: #E02424;
 }
 
 .to-pink-600 {
-  --tw-gradient-to: #db2777;
+  --tw-gradient-to: #D61F69;
 }
 
 .to-purple-700 {
-  --tw-gradient-to: #7e22ce;
+  --tw-gradient-to: #6C2BD9;
 }
 
 .to-blue-500 {
-  --tw-gradient-to: #3b82f6;
+  --tw-gradient-to: #3F83F8;
 }
 
 .to-blue-600 {
-  --tw-gradient-to: #2563eb;
+  --tw-gradient-to: #1C64F2;
 }
 
 .to-pink-500 {
-  --tw-gradient-to: #ec4899;
+  --tw-gradient-to: #E74694;
 }
 
 .to-orange-400 {
-  --tw-gradient-to: #fb923c;
+  --tw-gradient-to: #FF8A4C;
 }
 
 .to-lime-200 {
@@ -3225,7 +3780,7 @@ video {
 }
 
 .to-yellow-200 {
-  --tw-gradient-to: #fef08a;
+  --tw-gradient-to: #FCE96A;
 }
 
 .to-emerald-600 {
@@ -3241,36 +3796,40 @@ video {
   background-repeat: repeat;
 }
 
+.fill-primary-600 {
+  fill: #EF562F;
+}
+
 .fill-blue-600 {
-  fill: #2563eb;
+  fill: #1C64F2;
 }
 
 .fill-gray-600 {
-  fill: #4b5563;
+  fill: #4B5563;
 }
 
 .fill-green-500 {
-  fill: #22c55e;
+  fill: #0E9F6E;
 }
 
 .fill-red-600 {
-  fill: #dc2626;
+  fill: #E02424;
 }
 
 .fill-yellow-400 {
-  fill: #facc15;
+  fill: #E3A008;
 }
 
 .fill-pink-600 {
-  fill: #db2777;
+  fill: #D61F69;
 }
 
 .fill-purple-600 {
-  fill: #9333ea;
+  fill: #7E3AF2;
 }
 
 .fill-white {
-  fill: #fff;
+  fill: #ffffff;
 }
 
 .object-cover {
@@ -3348,9 +3907,9 @@ video {
   padding-right: 0.25rem;
 }
 
-.py-8 {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
 }
 
 .px-3 {
@@ -3358,11 +3917,6 @@ video {
   padding-right: 0.75rem;
 }
 
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-
 .py-5 {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
@@ -3698,6 +4252,14 @@ video {
   font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
 }
 
+.leading-6 {
+  line-height: 1.5rem;
+}
+
+.leading-9 {
+  line-height: 2.25rem;
+}
+
 .leading-none {
   line-height: 1;
 }
@@ -3768,44 +4330,54 @@ video {
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
+.text-primary-800 {
+  --tw-text-opacity: 1;
+  color: rgb(204 69 34 / var(--tw-text-opacity));
+}
+
 .text-blue-800 {
   --tw-text-opacity: 1;
-  color: rgb(30 64 175 / var(--tw-text-opacity));
+  color: rgb(30 66 159 / var(--tw-text-opacity));
 }
 
 .text-red-800 {
   --tw-text-opacity: 1;
-  color: rgb(153 27 27 / var(--tw-text-opacity));
+  color: rgb(155 28 28 / var(--tw-text-opacity));
 }
 
 .text-green-800 {
   --tw-text-opacity: 1;
-  color: rgb(22 101 52 / var(--tw-text-opacity));
+  color: rgb(3 84 63 / var(--tw-text-opacity));
 }
 
 .text-yellow-800 {
   --tw-text-opacity: 1;
-  color: rgb(133 77 14 / var(--tw-text-opacity));
+  color: rgb(114 59 19 / var(--tw-text-opacity));
 }
 
 .text-indigo-800 {
   --tw-text-opacity: 1;
-  color: rgb(55 48 163 / var(--tw-text-opacity));
+  color: rgb(66 56 157 / var(--tw-text-opacity));
 }
 
 .text-purple-800 {
   --tw-text-opacity: 1;
-  color: rgb(107 33 168 / var(--tw-text-opacity));
+  color: rgb(85 33 181 / var(--tw-text-opacity));
 }
 
 .text-pink-800 {
   --tw-text-opacity: 1;
-  color: rgb(157 23 77 / var(--tw-text-opacity));
+  color: rgb(153 21 75 / var(--tw-text-opacity));
+}
+
+.text-primary-400 {
+  --tw-text-opacity: 1;
+  color: rgb(255 188 173 / var(--tw-text-opacity));
 }
 
 .text-blue-400 {
   --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
+  color: rgb(118 169 250 / var(--tw-text-opacity));
 }
 
 .text-gray-400 {
@@ -3815,32 +4387,37 @@ video {
 
 .text-red-400 {
   --tw-text-opacity: 1;
-  color: rgb(248 113 113 / var(--tw-text-opacity));
+  color: rgb(249 128 128 / var(--tw-text-opacity));
 }
 
 .text-green-400 {
   --tw-text-opacity: 1;
-  color: rgb(74 222 128 / var(--tw-text-opacity));
+  color: rgb(49 196 141 / var(--tw-text-opacity));
 }
 
 .text-yellow-400 {
   --tw-text-opacity: 1;
-  color: rgb(250 204 21 / var(--tw-text-opacity));
+  color: rgb(227 160 8 / var(--tw-text-opacity));
 }
 
 .text-indigo-400 {
   --tw-text-opacity: 1;
-  color: rgb(129 140 248 / var(--tw-text-opacity));
+  color: rgb(141 162 251 / var(--tw-text-opacity));
 }
 
 .text-purple-400 {
   --tw-text-opacity: 1;
-  color: rgb(192 132 252 / var(--tw-text-opacity));
+  color: rgb(172 148 250 / var(--tw-text-opacity));
 }
 
 .text-pink-400 {
   --tw-text-opacity: 1;
-  color: rgb(244 114 182 / var(--tw-text-opacity));
+  color: rgb(241 126 184 / var(--tw-text-opacity));
+}
+
+.text-primary-700 {
+  --tw-text-opacity: 1;
+  color: rgb(235 79 39 / var(--tw-text-opacity));
 }
 
 .text-gray-700 {
@@ -3850,47 +4427,52 @@ video {
 
 .text-blue-900 {
   --tw-text-opacity: 1;
-  color: rgb(30 58 138 / var(--tw-text-opacity));
+  color: rgb(35 56 118 / var(--tw-text-opacity));
 }
 
 .text-green-900 {
   --tw-text-opacity: 1;
-  color: rgb(20 83 45 / var(--tw-text-opacity));
+  color: rgb(1 71 55 / var(--tw-text-opacity));
+}
+
+.text-primary-900 {
+  --tw-text-opacity: 1;
+  color: rgb(165 55 27 / var(--tw-text-opacity));
 }
 
 .text-purple-900 {
   --tw-text-opacity: 1;
-  color: rgb(88 28 135 / var(--tw-text-opacity));
+  color: rgb(74 29 150 / var(--tw-text-opacity));
 }
 
 .text-red-900 {
   --tw-text-opacity: 1;
-  color: rgb(127 29 29 / var(--tw-text-opacity));
+  color: rgb(119 29 29 / var(--tw-text-opacity));
 }
 
 .text-yellow-900 {
   --tw-text-opacity: 1;
-  color: rgb(113 63 18 / var(--tw-text-opacity));
+  color: rgb(99 49 18 / var(--tw-text-opacity));
 }
 
 .text-blue-700 {
   --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
+  color: rgb(26 86 219 / var(--tw-text-opacity));
 }
 
 .text-green-700 {
   --tw-text-opacity: 1;
-  color: rgb(21 128 61 / var(--tw-text-opacity));
+  color: rgb(4 108 78 / var(--tw-text-opacity));
 }
 
 .text-purple-700 {
   --tw-text-opacity: 1;
-  color: rgb(126 34 206 / var(--tw-text-opacity));
+  color: rgb(108 43 217 / var(--tw-text-opacity));
 }
 
 .text-red-700 {
   --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
+  color: rgb(200 30 30 / var(--tw-text-opacity));
 }
 
 .\!text-gray-900 {
@@ -3900,32 +4482,47 @@ video {
 
 .text-green-600 {
   --tw-text-opacity: 1;
-  color: rgb(22 163 74 / var(--tw-text-opacity));
+  color: rgb(5 122 85 / var(--tw-text-opacity));
 }
 
 .text-red-600 {
   --tw-text-opacity: 1;
-  color: rgb(220 38 38 / var(--tw-text-opacity));
+  color: rgb(224 36 36 / var(--tw-text-opacity));
+}
+
+.text-primary-500 {
+  --tw-text-opacity: 1;
+  color: rgb(254 121 93 / var(--tw-text-opacity));
+}
+
+.text-primary-600 {
+  --tw-text-opacity: 1;
+  color: rgb(239 86 47 / var(--tw-text-opacity));
 }
 
 .text-purple-600 {
   --tw-text-opacity: 1;
-  color: rgb(147 51 234 / var(--tw-text-opacity));
+  color: rgb(126 58 242 / var(--tw-text-opacity));
 }
 
 .text-teal-600 {
   --tw-text-opacity: 1;
-  color: rgb(13 148 136 / var(--tw-text-opacity));
+  color: rgb(4 116 129 / var(--tw-text-opacity));
 }
 
 .text-orange-500 {
   --tw-text-opacity: 1;
-  color: rgb(249 115 22 / var(--tw-text-opacity));
+  color: rgb(255 90 31 / var(--tw-text-opacity));
 }
 
 .text-blue-600 {
   --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity));
+  color: rgb(28 100 242 / var(--tw-text-opacity));
+}
+
+.text-primary-100 {
+  --tw-text-opacity: 1;
+  color: rgb(255 241 238 / var(--tw-text-opacity));
 }
 
 .text-gray-200 {
@@ -3940,77 +4537,77 @@ video {
 
 .text-blue-100 {
   --tw-text-opacity: 1;
-  color: rgb(219 234 254 / var(--tw-text-opacity));
+  color: rgb(225 239 254 / var(--tw-text-opacity));
 }
 
 .text-green-100 {
   --tw-text-opacity: 1;
-  color: rgb(220 252 231 / var(--tw-text-opacity));
+  color: rgb(222 247 236 / var(--tw-text-opacity));
 }
 
 .text-red-100 {
   --tw-text-opacity: 1;
-  color: rgb(254 226 226 / var(--tw-text-opacity));
+  color: rgb(253 232 232 / var(--tw-text-opacity));
 }
 
 .text-yellow-100 {
   --tw-text-opacity: 1;
-  color: rgb(254 249 195 / var(--tw-text-opacity));
+  color: rgb(253 246 178 / var(--tw-text-opacity));
 }
 
 .text-purple-100 {
   --tw-text-opacity: 1;
-  color: rgb(243 232 255 / var(--tw-text-opacity));
+  color: rgb(237 235 254 / var(--tw-text-opacity));
 }
 
 .text-indigo-100 {
   --tw-text-opacity: 1;
-  color: rgb(224 231 255 / var(--tw-text-opacity));
+  color: rgb(229 237 255 / var(--tw-text-opacity));
 }
 
 .text-pink-100 {
   --tw-text-opacity: 1;
-  color: rgb(252 231 243 / var(--tw-text-opacity));
+  color: rgb(252 232 243 / var(--tw-text-opacity));
 }
 
 .text-blue-50 {
   --tw-text-opacity: 1;
-  color: rgb(239 246 255 / var(--tw-text-opacity));
+  color: rgb(235 245 255 / var(--tw-text-opacity));
 }
 
 .text-red-500 {
   --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
+  color: rgb(240 82 82 / var(--tw-text-opacity));
 }
 
 .text-yellow-500 {
   --tw-text-opacity: 1;
-  color: rgb(234 179 8 / var(--tw-text-opacity));
+  color: rgb(194 120 3 / var(--tw-text-opacity));
 }
 
 .text-green-500 {
   --tw-text-opacity: 1;
-  color: rgb(34 197 94 / var(--tw-text-opacity));
+  color: rgb(14 159 110 / var(--tw-text-opacity));
 }
 
 .text-blue-500 {
   --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity));
+  color: rgb(63 131 248 / var(--tw-text-opacity));
 }
 
 .text-indigo-500 {
   --tw-text-opacity: 1;
-  color: rgb(99 102 241 / var(--tw-text-opacity));
+  color: rgb(104 117 245 / var(--tw-text-opacity));
 }
 
 .text-purple-500 {
   --tw-text-opacity: 1;
-  color: rgb(168 85 247 / var(--tw-text-opacity));
+  color: rgb(144 97 249 / var(--tw-text-opacity));
 }
 
 .text-pink-500 {
   --tw-text-opacity: 1;
-  color: rgb(236 72 153 / var(--tw-text-opacity));
+  color: rgb(231 70 148 / var(--tw-text-opacity));
 }
 
 .text-transparent {
@@ -4019,7 +4616,7 @@ video {
 
 .text-orange-800 {
   --tw-text-opacity: 1;
-  color: rgb(154 52 18 / var(--tw-text-opacity));
+  color: rgb(138 44 13 / var(--tw-text-opacity));
 }
 
 .underline {
@@ -4039,7 +4636,7 @@ video {
 }
 
 .decoration-blue-400 {
-  text-decoration-color: #60a5fa;
+  text-decoration-color: #76A9FA;
 }
 
 .decoration-2 {
@@ -4058,12 +4655,12 @@ video {
 
 .placeholder-green-700::placeholder {
   --tw-placeholder-opacity: 1;
-  color: rgb(21 128 61 / var(--tw-placeholder-opacity));
+  color: rgb(4 108 78 / var(--tw-placeholder-opacity));
 }
 
 .placeholder-red-700::placeholder {
   --tw-placeholder-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-placeholder-opacity));
+  color: rgb(200 30 30 / var(--tw-placeholder-opacity));
 }
 
 .opacity-50 {
@@ -4082,12 +4679,24 @@ video {
   opacity: 0.3;
 }
 
+.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);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .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);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -4100,56 +4709,49 @@ video {
   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);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .shadow-xl {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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-md {
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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-gray-300 {
-  --tw-shadow-color: #d1d5db;
+  --tw-shadow-color: #D1D5DB;
   --tw-shadow: var(--tw-shadow-colored);
 }
 
 .shadow-blue-700 {
-  --tw-shadow-color: #1d4ed8;
+  --tw-shadow-color: #1A56DB;
   --tw-shadow: var(--tw-shadow-colored);
 }
 
 .shadow-gray-800 {
-  --tw-shadow-color: #1f2937;
+  --tw-shadow-color: #1F2937;
   --tw-shadow: var(--tw-shadow-colored);
 }
 
 .shadow-green-700 {
-  --tw-shadow-color: #15803d;
+  --tw-shadow-color: #046C4E;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.shadow-primary-700 {
+  --tw-shadow-color: #EB4F27;
   --tw-shadow: var(--tw-shadow-colored);
 }
 
 .shadow-purple-700 {
-  --tw-shadow-color: #7e22ce;
+  --tw-shadow-color: #6C2BD9;
   --tw-shadow: var(--tw-shadow-colored);
 }
 
 .shadow-red-700 {
-  --tw-shadow-color: #b91c1c;
+  --tw-shadow-color: #C81E1E;
   --tw-shadow: var(--tw-shadow-colored);
 }
 
 .shadow-yellow-500 {
-  --tw-shadow-color: #eab308;
+  --tw-shadow-color: #C27803;
   --tw-shadow: var(--tw-shadow-colored);
 }
 
@@ -4159,27 +4761,32 @@ video {
 }
 
 .shadow-blue-500\/50 {
-  --tw-shadow-color: rgb(59 130 246 / 0.5);
+  --tw-shadow-color: rgb(63 131 248 / 0.5);
   --tw-shadow: var(--tw-shadow-colored);
 }
 
 .shadow-green-500\/50 {
-  --tw-shadow-color: rgb(34 197 94 / 0.5);
+  --tw-shadow-color: rgb(14 159 110 / 0.5);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.shadow-primary-500\/50 {
+  --tw-shadow-color: rgb(254 121 93 / 0.5);
   --tw-shadow: var(--tw-shadow-colored);
 }
 
 .shadow-purple-500\/50 {
-  --tw-shadow-color: rgb(168 85 247 / 0.5);
+  --tw-shadow-color: rgb(144 97 249 / 0.5);
   --tw-shadow: var(--tw-shadow-colored);
 }
 
 .shadow-red-500\/50 {
-  --tw-shadow-color: rgb(239 68 68 / 0.5);
+  --tw-shadow-color: rgb(240 82 82 / 0.5);
   --tw-shadow: var(--tw-shadow-colored);
 }
 
 .shadow-yellow-500\/50 {
-  --tw-shadow-color: rgb(234 179 8 / 0.5);
+  --tw-shadow-color: rgb(194 120 3 / 0.5);
   --tw-shadow: var(--tw-shadow-colored);
 }
 
@@ -4189,7 +4796,7 @@ video {
 }
 
 .shadow-teal-500\/50 {
-  --tw-shadow-color: rgb(20 184 166 / 0.5);
+  --tw-shadow-color: rgb(6 148 162 / 0.5);
   --tw-shadow: var(--tw-shadow-colored);
 }
 
@@ -4199,7 +4806,7 @@ video {
 }
 
 .shadow-pink-500\/50 {
-  --tw-shadow-color: rgb(236 72 153 / 0.5);
+  --tw-shadow-color: rgb(231 70 148 / 0.5);
   --tw-shadow: var(--tw-shadow-colored);
 }
 
@@ -4243,6 +4850,11 @@ video {
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }
 
+.ring-primary-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(254 121 93 / var(--tw-ring-opacity));
+}
+
 .ring-white {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
@@ -4253,13 +4865,13 @@ video {
   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);
 }
 
-.drop-shadow-md {
-  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
+.drop-shadow-2xl {
+  --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
   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);
 }
 
-.drop-shadow-2xl {
-  --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
+.drop-shadow-md {
+  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
   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);
 }
 
@@ -4831,10 +5443,18 @@ code {
   color: var(--background-color);
 }
 
+.h-full-child > div {
+  height: 100%;
+}
+
 .bg-black-transparent {
   background-color: #00000088;
 }
 
+.bg-black-light-transparent {
+  background-color: #00000044;
+}
+
 .block-ruby {
   display: block ruby;
 }
@@ -4988,6 +5608,10 @@ svg.apply-fill path {
   max-width: 100%;
 }
 
+.max-w-screen {
+  max-width: 100vw;
+}
+
 /************************* Experimental support for foldable devices ********************************/
 
 @media (horizontal-viewport-segments: 2) {
@@ -5183,27 +5807,27 @@ svg.apply-fill path {
 
 .odd\:bg-blue-800:nth-child(odd) {
   --tw-bg-opacity: 1;
-  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
+  background-color: rgb(30 66 159 / var(--tw-bg-opacity));
 }
 
 .odd\:bg-green-800:nth-child(odd) {
   --tw-bg-opacity: 1;
-  background-color: rgb(22 101 52 / var(--tw-bg-opacity));
+  background-color: rgb(3 84 63 / var(--tw-bg-opacity));
 }
 
 .odd\:bg-red-800:nth-child(odd) {
   --tw-bg-opacity: 1;
-  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
+  background-color: rgb(155 28 28 / var(--tw-bg-opacity));
 }
 
 .odd\:bg-yellow-800:nth-child(odd) {
   --tw-bg-opacity: 1;
-  background-color: rgb(133 77 14 / var(--tw-bg-opacity));
+  background-color: rgb(114 59 19 / var(--tw-bg-opacity));
 }
 
 .odd\:bg-purple-800:nth-child(odd) {
   --tw-bg-opacity: 1;
-  background-color: rgb(107 33 168 / var(--tw-bg-opacity));
+  background-color: rgb(85 33 181 / var(--tw-bg-opacity));
 }
 
 .even\:bg-gray-50:nth-child(even) {
@@ -5213,38 +5837,48 @@ svg.apply-fill path {
 
 .even\:bg-blue-700:nth-child(even) {
   --tw-bg-opacity: 1;
-  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+  background-color: rgb(26 86 219 / var(--tw-bg-opacity));
 }
 
 .even\:bg-green-700:nth-child(even) {
   --tw-bg-opacity: 1;
-  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
+  background-color: rgb(4 108 78 / var(--tw-bg-opacity));
 }
 
 .even\:bg-red-700:nth-child(even) {
   --tw-bg-opacity: 1;
-  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+  background-color: rgb(200 30 30 / var(--tw-bg-opacity));
 }
 
 .even\:bg-yellow-700:nth-child(even) {
   --tw-bg-opacity: 1;
-  background-color: rgb(161 98 7 / var(--tw-bg-opacity));
+  background-color: rgb(142 75 16 / var(--tw-bg-opacity));
 }
 
 .even\:bg-purple-700:nth-child(even) {
   --tw-bg-opacity: 1;
-  background-color: rgb(126 34 206 / var(--tw-bg-opacity));
+  background-color: rgb(108 43 217 / var(--tw-bg-opacity));
 }
 
 .focus-within\:z-10:focus-within {
   z-index: 10;
 }
 
+.focus-within\:border-primary-500:focus-within {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 121 93 / var(--tw-border-opacity));
+}
+
 .focus-within\:bg-gray-900:focus-within {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
+.focus-within\:text-primary-700:focus-within {
+  --tw-text-opacity: 1;
+  color: rgb(235 79 39 / var(--tw-text-opacity));
+}
+
 .focus-within\:text-white:focus-within {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -5280,7 +5914,7 @@ svg.apply-fill path {
 
 .focus-within\:ring-blue-300:focus-within {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
 }
 
 .focus-within\:ring-gray-300:focus-within {
@@ -5290,22 +5924,27 @@ svg.apply-fill path {
 
 .focus-within\:ring-green-300:focus-within {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(132 225 188 / var(--tw-ring-opacity));
+}
+
+.focus-within\:ring-primary-300:focus-within {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 213 204 / var(--tw-ring-opacity));
 }
 
 .focus-within\:ring-purple-300:focus-within {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(216 180 254 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(202 191 253 / var(--tw-ring-opacity));
 }
 
 .focus-within\:ring-red-300:focus-within {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(248 180 180 / var(--tw-ring-opacity));
 }
 
 .focus-within\:ring-yellow-300:focus-within {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 224 71 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(250 202 21 / var(--tw-ring-opacity));
 }
 
 .hover\:border-gray-300:hover {
@@ -5315,7 +5954,7 @@ svg.apply-fill path {
 
 .hover\:bg-indigo-200:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(199 210 254 / var(--tw-bg-opacity));
+  background-color: rgb(205 219 254 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-gray-100:hover {
@@ -5323,9 +5962,14 @@ svg.apply-fill path {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-primary-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 228 222 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-blue-200:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
+  background-color: rgb(195 221 253 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-gray-200:hover {
@@ -5335,27 +5979,27 @@ svg.apply-fill path {
 
 .hover\:bg-red-200:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+  background-color: rgb(251 213 213 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-green-200:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
+  background-color: rgb(188 240 218 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-yellow-200:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 240 138 / var(--tw-bg-opacity));
+  background-color: rgb(252 233 106 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-purple-200:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(233 213 255 / var(--tw-bg-opacity));
+  background-color: rgb(220 215 254 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-pink-200:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(251 207 232 / var(--tw-bg-opacity));
+  background-color: rgb(250 209 232 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-gray-600:hover {
@@ -5370,7 +6014,7 @@ svg.apply-fill path {
 
 .hover\:bg-blue-800:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
+  background-color: rgb(30 66 159 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-gray-900:hover {
@@ -5380,22 +6024,32 @@ svg.apply-fill path {
 
 .hover\:bg-green-800:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(22 101 52 / var(--tw-bg-opacity));
+  background-color: rgb(3 84 63 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-primary-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 69 34 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-purple-800:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(107 33 168 / var(--tw-bg-opacity));
+  background-color: rgb(85 33 181 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-red-800:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
+  background-color: rgb(155 28 28 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-yellow-500:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
+  background-color: rgb(194 120 3 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-primary-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(235 79 39 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-transparent:hover {
@@ -5407,34 +6061,39 @@ svg.apply-fill path {
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-primary-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 241 238 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-blue-100:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+  background-color: rgb(225 239 254 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-blue-400:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
+  background-color: rgb(118 169 250 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-green-400:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
+  background-color: rgb(49 196 141 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-red-400:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+  background-color: rgb(249 128 128 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-yellow-400:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
+  background-color: rgb(227 160 8 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-purple-400:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(192 132 252 / var(--tw-bg-opacity));
+  background-color: rgb(172 148 250 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-gradient-to-br:hover {
@@ -5451,12 +6110,17 @@ svg.apply-fill path {
 
 .hover\:text-blue-800:hover {
   --tw-text-opacity: 1;
-  color: rgb(30 64 175 / var(--tw-text-opacity));
+  color: rgb(30 66 159 / var(--tw-text-opacity));
+}
+
+.hover\:text-primary-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(165 55 27 / var(--tw-text-opacity));
 }
 
 .hover\:text-blue-900:hover {
   --tw-text-opacity: 1;
-  color: rgb(30 58 138 / var(--tw-text-opacity));
+  color: rgb(35 56 118 / var(--tw-text-opacity));
 }
 
 .hover\:text-gray-400:hover {
@@ -5466,32 +6130,32 @@ svg.apply-fill path {
 
 .hover\:text-red-900:hover {
   --tw-text-opacity: 1;
-  color: rgb(127 29 29 / var(--tw-text-opacity));
+  color: rgb(119 29 29 / var(--tw-text-opacity));
 }
 
 .hover\:text-green-900:hover {
   --tw-text-opacity: 1;
-  color: rgb(20 83 45 / var(--tw-text-opacity));
+  color: rgb(1 71 55 / var(--tw-text-opacity));
 }
 
 .hover\:text-yellow-900:hover {
   --tw-text-opacity: 1;
-  color: rgb(113 63 18 / var(--tw-text-opacity));
+  color: rgb(99 49 18 / var(--tw-text-opacity));
 }
 
 .hover\:text-indigo-900:hover {
   --tw-text-opacity: 1;
-  color: rgb(49 46 129 / var(--tw-text-opacity));
+  color: rgb(54 47 120 / var(--tw-text-opacity));
 }
 
 .hover\:text-purple-900:hover {
   --tw-text-opacity: 1;
-  color: rgb(88 28 135 / var(--tw-text-opacity));
+  color: rgb(74 29 150 / var(--tw-text-opacity));
 }
 
 .hover\:text-pink-900:hover {
   --tw-text-opacity: 1;
-  color: rgb(131 24 67 / var(--tw-text-opacity));
+  color: rgb(117 26 61 / var(--tw-text-opacity));
 }
 
 .hover\:text-gray-900:hover {
@@ -5499,6 +6163,11 @@ svg.apply-fill path {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.hover\:text-primary-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(235 79 39 / var(--tw-text-opacity));
+}
+
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -5518,9 +6187,14 @@ svg.apply-fill path {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.hover\:text-primary-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(239 86 47 / var(--tw-text-opacity));
+}
+
 .hover\:text-blue-700:hover {
   --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
+  color: rgb(26 86 219 / var(--tw-text-opacity));
 }
 
 .hover\:text-gray-700:hover {
@@ -5542,27 +6216,37 @@ svg.apply-fill path {
 
 .focus\:border-blue-500:focus {
   --tw-border-opacity: 1;
-  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+  border-color: rgb(63 131 248 / var(--tw-border-opacity));
+}
+
+.focus\:border-primary-600:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 86 47 / var(--tw-border-opacity));
 }
 
 .focus\:border-green-600:focus {
   --tw-border-opacity: 1;
-  border-color: rgb(22 163 74 / var(--tw-border-opacity));
+  border-color: rgb(5 122 85 / var(--tw-border-opacity));
 }
 
 .focus\:border-red-600:focus {
   --tw-border-opacity: 1;
-  border-color: rgb(220 38 38 / var(--tw-border-opacity));
+  border-color: rgb(224 36 36 / var(--tw-border-opacity));
+}
+
+.focus\:border-primary-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 121 93 / var(--tw-border-opacity));
 }
 
 .focus\:border-green-500:focus {
   --tw-border-opacity: 1;
-  border-color: rgb(34 197 94 / var(--tw-border-opacity));
+  border-color: rgb(14 159 110 / var(--tw-border-opacity));
 }
 
 .focus\:border-red-500:focus {
   --tw-border-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-border-opacity));
+  border-color: rgb(240 82 82 / var(--tw-border-opacity));
 }
 
 .focus\:border-gray-200:focus {
@@ -5570,6 +6254,11 @@ svg.apply-fill path {
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
+.focus\:text-primary-700:focus {
+  --tw-text-opacity: 1;
+  color: rgb(235 79 39 / var(--tw-text-opacity));
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -5606,12 +6295,12 @@ svg.apply-fill path {
 
 .focus\:ring-blue-300:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-green-300:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(132 225 188 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-cyan-300:focus {
@@ -5621,7 +6310,7 @@ svg.apply-fill path {
 
 .focus\:ring-teal-300:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(94 234 212 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(126 220 226 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-lime-300:focus {
@@ -5631,32 +6320,32 @@ svg.apply-fill path {
 
 .focus\:ring-red-300:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(248 180 180 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-pink-300:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(249 168 212 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(248 180 217 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-purple-300:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(216 180 254 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(202 191 253 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-green-200:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(187 247 208 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(188 240 218 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-purple-200:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(233 213 255 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(220 215 254 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-pink-200:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(251 207 232 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(250 209 232 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-lime-200:focus {
@@ -5666,22 +6355,27 @@ svg.apply-fill path {
 
 .focus\:ring-red-100:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 226 226 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(253 232 232 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-blue-500:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-primary-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(254 121 93 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-green-500:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(14 159 110 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-red-500:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(240 82 82 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-gray-400:focus {
@@ -5691,22 +6385,32 @@ svg.apply-fill path {
 
 .focus\:ring-purple-500:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(144 97 249 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-teal-500:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(20 184 166 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(6 148 162 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-yellow-500:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(234 179 8 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(194 120 3 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-orange-500:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(249 115 22 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(255 90 31 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-primary-700:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(235 79 39 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-primary-300:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 213 204 / var(--tw-ring-opacity));
 }
 
 .focus\:\!ring-gray-300:focus {
@@ -5716,37 +6420,42 @@ svg.apply-fill path {
 
 .focus\:ring-red-400:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(249 128 128 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-yellow-400:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(250 204 21 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(227 160 8 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-green-400:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(74 222 128 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(49 196 141 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-indigo-400:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(129 140 248 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(141 162 251 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-purple-400:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(192 132 252 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(172 148 250 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-pink-400:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(244 114 182 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(241 126 184 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-blue-400:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(118 169 250 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-primary-400:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 188 173 / var(--tw-ring-opacity));
 }
 
 .focus-visible\:outline-none:focus-visible {
@@ -5789,6 +6498,11 @@ svg.apply-fill path {
   --tw-bg-opacity: 0 !important;
 }
 
+.group:hover .group-hover\:text-primary-600 {
+  --tw-text-opacity: 1;
+  color: rgb(239 86 47 / var(--tw-text-opacity));
+}
+
 .group:hover .group-hover\:\!text-inherit {
   color: inherit !important;
 }
@@ -5809,39 +6523,44 @@ svg.apply-fill path {
   --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
 }
 
+.peer:checked ~ .peer-checked\:bg-primary-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 86 47 / var(--tw-bg-opacity));
+}
+
 .peer:checked ~ .peer-checked\:bg-red-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
+  background-color: rgb(224 36 36 / var(--tw-bg-opacity));
 }
 
 .peer:checked ~ .peer-checked\:bg-green-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
+  background-color: rgb(5 122 85 / var(--tw-bg-opacity));
 }
 
 .peer:checked ~ .peer-checked\:bg-purple-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(147 51 234 / var(--tw-bg-opacity));
+  background-color: rgb(126 58 242 / var(--tw-bg-opacity));
 }
 
 .peer:checked ~ .peer-checked\:bg-yellow-400 {
   --tw-bg-opacity: 1;
-  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
+  background-color: rgb(227 160 8 / var(--tw-bg-opacity));
 }
 
 .peer:checked ~ .peer-checked\:bg-teal-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(13 148 136 / var(--tw-bg-opacity));
+  background-color: rgb(4 116 129 / var(--tw-bg-opacity));
 }
 
 .peer:checked ~ .peer-checked\:bg-orange-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
+  background-color: rgb(255 90 31 / var(--tw-bg-opacity));
 }
 
 .peer:checked ~ .peer-checked\:bg-blue-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+  background-color: rgb(28 100 242 / var(--tw-bg-opacity));
 }
 
 .peer:checked ~ .peer-checked\:after\:translate-x-full::after {
@@ -5901,45 +6620,55 @@ svg.apply-fill path {
   padding-right: 0.5rem;
 }
 
+.peer:focus ~ .peer-focus\:text-primary-600 {
+  --tw-text-opacity: 1;
+  color: rgb(239 86 47 / var(--tw-text-opacity));
+}
+
 .peer:focus ~ .peer-focus\:ring-4 {
   --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(4px + 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);
 }
 
+.peer:focus ~ .peer-focus\:ring-primary-300 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 213 204 / var(--tw-ring-opacity));
+}
+
 .peer:focus ~ .peer-focus\:ring-red-300 {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(248 180 180 / var(--tw-ring-opacity));
 }
 
 .peer:focus ~ .peer-focus\:ring-green-300 {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(132 225 188 / var(--tw-ring-opacity));
 }
 
 .peer:focus ~ .peer-focus\:ring-purple-300 {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(216 180 254 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(202 191 253 / var(--tw-ring-opacity));
 }
 
 .peer:focus ~ .peer-focus\:ring-yellow-300 {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 224 71 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(250 202 21 / var(--tw-ring-opacity));
 }
 
 .peer:focus ~ .peer-focus\:ring-teal-300 {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(94 234 212 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(126 220 226 / var(--tw-ring-opacity));
 }
 
 .peer:focus ~ .peer-focus\:ring-orange-300 {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 186 116 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(253 186 140 / var(--tw-ring-opacity));
 }
 
 .peer:focus ~ .peer-focus\:ring-blue-300 {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
 }
 
 [dir="rtl"] .rtl\:origin-right {
@@ -5984,1188 +6713,1366 @@ svg.apply-fill path {
   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));
 }
 
-@media (prefers-color-scheme: dark) {
-  .dark\:block {
-    display: block;
-  }
-
-  .dark\:hidden {
-    display: none;
-  }
-
-  .dark\:divide-gray-600 > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-opacity: 1;
-    border-color: rgb(75 85 99 / var(--tw-divide-opacity));
-  }
-
-  .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-opacity: 1;
-    border-color: rgb(55 65 81 / var(--tw-divide-opacity));
-  }
-
-  .dark\:divide-gray-800 > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-opacity: 1;
-    border-color: rgb(31 41 55 / var(--tw-divide-opacity));
-  }
-
-  .dark\:divide-red-800 > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-opacity: 1;
-    border-color: rgb(153 27 27 / var(--tw-divide-opacity));
-  }
-
-  .dark\:divide-yellow-800 > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-opacity: 1;
-    border-color: rgb(133 77 14 / var(--tw-divide-opacity));
-  }
-
-  .dark\:divide-green-800 > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-opacity: 1;
-    border-color: rgb(22 101 52 / var(--tw-divide-opacity));
-  }
-
-  .dark\:divide-indigo-800 > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-opacity: 1;
-    border-color: rgb(55 48 163 / var(--tw-divide-opacity));
-  }
-
-  .dark\:divide-purple-800 > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-opacity: 1;
-    border-color: rgb(107 33 168 / var(--tw-divide-opacity));
-  }
-
-  .dark\:divide-pink-800 > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-opacity: 1;
-    border-color: rgb(157 23 77 / var(--tw-divide-opacity));
-  }
-
-  .dark\:divide-blue-800 > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-opacity: 1;
-    border-color: rgb(30 64 175 / var(--tw-divide-opacity));
-  }
-
-  .dark\:divide-orange-800 > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-opacity: 1;
-    border-color: rgb(154 52 18 / var(--tw-divide-opacity));
-  }
-
-  .dark\:border-gray-700 {
-    --tw-border-opacity: 1;
-    border-color: rgb(55 65 81 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-gray-800 {
-    --tw-border-opacity: 1;
-    border-color: rgb(31 41 55 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-blue-400 {
-    --tw-border-opacity: 1;
-    border-color: rgb(96 165 250 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-gray-500 {
-    --tw-border-opacity: 1;
-    border-color: rgb(107 114 128 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-red-400 {
-    --tw-border-opacity: 1;
-    border-color: rgb(248 113 113 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-green-400 {
-    --tw-border-opacity: 1;
-    border-color: rgb(74 222 128 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-yellow-300 {
-    --tw-border-opacity: 1;
-    border-color: rgb(253 224 71 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-indigo-400 {
-    --tw-border-opacity: 1;
-    border-color: rgb(129 140 248 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-purple-400 {
-    --tw-border-opacity: 1;
-    border-color: rgb(192 132 252 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-pink-400 {
-    --tw-border-opacity: 1;
-    border-color: rgb(244 114 182 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-gray-600 {
-    --tw-border-opacity: 1;
-    border-color: rgb(75 85 99 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-blue-500 {
-    --tw-border-opacity: 1;
-    border-color: rgb(59 130 246 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-green-500 {
-    --tw-border-opacity: 1;
-    border-color: rgb(34 197 94 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-red-500 {
-    --tw-border-opacity: 1;
-    border-color: rgb(239 68 68 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-gray-900 {
-    --tw-border-opacity: 1;
-    border-color: rgb(17 24 39 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-white {
-    --tw-border-opacity: 1;
-    border-color: rgb(255 255 255 / var(--tw-border-opacity));
-  }
-
-  .dark\:\!border-gray-600 {
-    --tw-border-opacity: 1 !important;
-    border-color: rgb(75 85 99 / var(--tw-border-opacity)) !important;
-  }
-
-  .dark\:border-red-800 {
-    --tw-border-opacity: 1;
-    border-color: rgb(153 27 27 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-yellow-800 {
-    --tw-border-opacity: 1;
-    border-color: rgb(133 77 14 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-green-800 {
-    --tw-border-opacity: 1;
-    border-color: rgb(22 101 52 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-indigo-800 {
-    --tw-border-opacity: 1;
-    border-color: rgb(55 48 163 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-purple-800 {
-    --tw-border-opacity: 1;
-    border-color: rgb(107 33 168 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-pink-800 {
-    --tw-border-opacity: 1;
-    border-color: rgb(157 23 77 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-blue-800 {
-    --tw-border-opacity: 1;
-    border-color: rgb(30 64 175 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-orange-800 {
-    --tw-border-opacity: 1;
-    border-color: rgb(154 52 18 / var(--tw-border-opacity));
-  }
-
-  .dark\:bg-gray-800 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-gray-600 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-blue-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(30 58 138 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-gray-700 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-red-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(127 29 29 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-green-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(20 83 45 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-yellow-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(113 63 18 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-indigo-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(49 46 129 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-purple-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(88 28 135 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-pink-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(131 24 67 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-gray-300 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-blue-600 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(37 99 235 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-green-600 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(22 163 74 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-purple-600 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(147 51 234 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-red-600 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(220 38 38 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-blue-500 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-green-500 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(34 197 94 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-gray-500 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(107 114 128 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-purple-500 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(168 85 247 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-red-500 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-yellow-400 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(250 204 21 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-transparent {
-    background-color: transparent;
-  }
-
-  .dark\:bg-gray-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-gray-800\/30 {
-    background-color: rgb(31 41 55 / 0.3);
-  }
-
-  .dark\:bg-inherit {
-    background-color: inherit;
-  }
-
-  .dark\:bg-indigo-500 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(99 102 241 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-yellow-600 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(202 138 4 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-gray-200 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-green-400 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(74 222 128 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-indigo-400 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(129 140 248 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-purple-400 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(192 132 252 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-pink-400 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(244 114 182 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-blue-400 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(96 165 250 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-red-800 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(153 27 27 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-yellow-800 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(133 77 14 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-green-800 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(22 101 52 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-blue-800 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(30 64 175 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-indigo-800 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(55 48 163 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-purple-800 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(107 33 168 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-orange-700 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(194 65 12 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-orange-800 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(154 52 18 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-opacity-80 {
-    --tw-bg-opacity: 0.8;
-  }
-
-  .dark\:fill-gray-300 {
-    fill: #d1d5db;
-  }
-
-  .dark\:text-white {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-gray-400 {
-    --tw-text-opacity: 1;
-    color: rgb(156 163 175 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-gray-300 {
-    --tw-text-opacity: 1;
-    color: rgb(209 213 219 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-blue-300 {
-    --tw-text-opacity: 1;
-    color: rgb(147 197 253 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-red-300 {
-    --tw-text-opacity: 1;
-    color: rgb(252 165 165 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-green-300 {
-    --tw-text-opacity: 1;
-    color: rgb(134 239 172 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-yellow-300 {
-    --tw-text-opacity: 1;
-    color: rgb(253 224 71 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-indigo-300 {
-    --tw-text-opacity: 1;
-    color: rgb(165 180 252 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-purple-300 {
-    --tw-text-opacity: 1;
-    color: rgb(216 180 254 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-pink-300 {
-    --tw-text-opacity: 1;
-    color: rgb(249 168 212 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-blue-400 {
-    --tw-text-opacity: 1;
-    color: rgb(96 165 250 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-red-400 {
-    --tw-text-opacity: 1;
-    color: rgb(248 113 113 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-green-400 {
-    --tw-text-opacity: 1;
-    color: rgb(74 222 128 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-indigo-400 {
-    --tw-text-opacity: 1;
-    color: rgb(129 140 248 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-purple-400 {
-    --tw-text-opacity: 1;
-    color: rgb(192 132 252 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-pink-400 {
-    --tw-text-opacity: 1;
-    color: rgb(244 114 182 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-gray-900 {
-    --tw-text-opacity: 1;
-    color: rgb(17 24 39 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-blue-500 {
-    --tw-text-opacity: 1;
-    color: rgb(59 130 246 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-green-500 {
-    --tw-text-opacity: 1;
-    color: rgb(34 197 94 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-red-500 {
-    --tw-text-opacity: 1;
-    color: rgb(239 68 68 / var(--tw-text-opacity));
-  }
-
-  .dark\:\!text-white {
-    --tw-text-opacity: 1 !important;
-    color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
-  }
-
-  .dark\:text-gray-500 {
-    --tw-text-opacity: 1;
-    color: rgb(107 114 128 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-gray-100 {
-    --tw-text-opacity: 1;
-    color: rgb(243 244 246 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-gray-600 {
-    --tw-text-opacity: 1;
-    color: rgb(75 85 99 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-gray-700 {
-    --tw-text-opacity: 1;
-    color: rgb(55 65 81 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-blue-100 {
-    --tw-text-opacity: 1;
-    color: rgb(219 234 254 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-green-100 {
-    --tw-text-opacity: 1;
-    color: rgb(220 252 231 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-red-100 {
-    --tw-text-opacity: 1;
-    color: rgb(254 226 226 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-yellow-100 {
-    --tw-text-opacity: 1;
-    color: rgb(254 249 195 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-purple-100 {
-    --tw-text-opacity: 1;
-    color: rgb(243 232 255 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-indigo-100 {
-    --tw-text-opacity: 1;
-    color: rgb(224 231 255 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-pink-100 {
-    --tw-text-opacity: 1;
-    color: rgb(252 231 243 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-gray-200 {
-    --tw-text-opacity: 1;
-    color: rgb(229 231 235 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-red-200 {
-    --tw-text-opacity: 1;
-    color: rgb(254 202 202 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-yellow-200 {
-    --tw-text-opacity: 1;
-    color: rgb(254 240 138 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-green-200 {
-    --tw-text-opacity: 1;
-    color: rgb(187 247 208 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-blue-200 {
-    --tw-text-opacity: 1;
-    color: rgb(191 219 254 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-indigo-200 {
-    --tw-text-opacity: 1;
-    color: rgb(199 210 254 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-purple-200 {
-    --tw-text-opacity: 1;
-    color: rgb(233 213 255 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-orange-200 {
-    --tw-text-opacity: 1;
-    color: rgb(254 215 170 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-orange-400 {
-    --tw-text-opacity: 1;
-    color: rgb(251 146 60 / var(--tw-text-opacity));
-  }
-
-  .dark\:decoration-blue-600 {
-    text-decoration-color: #2563eb;
-  }
-
-  .dark\:placeholder-gray-400::placeholder {
-    --tw-placeholder-opacity: 1;
-    color: rgb(156 163 175 / var(--tw-placeholder-opacity));
-  }
-
-  .dark\:placeholder-green-500::placeholder {
-    --tw-placeholder-opacity: 1;
-    color: rgb(34 197 94 / var(--tw-placeholder-opacity));
-  }
-
-  .dark\:placeholder-red-500::placeholder {
-    --tw-placeholder-opacity: 1;
-    color: rgb(239 68 68 / var(--tw-placeholder-opacity));
-  }
-
-  .dark\:opacity-25 {
-    opacity: 0.25;
-  }
-
-  .dark\:shadow-gray-800 {
-    --tw-shadow-color: #1f2937;
-    --tw-shadow: var(--tw-shadow-colored);
-  }
-
-  .dark\:shadow-blue-800 {
-    --tw-shadow-color: #1e40af;
-    --tw-shadow: var(--tw-shadow-colored);
-  }
-
-  .dark\:shadow-gray-900 {
-    --tw-shadow-color: #111827;
-    --tw-shadow: var(--tw-shadow-colored);
-  }
-
-  .dark\:shadow-green-800 {
-    --tw-shadow-color: #166534;
-    --tw-shadow: var(--tw-shadow-colored);
-  }
-
-  .dark\:shadow-gray-700 {
-    --tw-shadow-color: #374151;
-    --tw-shadow: var(--tw-shadow-colored);
-  }
-
-  .dark\:shadow-purple-800 {
-    --tw-shadow-color: #6b21a8;
-    --tw-shadow: var(--tw-shadow-colored);
-  }
-
-  .dark\:shadow-red-800 {
-    --tw-shadow-color: #991b1b;
-    --tw-shadow: var(--tw-shadow-colored);
-  }
-
-  .dark\:shadow-yellow-700 {
-    --tw-shadow-color: #a16207;
-    --tw-shadow: var(--tw-shadow-colored);
-  }
-
-  .dark\:shadow-gray-800\/80 {
-    --tw-shadow-color: rgb(31 41 55 / 0.8);
-    --tw-shadow: var(--tw-shadow-colored);
-  }
-
-  .dark\:shadow-blue-800\/80 {
-    --tw-shadow-color: rgb(30 64 175 / 0.8);
-    --tw-shadow: var(--tw-shadow-colored);
-  }
-
-  .dark\:shadow-green-800\/80 {
-    --tw-shadow-color: rgb(22 101 52 / 0.8);
-    --tw-shadow: var(--tw-shadow-colored);
-  }
-
-  .dark\:shadow-purple-800\/80 {
-    --tw-shadow-color: rgb(107 33 168 / 0.8);
-    --tw-shadow: var(--tw-shadow-colored);
-  }
-
-  .dark\:shadow-red-800\/80 {
-    --tw-shadow-color: rgb(153 27 27 / 0.8);
-    --tw-shadow: var(--tw-shadow-colored);
-  }
-
-  .dark\:shadow-yellow-800\/80 {
-    --tw-shadow-color: rgb(133 77 14 / 0.8);
-    --tw-shadow: var(--tw-shadow-colored);
-  }
-
-  .dark\:shadow-cyan-800\/80 {
-    --tw-shadow-color: rgb(21 94 117 / 0.8);
-    --tw-shadow: var(--tw-shadow-colored);
-  }
-
-  .dark\:shadow-teal-800\/80 {
-    --tw-shadow-color: rgb(17 94 89 / 0.8);
-    --tw-shadow: var(--tw-shadow-colored);
-  }
-
-  .dark\:shadow-lime-800\/80 {
-    --tw-shadow-color: rgb(63 98 18 / 0.8);
-    --tw-shadow: var(--tw-shadow-colored);
-  }
-
-  .dark\:shadow-pink-800\/80 {
-    --tw-shadow-color: rgb(157 23 77 / 0.8);
-    --tw-shadow: var(--tw-shadow-colored);
-  }
-
-  .dark\:ring-gray-500 {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
-  }
-
-  .dark\:ring-gray-900 {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
-  }
-
-  .dark\:ring-offset-gray-800 {
-    --tw-ring-offset-color: #1f2937;
-  }
-
-  .dark\:first-letter\:text-gray-100::first-letter {
-    --tw-text-opacity: 1;
-    color: rgb(243 244 246 / var(--tw-text-opacity));
-  }
-
-  .dark\:before\:shadow-\[-10px_0_50px_65px_rgba\(16\2c 24\2c 39\2c 1\)\]::before {
-    content: var(--tw-content);
-    --tw-shadow: -10px 0 50px 65px rgba(16,24,39,1);
-    --tw-shadow-colored: -10px 0 50px 65px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  }
-
-  .dark\:after\:shadow-\[10px_0_50px_65px_rgba\(16\2c 24\2c 39\2c 1\)\]::after {
-    content: var(--tw-content);
-    --tw-shadow: 10px 0 50px 65px rgba(16,24,39,1);
-    --tw-shadow-colored: 10px 0 50px 65px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  }
-
-  .odd\:dark\:bg-gray-800:nth-child(odd) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-  }
-
-  .odd\:dark\:bg-blue-800:nth-child(odd) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(30 64 175 / var(--tw-bg-opacity));
-  }
-
-  .odd\:dark\:bg-green-800:nth-child(odd) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(22 101 52 / var(--tw-bg-opacity));
-  }
-
-  .odd\:dark\:bg-red-800:nth-child(odd) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(153 27 27 / var(--tw-bg-opacity));
-  }
-
-  .odd\:dark\:bg-yellow-800:nth-child(odd) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(133 77 14 / var(--tw-bg-opacity));
-  }
-
-  .odd\:dark\:bg-purple-800:nth-child(odd) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(107 33 168 / var(--tw-bg-opacity));
-  }
-
-  .even\:dark\:bg-gray-700:nth-child(even) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-  }
-
-  .even\:dark\:bg-blue-700:nth-child(even) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-  }
-
-  .even\:dark\:bg-green-700:nth-child(even) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(21 128 61 / var(--tw-bg-opacity));
-  }
-
-  .even\:dark\:bg-red-700:nth-child(even) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(185 28 28 / var(--tw-bg-opacity));
-  }
-
-  .even\:dark\:bg-yellow-700:nth-child(even) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(161 98 7 / var(--tw-bg-opacity));
-  }
-
-  .even\:dark\:bg-purple-700:nth-child(even) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(126 34 206 / var(--tw-bg-opacity));
-  }
-
-  .dark\:focus-within\:text-white:focus-within {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
-  }
-
-  .dark\:focus-within\:ring-gray-700:focus-within {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus-within\:ring-blue-800:focus-within {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus-within\:ring-green-800:focus-within {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(22 101 52 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus-within\:ring-purple-900:focus-within {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(88 28 135 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus-within\:ring-red-900:focus-within {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(127 29 29 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus-within\:ring-yellow-900:focus-within {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(113 63 18 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus-within\:ring-gray-800:focus-within {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
-  }
-
-  .dark\:hover\:border-gray-600:hover {
-    --tw-border-opacity: 1;
-    border-color: rgb(75 85 99 / var(--tw-border-opacity));
-  }
-
-  .dark\:hover\:border-gray-500:hover {
-    --tw-border-opacity: 1;
-    border-color: rgb(107 114 128 / var(--tw-border-opacity));
-  }
-
-  .hover\:dark\:bg-gray-800:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-gray-700:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-blue-800:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(30 64 175 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-red-800:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(153 27 27 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-green-800:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(22 101 52 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-yellow-800:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(133 77 14 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-indigo-800:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(55 48 163 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-purple-800:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(107 33 168 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-pink-800:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(157 23 77 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-gray-800:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-blue-700:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-green-700:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(21 128 61 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-purple-700:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(126 34 206 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-red-700:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(185 28 28 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-gray-600:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-blue-600:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(37 99 235 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-green-600:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(22 163 74 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-purple-500:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(168 85 247 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-red-600:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(220 38 38 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-yellow-400:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(250 204 21 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:text-blue-300:hover {
-    --tw-text-opacity: 1;
-    color: rgb(147 197 253 / var(--tw-text-opacity));
-  }
-
-  .dark\:hover\:text-gray-300:hover {
-    --tw-text-opacity: 1;
-    color: rgb(209 213 219 / var(--tw-text-opacity));
-  }
-
-  .dark\:hover\:text-red-300:hover {
-    --tw-text-opacity: 1;
-    color: rgb(252 165 165 / var(--tw-text-opacity));
-  }
-
-  .dark\:hover\:text-green-300:hover {
-    --tw-text-opacity: 1;
-    color: rgb(134 239 172 / var(--tw-text-opacity));
-  }
-
-  .dark\:hover\:text-yellow-300:hover {
-    --tw-text-opacity: 1;
-    color: rgb(253 224 71 / var(--tw-text-opacity));
-  }
-
-  .dark\:hover\:text-indigo-300:hover {
-    --tw-text-opacity: 1;
-    color: rgb(165 180 252 / var(--tw-text-opacity));
-  }
-
-  .dark\:hover\:text-purple-300:hover {
-    --tw-text-opacity: 1;
-    color: rgb(216 180 254 / var(--tw-text-opacity));
-  }
-
-  .dark\:hover\:text-pink-300:hover {
-    --tw-text-opacity: 1;
-    color: rgb(249 168 212 / var(--tw-text-opacity));
-  }
-
-  .dark\:hover\:text-white:hover {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
-  }
-
-  .dark\:focus\:border-blue-500:focus {
-    --tw-border-opacity: 1;
-    border-color: rgb(59 130 246 / var(--tw-border-opacity));
-  }
-
-  .dark\:focus\:border-green-500:focus {
-    --tw-border-opacity: 1;
-    border-color: rgb(34 197 94 / var(--tw-border-opacity));
-  }
-
-  .dark\:focus\:border-red-500:focus {
-    --tw-border-opacity: 1;
-    border-color: rgb(239 68 68 / var(--tw-border-opacity));
-  }
-
-  .dark\:focus\:text-white:focus {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
-  }
-
-  .dark\:focus\:ring-gray-800:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-blue-800:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-green-800:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(22 101 52 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-cyan-800:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(21 94 117 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-teal-800:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(17 94 89 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-lime-800:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(63 98 18 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-red-800:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(153 27 27 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-pink-800:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(157 23 77 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-purple-800:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(107 33 168 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-teal-700:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(15 118 110 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-red-400:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-blue-500:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-green-500:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-red-500:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-red-600:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-green-600:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(22 163 74 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-purple-600:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(147 51 234 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-teal-600:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(13 148 136 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-yellow-600:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(202 138 4 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-orange-600:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(234 88 12 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-blue-600:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-gray-500:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
-  }
-
-  .dark\:disabled\:text-gray-500:disabled {
-    --tw-text-opacity: 1;
-    color: rgb(107 114 128 / var(--tw-text-opacity));
-  }
-
-  .group:hover .dark\:group-hover\:bg-gray-800\/60 {
-    background-color: rgb(31 41 55 / 0.6);
-  }
-
-  .group:focus .dark\:group-focus\:ring-gray-800\/70 {
-    --tw-ring-color: rgb(31 41 55 / 0.7);
-  }
-
-  .peer:focus ~ .dark\:peer-focus\:ring-red-800 {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(153 27 27 / var(--tw-ring-opacity));
-  }
-
-  .peer:focus ~ .dark\:peer-focus\:ring-green-800 {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(22 101 52 / var(--tw-ring-opacity));
-  }
-
-  .peer:focus ~ .dark\:peer-focus\:ring-purple-800 {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(107 33 168 / var(--tw-ring-opacity));
-  }
-
-  .peer:focus ~ .dark\:peer-focus\:ring-yellow-800 {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(133 77 14 / var(--tw-ring-opacity));
-  }
-
-  .peer:focus ~ .dark\:peer-focus\:ring-teal-800 {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(17 94 89 / var(--tw-ring-opacity));
-  }
-
-  .peer:focus ~ .dark\:peer-focus\:ring-orange-800 {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(154 52 18 / var(--tw-ring-opacity));
-  }
-
-  .peer:focus ~ .dark\:peer-focus\:ring-blue-800 {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
-  }
+.dark .dark\:block {
+  display: block;
+}
+
+.dark .dark\:hidden {
+  display: none;
+}
+
+.dark .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-divide-opacity));
+}
+
+.dark .dark\:divide-gray-600 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-divide-opacity));
+}
+
+.dark .dark\:divide-gray-800 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(31 41 55 / var(--tw-divide-opacity));
+}
+
+.dark .dark\:divide-red-800 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(155 28 28 / var(--tw-divide-opacity));
+}
+
+.dark .dark\:divide-yellow-800 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(114 59 19 / var(--tw-divide-opacity));
+}
+
+.dark .dark\:divide-green-800 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(3 84 63 / var(--tw-divide-opacity));
+}
+
+.dark .dark\:divide-indigo-800 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(66 56 157 / var(--tw-divide-opacity));
+}
+
+.dark .dark\:divide-purple-800 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(85 33 181 / var(--tw-divide-opacity));
+}
+
+.dark .dark\:divide-pink-800 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(153 21 75 / var(--tw-divide-opacity));
+}
+
+.dark .dark\:divide-blue-800 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(30 66 159 / var(--tw-divide-opacity));
+}
+
+.dark .dark\:divide-primary-200 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(255 228 222 / var(--tw-divide-opacity));
+}
+
+.dark .dark\:divide-orange-800 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(138 44 13 / var(--tw-divide-opacity));
+}
+
+.dark .dark\:border-gray-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-gray-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(31 41 55 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-primary-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 188 173 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-blue-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(118 169 250 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-red-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(249 128 128 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-green-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(49 196 141 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-yellow-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(250 202 21 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-indigo-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(141 162 251 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-purple-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(172 148 250 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-pink-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(241 126 184 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-gray-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-blue-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(63 131 248 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-green-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(14 159 110 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-primary-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 121 93 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-red-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(240 82 82 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-gray-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(17 24 39 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
+.dark .dark\:\!border-gray-600 {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity)) !important;
+}
+
+.dark .dark\:border-red-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(155 28 28 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-yellow-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(114 59 19 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-green-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(3 84 63 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-indigo-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(66 56 157 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-purple-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(85 33 181 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-pink-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(153 21 75 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-blue-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(30 66 159 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-primary-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 228 222 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-orange-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(138 44 13 / var(--tw-border-opacity));
+}
+
+.dark .dark\:bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-gray-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-primary-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(165 55 27 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-blue-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(35 56 118 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-gray-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-red-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(119 29 29 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-green-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(1 71 55 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-yellow-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(99 49 18 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-indigo-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(54 47 120 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-purple-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(74 29 150 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-pink-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(117 26 61 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(28 100 242 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-green-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(5 122 85 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-primary-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 86 47 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-purple-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(126 58 242 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-red-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 36 36 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(63 131 248 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(14 159 110 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-primary-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 121 93 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-purple-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(144 97 249 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 82 82 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-yellow-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(227 160 8 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-transparent {
+  background-color: transparent;
+}
+
+.dark .dark\:bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-gray-800\/30 {
+  background-color: rgb(31 41 55 / 0.3);
+}
+
+.dark .dark\:bg-inherit {
+  background-color: inherit;
+}
+
+.dark .dark\:bg-indigo-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(104 117 245 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-primary-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 228 222 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-yellow-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(159 88 10 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-primary-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 188 173 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-green-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(49 196 141 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-indigo-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(141 162 251 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-purple-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(172 148 250 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-pink-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 126 184 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-blue-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(118 169 250 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-primary-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 69 34 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-red-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(155 28 28 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-yellow-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(114 59 19 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-green-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 84 63 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-blue-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 66 159 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-indigo-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(66 56 157 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-purple-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(85 33 181 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-orange-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(180 52 3 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-orange-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(138 44 13 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-opacity-80 {
+  --tw-bg-opacity: 0.8;
+}
+
+.dark .dark\:fill-gray-300 {
+  fill: #D1D5DB;
+}
+
+.dark .dark\:text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-primary-300 {
+  --tw-text-opacity: 1;
+  color: rgb(255 213 204 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-blue-300 {
+  --tw-text-opacity: 1;
+  color: rgb(164 202 254 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-red-300 {
+  --tw-text-opacity: 1;
+  color: rgb(248 180 180 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-green-300 {
+  --tw-text-opacity: 1;
+  color: rgb(132 225 188 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-yellow-300 {
+  --tw-text-opacity: 1;
+  color: rgb(250 202 21 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-indigo-300 {
+  --tw-text-opacity: 1;
+  color: rgb(180 198 252 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-purple-300 {
+  --tw-text-opacity: 1;
+  color: rgb(202 191 253 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-pink-300 {
+  --tw-text-opacity: 1;
+  color: rgb(248 180 217 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-primary-400 {
+  --tw-text-opacity: 1;
+  color: rgb(255 188 173 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-blue-400 {
+  --tw-text-opacity: 1;
+  color: rgb(118 169 250 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-red-400 {
+  --tw-text-opacity: 1;
+  color: rgb(249 128 128 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-green-400 {
+  --tw-text-opacity: 1;
+  color: rgb(49 196 141 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-indigo-400 {
+  --tw-text-opacity: 1;
+  color: rgb(141 162 251 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-purple-400 {
+  --tw-text-opacity: 1;
+  color: rgb(172 148 250 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-pink-400 {
+  --tw-text-opacity: 1;
+  color: rgb(241 126 184 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-primary-700 {
+  --tw-text-opacity: 1;
+  color: rgb(235 79 39 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-primary-500 {
+  --tw-text-opacity: 1;
+  color: rgb(254 121 93 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(63 131 248 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-green-500 {
+  --tw-text-opacity: 1;
+  color: rgb(14 159 110 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(240 82 82 / var(--tw-text-opacity));
+}
+
+.dark .dark\:\!text-white {
+  --tw-text-opacity: 1 !important;
+  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
+}
+
+.dark .dark\:text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-primary-100 {
+  --tw-text-opacity: 1;
+  color: rgb(255 241 238 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-gray-100 {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-primary-800 {
+  --tw-text-opacity: 1;
+  color: rgb(204 69 34 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-primary-900 {
+  --tw-text-opacity: 1;
+  color: rgb(165 55 27 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-blue-100 {
+  --tw-text-opacity: 1;
+  color: rgb(225 239 254 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-green-100 {
+  --tw-text-opacity: 1;
+  color: rgb(222 247 236 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-red-100 {
+  --tw-text-opacity: 1;
+  color: rgb(253 232 232 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-yellow-100 {
+  --tw-text-opacity: 1;
+  color: rgb(253 246 178 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-purple-100 {
+  --tw-text-opacity: 1;
+  color: rgb(237 235 254 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-indigo-100 {
+  --tw-text-opacity: 1;
+  color: rgb(229 237 255 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-pink-100 {
+  --tw-text-opacity: 1;
+  color: rgb(252 232 243 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-primary-200 {
+  --tw-text-opacity: 1;
+  color: rgb(255 228 222 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-gray-200 {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-red-200 {
+  --tw-text-opacity: 1;
+  color: rgb(251 213 213 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-yellow-200 {
+  --tw-text-opacity: 1;
+  color: rgb(252 233 106 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-green-200 {
+  --tw-text-opacity: 1;
+  color: rgb(188 240 218 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-blue-200 {
+  --tw-text-opacity: 1;
+  color: rgb(195 221 253 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-indigo-200 {
+  --tw-text-opacity: 1;
+  color: rgb(205 219 254 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-purple-200 {
+  --tw-text-opacity: 1;
+  color: rgb(220 215 254 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-orange-200 {
+  --tw-text-opacity: 1;
+  color: rgb(252 217 189 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-orange-400 {
+  --tw-text-opacity: 1;
+  color: rgb(255 138 76 / var(--tw-text-opacity));
+}
+
+.dark .dark\:decoration-blue-600 {
+  text-decoration-color: #1C64F2;
+}
+
+.dark .dark\:placeholder-gray-400::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-placeholder-opacity));
+}
+
+.dark .dark\:placeholder-green-500::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(14 159 110 / var(--tw-placeholder-opacity));
+}
+
+.dark .dark\:placeholder-red-500::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(240 82 82 / var(--tw-placeholder-opacity));
+}
+
+.dark .dark\:opacity-25 {
+  opacity: 0.25;
+}
+
+.dark .dark\:shadow-gray-800 {
+  --tw-shadow-color: #1F2937;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.dark .dark\:shadow-blue-800 {
+  --tw-shadow-color: #1E429F;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.dark .dark\:shadow-gray-900 {
+  --tw-shadow-color: #111827;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.dark .dark\:shadow-green-800 {
+  --tw-shadow-color: #03543F;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.dark .dark\:shadow-gray-700 {
+  --tw-shadow-color: #374151;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.dark .dark\:shadow-primary-800 {
+  --tw-shadow-color: #CC4522;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.dark .dark\:shadow-purple-800 {
+  --tw-shadow-color: #5521B5;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.dark .dark\:shadow-red-800 {
+  --tw-shadow-color: #9B1C1C;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.dark .dark\:shadow-yellow-700 {
+  --tw-shadow-color: #8E4B10;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.dark .dark\:shadow-gray-800\/80 {
+  --tw-shadow-color: rgb(31 41 55 / 0.8);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.dark .dark\:shadow-blue-800\/80 {
+  --tw-shadow-color: rgb(30 66 159 / 0.8);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.dark .dark\:shadow-green-800\/80 {
+  --tw-shadow-color: rgb(3 84 63 / 0.8);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.dark .dark\:shadow-primary-800\/80 {
+  --tw-shadow-color: rgb(204 69 34 / 0.8);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.dark .dark\:shadow-purple-800\/80 {
+  --tw-shadow-color: rgb(85 33 181 / 0.8);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.dark .dark\:shadow-red-800\/80 {
+  --tw-shadow-color: rgb(155 28 28 / 0.8);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.dark .dark\:shadow-yellow-800\/80 {
+  --tw-shadow-color: rgb(114 59 19 / 0.8);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.dark .dark\:shadow-cyan-800\/80 {
+  --tw-shadow-color: rgb(21 94 117 / 0.8);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.dark .dark\:shadow-teal-800\/80 {
+  --tw-shadow-color: rgb(5 80 92 / 0.8);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.dark .dark\:shadow-lime-800\/80 {
+  --tw-shadow-color: rgb(63 98 18 / 0.8);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.dark .dark\:shadow-pink-800\/80 {
+  --tw-shadow-color: rgb(153 21 75 / 0.8);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.dark .dark\:ring-gray-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:ring-primary-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(254 121 93 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:ring-gray-900 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:ring-offset-gray-800 {
+  --tw-ring-offset-color: #1F2937;
+}
+
+.dark .dark\:first-letter\:text-gray-100::first-letter {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
+.dark .dark\:before\:shadow-\[-10px_0_50px_65px_rgba\(16\2c 24\2c 39\2c 1\)\]::before {
+  content: var(--tw-content);
+  --tw-shadow: -10px 0 50px 65px rgba(16,24,39,1);
+  --tw-shadow-colored: -10px 0 50px 65px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.dark .dark\:after\:shadow-\[10px_0_50px_65px_rgba\(16\2c 24\2c 39\2c 1\)\]::after {
+  content: var(--tw-content);
+  --tw-shadow: 10px 0 50px 65px rgba(16,24,39,1);
+  --tw-shadow-colored: 10px 0 50px 65px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.dark .odd\:dark\:bg-gray-800:nth-child(odd) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+.dark .odd\:dark\:bg-blue-800:nth-child(odd) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 66 159 / var(--tw-bg-opacity));
+}
+
+.dark .odd\:dark\:bg-green-800:nth-child(odd) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 84 63 / var(--tw-bg-opacity));
+}
+
+.dark .odd\:dark\:bg-red-800:nth-child(odd) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(155 28 28 / var(--tw-bg-opacity));
+}
+
+.dark .odd\:dark\:bg-yellow-800:nth-child(odd) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(114 59 19 / var(--tw-bg-opacity));
+}
+
+.dark .odd\:dark\:bg-purple-800:nth-child(odd) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(85 33 181 / var(--tw-bg-opacity));
+}
+
+.dark .even\:dark\:bg-gray-700:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+
+.dark .even\:dark\:bg-blue-700:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(26 86 219 / var(--tw-bg-opacity));
+}
+
+.dark .even\:dark\:bg-green-700:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(4 108 78 / var(--tw-bg-opacity));
+}
+
+.dark .even\:dark\:bg-red-700:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(200 30 30 / var(--tw-bg-opacity));
+}
+
+.dark .even\:dark\:bg-yellow-700:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(142 75 16 / var(--tw-bg-opacity));
+}
+
+.dark .even\:dark\:bg-purple-700:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(108 43 217 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:focus-within\:border-primary-500:focus-within {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 121 93 / var(--tw-border-opacity));
+}
+
+.dark .dark\:focus-within\:text-white:focus-within {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.dark .dark\:focus-within\:ring-gray-700:focus-within {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus-within\:ring-blue-800:focus-within {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(30 66 159 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus-within\:ring-green-800:focus-within {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(3 84 63 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus-within\:ring-primary-800:focus-within {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(204 69 34 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus-within\:ring-purple-900:focus-within {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(74 29 150 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus-within\:ring-red-900:focus-within {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(119 29 29 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus-within\:ring-yellow-900:focus-within {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(99 49 18 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus-within\:ring-gray-800:focus-within {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:hover\:border-gray-600:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
+.dark .dark\:hover\:border-gray-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
+
+.dark .hover\:dark\:bg-gray-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-gray-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-primary-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 69 34 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-blue-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 66 159 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-red-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(155 28 28 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-green-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 84 63 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-yellow-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(114 59 19 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-indigo-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(66 56 157 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-purple-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(85 33 181 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-pink-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(153 21 75 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-gray-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-blue-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(26 86 219 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-green-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(4 108 78 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-primary-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(235 79 39 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-purple-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(108 43 217 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-red-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(200 30 30 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-gray-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-blue-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(28 100 242 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-green-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(5 122 85 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-primary-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 86 47 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-purple-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(144 97 249 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-red-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 36 36 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-yellow-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(227 160 8 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-primary-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 121 93 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:text-primary-300:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 213 204 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hover\:text-blue-300:hover {
+  --tw-text-opacity: 1;
+  color: rgb(164 202 254 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hover\:text-gray-300:hover {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hover\:text-red-300:hover {
+  --tw-text-opacity: 1;
+  color: rgb(248 180 180 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hover\:text-green-300:hover {
+  --tw-text-opacity: 1;
+  color: rgb(132 225 188 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hover\:text-yellow-300:hover {
+  --tw-text-opacity: 1;
+  color: rgb(250 202 21 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hover\:text-indigo-300:hover {
+  --tw-text-opacity: 1;
+  color: rgb(180 198 252 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hover\:text-purple-300:hover {
+  --tw-text-opacity: 1;
+  color: rgb(202 191 253 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hover\:text-pink-300:hover {
+  --tw-text-opacity: 1;
+  color: rgb(248 180 217 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hover\:text-primary-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(165 55 27 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hover\:text-primary-100:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 241 238 / var(--tw-text-opacity));
+}
+
+.dark .dark\:focus\:border-blue-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(63 131 248 / var(--tw-border-opacity));
+}
+
+.dark .dark\:focus\:border-primary-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 121 93 / var(--tw-border-opacity));
+}
+
+.dark .dark\:focus\:border-green-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(14 159 110 / var(--tw-border-opacity));
+}
+
+.dark .dark\:focus\:border-red-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(240 82 82 / var(--tw-border-opacity));
+}
+
+.dark .dark\:focus\:text-white:focus {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.dark .dark\:focus\:ring-gray-800:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-blue-800:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(30 66 159 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-green-800:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(3 84 63 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-cyan-800:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(21 94 117 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-teal-800:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(5 80 92 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-lime-800:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(63 98 18 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-red-800:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(155 28 28 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-pink-800:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(153 21 75 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-purple-800:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(85 33 181 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-teal-700:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(3 102 114 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-red-400:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(249 128 128 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-blue-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-primary-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(254 121 93 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-green-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(14 159 110 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-red-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(240 82 82 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-primary-600:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(239 86 47 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-red-600:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(224 36 36 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-green-600:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(5 122 85 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-purple-600:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(126 58 242 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-teal-600:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(4 116 129 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-yellow-600:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(159 88 10 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-orange-600:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(208 56 1 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-blue-600:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(28 100 242 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:focus\:ring-gray-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
+}
+
+.dark .dark\:disabled\:text-gray-500:disabled {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.dark .group:hover .dark\:group-hover\:bg-gray-800\/60 {
+  background-color: rgb(31 41 55 / 0.6);
+}
+
+.dark .group:hover .dark\:group-hover\:text-primary-500 {
+  --tw-text-opacity: 1;
+  color: rgb(254 121 93 / var(--tw-text-opacity));
+}
+
+.dark .group:focus .dark\:group-focus\:ring-gray-800\/70 {
+  --tw-ring-color: rgb(31 41 55 / 0.7);
+}
+
+.peer:focus ~ .dark .peer-focus\:dark\:text-primary-500 {
+  --tw-text-opacity: 1;
+  color: rgb(254 121 93 / var(--tw-text-opacity));
+}
+
+.dark .peer:focus ~ .dark\:peer-focus\:ring-primary-800 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(204 69 34 / var(--tw-ring-opacity));
+}
+
+.dark .peer:focus ~ .dark\:peer-focus\:ring-red-800 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(155 28 28 / var(--tw-ring-opacity));
+}
+
+.dark .peer:focus ~ .dark\:peer-focus\:ring-green-800 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(3 84 63 / var(--tw-ring-opacity));
+}
+
+.dark .peer:focus ~ .dark\:peer-focus\:ring-purple-800 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(85 33 181 / var(--tw-ring-opacity));
+}
+
+.dark .peer:focus ~ .dark\:peer-focus\:ring-yellow-800 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(114 59 19 / var(--tw-ring-opacity));
+}
+
+.dark .peer:focus ~ .dark\:peer-focus\:ring-teal-800 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(5 80 92 / var(--tw-ring-opacity));
+}
+
+.dark .peer:focus ~ .dark\:peer-focus\:ring-orange-800 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(138 44 13 / var(--tw-ring-opacity));
+}
+
+.dark .peer:focus ~ .dark\:peer-focus\:ring-blue-800 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(30 66 159 / var(--tw-ring-opacity));
 }
 
 @media (max-width: 480px) {
@@ -7197,14 +8104,18 @@ svg.apply-fill path {
     margin-right: 0.5rem;
   }
 
-  .sm\:mt-2 {
-    margin-top: 0.5rem;
-  }
-
   .sm\:mr-1 {
     margin-right: 0.25rem;
   }
 
+  .sm\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .sm\:mt-2 {
+    margin-top: 0.5rem;
+  }
+
   .sm\:mb-0 {
     margin-bottom: 0px;
   }
@@ -7253,6 +8164,10 @@ svg.apply-fill path {
     width: 50%;
   }
 
+  .sm\:w-64 {
+    width: 16rem;
+  }
+
   .sm\:w-11 {
     width: 2.75rem;
   }
@@ -7277,10 +8192,18 @@ svg.apply-fill path {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .sm\:flex-row {
+    flex-direction: row;
+  }
+
   .sm\:flex-nowrap {
     flex-wrap: nowrap;
   }
 
+  .sm\:gap-y-3 {
+    row-gap: 0.75rem;
+  }
+
   .sm\:divide-x > :not([hidden]) ~ :not([hidden]) {
     --tw-divide-x-reverse: 0;
     border-right-width: calc(1px * var(--tw-divide-x-reverse));
@@ -7295,6 +8218,10 @@ svg.apply-fill path {
     padding: 0.25rem;
   }
 
+  .sm\:p-3 {
+    padding: 0.75rem;
+  }
+
   .sm\:p-2 {
     padding: 0.5rem;
   }
@@ -7361,11 +8288,6 @@ svg.apply-fill path {
     margin: 0.25rem;
   }
 
-  .md\:mx-2 {
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
-  }
-
   .md\:mx-4 {
     margin-left: 1rem;
     margin-right: 1rem;
@@ -7407,10 +8329,6 @@ svg.apply-fill path {
     display: none;
   }
 
-  .md\:h-8 {
-    height: 2rem;
-  }
-
   .md\:h-auto {
     height: auto;
   }
@@ -7455,10 +8373,6 @@ svg.apply-fill path {
     height: 100%;
   }
 
-  .md\:w-8 {
-    width: 2rem;
-  }
-
   .md\:w-6\/12 {
     width: 50%;
   }
@@ -7583,6 +8497,11 @@ svg.apply-fill path {
     padding: 0px;
   }
 
+  .md\:px-5 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
   .md\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -7621,28 +8540,36 @@ svg.apply-fill path {
     font-weight: 500;
   }
 
+  .md\:text-primary-700 {
+    --tw-text-opacity: 1;
+    color: rgb(235 79 39 / var(--tw-text-opacity));
+  }
+
   .md\:hover\:bg-transparent:hover {
     background-color: transparent;
   }
 
-  @media (prefers-color-scheme: dark) {
-    .md\:dark\:bg-transparent {
-      background-color: transparent;
-    }
+  .md\:hover\:text-primary-700:hover {
+    --tw-text-opacity: 1;
+    color: rgb(235 79 39 / var(--tw-text-opacity));
+  }
 
-    .md\:dark\:text-white {
-      --tw-text-opacity: 1;
-      color: rgb(255 255 255 / var(--tw-text-opacity));
-    }
+  .dark .md\:dark\:bg-transparent {
+    background-color: transparent;
+  }
 
-    .md\:dark\:hover\:bg-transparent:hover {
-      background-color: transparent;
-    }
+  .dark .md\:dark\:text-white {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity));
+  }
 
-    .md\:dark\:hover\:text-white:hover {
-      --tw-text-opacity: 1;
-      color: rgb(255 255 255 / var(--tw-text-opacity));
-    }
+  .dark .md\:dark\:hover\:bg-transparent:hover {
+    background-color: transparent;
+  }
+
+  .dark .md\:dark\:hover\:text-white:hover {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity));
   }
 }
 
diff --git a/src/Logic/Web/ThemeViewStateHashActor.ts b/src/Logic/Web/ThemeViewStateHashActor.ts
index 84aa80868..de208c808 100644
--- a/src/Logic/Web/ThemeViewStateHashActor.ts
+++ b/src/Logic/Web/ThemeViewStateHashActor.ts
@@ -4,24 +4,23 @@ import { MenuState } from "../../Models/MenuState"
 
 export default class ThemeViewStateHashActor {
     private readonly _state: ThemeViewState
+    private isUpdatingHash = false
 
     public static readonly documentation = [
         "The URL-hash can contain multiple values:",
         "",
         "- The id of the currently selected object, e.g. `node/1234`",
         "- The currently opened menu view",
-        "- The base64-encoded JSON-file specifying a custom theme (only when loading)",
         "",
         "### Possible hashes to open a menu",
         "",
         "The possible hashes are:",
         "",
-        MenuState._menuviewTabs.map((tab) => "`menu:" + tab + "`").join(","),
-        MenuState._themeviewTabs.map((tab) => "`theme-menu:" + tab + "`").join(","),
+        MenuState.pageNames.map((tab) => "`" + tab + "`").join(",")
     ]
 
     /**
-     * Converts the hash to the appropriate themeview state and, vice versa, sets the hash.
+     * Converts the hash to the appropriate theme-view state and, vice versa, sets the hash.
      *
      * As the navigator-back-button changes the hash first, this class thus also handles the 'back'-button events.
      *
@@ -33,46 +32,40 @@ export default class ThemeViewStateHashActor {
     constructor(state: ThemeViewState) {
         this._state = state
 
+        const hashOnLoad = Hash.hash.data
+        const containsMenu = this.loadStateFromHash(hashOnLoad)
         // First of all, try to recover the selected element
-        if (Hash.hash.data) {
-            const hash = Hash.hash.data
-            this.loadStateFromHash(hash)
-            Hash.hash.setData(hash) // reapply the previous hash
-            state.indexedFeatures.featuresById.addCallbackAndRunD((_) => {
-                let unregister = this.loadSelectedElementFromHash(hash)
+        if (!containsMenu && hashOnLoad?.length > 0) {
+            state.indexedFeatures.featuresById.addCallbackAndRunD(() => {
                 // once that we have found a matching element, we can be sure the indexedFeaturesource was popuplated and that the job is done
-                return unregister
+                return this.loadSelectedElementFromHash(hashOnLoad)
             })
         }
 
-        // Register a hash change listener to correctly handle the back button
-        Hash.hash.addCallback((hash) => {
-            if (!!hash) {
-                // There is still a hash
-                // We _only_ have to (at most) close the overlays in this case
-                if (state.previewedImage.data) {
-                    state.previewedImage.setData(undefined)
-                    return
-                }
-
-                const parts = hash.split(";")
-                if (parts.indexOf("background") < 0) {
-                    state.guistate.backgroundLayerSelectionIsOpened.setData(false)
-                }
-                this.loadSelectedElementFromHash(hash)
-            } else {
-                this.back()
-            }
-        })
 
         // At last, register callbacks on the state to update the hash when they change.
         // Note: these should use 'addCallback', not 'addCallbackAndRun'
-        state.selectedElement.addCallback((_) => this.setHash())
-        state.guistate.allToggles.forEach(({ toggle, submenu }) => {
-            submenu?.addCallback((_) => this.setHash())
-            toggle.addCallback((_) => this.setHash())
+        state.selectedElement.addCallback(() => this.setHash())
+
+        // Register a hash change listener to correctly handle the back button
+        Hash.hash.addCallback((hash) => {
+            if(this.isUpdatingHash){
+                return
+            }
+            if (!hash) {
+                this.back()
+            } else {
+                if (!this.loadStateFromHash(hash)) {
+                    this.loadSelectedElementFromHash(hash)
+                }
+            }
         })
 
+        for (const key in state.guistate.pageStates) {
+            const toggle = state.guistate.pageStates[key]
+            toggle.addCallback(() => this.setHash())
+        }
+
         // When all is done, set the hash. This must happen last to give the code above correct info
         this.setHash()
     }
@@ -80,15 +73,10 @@ export default class ThemeViewStateHashActor {
     /**
      * Selects the appropriate element
      * Returns true if this method can be unregistered for the first run
-     * @param hash
-     * @private
      */
     private loadSelectedElementFromHash(hash: string): boolean {
         const state = this._state
         const selectedElement = state.selectedElement
-        // state.indexedFeatures.featuresById.stabilized(250)
-
-        hash = hash.split(";")[0] // The 'selectedElement' is always the _first_ item in the hash (if any)
 
         // Set the hash based on the selected element...
         // ... search and select an element based on the hash
@@ -101,7 +89,7 @@ export default class ThemeViewStateHashActor {
         if (!found) {
             return false
         }
-        if (found.properties.id === "last_click") {
+        if (found.properties.id.startsWith("last_click")) {
             return true
         }
         console.log(
@@ -114,67 +102,47 @@ export default class ThemeViewStateHashActor {
         return true
     }
 
-    private loadStateFromHash(hash: string) {
-        const state = this._state
-        for (const superpart of hash.split(";")) {
-            const parts = superpart.at(-1)?.split(":") ?? []
-
-            outer: for (const { toggle, name, submenu } of state.guistate.allToggles) {
-                for (const part of parts) {
-                    if (part.indexOf(":") < 0) {
-                        if (part === name) {
-                            toggle.setData(true)
-                            continue outer
-                        }
-                        continue
-                    }
-                    const [main, submenuValue] = part.split(":")
-                    if (part !== main) {
-                        continue
-                    }
-                    toggle.setData(true)
-                    submenu?.setData(submenuValue)
-                    continue outer
-                }
-
-                // If we arrive here, the loop above has not found any match
-                toggle.setData(false)
+    private loadStateFromHash(hash: string): boolean {
+        for (const page in this._state.guistate.pageStates) {
+            if (page === hash) {
+                const toggle = this._state.guistate.pageStates[page]
+                toggle.set(true)
+                console.log("Loading menu view from hash:", page)
+                return true
             }
         }
+        return false
     }
 
-    private setHash() {
-        const s = this._state
-        let h = ""
+    /**
+     * Sets the hash based on:
+     *
+     * 1. Selected element ID
+     * 2. A selected 'page' from the menu
+     *
+     * returns 'true' if a hash was set
+     */
+    private setHash(): boolean {
+        this.isUpdatingHash = true
+        try {
 
-        for (const { toggle, showOverOthers, name, submenu } of s.guistate.allToggles) {
-            if (showOverOthers || !toggle.data) {
-                continue
+            const selectedElement = this._state.selectedElement.data
+            if (selectedElement) {
+                Hash.hash.set(selectedElement.properties.id)
+                return true
             }
-            h = name
-            if (submenu?.data) {
-                h += ":" + submenu.data
+            for (const page in this._state.guistate.pageStates) {
+                const toggle = this._state.guistate.pageStates[page]
+                if (toggle.data) {
+                    Hash.hash.set(page)
+                    return true
+                }
             }
+            Hash.hash.set(undefined)
+            return false
+        } finally {
+            this.isUpdatingHash = false
         }
-
-        if (s.selectedElement.data !== undefined) {
-            h = s.selectedElement.data.properties.id
-        }
-
-        for (const { toggle, showOverOthers, name, submenu } of s.guistate.allToggles) {
-            if (!showOverOthers || !toggle.data) {
-                continue
-            }
-            if (h) {
-                h += ";" + name
-            } else {
-                h = name
-            }
-            if (submenu?.data) {
-                h += ":" + submenu.data
-            }
-        }
-        Hash.hash.setData(h)
     }
 
     private back() {
@@ -183,13 +151,9 @@ export default class ThemeViewStateHashActor {
             state.previewedImage.setData(undefined)
             return
         }
-        // history.pushState(null, null, window.location.pathname);
-        if (state.selectedElement.data) {
-            state.selectedElement.setData(undefined)
-            return
-        }
         if (state.guistate.closeAll()) {
             return
         }
+        state.selectedElement.setData(undefined)
     }
 }
diff --git a/src/Models/MenuState.ts b/src/Models/MenuState.ts
index ae48ae6fe..7bd5af0d7 100644
--- a/src/Models/MenuState.ts
+++ b/src/Models/MenuState.ts
@@ -2,11 +2,10 @@ import LayerConfig from "./ThemeConfig/LayerConfig"
 import { UIEventSource } from "../Logic/UIEventSource"
 import UserRelatedState from "../Logic/State/UserRelatedState"
 import { Utils } from "../Utils"
-import { LocalStorageSource } from "../Logic/Web/LocalStorageSource"
 import Zoomcontrol from "../UI/Zoomcontrol"
+import { LocalStorageSource } from "../Logic/Web/LocalStorageSource"
 
-export type ThemeViewTabStates = (typeof MenuState._themeviewTabs)[number]
-export type MenuViewTabStates = (typeof MenuState._menuviewTabs)[number]
+export type PageType = (typeof MenuState.pageNames)[number]
 
 /**
  * Indicates if a menu is open, and if so, which tab is selected;
@@ -15,141 +14,44 @@ export type MenuViewTabStates = (typeof MenuState._menuviewTabs)[number]
  * Some convenience methods are provided for this as well
  */
 export class MenuState {
-    public static readonly _themeviewTabs = ["intro", "download", "copyright", "share"] as const
-    public static readonly _menuviewTabs = [
-        "about",
-        "settings",
-        "favourites",
-        "community",
-        "privacy",
-        "advanced",
+
+
+    public static readonly pageNames = [
+        "copyright", "copyright_icons", "community_index", "hotkeys",
+        "privacy", "filter", "background", "about_theme", "download", "favourites",
+        "usersettings", "share"
     ] as const
-    public readonly themeIsOpened: UIEventSource<boolean>
-    public readonly themeViewTabIndex: UIEventSource<number>
-    public readonly themeViewTab: UIEventSource<ThemeViewTabStates>
-    public readonly menuIsOpened: UIEventSource<boolean>
-    public readonly menuViewTabIndex: UIEventSource<number>
-    public readonly menuViewTab: UIEventSource<MenuViewTabStates>
 
-    public readonly backgroundLayerSelectionIsOpened: UIEventSource<boolean> =
-        new UIEventSource<boolean>(false)
-
-    public readonly filtersPanelIsOpened: UIEventSource<boolean> = new UIEventSource<boolean>(false)
-    public readonly privacyPanelIsOpened: UIEventSource<boolean> = new UIEventSource<boolean>(false)
-    /**
-     * Standalone copyright panel
-     */
-    public readonly copyrightPanelIsOpened: UIEventSource<boolean> = new UIEventSource<boolean>(
-        false
-    )
-
-    public readonly communityIndexPanelIsOpened: UIEventSource<boolean> = new UIEventSource(false)
-    public readonly allToggles: {
-        toggle: UIEventSource<boolean>
-        name: string
-        submenu?: UIEventSource<string>
-        showOverOthers?: boolean
-    }[]
+    public readonly menuIsOpened = new UIEventSource(false)
+    public readonly pageStates: Record<PageType, UIEventSource<boolean>>
 
     public readonly highlightedLayerInFilters: UIEventSource<string> = new UIEventSource<string>(
         undefined
     )
     public highlightedUserSetting: UIEventSource<string> = new UIEventSource<string>(undefined)
 
-    constructor(shouldOpenWelcomeMessage: boolean, themeid: string = "") {
+    constructor(shouldShowWelcomeMessage: boolean, themeid: string) {
         // Note: this class is _not_ responsible to update the Hash, @see ThemeViewStateHashActor for this
-        if (themeid) {
-            themeid += "-"
-        }
-        this.themeIsOpened = LocalStorageSource.GetParsed(
-            themeid + "thememenuisopened",
-            shouldOpenWelcomeMessage
-        )
-        this.themeViewTabIndex = LocalStorageSource.GetParsed(themeid + "themeviewtabindex", 0)
-        this.themeViewTab = this.themeViewTabIndex.sync(
-            (i) => MenuState._themeviewTabs[i],
-            [],
-            (str) => MenuState._themeviewTabs.indexOf(<any>str)
-        )
+        const states = {}
+        for (const pageName of MenuState.pageNames) {
+            const toggle = new UIEventSource(false)
+            states[pageName] = toggle
 
-        this.menuIsOpened = LocalStorageSource.GetParsed(themeid + "menuisopened", false)
-        this.menuViewTabIndex = LocalStorageSource.GetParsed(themeid + "menuviewtabindex", 0)
-        this.menuViewTab = this.menuViewTabIndex.sync(
-            (i) => MenuState._menuviewTabs[i],
-            [],
-            (str) => MenuState._menuviewTabs.indexOf(<any>str)
-        )
-        this.menuIsOpened.addCallbackAndRun((isOpen) => {
-            if (!isOpen) {
-                this.highlightedUserSetting.setData(undefined)
-            }
-        })
-        this.menuViewTab.addCallbackD((tab) => {
-            if (tab !== "settings") {
-                this.highlightedUserSetting.setData(undefined)
-            }
-        })
-        this.filtersPanelIsOpened.addCallbackAndRun((isOpen) => {
-            if (!isOpen) {
-                this.highlightedLayerInFilters.setData(undefined)
-            }
-        })
-
-        this.menuIsOpened.addCallbackAndRunD((opened) => {
-            if (opened) {
-                this.themeIsOpened.setData(false)
-            }
-        })
-        this.themeIsOpened.addCallbackAndRunD((opened) => {
-            if (opened) {
-                this.menuIsOpened.setData(false)
-            }
-        })
-
-        this.allToggles = [
-            {
-                toggle: this.privacyPanelIsOpened,
-                name: "privacy",
-                showOverOthers: true,
-            },
-            {
-                toggle: this.copyrightPanelIsOpened,
-                name: "copyright",
-                showOverOthers: true,
-            },
-            {
-                toggle: this.communityIndexPanelIsOpened,
-                name: "community",
-                showOverOthers: true,
-            },
-            {
-                toggle: this.filtersPanelIsOpened,
-                name: "filters",
-                showOverOthers: true,
-            },
-            {
-                toggle: this.menuIsOpened,
-                name: "menu",
-                submenu: this.menuViewTab,
-            },
-            {
-                toggle: this.themeIsOpened,
-                name: "theme-menu",
-                submenu: this.themeViewTab,
-            },
-            {
-                toggle: this.backgroundLayerSelectionIsOpened,
-                name: "background",
-                showOverOthers: true,
-            },
-        ]
-        for (const toggle of this.allToggles) {
-            toggle.toggle.addCallback((isOpen) => {
-                if (!isOpen) {
-                    this.resetZoomIfAllClosed()
+            toggle.addCallback(enabled => {
+                if (enabled) {
+                    this.menuIsOpened.set(false)
                 }
             })
         }
+        this.pageStates = <Record<PageType, UIEventSource<boolean>>>states
+
+        const visitedBefore = LocalStorageSource.GetParsed<boolean>(
+            themeid + "thememenuisopened", false
+        )
+        if (!visitedBefore.data && shouldShowWelcomeMessage) {
+            this.pageStates.about_theme.set(true)
+            visitedBefore.set(true)
+        }
     }
 
     private resetZoomIfAllClosed() {
@@ -160,7 +62,7 @@ export class MenuState {
     }
 
     public openFilterView(highlightLayer?: LayerConfig | string) {
-        this.filtersPanelIsOpened.setData(true)
+        this.pageStates.filter.setData(true)
         if (highlightLayer) {
             if (typeof highlightLayer !== "string") {
                 highlightLayer = highlightLayer.id
@@ -170,8 +72,6 @@ export class MenuState {
     }
 
     public openUsersettings(highlightTagRendering?: string) {
-        this.menuIsOpened.setData(true)
-        this.menuViewTab.setData("settings")
         if (
             highlightTagRendering !== undefined &&
             !UserRelatedState.availableUserSettingsIds.some((tr) => tr === highlightTagRendering)
@@ -189,7 +89,7 @@ export class MenuState {
     }
 
     public isSomethingOpen(): boolean {
-        return this.allToggles.some((t) => t.toggle.data)
+        return Object.values(this.pageStates).some((t) => t.data)
     }
 
     /**
@@ -197,14 +97,18 @@ export class MenuState {
      * Returns 'true' if at least one menu was opened
      */
     public closeAll(): boolean {
-        let somethingWasOpen = false
-        for (const t of this.allToggles) {
-            somethingWasOpen = t.toggle.data
-            t.toggle.setData(false)
-            if (somethingWasOpen) {
-                break
+        for (const key in this.pageStates) {
+            const toggle = this.pageStates[key]
+            const wasOpen = toggle.data
+            toggle.setData(false)
+            if (wasOpen) {
+                return true
             }
         }
-        return somethingWasOpen
+        if (this.menuIsOpened.data) {
+            this.menuIsOpened.set(false)
+            return true
+        }
     }
+
 }
diff --git a/src/Models/ThemeViewState.ts b/src/Models/ThemeViewState.ts
index afc2ebbc6..05ac29c8c 100644
--- a/src/Models/ThemeViewState.ts
+++ b/src/Models/ThemeViewState.ts
@@ -2,7 +2,11 @@ import LayoutConfig from "./ThemeConfig/LayoutConfig"
 import { SpecialVisualizationState } from "../UI/SpecialVisualization"
 import { Changes } from "../Logic/Osm/Changes"
 import { Store, UIEventSource } from "../Logic/UIEventSource"
-import { FeatureSource, IndexedFeatureSource, WritableFeatureSource } from "../Logic/FeatureSource/FeatureSource"
+import {
+    FeatureSource,
+    IndexedFeatureSource,
+    WritableFeatureSource
+} from "../Logic/FeatureSource/FeatureSource"
 import { OsmConnection } from "../Logic/Osm/OsmConnection"
 import { ExportableMap, MapProperties } from "./MapProperties"
 import LayerState from "../Logic/State/LayerState"
@@ -46,7 +50,9 @@ import BackgroundLayerResetter from "../Logic/Actors/BackgroundLayerResetter"
 import SaveFeatureSourceToLocalStorage from "../Logic/FeatureSource/Actors/SaveFeatureSourceToLocalStorage"
 import BBoxFeatureSource from "../Logic/FeatureSource/Sources/TouchesBboxFeatureSource"
 import ThemeViewStateHashActor from "../Logic/Web/ThemeViewStateHashActor"
-import NoElementsInViewDetector, { FeatureViewState } from "../Logic/Actors/NoElementsInViewDetector"
+import NoElementsInViewDetector, {
+    FeatureViewState
+} from "../Logic/Actors/NoElementsInViewDetector"
 import FilteredLayer from "./FilteredLayer"
 import { PreferredRasterLayerSelector } from "../Logic/Actors/PreferredRasterLayerSelector"
 import { ImageUploadManager } from "../Logic/ImageProviders/ImageUploadManager"
@@ -184,7 +190,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
                 "oauth_token",
                 undefined,
                 "Used to complete the login"
-            ),
+            )
         })
         this.userRelatedState = new UserRelatedState(
             this.osmConnection,
@@ -263,8 +269,8 @@ export default class ThemeViewState implements SpecialVisualizationState {
                         bbox.asGeoJson({
                             zoom: this.mapProperties.zoom.data,
                             ...this.mapProperties.location.data,
-                            id: "current_view_" + currentViewIndex,
-                        }),
+                            id: "current_view_" + currentViewIndex
+                        })
                     ]
                 })
             )
@@ -281,10 +287,10 @@ export default class ThemeViewState implements SpecialVisualizationState {
                     featurePropertiesStore: this.featureProperties,
                     osmConnection: this.osmConnection,
                     historicalUserLocations: this.geolocation.historicalUserLocations,
-                    featureSwitches: this.featureSwitches,
+                    featureSwitches: this.featureSwitches
                 },
                 layout?.isLeftRightSensitive() ?? false,
-                (e) => this.reportError(e)
+                (e, extraMsg) => this.reportError(e, extraMsg)
             )
             this.historicalUserLocations = this.geolocation.historicalUserLocations
             this.newFeatures = new NewGeometryFromChangesFeatureSource(
@@ -309,7 +315,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
                             "leftover features, such as",
                             features[0].properties
                         )
-                    },
+                    }
                 }
             )
             this.perLayer = perLayer.perLayer
@@ -365,7 +371,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
             {
                 currentZoom: this.mapProperties.zoom,
                 layerState: this.layerState,
-                bounds: this.visualFeedbackViewportBounds,
+                bounds: this.visualFeedbackViewportBounds
             }
         )
         this.hasDataInView = new NoElementsInViewDetector(this).hasFeatureInView
@@ -409,7 +415,6 @@ export default class ThemeViewState implements SpecialVisualizationState {
     public focusOnMap() {
         if (this.map.data) {
             this.map.data.getCanvas().focus()
-            console.log("Focused on map")
             return
         }
         this.map.addCallbackAndRunD((map) => {
@@ -472,7 +477,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
                 doShowLayer,
                 metaTags: this.userRelatedState.preferencesAsTags,
                 selectedElement: this.selectedElement,
-                fetchStore: (id) => this.featureProperties.getStore(id),
+                fetchStore: (id) => this.featureProperties.getStore(id)
             })
         })
         return filteringFeatureSource
@@ -499,7 +504,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
             doShowLayer: flayerGps.isDisplayed,
             layer: flayerGps.layerDef,
             metaTags: this.userRelatedState.preferencesAsTags,
-            selectedElement: this.selectedElement,
+            selectedElement: this.selectedElement
         })
     }
 
@@ -545,8 +550,6 @@ export default class ThemeViewState implements SpecialVisualizationState {
 
     /**
      * Selects the feature that is 'i' closest to the map center
-     * @param i
-     * @private
      */
     private selectClosestAtCenter(i: number = 0) {
         if (this.userRelatedState.a11y.data !== "never") {
@@ -575,23 +578,22 @@ export default class ThemeViewState implements SpecialVisualizationState {
                 this.previewedImage.setData(undefined)
                 return
             }
-            this.selectedElement.setData(undefined)
-            this.guistate.closeAll()
-            if (!this.guistate.isSomethingOpen()) {
-                Zoomcontrol.resetzoom()
-                this.focusOnMap()
+            if(this.guistate.closeAll()){
+               return
             }
+            this.selectedElement.setData(undefined)
+            Zoomcontrol.resetzoom()
+            this.focusOnMap()
         })
 
         Hotkeys.RegisterHotkey({ nomod: "f" }, docs.selectFavourites, () => {
-            this.guistate.menuViewTab.setData("favourites")
-            this.guistate.menuIsOpened.setData(true)
+            this.guistate.pageStates.favourites.set(true)
         })
 
         Hotkeys.RegisterHotkey(
             {
                 nomod: " ",
-                onUp: true,
+                onUp: true
             },
             docs.selectItem,
             () => {
@@ -599,8 +601,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
                     return false
                 }
                 if (
-                    this.guistate.menuIsOpened.data ||
-                    this.guistate.themeIsOpened.data ||
+                    this.guistate.isSomethingOpen() ||
                     this.previewedImage.data !== undefined
                 ) {
                     return
@@ -624,7 +625,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
             Hotkeys.RegisterHotkey(
                 {
                     nomod: "" + i,
-                    onUp: true,
+                    onUp: true
                 },
                 doc,
                 () => this.selectClosestAtCenter(i - 1)
@@ -637,18 +638,18 @@ export default class ThemeViewState implements SpecialVisualizationState {
             }
             Hotkeys.RegisterHotkey(
                 {
-                    nomod: "b",
+                    nomod: "b"
                 },
                 docs.openLayersPanel,
                 () => {
                     if (this.featureSwitches.featureSwitchBackgroundSelection.data) {
-                        this.guistate.backgroundLayerSelectionIsOpened.setData(true)
+                        this.guistate.pageStates.background.setData(true)
                     }
                 }
             )
             Hotkeys.RegisterHotkey(
                 {
-                    nomod: "s",
+                    nomod: "s"
                 },
                 Translations.t.hotkeyDocumentation.openFilterPanel,
                 () => {
@@ -670,7 +671,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
                         available,
                         category,
                         current.data,
-                        skipLayers,
+                        skipLayers
                     )
                     if (!best) {
                         return
@@ -726,7 +727,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
 
         Hotkeys.RegisterHotkey(
             {
-                shift: "T",
+                shift: "T"
             },
             Translations.t.hotkeyDocumentation.translationMode,
             () => {
@@ -758,7 +759,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
             this.mapProperties.zoom.map((z) => Math.max(Math.floor(z), 0)),
             this.mapProperties,
             {
-                isActive: this.mapProperties.zoom.map((z) => z < maxzoom),
+                isActive: this.mapProperties.zoom.map((z) => z < maxzoom)
             }
         )
 
@@ -791,7 +792,6 @@ export default class ThemeViewState implements SpecialVisualizationState {
             favourite: this.favourites,
             summary: this.featureSummary,
             last_click: this.lastClickObject,
-            search: undefined
         }
 
         this.closestFeatures.registerSource(specialLayers.favourite, "favourite")
@@ -846,7 +846,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
                 doShowLayer: flayer.isDisplayed,
                 layer: flayer.layerDef,
                 metaTags: this.userRelatedState.preferencesAsTags,
-                selectedElement: this.selectedElement,
+                selectedElement: this.selectedElement
             })
         })
         const summaryLayerConfig = new LayerConfig(<LayerConfigJson>summaryLayer, "summaryLayer")
@@ -854,7 +854,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
             features: specialLayers.summary,
             layer: summaryLayerConfig,
             // doShowLayer: this.mapProperties.zoom.map((z) => z < maxzoom),
-            selectedElement: this.selectedElement,
+            selectedElement: this.selectedElement
         })
 
         const lastClickLayerConfig = new LayerConfig(
@@ -865,28 +865,27 @@ export default class ThemeViewState implements SpecialVisualizationState {
             lastClickLayerConfig.isShown === undefined
                 ? specialLayers.last_click
                 : specialLayers.last_click.features.mapD((fs) =>
-                      fs.filter((f) => {
-                          const matches = lastClickLayerConfig.isShown.matchesProperties(
-                              f.properties
-                          )
-                          console.debug("LastClick ", f, "matches", matches)
-                          return matches
-                      })
-                  )
+                    fs.filter((f) => {
+                        const matches = lastClickLayerConfig.isShown.matchesProperties(
+                            f.properties
+                        )
+                        console.debug("LastClick ", f, "matches", matches)
+                        return matches
+                    })
+                )
         new ShowDataLayer(this.map, {
             features: new StaticFeatureSource(lastClickFiltered),
             layer: lastClickLayerConfig,
             onClick: (feature) => {
-                console.log("Last click was clicked", feature)
                 if (this.mapProperties.zoom.data >= Constants.minZoomLevelToAddNewPoint) {
                     this.selectedElement.setData(feature)
                     return
                 }
                 this.map.data.flyTo({
                     zoom: Constants.minZoomLevelToAddNewPoint,
-                    center: GeoOperations.centerpointCoordinates(feature),
+                    center: GeoOperations.centerpointCoordinates(feature)
                 })
-            },
+            }
         })
     }
 
@@ -901,10 +900,12 @@ export default class ThemeViewState implements SpecialVisualizationState {
                 this.lastClickObject.clear()
             }
         })
-        this.guistate.allToggles.forEach((toggle) => {
-            toggle.toggle.addCallbackD((isOpened) => {
+        Object.values(this.guistate.pageStates).forEach((toggle) => {
+            toggle.addCallbackD((isOpened) => {
                 if (!isOpened) {
-                    this.focusOnMap()
+                    if (!this.guistate.isSomethingOpen()) {
+                        this.focusOnMap()
+                    }
                 }
             })
         })
@@ -999,8 +1000,8 @@ export default class ThemeViewState implements SpecialVisualizationState {
                     userid: this.osmConnection.userDetails.data?.uid,
                     pendingChanges: this.changes.pendingChanges.data,
                     previousChanges: this.changes.allChanges.data,
-                    changeRewrites: Utils.MapToObj(this.changes._changesetHandler._remappings),
-                }),
+                    changeRewrites: Utils.MapToObj(this.changes._changesetHandler._remappings)
+                })
             })
         } catch (e) {
             console.error("Could not upload an error report")
diff --git a/src/UI/Base/CloseAnimation.svelte b/src/UI/Base/CloseAnimation.svelte
deleted file mode 100644
index 64a7f0366..000000000
--- a/src/UI/Base/CloseAnimation.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script lang="ts">
-  import { Store } from "../../Logic/UIEventSource"
-  import { onDestroy, onMount } from "svelte"
-
-  let elem: HTMLElement
-  let targetOuter: HTMLElement
-  export let isOpened: Store<boolean>
-  export let moveTo: Store<HTMLElement>
-
-  export let debug: string
-  function copySizeOf(htmlElem: HTMLElement) {
-    const target = htmlElem.getBoundingClientRect()
-    elem.style.left = target.x + "px"
-    elem.style.top = target.y + "px"
-    elem.style.width = target.width + "px"
-    elem.style.height = target.height + "px"
-  }
-
-  function animate(opened: boolean) {
-    const moveToElem = moveTo.data
-    if (opened) {
-      copySizeOf(targetOuter)
-      elem.style.background = "var(--background-color)"
-    } else if (moveToElem !== undefined) {
-      copySizeOf(moveToElem)
-      elem.style.background = "#ffffff00"
-    } else {
-      elem.style.left = "0px"
-      elem.style.top = "0px"
-      elem.style.background = "#ffffff00"
-    }
-  }
-
-  onDestroy(isOpened.addCallback((opened) => animate(opened)))
-  onMount(() => requestAnimationFrame(() => animate(isOpened.data)))
-</script>
-
-<div class={"pointer-events-none invisible absolute bottom-0 right-0 h-full w-screen p-4 md:p-6"}>
-  <div class="content h-full" bind:this={targetOuter} style="background: red" />
-</div>
-
-<div
-  bind:this={elem}
-  class="low-interaction pointer-events-none absolute bottom-0 right-0 rounded-2xl"
-  style="transition: all 0.5s ease-out, background-color 1.4s ease-out; background: var(--background-color);"
->
-  <!-- Classes should be the same as the 'floatoaver' -->
-</div>
diff --git a/src/UI/Base/DrawerLeft.svelte b/src/UI/Base/DrawerLeft.svelte
new file mode 100644
index 000000000..d12ba07ba
--- /dev/null
+++ b/src/UI/Base/DrawerLeft.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { Drawer } from "flowbite-svelte"
+  import { sineIn } from "svelte/easing"
+  import { UIEventSource } from "../../Logic/UIEventSource.js"
+
+  export let shown: UIEventSource<boolean>;
+  let transitionParams = {
+    x: -320,
+    duration: 200,
+    easing: sineIn
+  };
+  let hidden = !shown.data
+  $: {
+    shown.setData(!hidden)
+  }
+  shown.addCallback(sh => {
+    hidden = !sh
+  })
+</script>
+
+
+<Drawer placement="left"
+        transitionType="fly" {transitionParams}
+        divClass = "overflow-y-auto z-50 "
+        bind:hidden={hidden}>
+  <slot>
+    CONTENTS
+  </slot>
+</Drawer>
+
diff --git a/src/UI/Base/Link.svelte b/src/UI/Base/Link.svelte
index 6512856ee..6456c5361 100644
--- a/src/UI/Base/Link.svelte
+++ b/src/UI/Base/Link.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <a
-  href={Utils.prepareHref(href)}
+  href={Utils.prepareHref(href) }
   aria-label={ariaLabel}
   title={ariaLabel}
   target={newTab ? "_blank" : undefined}
diff --git a/src/UI/Base/LogoutButton.svelte b/src/UI/Base/LogoutButton.svelte
index 6ca1d1c0d..e0ff7dc79 100644
--- a/src/UI/Base/LogoutButton.svelte
+++ b/src/UI/Base/LogoutButton.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
   import { OsmConnection } from "../../Logic/Osm/OsmConnection"
-  import Logout from "../../assets/svg/Logout.svelte"
   import Translations from "../i18n/Translations"
   import Tr from "./Tr.svelte"
   import ArrowRightOnRectangle from "@babeard/svelte-heroicons/solid/ArrowRightOnRectangle"
 
   export let osmConnection: OsmConnection
+  export let clss = ""
 </script>
 
 <button
+  class={clss}
   on:click={() => {
     osmConnection.LogOut()
   }}
 >
-  <ArrowRightOnRectangle class="h-6 w-6" />
+  <ArrowRightOnRectangle class="h-6 w-6 max-h-full" />
   <Tr t={Translations.t.general.logout} />
 </button>
diff --git a/src/UI/Base/MapControlButton.svelte b/src/UI/Base/MapControlButton.svelte
index e9349c34a..7fd143454 100644
--- a/src/UI/Base/MapControlButton.svelte
+++ b/src/UI/Base/MapControlButton.svelte
@@ -14,15 +14,10 @@
   export let arialabel: Translation = undefined
   export let arialabelDynamic: Store<Translation> = new ImmutableStore(arialabel)
   let arialabelString = arialabelDynamic.bind((tr) => tr?.current)
-  export let htmlElem: UIEventSource<HTMLElement> = undefined
-  let _htmlElem: HTMLElement
-  $: {
-    htmlElem?.setData(_htmlElem)
-  }
+
 </script>
 
 <button
-  bind:this={_htmlElem}
   on:click={(e) => dispatch("click", e)}
   on:keydown
   use:ariaLabelStore={arialabelString}
diff --git a/src/UI/Base/OpenJosm.svelte b/src/UI/Base/OpenJosm.svelte
index c576fd919..e3bbb6088 100644
--- a/src/UI/Base/OpenJosm.svelte
+++ b/src/UI/Base/OpenJosm.svelte
@@ -35,8 +35,8 @@
 
 {#if $showButton}
   <div class="flex flex-col">
-    <button class="as-link" on:click={openJosm}>
-      <Josm_logo class="h-6 w-6 pr-2" />
+    <button class="as-link sidebar-button" on:click={openJosm}>
+      <Josm_logo class="h-6 w-6" />
       <Tr t={t.editJosm} />
     </button>
 
diff --git a/src/UI/Base/Page.svelte b/src/UI/Base/Page.svelte
new file mode 100644
index 000000000..c4bb6ea51
--- /dev/null
+++ b/src/UI/Base/Page.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+  // A fake 'page' which can be shown; kind of a modal
+  import { UIEventSource } from "../../Logic/UIEventSource"
+  import { Modal } from "flowbite-svelte"
+
+  export let shown: UIEventSource<boolean>
+  let _shown = false
+  export let onlyLink: boolean = false
+  shown.addCallbackAndRun(sh => {
+    _shown = sh
+  })
+  export let fullscreen: boolean = false
+
+  const shared = "in-page normal-background dark:bg-gray-800 rounded-lg border-gray-200 dark:border-gray-700 border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md"
+  let defaultClass = "relative flex flex-col mx-auto w-full divide-y " + shared
+  if (fullscreen) {
+    defaultClass = shared
+  }
+  let dialogClass = "fixed top-0 start-0 end-0 h-modal inset-0 z-50 w-full p-4 flex"
+  if (fullscreen) {
+    dialogClass += " h-full-child"
+  }
+  let bodyClass = "h-full p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain"
+  let headerClass = "flex justify-between items-center p-2 px-4 md:px-5 rounded-t-lg";
+</script>
+
+{#if !onlyLink}
+  <Modal open={_shown} on:close={() => shown.set(false)} outsideclose
+         size="xl"
+         {defaultClass} {bodyClass} {dialogClass} {headerClass}
+         color="none">
+    <h1 slot="header" class="w-full">
+      <slot name="header" />
+    </h1>
+    <slot />
+    {#if $$slots.footer}
+      <slot name="footer" />
+    {/if}
+  </Modal>
+{:else}
+  <button class="as-link sidebar-button" on:click={() => shown.setData(true)}>
+    <slot name="link">
+    <slot name="header" />
+    </slot>
+  </button>
+{/if}
diff --git a/src/UI/Base/TitledPanel.svelte b/src/UI/Base/TitledPanel.svelte
index b7ddbcb11..6e68e500e 100644
--- a/src/UI/Base/TitledPanel.svelte
+++ b/src/UI/Base/TitledPanel.svelte
@@ -6,4 +6,7 @@
   <div class="flex h-full flex-col overflow-auto border-b-2 p-4">
     <slot />
   </div>
+
+
+  <slot class="border-t-gray-300 mt-1" name="footer" />
 </div>
diff --git a/src/UI/BigComponents/AboutMapComplete.svelte b/src/UI/BigComponents/AboutMapComplete.svelte
deleted file mode 100644
index 14dd1a7d3..000000000
--- a/src/UI/BigComponents/AboutMapComplete.svelte
+++ /dev/null
@@ -1,103 +0,0 @@
-<script lang="ts">
-  import Translations from "../i18n/Translations"
-  import { Utils } from "../../Utils"
-  import Constants from "../../Models/Constants"
-  import Tr from "../Base/Tr.svelte"
-  import Add from "../../assets/svg/Add.svelte"
-  import Github from "../../assets/svg/Github.svelte"
-  import Mastodon from "../../assets/svg/Mastodon.svelte"
-  import Liberapay from "../../assets/svg/Liberapay.svelte"
-  import { EyeIcon } from "@rgossiaux/svelte-heroicons/solid"
-  import MapillaryLink from "./MapillaryLink.svelte"
-  import OpenJosm from "../Base/OpenJosm.svelte"
-  import OpenIdEditor from "./OpenIdEditor.svelte"
-  import If from "../Base/If.svelte"
-  import Community from "../../assets/svg/Community.svelte"
-  import Bug from "../../assets/svg/Bug.svelte"
-  import ThemeViewState from "../../Models/ThemeViewState"
-  import DocumentChartBar from "@babeard/svelte-heroicons/outline/DocumentChartBar"
-  import DocumentMagnifyingGlass from "@babeard/svelte-heroicons/outline/DocumentMagnifyingGlass"
-
-  export let state: ThemeViewState
-
-  let layout = state.layout
-  let featureSwitches = state.featureSwitches
-  let showHome = featureSwitches.featureSwitchBackToThemeOverview
-</script>
-
-<div class="link-underline links-w-full m-2 flex flex-col gap-y-1">
-  <Tr t={Translations.t.general.aboutMapComplete.intro} />
-
-  {#if $showHome}
-    <a class="flex" href={Utils.HomepageLink()}>
-      <Add class="h-6 w-6" />
-      {#if Utils.isIframe}
-        <Tr t={Translations.t.general.seeIndex} />
-      {:else}
-        <Tr t={Translations.t.general.backToIndex} />
-      {/if}
-    </a>
-  {/if}
-
-  <a class="flex" href="https://github.com/pietervdvn/MapComplete/" target="_blank">
-    <Github class="h-6 w-6" />
-    <Tr t={Translations.t.general.attribution.gotoSourceCode} />
-  </a>
-
-  <a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank">
-    <Bug class="h-6 w-6" />
-    <Tr t={Translations.t.general.attribution.openIssueTracker} />
-  </a>
-
-  {#if layout.official}
-    <a
-      class="flex"
-      href={"https://github.com/pietervdvn/MapComplete/blob/develop/Docs/Themes/" +
-        layout.id +
-        ".md"}
-      target="_blank"
-    >
-      <DocumentMagnifyingGlass class="h-6 w-6" />
-      <Tr
-        t={Translations.t.general.attribution.openThemeDocumentation.Subs({
-          name: layout.title,
-        })}
-      />
-    </a>
-
-    <a class="flex" href={Utils.OsmChaLinkFor(31, layout.id)}>
-      <DocumentChartBar class="h-6 w-6" />
-      <Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: layout.title })} />
-    </a>
-  {/if}
-
-  <a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
-    <Mastodon class="h-6 w-6" />
-    <Tr t={Translations.t.general.attribution.followOnMastodon} />
-  </a>
-
-  <a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
-    <Liberapay class="h-6 w-6" />
-    <Tr t={Translations.t.general.attribution.donate} />
-  </a>
-
-  <button class="as-link" on:click={() => state.guistate.communityIndexPanelIsOpened.setData(true)}>
-    <Community class="h-6 w-6" />
-    <Tr t={Translations.t.communityIndex.title} />
-  </button>
-
-  <If condition={featureSwitches.featureSwitchEnableLogin}>
-    <OpenIdEditor mapProperties={state.mapProperties} />
-    <OpenJosm {state} />
-    <MapillaryLink large={false} mapProperties={state.mapProperties} />
-  </If>
-
-  <button class="as-link" on:click={() => state.guistate.privacyPanelIsOpened.setData(true)}>
-    <EyeIcon class="h-6 w-6 pr-1" />
-    <Tr t={Translations.t.privacy.title} />
-  </button>
-
-  <div class="subtle">
-    {Constants.vNumber}
-  </div>
-</div>
diff --git a/src/UI/BigComponents/CopyrightAllIcons.svelte b/src/UI/BigComponents/CopyrightAllIcons.svelte
new file mode 100644
index 000000000..f1423db48
--- /dev/null
+++ b/src/UI/BigComponents/CopyrightAllIcons.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { SpecialVisualizationState } from "../SpecialVisualization"
+  import IconCopyrightPanel from "./CopyrightSingleIcon.svelte"
+  import licenses from "../../assets/generated/license_info.json"
+  import type SmallLicense from "../../Models/smallLicense"
+
+  export let state: SpecialVisualizationState
+
+  let layoutToUse = state.layout
+  let iconAttributions: string[] = layoutToUse.getUsedImages()
+
+  const allLicenses = {}
+  for (const key in licenses) {
+    const license: SmallLicense = licenses[key]
+    allLicenses[license.path] = license
+  }
+
+</script>
+
+{#each iconAttributions as iconAttribution}
+  <IconCopyrightPanel iconPath={iconAttribution} license={allLicenses[iconAttribution]} />
+{/each}
diff --git a/src/UI/BigComponents/CopyrightPanel.svelte b/src/UI/BigComponents/CopyrightPanel.svelte
index c370f6714..3fec0de6b 100644
--- a/src/UI/BigComponents/CopyrightPanel.svelte
+++ b/src/UI/BigComponents/CopyrightPanel.svelte
@@ -4,11 +4,7 @@
   import contributors from "../../assets/contributors.json"
   import translators from "../../assets/translators.json"
   import { Translation, TypedTranslation } from "../i18n/Translation"
-  import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
   import Tr from "../Base/Tr.svelte"
-  import IconCopyrightPanel from "./IconCopyrightPanel.svelte"
-  import licenses from "../../assets/generated/license_info.json"
-  import type SmallLicense from "../../Models/smallLicense"
   import Constants from "../../Models/Constants"
   import ContributorCount from "../../Logic/ContributorCount"
   import BaseUIElement from "../BaseUIElement"
@@ -24,7 +20,6 @@
   const t = Translations.t.general.attribution
   const layoutToUse = state.layout
 
-  const iconAttributions: string[] = layoutToUse.getUsedImages()
 
   let maintainer: Translation = undefined
   if (layoutToUse.credits !== undefined && layoutToUse.credits !== "") {
@@ -53,11 +48,7 @@
     return Translations.t.general.attribution.attributionBackgroundLayer.Subs(props)
   })
 
-  const allLicenses = {}
-  for (const key in licenses) {
-    const license: SmallLicense = licenses[key]
-    allLicenses[license.path] = license
-  }
+
 
   function calculateDataContributions(contributions: Map<string, number>): Translation {
     if (contributions === undefined) {
@@ -121,9 +112,6 @@
 </script>
 
 <div class="link-underline flex flex-col gap-y-4">
-  <h3>
-    <Tr t={t.attributionTitle} />
-  </h3>
   <div class="flex items-center gap-x-2">
     <Osm_logo class="h-8 w-8 shrink-0" />
     <Tr t={t.attributionContent} />
@@ -159,14 +147,6 @@
     <Tr t={codeContributors(translators, t.translatedBy)} />
   </div>
 
-  <AccordionSingle>
-    <div slot="header">
-      <Tr t={t.iconAttribution.title} />
-    </div>
-    {#each iconAttributions as iconAttribution}
-      <IconCopyrightPanel iconPath={iconAttribution} license={allLicenses[iconAttribution]} />
-    {/each}
-  </AccordionSingle>
 
   <div class="self-end">
     MapComplete {Constants.vNumber}
diff --git a/src/UI/BigComponents/IconCopyrightPanel.svelte b/src/UI/BigComponents/CopyrightSingleIcon.svelte
similarity index 100%
rename from src/UI/BigComponents/IconCopyrightPanel.svelte
rename to src/UI/BigComponents/CopyrightSingleIcon.svelte
diff --git a/src/UI/BigComponents/FilterPanel.svelte b/src/UI/BigComponents/FilterPage.svelte
similarity index 86%
rename from src/UI/BigComponents/FilterPanel.svelte
rename to src/UI/BigComponents/FilterPage.svelte
index e997a43ba..3c168df3f 100644
--- a/src/UI/BigComponents/FilterPanel.svelte
+++ b/src/UI/BigComponents/FilterPage.svelte
@@ -9,9 +9,11 @@
   import Translations from "../i18n/Translations"
   import Tr from "../Base/Tr.svelte"
   import Filter from "../../assets/svg/Filter.svelte"
-  import TitledPanel from "../Base/TitledPanel.svelte"
+  import Page from "../Base/Page.svelte"
 
   export let state: ThemeViewState
+  export let onlyLink: boolean
+
   let layout = state.layout
 
   let allEnabled: boolean
@@ -47,8 +49,12 @@
   }
 </script>
 
-<TitledPanel>
-  <div class="mr-10 flex w-full flex-wrap items-center justify-between" slot="title">
+<Page {onlyLink} shown={state.guistate.pageStates.filter}>
+  <div class="flex" slot="link">
+    <Filter class="h-6 w-6" />
+    <Tr t={Translations.t.general.menu.filter} />
+  </div>
+  <div class="mr-16 flex w-full flex-wrap items-center justify-between" slot="header">
     <div class="flex">
       <Filter class="h-6 w-6 pr-2" />
       <Tr t={Translations.t.general.menu.filter} />
@@ -80,4 +86,4 @@
       zoomlevel={state.mapProperties.zoom}
     />
   {/each}
-</TitledPanel>
+</Page>
diff --git a/src/UI/BigComponents/HotkeyTable.svelte b/src/UI/BigComponents/HotkeyTable.svelte
index 63ca146a3..e31fa98e3 100644
--- a/src/UI/BigComponents/HotkeyTable.svelte
+++ b/src/UI/BigComponents/HotkeyTable.svelte
@@ -15,10 +15,6 @@
   }
 </script>
 
-<AccordionSingle>
-  <div slot="header">
-    <Tr t={t.title} />
-  </div>
   <Tr t={t.intro} />
   <table>
     <tr>
@@ -47,4 +43,3 @@
       </tr>
     {/each}
   </table>
-</AccordionSingle>
diff --git a/src/UI/BigComponents/MenuDrawer.svelte b/src/UI/BigComponents/MenuDrawer.svelte
new file mode 100644
index 000000000..f5c042d0c
--- /dev/null
+++ b/src/UI/BigComponents/MenuDrawer.svelte
@@ -0,0 +1,361 @@
+<script lang="ts">
+
+  // All the relevant links
+  import ThemeViewState from "../../Models/ThemeViewState"
+  import Translations from "../i18n/Translations"
+  import { CogIcon, EyeIcon, HeartIcon } from "@rgossiaux/svelte-heroicons/solid"
+  import Page from "../Base/Page.svelte"
+  import PrivacyPolicy from "./PrivacyPolicy.svelte"
+  import Tr from "../Base/Tr.svelte"
+  import If from "../Base/If.svelte"
+  import CommunityIndexView from "./CommunityIndexView.svelte"
+  import Community from "../../assets/svg/Community.svelte"
+  import LoginToggle from "../Base/LoginToggle.svelte"
+  import { Sidebar } from "flowbite-svelte"
+  import HotkeyTable from "./HotkeyTable.svelte"
+  import { Utils } from "../../Utils"
+  import Constants from "../../Models/Constants"
+  import Mastodon from "../../assets/svg/Mastodon.svelte"
+  import Liberapay from "../../assets/svg/Liberapay.svelte"
+  import DocumentMagnifyingGlass from "@babeard/svelte-heroicons/outline/DocumentMagnifyingGlass"
+  import DocumentChartBar from "@babeard/svelte-heroicons/outline/DocumentChartBar"
+  import OpenIdEditor from "./OpenIdEditor.svelte"
+  import OpenJosm from "../Base/OpenJosm.svelte"
+  import MapillaryLink from "./MapillaryLink.svelte"
+  import Github from "../../assets/svg/Github.svelte"
+  import Bug from "../../assets/svg/Bug.svelte"
+  import Add from "../../assets/svg/Add.svelte"
+  import CopyrightPanel from "./CopyrightPanel.svelte"
+  import CopyrightAllIcons from "./CopyrightAllIcons.svelte"
+  import LanguagePicker from "../InputElement/LanguagePicker.svelte"
+  import LoginButton from "../Base/LoginButton.svelte"
+  import SelectedElementView from "./SelectedElementView.svelte"
+  import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+  import type { LayerConfigJson } from "../../Models/ThemeConfig/Json/LayerConfigJson"
+  import usersettings from "../../assets/generated/layers/usersettings.json"
+  import UserRelatedState from "../../Logic/State/UserRelatedState"
+  import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
+  import DownloadPanel from "../DownloadFlow/DownloadPanel.svelte"
+  import Favourites from "../Favourites/Favourites.svelte"
+  import ReviewsOverview from "../Reviews/ReviewsOverview.svelte"
+  import Share from "@babeard/svelte-heroicons/solid/Share"
+  import ShareScreen from "./ShareScreen.svelte"
+  import FilterPage from "./FilterPage.svelte"
+  import RasterLayerOverview from "../Map/RasterLayerOverview.svelte"
+  import ThemeIntroPanel from "./ThemeIntroPanel.svelte"
+  import Marker from "../Map/Marker.svelte"
+  import LogoutButton from "../Base/LogoutButton.svelte"
+  import { BoltIcon } from "@babeard/svelte-heroicons/mini"
+  import Copyright from "../../assets/svg/Copyright.svelte"
+
+  export let state: ThemeViewState
+  let userdetails = state.osmConnection.userDetails
+
+  let usersettingslayer = new LayerConfig(<LayerConfigJson>usersettings, "usersettings", true)
+
+  let layout = state.layout
+  let featureSwitches = state.featureSwitches
+  let showHome = featureSwitches.featureSwitchBackToThemeOverview
+  let pg = state.guistate.pageStates
+  export let onlyLink: boolean
+  const t = Translations.t.general.menu
+</script>
+
+<div class="flex flex-col p-2 sm:p-3 low-interaction gap-y-2 sm:gap-y-3 h-screen overflow-y-auto">
+
+  <!-- User related: avatar, settings, favourits, logout -->
+  <div class="sidebar-unit">
+    <LoginToggle {state}>
+      <LoginButton osmConnection={state.osmConnection} slot="not-logged-in"></LoginButton>
+      <div class="flex gap-x-4 items-center">
+        {#if $userdetails.img}
+          <img src={$userdetails.img} class="rounded-full w-14 h-14" />
+        {/if}
+        <b>{$userdetails.name}</b>
+      </div>
+    </LoginToggle>
+
+
+    <Page {onlyLink} shown={pg.usersettings}>
+      <div class="flex" slot="header">
+        <CogIcon class="h-6 w-6" />
+        <Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
+      </div>
+
+      <!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
+      <LoginToggle {state}>
+        <div class="flex flex-col" slot="not-logged-in">
+          <LanguagePicker availableLanguages={layout.language} />
+          <Tr cls="alert" t={Translations.t.userinfo.notLoggedIn} />
+          <LoginButton clss="primary" osmConnection={state.osmConnection} />
+        </div>
+        <SelectedElementView
+          highlightedRendering={state.guistate.highlightedUserSetting}
+          layer={usersettingslayer}
+          selectedElement={{
+                type: "Feature",
+                properties: { id: "settings" },
+                geometry: { type: "Point", coordinates: [0, 0] },
+              }}
+
+          {state}
+          tags={state.userRelatedState.preferencesAsTags}
+        />
+      </LoginToggle>
+
+
+    </Page>
+
+    <LoginToggle {state}>
+      <Page {onlyLink} shown={pg.favourites}>
+
+        <div class="flex" slot="header">
+          <HeartIcon class="h-6 w-6" />
+          <Tr t={Translations.t.favouritePoi.tab} />
+        </div>
+        <h3>
+
+          <Tr t={Translations.t.favouritePoi.title} />
+        </h3>
+        <div>
+          <Favourites {state} />
+          <h3>
+            <Tr t={Translations.t.reviews.your_reviews} />
+          </h3>
+          <ReviewsOverview {state} />
+        </div>
+      </Page>
+      <div class="self-end">
+        <LogoutButton osmConnection={state.osmConnection} />
+      </div>
+    </LoginToggle>
+
+    <LanguagePicker />
+
+  </div>
+
+
+  <!-- Theme related: documentation links, download, ... -->
+  <div class="sidebar-unit">
+    <h3>
+      <Tr t={t.aboutCurrentThemeTitle} />
+    </h3>
+
+    <Page {onlyLink} shown={pg.about_theme}>
+      <div slot="link" class="flex">
+        <Marker icons={layout.icon} size="h-6 w-6 mr-2" />
+        <Tr t={t.showIntroduction} />
+      </div>
+      <div class="flex" slot="header">
+        <Marker icons={layout.icon} size="h-8 w-8 mr-4" />
+        <Tr t={layout.title} />
+      </div>
+      <ThemeIntroPanel {state} />
+    </Page>
+
+    <FilterPage {onlyLink} {state} />
+
+    <RasterLayerOverview {onlyLink} {state} />
+
+    <Page {onlyLink} shown={pg.share}>
+      <div class="flex" slot="header">
+        <Share class="h-4 w-4" />
+        <Tr t={Translations.t.general.sharescreen.title} />
+      </div>
+      <ShareScreen {state} />
+    </Page>
+
+
+    {#if state.featureSwitches.featureSwitchEnableExport}
+      <Page {onlyLink} shown={pg.download}>
+        <div slot="header" class="flex">
+          <ArrowDownTray class="h-4 w-4" />
+          <Tr t={Translations.t.general.download.title} />
+        </div>
+        <DownloadPanel {state} />
+      </Page>
+    {/if}
+
+    {#if layout.official}
+      <a
+        class="flex"
+        href={"https://github.com/pietervdvn/MapComplete/blob/develop/Docs/Themes/" +
+        layout.id +
+        ".md"}
+        target="_blank"
+      >
+        <DocumentMagnifyingGlass class="h-6 w-6" />
+        <Tr
+          t={Translations.t.general.attribution.openThemeDocumentation.Subs({
+          name: layout.title,
+        })}
+        />
+      </a>
+
+      <a class="flex" href={Utils.OsmChaLinkFor(31, layout.id)} target="_blank">
+        <DocumentChartBar class="h-6 w-6" />
+        <Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: layout.title })} />
+      </a>
+    {/if}
+  </div>
+
+
+  <!-- Other links and tools for the given location: open iD/JOSM; community index, ... -->
+  <div class="sidebar-unit">
+
+    <h3>
+      <Tr t={t.moreUtilsTitle} />
+    </h3>
+    {#if $showHome}
+      <a class="flex" href={Utils.HomepageLink()}>
+        <Add class="h-6 w-6" />
+        {#if Utils.isIframe}
+          <Tr t={Translations.t.general.seeIndex} />
+        {:else}
+          <Tr t={Translations.t.general.backToIndex} />
+        {/if}
+      </a>
+    {/if}
+
+    <Page {onlyLink} shown={pg.community_index}>
+      <div class="flex" slot="header">
+        <Community class="h-6 w-6" />
+        <Tr t={Translations.t.communityIndex.title} />
+      </div>
+      <CommunityIndexView location={state.mapProperties.location} />
+    </Page>
+
+
+    <If condition={featureSwitches.featureSwitchEnableLogin}>
+      <OpenIdEditor mapProperties={state.mapProperties} />
+      <OpenJosm {state} />
+      <MapillaryLink large={false} mapProperties={state.mapProperties} />
+    </If>
+
+  </div>
+
+
+  <!-- About MC: various outward links, legal info, ... -->
+  <div class="sidebar-unit">
+
+    <h3>
+      <Tr t={Translations.t.general.menu.aboutMapComplete} />
+    </h3>
+
+    <div class="hidden-on-mobile">
+
+      <Page {onlyLink} shown={pg.hotkeys}>
+        <div class="flex" slot="header">
+          <BoltIcon class="w-6 h-6" />
+          <Tr t={ Translations.t.hotkeyDocumentation.title} />
+        </div>
+        <HotkeyTable />
+      </Page>
+    </div>
+
+    <a class="flex" href="https://github.com/pietervdvn/MapComplete/" target="_blank">
+      <Github class="h-6 w-6" />
+      <Tr t={Translations.t.general.attribution.gotoSourceCode} />
+    </a>
+
+    <a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank">
+      <Bug class="h-6 w-6" />
+      <Tr t={Translations.t.general.attribution.openIssueTracker} />
+    </a>
+
+
+    <a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
+      <Mastodon class="h-6 w-6" />
+      <Tr t={Translations.t.general.attribution.followOnMastodon} />
+    </a>
+
+    <a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
+      <Liberapay class="h-6 w-6" />
+      <Tr t={Translations.t.general.attribution.donate} />
+    </a>
+
+
+    <Page {onlyLink} shown={pg.copyright}>
+      <div slot="header" class="flex">
+        <Copyright class="w-8 h-8" />
+        <Tr t={Translations.t.general.attribution.attributionTitle} />
+      </div>
+      <CopyrightPanel {state} />
+    </Page>
+
+
+    <Page {onlyLink} shown={pg.copyright_icons}>
+      <div slot="header" class="flex">
+        <Copyright class="w-8 h-8" />
+        <Tr t={ Translations.t.general.attribution.iconAttribution.title} />
+      </div>
+      <CopyrightAllIcons {state} />
+
+    </Page>
+
+
+    <Page {onlyLink} shown={pg.privacy}>
+      <div class="flex" slot="header">
+        <EyeIcon class="w-8 h-8" />
+        <Tr t={Translations.t.privacy.title} />
+      </div>
+      <PrivacyPolicy {state} />
+    </Page>
+
+
+    <div class="subtle self-end">
+      {Constants.vNumber}
+    </div>
+  </div>
+</div>
+
+
+<style>
+    :global(.sidebar-unit) {
+        display: flex;
+        flex-direction: column;
+        row-gap: 0.25rem;
+        background: var(--background-color);
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+    }
+
+    :global(.sidebar-unit > h3) {
+        margin-top: 0;
+        margin-bottom: 0.5rem;
+        padding: 0.25rem;
+    }
+
+    :global(.sidebar-button svg, .sidebar-button img) {
+        width: 1.5rem;
+        height: 1.5rem;
+        margin-right: 0.5rem;
+        flex-shrink: 0;
+    }
+
+    :global(.sidebar-button .weblate-link > svg) {
+        width: 0.75rem;
+        height: 0.75rem;
+        flex-shrink: 0;
+    }
+
+
+    :global(.sidebar-button, .sidebar-button, .sidebar-unit > a) {
+        display: flex;
+        align-items: center;
+        border-radius: 0.25rem !important;
+        padding: 0.4rem 0.75rem !important;
+        text-decoration: none !important;
+    }
+
+    :global(.sidebar-button > svg , .sidebar-button > img, .sidebar-unit a > img, .sidebar-unit > a svg) {
+        margin-right: 0.5rem;
+        flex-shrink: 0;
+    }
+
+    :global(.sidebar-button:hover, .sidebar-unit > a:hover) {
+        background: var(--low-interaction-background) !important;
+    }
+
+
+</style>
diff --git a/src/UI/BigComponents/OpenBackgroundSelectorButton.svelte b/src/UI/BigComponents/OpenBackgroundSelectorButton.svelte
index d399d68b2..a19dc3568 100644
--- a/src/UI/BigComponents/OpenBackgroundSelectorButton.svelte
+++ b/src/UI/BigComponents/OpenBackgroundSelectorButton.svelte
@@ -20,7 +20,7 @@
 
 <MapControlButton
   arialabel={Translations.t.general.labels.background}
-  on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
+  on:click={() => state.guistate.pageStates.background.setData(true)}
   {htmlElem}
 >
   <StyleLoadingIndicator map={map ?? state.map} rasterLayer={state.mapProperties.rasterLayer}>
diff --git a/src/UI/BigComponents/ThemeIntroPanel.svelte b/src/UI/BigComponents/ThemeIntroPanel.svelte
index 247cecb63..771a0c726 100644
--- a/src/UI/BigComponents/ThemeIntroPanel.svelte
+++ b/src/UI/BigComponents/ThemeIntroPanel.svelte
@@ -12,8 +12,6 @@
   import { GeoLocationState } from "../../Logic/State/GeoLocationState"
   import If from "../Base/If.svelte"
   import { ExclamationTriangleIcon } from "@babeard/svelte-heroicons/mini"
-  import Location_refused from "../../assets/svg/Location_refused.svelte"
-  import Location from "../../assets/svg/Location.svelte"
   import ChevronDoubleLeft from "@babeard/svelte-heroicons/solid/ChevronDoubleLeft"
   import GeolocationIndicator from "./GeolocationIndicator.svelte"
 
@@ -38,7 +36,7 @@
     const glstate = state.geolocation.geolocationState
     if (glstate.currentGPSLocation.data !== undefined) {
       const c: GeolocationCoordinates = glstate.currentGPSLocation.data
-      state.guistate.themeIsOpened.setData(false)
+      state.guistate.pageStates.about_theme.setData(false)
       const coor = { lon: c.longitude, lat: c.latitude }
       state.mapProperties.location.setData(coor)
     }
@@ -65,7 +63,7 @@
     <Tr t={layout.descriptionTail} />
 
     <!-- Buttons: open map, go to location, search -->
-    <NextButton clss="primary w-full" on:click={() => state.guistate.themeIsOpened.setData(false)}>
+    <NextButton clss="primary w-full" on:click={() => state.guistate.pageStates.about_theme.setData(false)}>
       <div class="flex w-full flex-col items-center">
         <div class="flex w-full justify-center text-2xl">
           <Tr t={Translations.t.general.openTheMap} />
@@ -96,7 +94,7 @@
           <div style="min-width: 16rem; " class="grow">
             <Geosearch
               bounds={state.mapProperties.bounds}
-              on:searchCompleted={() => state.guistate.themeIsOpened.setData(false)}
+              on:searchCompleted={() => state.guistate.pageStates.about_theme.setData(false)}
               on:searchIsValid={(event) => {
                 searchEnabled = event.detail
               }}
@@ -140,20 +138,10 @@
     {/if}
   </div>
 
-  {#if Utils.isIframe}
-    <div class="link-underline flex justify-end">
-      <a href="https://mapcomplete.org" target="_blank">
-        <Tr t={Translations.t.general.poweredByMapComplete} />
-      </a>
-    </div>
-  {:else}
-    <If condition={state.featureSwitches.featureSwitchBackToThemeOverview}>
-      <div class="link-underline m-2 mx-4 flex w-full">
-        <a class="flex w-fit items-center justify-end" href={Utils.HomepageLink()}>
-          <ChevronDoubleLeft class="h-4 w-4" />
-          <Tr t={Translations.t.general.backToIndex} />
-        </a>
-      </div>
-    </If>
-  {/if}
+  <div class="link-underline flex justify-end text-sm mt-8">
+    <a href="https://mapcomplete.org" target="_blank">
+      <Tr t={Translations.t.general.poweredByMapComplete} />
+    </a>
+  </div>
+
 </div>
diff --git a/src/UI/DownloadFlow/DownloadPanel.svelte b/src/UI/DownloadFlow/DownloadPanel.svelte
index c6e4dc3c9..428eae6c7 100644
--- a/src/UI/DownloadFlow/DownloadPanel.svelte
+++ b/src/UI/DownloadFlow/DownloadPanel.svelte
@@ -65,10 +65,6 @@
   <Tr cls="alert" t={Translations.t.general.download.toMuch} />
 {:else}
   <div class="flex w-full flex-col" />
-  <h3>
-    <Tr t={t.title} />
-  </h3>
-
   <DownloadButton
     {state}
     extension="geojson"
diff --git a/src/UI/Map/MapLibreAdaptor.ts b/src/UI/Map/MapLibreAdaptor.ts
index e88e3ce95..604e7f0c3 100644
--- a/src/UI/Map/MapLibreAdaptor.ts
+++ b/src/UI/Map/MapLibreAdaptor.ts
@@ -62,7 +62,6 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
         if (!MapLibreAdaptor.pmtilesInited) {
             maplibregl.addProtocol("pmtiles", new Protocol().tile)
             MapLibreAdaptor.pmtilesInited = true
-            console.log("PM-tiles protocol added" + "")
         }
         this._maplibreMap = maplibreMap
 
diff --git a/src/UI/Map/RasterLayerOverview.svelte b/src/UI/Map/RasterLayerOverview.svelte
index 86c6e007b..6a0ccc94b 100644
--- a/src/UI/Map/RasterLayerOverview.svelte
+++ b/src/UI/Map/RasterLayerOverview.svelte
@@ -4,32 +4,30 @@
    */
   import { Store, UIEventSource } from "../../Logic/UIEventSource"
   import type { RasterLayerPolygon } from "../../Models/RasterLayers"
-  import type { MapProperties } from "../../Models/MapProperties"
-  import { Map as MlMap } from "maplibre-gl"
   import RasterLayerPicker from "./RasterLayerPicker.svelte"
   import type { EliCategory } from "../../Models/RasterLayerProperties"
-  import UserRelatedState from "../../Logic/State/UserRelatedState"
   import Translations from "../i18n/Translations"
   import Tr from "../Base/Tr.svelte"
-  import TitledPanel from "../Base/TitledPanel.svelte"
   import Loading from "../Base/Loading.svelte"
+  import Page from "../Base/Page.svelte"
+  import ThemeViewState from "../../Models/ThemeViewState"
+  import { Square3Stack3dIcon } from "@babeard/svelte-heroicons/solid"
 
-  export let availableLayers: { store: Store<RasterLayerPolygon[]> }
-  export let mapproperties: MapProperties
-  export let userstate: UserRelatedState
-  export let map: Store<MlMap>
+  export let state: ThemeViewState
+
+  let map = state.map
+  let mapproperties = state.mapProperties
+  let userstate = state.userRelatedState
+  let shown = state.guistate.pageStates.background
+  let availableLayers: { store: Store<RasterLayerPolygon[]> } = state.availableLayers
   let _availableLayers = availableLayers.store
-  /**
-   * Used to toggle the background layers on/off
-   */
-  export let visible: UIEventSource<boolean> = undefined
 
   type CategoryType = "photo" | "map" | "other" | "osmbasedmap"
   const categories: Record<CategoryType, EliCategory[]> = {
     photo: ["photo", "historicphoto"],
     map: ["map", "historicmap"],
     other: ["other", "elevation"],
-    osmbasedmap: ["osmbasedmap"],
+    osmbasedmap: ["osmbasedmap"]
   }
 
   function availableForCategory(type: CategoryType): Store<RasterLayerPolygon[]> {
@@ -45,27 +43,35 @@
   const otherLayers = availableForCategory("other")
 
   function onApply() {
-    visible.setData(false)
+    shown.setData(false)
   }
 
   function getPref(type: CategoryType): undefined | UIEventSource<string> {
     return userstate?.osmConnection?.GetPreference("preferred-layer-" + type)
   }
+
+  export let onlyLink: boolean
+
 </script>
 
-<TitledPanel>
-  <Tr slot="title" t={Translations.t.general.backgroundMap} />
+<Page {onlyLink} shown={shown} fullscreen={true}>
+  <div slot="header" class="flex" >
+    <Square3Stack3dIcon class="h-6 w-6" />
+
+  <Tr t={Translations.t.general.backgroundMap} />
+  </div>
   {#if $_availableLayers?.length < 1}
     <Loading />
   {:else}
-    <div class="grid h-full w-full grid-cols-1 gap-2 md:grid-cols-2">
+
+    <div class="flex gap-x-2 flex-col sm:flex-row gap-y-2" style="height: calc( 100% - 5rem)">
       <RasterLayerPicker
         availableLayers={$photoLayers}
         favourite={getPref("photo")}
         {map}
         {mapproperties}
         on:appliedLayer={onApply}
-        {visible}
+        {shown}
       />
       <RasterLayerPicker
         availableLayers={$mapLayers}
@@ -73,7 +79,7 @@
         {map}
         {mapproperties}
         on:appliedLayer={onApply}
-        {visible}
+        {shown}
       />
       <RasterLayerPicker
         availableLayers={$osmbasedmapLayers}
@@ -81,7 +87,7 @@
         {map}
         {mapproperties}
         on:appliedLayer={onApply}
-        {visible}
+        {shown}
       />
       <RasterLayerPicker
         availableLayers={$otherLayers}
@@ -89,8 +95,8 @@
         {map}
         {mapproperties}
         on:appliedLayer={onApply}
-        {visible}
+        {shown}
       />
     </div>
   {/if}
-</TitledPanel>
+</Page>
diff --git a/src/UI/Map/RasterLayerPicker.svelte b/src/UI/Map/RasterLayerPicker.svelte
index 2dd007faf..1bc23e2cb 100644
--- a/src/UI/Map/RasterLayerPicker.svelte
+++ b/src/UI/Map/RasterLayerPicker.svelte
@@ -13,7 +13,7 @@
   export let mapproperties: MapProperties
   export let map: Store<MlMap>
 
-  export let visible: Store<boolean> = undefined
+  export let shown: Store<boolean> = undefined
 
   let dispatch = createEventDispatcher<{ appliedLayer }>()
 
@@ -48,10 +48,10 @@
 
   let rasterLayerOnMap = UIEventSource.feedFrom(rasterLayer)
 
-  if (visible) {
+  if (shown) {
     onDestroy(
-      visible?.addCallbackAndRunD((visible) => {
-        if (visible) {
+      shown?.addCallbackAndRunD((shown) => {
+        if (shown) {
           rasterLayerOnMap.setData(rasterLayer.data ?? availableLayers[0])
         } else {
           rasterLayerOnMap.setData(undefined)
@@ -85,7 +85,7 @@
           rasterLayer={rasterLayerOnMap}
           placedOverMap={map}
           placedOverMapProperties={mapproperties}
-          {visible}
+          visible={shown}
         />
       </span>
     </button>
diff --git a/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte b/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte
index ba1a47389..5d8cd6fcb 100644
--- a/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte
+++ b/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte
@@ -401,6 +401,7 @@
               >
                 <input
                   type="radio"
+                  class="self-center mr-1"
                   bind:group={selectedMapping}
                   name={"mappings-radio-" + config.id}
                   value={i}
@@ -412,6 +413,7 @@
               <label class="flex gap-x-1">
                 <input
                   type="radio"
+                  class="self-center mr-1"
                   bind:group={selectedMapping}
                   name={"mappings-radio-" + config.id}
                   value={config.mappings?.length}
@@ -448,6 +450,7 @@
               >
                 <input
                   type="checkbox"
+                  class="self-center mr-1"
                   name={"mappings-checkbox-" + config.id + "-" + i}
                   bind:checked={checkedMappings[i]}
                   on:keypress={(e) => onInputKeypress(e)}
@@ -458,6 +461,7 @@
               <label class="flex gap-x-1">
                 <input
                   type="checkbox"
+                  class="self-center mr-1"
                   name={"mappings-checkbox-" + config.id + "-" + config.mappings?.length}
                   bind:checked={checkedMappings[config.mappings.length]}
                   on:keypress={(e) => onInputKeypress(e)}
diff --git a/src/UI/ThemeViewGUI.svelte b/src/UI/ThemeViewGUI.svelte
index bb67d7768..946a2fc8f 100644
--- a/src/UI/ThemeViewGUI.svelte
+++ b/src/UI/ThemeViewGUI.svelte
@@ -13,64 +13,39 @@
   import type { MapProperties } from "../Models/MapProperties"
   import Geosearch from "./Search/Geosearch.svelte"
   import Translations from "./i18n/Translations"
-  import usersettings from "../assets/generated/layers/usersettings.json"
   import {
-    CogIcon,
-    EyeIcon,
-    HeartIcon,
-    MenuIcon,
-    XCircleIcon
+    MenuIcon
   } from "@rgossiaux/svelte-heroicons/solid"
   import Tr from "./Base/Tr.svelte"
-  import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte"
   import FloatOver from "./Base/FloatOver.svelte"
   import Constants from "../Models/Constants"
-  import TabbedGroup from "./Base/TabbedGroup.svelte"
-  import UserRelatedState from "../Logic/State/UserRelatedState"
   import LoginToggle from "./Base/LoginToggle.svelte"
-  import LoginButton from "./Base/LoginButton.svelte"
-  import CopyrightPanel from "./BigComponents/CopyrightPanel.svelte"
-  import DownloadPanel from "./DownloadFlow/DownloadPanel.svelte"
   import ModalRight from "./Base/ModalRight.svelte"
   import LevelSelector from "./BigComponents/LevelSelector.svelte"
-  import ThemeIntroPanel from "./BigComponents/ThemeIntroPanel.svelte"
   import type { RasterLayerPolygon } from "../Models/RasterLayers"
   import { AvailableRasterLayers } from "../Models/RasterLayers"
-  import RasterLayerOverview from "./Map/RasterLayerOverview.svelte"
-  import IfHidden from "./Base/IfHidden.svelte"
   import { onDestroy } from "svelte"
   import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte"
   import StateIndicator from "./BigComponents/StateIndicator.svelte"
-  import ShareScreen from "./BigComponents/ShareScreen.svelte"
   import UploadingImageCounter from "./Image/UploadingImageCounter.svelte"
   import PendingChangesIndicator from "./BigComponents/PendingChangesIndicator.svelte"
   import Cross from "../assets/svg/Cross.svelte"
-  import LanguagePicker from "./InputElement/LanguagePicker.svelte"
   import Min from "../assets/svg/Min.svelte"
   import Plus from "../assets/svg/Plus.svelte"
   import Filter from "../assets/svg/Filter.svelte"
-  import Community from "../assets/svg/Community.svelte"
-  import Favourites from "./Favourites/Favourites.svelte"
   import ImageOperations from "./Image/ImageOperations.svelte"
   import VisualFeedbackPanel from "./BigComponents/VisualFeedbackPanel.svelte"
   import { Orientation } from "../Sensors/Orientation"
   import GeolocationIndicator from "./BigComponents/GeolocationIndicator.svelte"
   import Compass_arrow from "../assets/svg/Compass_arrow.svelte"
   import ReverseGeocoding from "./BigComponents/ReverseGeocoding.svelte"
-  import FilterPanel from "./BigComponents/FilterPanel.svelte"
-  import PrivacyPolicy from "./BigComponents/PrivacyPolicy.svelte"
   import { BBox } from "../Logic/BBox"
-  import ReviewsOverview from "./Reviews/ReviewsOverview.svelte"
   import ExtraLinkButton from "./BigComponents/ExtraLinkButton.svelte"
-  import CloseAnimation from "./Base/CloseAnimation.svelte"
   import { LastClickFeatureSource } from "../Logic/FeatureSource/Sources/LastClickFeatureSource"
-  import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
-  import Share from "@babeard/svelte-heroicons/solid/Share"
-  import ChevronRight from "@babeard/svelte-heroicons/solid/ChevronRight"
   import Marker from "./Map/Marker.svelte"
-  import AboutMapComplete from "./BigComponents/AboutMapComplete.svelte"
-  import HotkeyTable from "./BigComponents/HotkeyTable.svelte"
   import SelectedElementPanel from "./Base/SelectedElementPanel.svelte"
+  import MenuDrawer from "./BigComponents/MenuDrawer.svelte"
+  import DrawerLeft from "./Base/DrawerLeft.svelte"
   import type { LayerConfigJson } from "../Models/ThemeConfig/Json/LayerConfigJson"
   import { GeocodingUtils } from "../Logic/Geocoding/GeocodingProvider"
 
@@ -109,7 +84,6 @@
   let visualFeedback = state.visualFeedback
   let viewport: UIEventSource<HTMLDivElement> = new UIEventSource<HTMLDivElement>(undefined)
   let mapproperties: MapProperties = state.mapProperties
-  let usersettingslayer = new LayerConfig(<LayerConfigJson>usersettings, "usersettings", true)
   state.mapProperties.installCustomKeyboardHandler(viewport)
   let canZoomIn = mapproperties.maxzoom.map(
     (mz) => mapproperties.zoom.data < mz,
@@ -145,7 +119,6 @@
     updateViewport()
   })
   let featureSwitches: FeatureSwitchState = state.featureSwitches
-  let availableLayers = state.availableLayers
   let currentViewLayer: LayerConfig = layout.layers.find((l) => l.id === "current_view")
   let rasterLayer: Store<RasterLayerPolygon> = state.mapProperties.rasterLayer
   let rasterLayerName =
@@ -157,8 +130,12 @@
     })
   )
   let previewedImage = state.previewedImage
-
+  let addNewFeatureMode = state.userRelatedState.addNewFeatureMode
+  let gpsAvailable = state.geolocation.geolocationState.gpsAvailable
+  let gpsButtonAriaLabel = state.geolocation.geolocationState.gpsStateExplanation
   let debug = state.featureSwitches.featureSwitchIsDebugging
+
+
   debug.addCallbackAndRun((dbg) => {
     if (dbg) {
       document.body.classList.add("debug")
@@ -179,26 +156,6 @@
     animation?.cameraAnimation(mlmap)
   }
 
-  /**
-   * Needed for the animations
-   */
-  let openMapButton: UIEventSource<HTMLElement> = new UIEventSource<HTMLElement>(undefined)
-  let openMenuButton: UIEventSource<HTMLElement> = new UIEventSource<HTMLElement>(undefined)
-  let openCurrentViewLayerButton: UIEventSource<HTMLElement> = new UIEventSource<HTMLElement>(
-    undefined
-  )
-  let _openNewElementButton: HTMLButtonElement
-  let openNewElementButton: UIEventSource<HTMLElement> = new UIEventSource<HTMLElement>(undefined)
-
-  $: {
-    openNewElementButton.setData(_openNewElementButton)
-  }
-  let openFilterButton: UIEventSource<HTMLElement> = new UIEventSource<HTMLElement>(undefined)
-  let openBackgroundButton: UIEventSource<HTMLElement> = new UIEventSource<HTMLElement>(undefined)
-  let addNewFeatureMode = state.userRelatedState.addNewFeatureMode
-
-  let gpsAvailable = state.geolocation.geolocationState.gpsAvailable
-  let gpsButtonAriaLabel = state.geolocation.geolocationState.gpsStateExplanation
 </script>
 
 <main>
@@ -221,6 +178,55 @@
   <div class="pointer-events-none absolute top-0 left-0 w-full">
     <!-- Top components -->
 
+    <div
+      class="flex bg-black-light-transparent pointer-events-auto items-center justify-between px-4 py-1 flex-wrap-reverse">
+      <!-- Top bar with tools -->
+      <div class="flex items-center">
+
+        <MapControlButton
+          cls="m-0.5 p-0.5 sm:p-1"
+          arialabel={Translations.t.general.labels.menu}
+          on:click={() => {console.log("Opening...."); state.guistate.menuIsOpened.setData(true)}}
+          on:keydown={forwardEventToMap}
+        >
+          <MenuIcon class="h-6 w-6 cursor-pointer" />
+        </MapControlButton>
+
+        <MapControlButton
+          on:click={() => state.guistate.pageStates.about_theme.set(true)}
+          on:keydown={forwardEventToMap}
+        >
+          <div
+            class="m-0.5 mx-1 flex cursor-pointer items-center max-[480px]:w-full sm:mx-1 mr-2"
+          >
+            <Marker icons={layout.icon} size="h-6 w-6 shrink-0 mr-0.5 sm:mr-1 md:mr-2" />
+            <b class="mr-1">
+              <Tr t={layout.title} />
+            </b>
+          </div>
+        </MapControlButton>
+      </div>
+
+
+      <If condition={state.featureSwitches.featureSwitchSearch}>
+        <div class="w-full sm:w-64 my-2 sm:mt-0">
+
+          <Geosearch
+            bounds={state.mapProperties.bounds}
+            on:searchCompleted={() => {
+            state.map?.data?.getCanvas()?.focus()
+          }}
+            perLayer={state.perLayer}
+            selectedElement={state.selectedElement}
+            geolocationState={state.geolocation.geolocationState}
+            searcher={state.geosearch}
+            {state}
+          />
+        </div>
+      </If>
+
+    </div>
+
     <div class="pointer-events-auto float-right mt-1 flex flex-col px-1 max-[480px]:w-full sm:m-2">
       <If condition={state.visualFeedback}>
         {#if $selectedElement === undefined}
@@ -229,46 +235,12 @@
           </div>
         {/if}
       </If>
-      <If condition={state.featureSwitches.featureSwitchSearch}>
-        <Geosearch
-          bounds={state.mapProperties.bounds}
-          on:searchCompleted={() => {
-            state.map?.data?.getCanvas()?.focus()
-          }}
-          perLayer={state.perLayer}
-          selectedElement={state.selectedElement}
-          geolocationState={state.geolocation.geolocationState}
-          searcher={state.geosearch}
-          {state}
-        />
-      </If>
+
     </div>
     <div class="float-left m-1 flex flex-col sm:mt-2">
       <If condition={state.featureSwitches.featureSwitchWelcomeMessage}>
-        <MapControlButton
-          on:click={() => state.guistate.themeIsOpened.setData(true)}
-          on:keydown={forwardEventToMap}
-          htmlElem={openMapButton}
-        >
-          <div
-            class="m-0.5 mx-1 flex cursor-pointer items-center max-[480px]:w-full sm:mx-1 md:mx-2"
-          >
-            <Marker icons={layout.icon} size="h-4 w-4 md:h-8 md:w-8 mr-0.5 sm:mr-1 md:mr-2" />
-            <b class="mr-1">
-              <Tr t={layout.title} />
-            </b>
-            <ChevronRight class="h-4 w-4" />
-          </div>
-        </MapControlButton>
 
-        <MapControlButton
-          arialabel={Translations.t.general.labels.menu}
-          on:click={() => state.guistate.menuIsOpened.setData(true)}
-          on:keydown={forwardEventToMap}
-          htmlElem={openMenuButton}
-        >
-          <MenuIcon class="h-8 w-8 cursor-pointer" />
-        </MapControlButton>
+
       </If>
       {#if currentViewLayer?.tagRenderings && currentViewLayer.defaultIcon()}
         <MapControlButton
@@ -276,7 +248,6 @@
             state.selectCurrentView()
           }}
           on:keydown={forwardEventToMap}
-          htmlElem={openCurrentViewLayerButton}
         >
           <div class="h-8 w-8 cursor-pointer">
             <ToSvelte construct={() => currentViewLayer.defaultIcon()} />
@@ -313,7 +284,6 @@
             <button
               class="low-interaction pointer-events-auto w-fit"
               class:disabled={$currentZoom < Constants.minZoomLevelToAddNewPoint}
-              bind:this={_openNewElementButton}
               on:click={() => {
                 state.openNewDialog()
               }}
@@ -337,7 +307,6 @@
               arialabel={Translations.t.general.labels.filter}
               on:click={() => state.guistate.openFilterView()}
               on:keydown={forwardEventToMap}
-              htmlElem={openFilterButton}
             >
               <Filter class="h-6 w-6" />
             </MapControlButton>
@@ -346,25 +315,18 @@
             <OpenBackgroundSelectorButton
               hideTooltip={true}
               {state}
-              htmlElem={openBackgroundButton}
             />
           </If>
-          <a
-            class="bg-black-transparent pointer-events-auto ml-1 h-fit max-h-12 cursor-pointer self-end self-center overflow-hidden rounded-2xl px-1 text-white opacity-50 hover:opacity-100"
-            on:click={() => {
-              if (featureSwitches.featureSwitchWelcomeMessage.data) {
-                state.guistate.themeViewTab.setData("copyright")
-                state.guistate.themeIsOpened.setData(true)
-              } else {
-                state.guistate.copyrightPanelIsOpened.setData(true)
-              }
-            }}
+          <button
+            class="unstyled bg-black-transparent pointer-events-auto ml-1 h-fit max-h-12 cursor-pointer overflow-hidden rounded-2xl px-1 text-white opacity-50 hover:opacity-100"
+            style="background: #00000088; padding: 0.25rem; border-radius: 2rem;"
+            on:click={() => {state.guistate.pageStates.copyright.set(true)}}
           >
             © <span class="hidden sm:inline sm:pr-2">
               OpenStreetMap
               <span class="hidden w-24 md:inline md:pr-2">, {rasterLayerName}</span>
             </span>
-          </a>
+          </button>
         </div>
       </div>
 
@@ -434,6 +396,13 @@
     <svelte:fragment slot="error" />
   </LoginToggle>
 
+  <DrawerLeft shown={state.guistate.menuIsOpened}>
+    <div class="h-screen overflow-y-auto">
+      <MenuDrawer onlyLink={true} {state} />
+    </div>
+  </DrawerLeft>
+  <MenuDrawer onlyLink={false} {state} />
+
   {#if $selectedElement !== undefined && $selectedLayer !== undefined && !$selectedLayer.popupInFloatover}
     <!-- right modal with the selected element view -->
     <ModalRight
@@ -476,225 +445,5 @@
     </FloatOver>
   </If>
 
-  <!-- big theme menu -->
-  <If condition={state.guistate.themeIsOpened}>
-    <FloatOver on:close={() => state.guistate.themeIsOpened.setData(false)}>
-      <span slot="close-button"><!-- Disable the close button --></span>
-      <TabbedGroup
-        condition1={state.featureSwitches.featureSwitchEnableExport}
-        tab={state.guistate.themeViewTabIndex}
-      >
-        <div slot="post-tablist">
-          <XCircleIcon
-            class="mr-2 h-8 w-8"
-            on:click={() => state.guistate.themeIsOpened.setData(false)}
-          />
-        </div>
 
-        <div class="flex" slot="title0">
-          <Marker icons={layout.icon} size="h-4 w-4" />
-          <Tr t={layout.title} />
-        </div>
-
-        <div class="m-4 h-full" slot="content0">
-          <ThemeIntroPanel {state} />
-        </div>
-
-        <div class="flex" slot="title1">
-          <If condition={state.featureSwitches.featureSwitchEnableExport}>
-            <ArrowDownTray class="h-4 w-4" />
-            <Tr t={Translations.t.general.download.title} />
-          </If>
-        </div>
-        <div class="m-4" slot="content1">
-          <DownloadPanel {state} />
-        </div>
-
-        <div slot="title2">
-          <Tr t={Translations.t.general.attribution.title} />
-        </div>
-
-        <div slot="content2" class="m-2 flex flex-col">
-          <CopyrightPanel {state} />
-        </div>
-
-        <div class="flex" slot="title3">
-          <Share class="h-4 w-4" />
-          <Tr t={Translations.t.general.sharescreen.title} />
-        </div>
-        <div class="m-2" slot="content3">
-          <ShareScreen {state} />
-        </div>
-      </TabbedGroup>
-    </FloatOver>
-  </If>
-
-  <!-- Filterpane -->
-  <If condition={state.guistate.filtersPanelIsOpened}>
-    <FloatOver on:close={() => state.guistate.filtersPanelIsOpened.setData(false)}>
-      <FilterPanel {state} />
-    </FloatOver>
-  </If>
-
-  <!-- background layer selector -->
-  <IfHidden condition={state.guistate.backgroundLayerSelectionIsOpened}>
-    <FloatOver
-      on:close={() => {
-        state.guistate.backgroundLayerSelectionIsOpened.setData(false)
-      }}
-    >
-      <RasterLayerOverview
-        {availableLayers}
-        map={state.map}
-        mapproperties={state.mapProperties}
-        userstate={state.userRelatedState}
-        visible={state.guistate.backgroundLayerSelectionIsOpened}
-      />
-    </FloatOver>
-  </IfHidden>
-
-  <!-- Menu page -->
-  <If condition={state.guistate.menuIsOpened}>
-    <FloatOver on:close={() => state.guistate.menuIsOpened.setData(false)}>
-      <span slot="close-button"><!-- Hide the default close button --></span>
-      <TabbedGroup
-        condition1={featureSwitches.featureSwitchEnableLogin}
-        condition2={state.featureSwitches.featureSwitchCommunityIndex}
-        tab={state.guistate.menuViewTabIndex}
-      >
-        <div slot="post-tablist">
-          <XCircleIcon
-            class="mr-2 h-8 w-8"
-            on:click={() => state.guistate.menuIsOpened.setData(false)}
-          />
-        </div>
-        <div class="flex" slot="title0">
-          <Tr t={Translations.t.general.menu.aboutMapComplete} />
-        </div>
-
-        <div slot="content0" class="flex flex-col">
-          <AboutMapComplete {state} />
-          <div class="m-2 flex flex-col">
-            <HotkeyTable />
-          </div>
-        </div>
-
-        <div class="flex" slot="title1">
-          <CogIcon class="h-6 w-6" />
-          <Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
-        </div>
-
-        <div class="links-as-button py-8" slot="content1">
-          <!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
-          <LoginToggle {state}>
-            <div class="flex flex-col" slot="not-logged-in">
-              <LanguagePicker availableLanguages={layout.language} />
-              <Tr cls="alert" t={Translations.t.userinfo.notLoggedIn} />
-              <LoginButton clss="primary" osmConnection={state.osmConnection} />
-            </div>
-            <SelectedElementView
-              highlightedRendering={state.guistate.highlightedUserSetting}
-              layer={usersettingslayer}
-              selectedElement={{
-                type: "Feature",
-                properties: { id: "settings" },
-                geometry: { type: "Point", coordinates: [0, 0] },
-              }}
-              {state}
-              tags={state.userRelatedState.preferencesAsTags}
-            />
-          </LoginToggle>
-        </div>
-
-        <div class="flex" slot="title2">
-          <HeartIcon class="h-6 w-6" />
-          <Tr t={Translations.t.favouritePoi.tab} />
-        </div>
-
-        <div class="m-2 flex flex-col" slot="content2">
-          <h3>
-            <Tr t={Translations.t.favouritePoi.title} />
-          </h3>
-          <Favourites {state} />
-          <h3>
-            <Tr t={Translations.t.reviews.your_reviews} />
-          </h3>
-          <ReviewsOverview {state} />
-        </div>
-      </TabbedGroup>
-    </FloatOver>
-  </If>
-
-  <!-- Privacy policy -->
-  <If condition={state.guistate.privacyPanelIsOpened}>
-    <FloatOver on:close={() => state.guistate.privacyPanelIsOpened.setData(false)}>
-      <div class="flex h-full flex-col overflow-hidden">
-        <h2 class="low-interaction m-0 flex items-center p-4 drop-shadow-md">
-          <EyeIcon class="w-6 pr-2" />
-          <Tr t={Translations.t.privacy.title} />
-        </h2>
-        <div class="overflow-auto p-4">
-          <PrivacyPolicy {state} />
-        </div>
-      </div>
-    </FloatOver>
-  </If>
-
-  <!-- Attribution, copyright and about MapComplete (no menu case) -->
-  <If condition={state.guistate.copyrightPanelIsOpened}>
-    <FloatOver on:close={() => state.guistate.copyrightPanelIsOpened.setData(false)}>
-      <div class="flex h-full flex-col overflow-hidden">
-        <h1 class="low-interaction m-0 flex items-center p-4 drop-shadow-md">
-          <Tr t={Translations.t.general.attribution.title} />
-        </h1>
-        <div class="overflow-auto p-4">
-          <h2>
-            <Tr t={Translations.t.general.menu.aboutMapComplete} />
-          </h2>
-          <AboutMapComplete {state} />
-          <CopyrightPanel {state} />
-        </div>
-      </div>
-    </FloatOver>
-  </If>
-
-  <!-- Community index -->
-  <If condition={state.guistate.communityIndexPanelIsOpened}>
-    <FloatOver on:close={() => state.guistate.communityIndexPanelIsOpened.setData(false)}>
-      <div class="flex h-full flex-col overflow-hidden">
-        <h2 class="low-interaction m-0 flex items-center p-4">
-          <Community class="h-6 w-6" />
-          <Tr t={Translations.t.communityIndex.title} />
-        </h2>
-        <div class="overflow-auto p-4">
-          <CommunityIndexView location={state.mapProperties.location} />
-        </div>
-      </div>
-    </FloatOver>
-  </If>
-
-  <CloseAnimation isOpened={state.guistate.themeIsOpened} moveTo={openMapButton} debug="theme" />
-  <CloseAnimation isOpened={state.guistate.menuIsOpened} moveTo={openMenuButton} debug="menu" />
-  <CloseAnimation
-    isOpened={selectedLayer.map((sl) => sl !== undefined && sl === currentViewLayer)}
-    moveTo={openCurrentViewLayerButton}
-    debug="currentViewLayer"
-  />
-  <CloseAnimation
-    isOpened={selectedElement.map(
-      (sl) => sl !== undefined && sl?.properties?.id === LastClickFeatureSource.newPointElementId
-    )}
-    moveTo={openNewElementButton}
-    debug="newElement"
-  />
-  <CloseAnimation
-    isOpened={state.guistate.filtersPanelIsOpened}
-    moveTo={openFilterButton}
-    debug="filter"
-  />
-  <CloseAnimation
-    isOpened={state.guistate.backgroundLayerSelectionIsOpened}
-    moveTo={openBackgroundButton}
-    debug="bg"
-  />
 </main>
diff --git a/src/index.css b/src/index.css
index ab438556b..1d8647ece 100644
--- a/src/index.css
+++ b/src/index.css
@@ -485,10 +485,18 @@ code {
     color: var(--background-color);
 }
 
+.h-full-child > div {
+    height: 100%;
+}
+
 .bg-black-transparent {
     background-color: #00000088;
 }
 
+.bg-black-light-transparent {
+    background-color: #00000044;
+}
+
 .block-ruby {
     display: block ruby;
 }
@@ -655,6 +663,10 @@ svg.apply-fill path {
     max-width: 100%;
 }
 
+.max-w-screen {
+    max-width: 100vw;
+}
+
 /************************* Experimental support for foldable devices ********************************/
 @media (horizontal-viewport-segments: 2) {
     .theme-list {
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index e77c997a7..a2294bd3a 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,8 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 const plugin = require("tailwindcss/plugin")
+const flowbitePlugin = require("flowbite/plugin")
 
 module.exports = {
-  content: ["./**/*.{html,ts,svelte}"],
+  content: ["./**/*.{html,ts,svelte}", './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
+
   theme: {
     extend: {
       maxHeight: {
@@ -12,10 +14,24 @@ module.exports = {
       colors: {
         subtle: "#dbeafe",
         unsubtle: "#bfdbfe",
+          // flowbite-svelte
+          primary: {
+            50: '#FFF5F2',
+            100: '#FFF1EE',
+            200: '#FFE4DE',
+            300: '#FFD5CC',
+            400: '#FFBCAD',
+            500: '#FE795D',
+            600: '#EF562F',
+            700: '#EB4F27',
+            800: '#CC4522',
+            900: '#A5371B'
+        }
       },
     },
   },
   plugins: [
+    flowbitePlugin,
     plugin(function ({ addVariant, e }) {
       addVariant("landscape", ({ modifySelectors, separator }) => {
         modifySelectors(({ className }) => {