place calculator an separate page

resources/css/filament/admin/theme.css

@@ -283,7 +283,7 @@ less padding in table
 }
 
 #playerdragtable .fi-ta-content-ctn {
-    max-height: 800px !important;
+    max-height: 600px !important;
     overflow-y: auto !important;
     overflow-x: visible;
     scrollbar-width: none;
@@ -296,5 +296,20 @@ less padding in table
     position: sticky !important;
     top: 0 !important;
     z-index: 20 !important;
-    background-color: var(--fi-background-color, #ffffff) !important;
+}
+
+.warning {
+    @apply bg-amber-100 dark:bg-amber-700 text-amber-600 dark:text-amber-500 text-center border border-amber-300 dark:border-amber-500 rounded my-0.5
+}
+
+.info {
+    @apply bg-blue-100 dark:bg-blue-700 text-blue-600 dark:text-blue-400 text-center border border-blue-300 dark:border-blue-500 rounded my-0.5
+}
+
+.success {
+    @apply bg-green-100 dark:bg-green-700 text-green-600 dark:text-green-400 text-center border border-green-300 dark:border-green-500 rounded my-0.5
+}
+
+.gray {
+    @apply bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-center border border-gray-300 dark:border-gray-500 rounded my-0.5
 }