@instincthub/react-ui 0.0.2 → 0.0.4

package/dist/src/assets/css/bootstrap.css

@@ -0,0 +1,1151 @@
+/* InstinctHub Width Utilities */
+
+/* Fixed widths */
+.ihub-w-1 {
+  width: 1px;
+}
+.ihub-w-2 {
+  width: 2px;
+}
+.ihub-w-4 {
+  width: 4px;
+}
+.ihub-w-8 {
+  width: 8px;
+}
+.ihub-w-16 {
+  width: 16px;
+}
+.ihub-w-24 {
+  width: 24px;
+}
+.ihub-w-32 {
+  width: 32px;
+}
+.ihub-w-48 {
+  width: 48px;
+}
+.ihub-w-64 {
+  width: 64px;
+}
+.ihub-w-80 {
+  width: 80px;
+}
+.ihub-w-96 {
+  width: 96px;
+}
+.ihub-w-128 {
+  width: 128px;
+}
+.ihub-w-200 {
+  width: 200px;
+}
+.ihub-w-250 {
+  width: 250px;
+}
+.ihub-w-300 {
+  width: 300px;
+}
+.ihub-w-350 {
+  width: 350px;
+}
+.ihub-w-400 {
+  width: 400px;
+}
+.ihub-w-500 {
+  width: 500px;
+}
+.ihub-w-600 {
+  width: 600px;
+}
+.ihub-w-700 {
+  width: 700px;
+}
+.ihub-w-800 {
+  width: 800px;
+}
+
+/* Percentage widths */
+.ihub-w-25 {
+  width: 25%;
+}
+.ihub-w-33 {
+  width: 33.333333%;
+}
+.ihub-w-50 {
+  width: 50%;
+}
+.ihub-w-75 {
+  width: 75%;
+}
+.ihub-w-100 {
+  width: 100%;
+}
+.ihub-w-auto {
+  width: auto;
+}
+
+/* Max widths */
+.ihub-max-w-300 {
+  max-width: 300px;
+}
+.ihub-max-w-400 {
+  max-width: 400px;
+}
+.ihub-max-w-500 {
+  max-width: 500px;
+}
+.ihub-max-w-600 {
+  max-width: 600px;
+}
+.ihub-max-w-700 {
+  max-width: 700px;
+}
+.ihub-max-w-800 {
+  max-width: 800px;
+}
+.ihub-max-w-900 {
+  max-width: 900px;
+}
+.ihub-max-w-1000 {
+  max-width: 1000px;
+}
+.ihub-max-w-1200 {
+  max-width: 1200px;
+}
+.ihub-max-w-1400 {
+  max-width: 1400px;
+}
+.ihub-max-w-1600 {
+  max-width: 1600px;
+}
+.ihub-max-w-full {
+  max-width: 100%;
+}
+.ihub-max-w-none {
+  max-width: none;
+}
+
+/* Height utilities */
+.ihub-h-1 {
+  height: 1px;
+}
+.ihub-h-2 {
+  height: 2px;
+}
+.ihub-h-4 {
+  height: 4px;
+}
+.ihub-h-8 {
+  height: 8px;
+}
+.ihub-h-16 {
+  height: 16px;
+}
+.ihub-h-24 {
+  height: 24px;
+}
+.ihub-h-32 {
+  height: 32px;
+}
+.ihub-h-48 {
+  height: 48px;
+}
+.ihub-h-64 {
+  height: 64px;
+}
+.ihub-h-80 {
+  height: 80px;
+}
+.ihub-h-96 {
+  height: 96px;
+}
+.ihub-h-128 {
+  height: 128px;
+}
+.ihub-h-200 {
+  height: 200px;
+}
+.ihub-h-300 {
+  height: 300px;
+}
+.ihub-h-400 {
+  height: 400px;
+}
+.ihub-h-500 {
+  height: 500px;
+}
+.ihub-h-600 {
+  height: 600px;
+}
+
+/* Percentage heights */
+.ihub-h-25 {
+  height: 25%;
+}
+.ihub-h-33 {
+  height: 33.333333%;
+}
+.ihub-h-50 {
+  height: 50%;
+}
+.ihub-h-75 {
+  height: 75%;
+}
+.ihub-h-100 {
+  height: 100%;
+}
+.ihub-h-auto {
+  height: auto;
+}
+.ihub-h-screen {
+  height: 100vh;
+}
+
+/* Max heights */
+.ihub-max-h-200 {
+  max-height: 200px;
+}
+.ihub-max-h-300 {
+  max-height: 300px;
+}
+.ihub-max-h-400 {
+  max-height: 400px;
+}
+.ihub-max-h-500 {
+  max-height: 500px;
+}
+.ihub-max-h-600 {
+  max-height: 600px;
+}
+.ihub-max-h-full {
+  max-height: 100%;
+}
+.ihub-max-h-screen {
+  max-height: 100vh;
+}
+.ihub-max-h-none {
+  max-height: none;
+}
+
+/* Min heights */
+.ihub-min-h-0 {
+  min-height: 0;
+}
+.ihub-min-h-100 {
+  min-height: 100px;
+}
+.ihub-min-h-200 {
+  min-height: 200px;
+}
+.ihub-min-h-300 {
+  min-height: 300px;
+}
+.ihub-min-h-400 {
+  min-height: 400px;
+}
+.ihub-min-h-500 {
+  min-height: 500px;
+}
+.ihub-min-h-full {
+  min-height: 100%;
+}
+.ihub-min-h-screen {
+  min-height: 100vh;
+}
+
+/* Padding utilities - all sides */
+.ihub-p-0 {
+  padding: 0;
+}
+.ihub-p-1 {
+  padding: 4px;
+}
+.ihub-p-2 {
+  padding: 8px;
+}
+.ihub-p-3 {
+  padding: 12px;
+}
+.ihub-p-4 {
+  padding: 16px;
+}
+.ihub-p-5 {
+  padding: 20px;
+}
+.ihub-p-6 {
+  padding: 24px;
+}
+.ihub-p-8 {
+  padding: 32px;
+}
+.ihub-p-10 {
+  padding: 40px;
+}
+.ihub-p-12 {
+  padding: 48px;
+}
+.ihub-p-16 {
+  padding: 64px;
+}
+.ihub-p-20 {
+  padding: 80px;
+}
+.ihub-p-24 {
+  padding: 96px;
+}
+.ihub-p-32 {
+  padding: 128px;
+}
+
+/* Padding top */
+.ihub-pt-0 {
+  padding-top: 0;
+}
+.ihub-pt-1 {
+  padding-top: 4px;
+}
+.ihub-pt-2 {
+  padding-top: 8px;
+}
+.ihub-pt-3 {
+  padding-top: 12px;
+}
+.ihub-pt-4 {
+  padding-top: 16px;
+}
+.ihub-pt-5 {
+  padding-top: 20px;
+}
+.ihub-pt-6 {
+  padding-top: 24px;
+}
+.ihub-pt-8 {
+  padding-top: 32px;
+}
+.ihub-pt-10 {
+  padding-top: 40px;
+}
+.ihub-pt-12 {
+  padding-top: 48px;
+}
+.ihub-pt-16 {
+  padding-top: 64px;
+}
+.ihub-pt-20 {
+  padding-top: 80px;
+}
+.ihub-pt-24 {
+  padding-top: 96px;
+}
+.ihub-pt-32 {
+  padding-top: 128px;
+}
+
+/* Padding right */
+.ihub-pr-0 {
+  padding-right: 0;
+}
+.ihub-pr-1 {
+  padding-right: 4px;
+}
+.ihub-pr-2 {
+  padding-right: 8px;
+}
+.ihub-pr-3 {
+  padding-right: 12px;
+}
+.ihub-pr-4 {
+  padding-right: 16px;
+}
+.ihub-pr-5 {
+  padding-right: 20px;
+}
+.ihub-pr-6 {
+  padding-right: 24px;
+}
+.ihub-pr-8 {
+  padding-right: 32px;
+}
+.ihub-pr-10 {
+  padding-right: 40px;
+}
+.ihub-pr-12 {
+  padding-right: 48px;
+}
+.ihub-pr-16 {
+  padding-right: 64px;
+}
+.ihub-pr-20 {
+  padding-right: 80px;
+}
+.ihub-pr-24 {
+  padding-right: 96px;
+}
+.ihub-pr-32 {
+  padding-right: 128px;
+}
+
+/* Padding bottom */
+.ihub-pb-0 {
+  padding-bottom: 0;
+}
+.ihub-pb-1 {
+  padding-bottom: 4px;
+}
+.ihub-pb-2 {
+  padding-bottom: 8px;
+}
+.ihub-pb-3 {
+  padding-bottom: 12px;
+}
+.ihub-pb-4 {
+  padding-bottom: 16px;
+}
+.ihub-pb-5 {
+  padding-bottom: 20px;
+}
+.ihub-pb-6 {
+  padding-bottom: 24px;
+}
+.ihub-pb-8 {
+  padding-bottom: 32px;
+}
+.ihub-pb-10 {
+  padding-bottom: 40px;
+}
+.ihub-pb-12 {
+  padding-bottom: 48px;
+}
+.ihub-pb-16 {
+  padding-bottom: 64px;
+}
+.ihub-pb-20 {
+  padding-bottom: 80px;
+}
+.ihub-pb-24 {
+  padding-bottom: 96px;
+}
+.ihub-pb-32 {
+  padding-bottom: 128px;
+}
+
+/* Padding left */
+.ihub-pl-0 {
+  padding-left: 0;
+}
+.ihub-pl-1 {
+  padding-left: 4px;
+}
+.ihub-pl-2 {
+  padding-left: 8px;
+}
+.ihub-pl-3 {
+  padding-left: 12px;
+}
+.ihub-pl-4 {
+  padding-left: 16px;
+}
+.ihub-pl-5 {
+  padding-left: 20px;
+}
+.ihub-pl-6 {
+  padding-left: 24px;
+}
+.ihub-pl-8 {
+  padding-left: 32px;
+}
+.ihub-pl-10 {
+  padding-left: 40px;
+}
+.ihub-pl-12 {
+  padding-left: 48px;
+}
+.ihub-pl-16 {
+  padding-left: 64px;
+}
+.ihub-pl-20 {
+  padding-left: 80px;
+}
+.ihub-pl-24 {
+  padding-left: 96px;
+}
+.ihub-pl-32 {
+  padding-left: 128px;
+}
+
+/* Padding horizontal (left and right) */
+.ihub-px-0 {
+  padding-left: 0;
+  padding-right: 0;
+}
+.ihub-px-1 {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+.ihub-px-2 {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.ihub-px-3 {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.ihub-px-4 {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.ihub-px-5 {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+.ihub-px-6 {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+.ihub-px-8 {
+  padding-left: 32px;
+  padding-right: 32px;
+}
+.ihub-px-10 {
+  padding-left: 40px;
+  padding-right: 40px;
+}
+.ihub-px-12 {
+  padding-left: 48px;
+  padding-right: 48px;
+}
+.ihub-px-16 {
+  padding-left: 64px;
+  padding-right: 64px;
+}
+.ihub-px-20 {
+  padding-left: 80px;
+  padding-right: 80px;
+}
+.ihub-px-24 {
+  padding-left: 96px;
+  padding-right: 96px;
+}
+.ihub-px-32 {
+  padding-left: 128px;
+  padding-right: 128px;
+}
+
+/* Padding vertical (top and bottom) */
+.ihub-py-0 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.ihub-py-1 {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+.ihub-py-2 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.ihub-py-3 {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.ihub-py-4 {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+.ihub-py-5 {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+.ihub-py-6 {
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+.ihub-py-8 {
+  padding-top: 32px;
+  padding-bottom: 32px;
+}
+.ihub-py-10 {
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+.ihub-py-12 {
+  padding-top: 48px;
+  padding-bottom: 48px;
+}
+.ihub-py-16 {
+  padding-top: 64px;
+  padding-bottom: 64px;
+}
+.ihub-py-20 {
+  padding-top: 80px;
+  padding-bottom: 80px;
+}
+.ihub-py-24 {
+  padding-top: 96px;
+  padding-bottom: 96px;
+}
+.ihub-py-32 {
+  padding-top: 128px;
+  padding-bottom: 128px;
+}
+
+/* Responsive utilities for smaller screens */
+@media (max-width: 768px) {
+  .ihub-sm-w-100 {
+    width: 100%;
+  }
+  .ihub-sm-h-auto {
+    height: auto;
+  }
+  .ihub-sm-p-2 {
+    padding: 8px;
+  }
+  .ihub-sm-p-3 {
+    padding: 12px;
+  }
+  .ihub-sm-p-4 {
+    padding: 16px;
+  }
+  .ihub-sm-py-2 {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+  .ihub-sm-py-3 {
+    padding-top: 12px;
+    padding-bottom: 12px;
+  }
+  .ihub-sm-px-2 {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+  .ihub-sm-px-3 {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+}
+
+/* Responsive utilities for medium screens */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .ihub-md-w-50 {
+    width: 50%;
+  }
+  .ihub-md-w-75 {
+    width: 75%;
+  }
+  .ihub-md-w-100 {
+    width: 100%;
+  }
+  .ihub-md-p-4 {
+    padding: 16px;
+  }
+  .ihub-md-p-5 {
+    padding: 20px;
+  }
+  .ihub-md-py-4 {
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
+  .ihub-md-py-5 {
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+  .ihub-md-px-4 {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+  .ihub-md-px-5 {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+
+/* Responsive utilities for larger screens */
+@media (min-width: 1025px) {
+  .ihub-lg-w-25 {
+    width: 25%;
+  }
+  .ihub-lg-w-33 {
+    width: 33.333333%;
+  }
+  .ihub-lg-w-50 {
+    width: 50%;
+  }
+  .ihub-lg-w-75 {
+    width: 75%;
+  }
+  .ihub-lg-p-6 {
+    padding: 24px;
+  }
+  .ihub-lg-p-8 {
+    padding: 32px;
+  }
+  .ihub-lg-py-6 {
+    padding-top: 24px;
+    padding-bottom: 24px;
+  }
+  .ihub-lg-py-8 {
+    padding-top: 32px;
+    padding-bottom: 32px;
+  }
+  .ihub-lg-px-6 {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+  .ihub-lg-px-8 {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+}
+
+/* Overflow utilities */
+.ihub-overflow-auto {
+  overflow: auto;
+}
+
+.ihub-overflow-hidden {
+  overflow: hidden;
+}
+
+.ihub-overflow-visible {
+  overflow: visible;
+}
+
+.ihub-overflow-scroll {
+  overflow: scroll;
+}
+
+.ihub-overflow-x-auto {
+  overflow-x: auto;
+}
+
+.ihub-overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.ihub-overflow-x-scroll {
+  overflow-x: scroll;
+}
+
+.ihub-overflow-y-auto {
+  overflow-y: auto;
+}
+
+.ihub-overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+.ihub-overflow-y-scroll {
+  overflow-y: scroll;
+}
+
+/* Scrollbar styling for WebKit browsers */
+.ihub-scrollbar-thin::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+.ihub-scrollbar-thin::-webkit-scrollbar-track {
+  background: var(--Gray);
+  border-radius: 5px;
+}
+
+.ihub-scrollbar-thin::-webkit-scrollbar-thumb {
+  background: var(--DarkCyan);
+  border-radius: 5px;
+}
+
+/* Hide scrollbar but maintain functionality */
+.ihub-scrollbar-hidden {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.ihub-scrollbar-hidden::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+
+
+
+/* 
+  InstinctHub Margin Utility Classes
+  Prefix: ihub-
+  Based on Bootstrap's margin utility system
+*/
+
+/* Margin - all sides */
+.ihub-m-0 { margin: 0 !important; }
+.ihub-m-1 { margin: 10px !important; }
+.ihub-m-2 { margin: 20px !important; }
+.ihub-m-3 { margin: 30px !important; }
+.ihub-m-4 { margin: 40px !important; }
+.ihub-m-5 { margin: 50px !important; }
+.ihub-m-6 { margin: 60px !important; }
+.ihub-m-7 { margin: 70px !important; }
+.ihub-m-8 { margin: 80px !important; }
+.ihub-m-9 { margin: 90px !important; }
+.ihub-m-10 { margin: 100px !important; }
+.ihub-m-auto { margin: auto !important; }
+
+/* Margin Top */
+.ihub-mt-0 { margin-top: 0 !important; }
+.ihub-mt-1 { margin-top: 10px !important; }
+.ihub-mt-2 { margin-top: 20px !important; }
+.ihub-mt-3 { margin-top: 30px !important; }
+.ihub-mt-4 { margin-top: 40px !important; }
+.ihub-mt-5 { margin-top: 50px !important; }
+.ihub-mt-6 { margin-top: 60px !important; }
+.ihub-mt-7 { margin-top: 70px !important; }
+.ihub-mt-8 { margin-top: 80px !important; }
+.ihub-mt-9 { margin-top: 90px !important; }
+.ihub-mt-10 { margin-top: 100px !important; }
+.ihub-mt-auto { margin-top: auto !important; }
+
+/* Margin Right */
+.ihub-mr-0 { margin-right: 0 !important; }
+.ihub-mr-1 { margin-right: 10px !important; }
+.ihub-mr-2 { margin-right: 20px !important; }
+.ihub-mr-3 { margin-right: 30px !important; }
+.ihub-mr-4 { margin-right: 40px !important; }
+.ihub-mr-5 { margin-right: 50px !important; }
+.ihub-mr-6 { margin-right: 60px !important; }
+.ihub-mr-7 { margin-right: 70px !important; }
+.ihub-mr-8 { margin-right: 80px !important; }
+.ihub-mr-9 { margin-right: 90px !important; }
+.ihub-mr-10 { margin-right: 100px !important; }
+.ihub-mr-auto { margin-right: auto !important; }
+
+/* Margin Bottom */
+.ihub-mb-0 { margin-bottom: 0 !important; }
+.ihub-mb-1 { margin-bottom: 10px !important; }
+.ihub-mb-2 { margin-bottom: 20px !important; }
+.ihub-mb-3 { margin-bottom: 30px !important; }
+.ihub-mb-4 { margin-bottom: 40px !important; }
+.ihub-mb-5 { margin-bottom: 50px !important; }
+.ihub-mb-6 { margin-bottom: 60px !important; }
+.ihub-mb-7 { margin-bottom: 70px !important; }
+.ihub-mb-8 { margin-bottom: 80px !important; }
+.ihub-mb-9 { margin-bottom: 90px !important; }
+.ihub-mb-10 { margin-bottom: 100px !important; }
+.ihub-mb-auto { margin-bottom: auto !important; }
+
+/* Margin Left */
+.ihub-ml-0 { margin-left: 0 !important; }
+.ihub-ml-1 { margin-left: 10px !important; }
+.ihub-ml-2 { margin-left: 20px !important; }
+.ihub-ml-3 { margin-left: 30px !important; }
+.ihub-ml-4 { margin-left: 40px !important; }
+.ihub-ml-5 { margin-left: 50px !important; }
+.ihub-ml-6 { margin-left: 60px !important; }
+.ihub-ml-7 { margin-left: 70px !important; }
+.ihub-ml-8 { margin-left: 80px !important; }
+.ihub-ml-9 { margin-left: 90px !important; }
+.ihub-ml-10 { margin-left: 100px !important; }
+.ihub-ml-auto { margin-left: auto !important; }
+
+/* Margin X-axis (left and right) */
+.ihub-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
+.ihub-mx-1 { margin-left: 10px !important; margin-right: 10px !important; }
+.ihub-mx-2 { margin-left: 20px !important; margin-right: 20px !important; }
+.ihub-mx-3 { margin-left: 30px !important; margin-right: 30px !important; }
+.ihub-mx-4 { margin-left: 40px !important; margin-right: 40px !important; }
+.ihub-mx-5 { margin-left: 50px !important; margin-right: 50px !important; }
+.ihub-mx-6 { margin-left: 60px !important; margin-right: 60px !important; }
+.ihub-mx-7 { margin-left: 70px !important; margin-right: 70px !important; }
+.ihub-mx-8 { margin-left: 80px !important; margin-right: 80px !important; }
+.ihub-mx-9 { margin-left: 90px !important; margin-right: 90px !important; }
+.ihub-mx-10 { margin-left: 100px !important; margin-right: 100px !important; }
+.ihub-mx-auto { margin-left: auto !important; margin-right: auto !important; }
+
+/* Margin Y-axis (top and bottom) */
+.ihub-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
+.ihub-my-1 { margin-top: 10px !important; margin-bottom: 10px !important; }
+.ihub-my-2 { margin-top: 20px !important; margin-bottom: 20px !important; }
+.ihub-my-3 { margin-top: 30px !important; margin-bottom: 30px !important; }
+.ihub-my-4 { margin-top: 40px !important; margin-bottom: 40px !important; }
+.ihub-my-5 { margin-top: 50px !important; margin-bottom: 50px !important; }
+.ihub-my-6 { margin-top: 60px !important; margin-bottom: 60px !important; }
+.ihub-my-7 { margin-top: 70px !important; margin-bottom: 70px !important; }
+.ihub-my-8 { margin-top: 80px !important; margin-bottom: 80px !important; }
+.ihub-my-9 { margin-top: 90px !important; margin-bottom: 90px !important; }
+.ihub-my-10 { margin-top: 100px !important; margin-bottom: 100px !important; }
+.ihub-my-auto { margin-top: auto !important; margin-bottom: auto !important; }
+
+/* Responsive margin classes for different breakpoints */
+@media (min-width: 576px) {
+  /* Small devices (sm) */
+  .ihub-m-sm-0 { margin: 0 !important; }
+  .ihub-m-sm-1 { margin: 10px !important; }
+  .ihub-m-sm-2 { margin: 20px !important; }
+  .ihub-m-sm-3 { margin: 30px !important; }
+  .ihub-m-sm-4 { margin: 40px !important; }
+  .ihub-m-sm-5 { margin: 50px !important; }
+  .ihub-m-sm-auto { margin: auto !important; }
+
+  .ihub-mt-sm-0 { margin-top: 0 !important; }
+  .ihub-mt-sm-1 { margin-top: 10px !important; }
+  .ihub-mt-sm-2 { margin-top: 20px !important; }
+  .ihub-mt-sm-3 { margin-top: 30px !important; }
+  .ihub-mt-sm-4 { margin-top: 40px !important; }
+  .ihub-mt-sm-5 { margin-top: 50px !important; }
+  .ihub-mt-sm-auto { margin-top: auto !important; }
+
+  /* Similar patterns for other directions */
+}
+
+@media (min-width: 768px) {
+  /* Medium devices (md) */
+  .ihub-m-md-0 { margin: 0 !important; }
+  .ihub-m-md-1 { margin: 10px !important; }
+  .ihub-m-md-2 { margin: 20px !important; }
+  .ihub-m-md-3 { margin: 30px !important; }
+  .ihub-m-md-4 { margin: 40px !important; }
+  .ihub-m-md-5 { margin: 50px !important; }
+  .ihub-m-md-auto { margin: auto !important; }
+
+  .ihub-mt-md-0 { margin-top: 0 !important; }
+  .ihub-mt-md-1 { margin-top: 10px !important; }
+  .ihub-mt-md-2 { margin-top: 20px !important; }
+  .ihub-mt-md-3 { margin-top: 30px !important; }
+  .ihub-mt-md-4 { margin-top: 40px !important; }
+  .ihub-mt-md-5 { margin-top: 50px !important; }
+  .ihub-mt-md-auto { margin-top: auto !important; }
+
+  /* Similar patterns for other directions */
+}
+
+@media (min-width: 992px) {
+  /* Large devices (lg) */
+  .ihub-m-lg-0 { margin: 0 !important; }
+  .ihub-m-lg-1 { margin: 10px !important; }
+  .ihub-m-lg-2 { margin: 20px !important; }
+  .ihub-m-lg-3 { margin: 30px !important; }
+  .ihub-m-lg-4 { margin: 40px !important; }
+  .ihub-m-lg-5 { margin: 50px !important; }
+  .ihub-m-lg-auto { margin: auto !important; }
+
+  .ihub-mt-lg-0 { margin-top: 0 !important; }
+  .ihub-mt-lg-1 { margin-top: 10px !important; }
+  .ihub-mt-lg-2 { margin-top: 20px !important; }
+  .ihub-mt-lg-3 { margin-top: 30px !important; }
+  .ihub-mt-lg-4 { margin-top: 40px !important; }
+  .ihub-mt-lg-5 { margin-top: 50px !important; }
+  .ihub-mt-lg-auto { margin-top: auto !important; }
+
+  /* Similar patterns for other directions */
+}
+
+@media (min-width: 1200px) {
+  /* Extra large devices (xl) */
+  .ihub-m-xl-0 { margin: 0 !important; }
+  .ihub-m-xl-1 { margin: 10px !important; }
+  .ihub-m-xl-2 { margin: 20px !important; }
+  .ihub-m-xl-3 { margin: 30px !important; }
+  .ihub-m-xl-4 { margin: 40px !important; }
+  .ihub-m-xl-5 { margin: 50px !important; }
+  .ihub-m-xl-auto { margin: auto !important; }
+
+  .ihub-mt-xl-0 { margin-top: 0 !important; }
+  .ihub-mt-xl-1 { margin-top: 10px !important; }
+  .ihub-mt-xl-2 { margin-top: 20px !important; }
+  .ihub-mt-xl-3 { margin-top: 30px !important; }
+  .ihub-mt-xl-4 { margin-top: 40px !important; }
+  .ihub-mt-xl-5 { margin-top: 50px !important; }
+  .ihub-mt-xl-auto { margin-top: auto !important; }
+
+  /* Similar patterns for other directions */
+}
+
+/* Negative margins for advanced layout needs */
+.ihub-m-n1 { margin: -10px !important; }
+.ihub-m-n2 { margin: -20px !important; }
+.ihub-m-n3 { margin: -30px !important; }
+.ihub-m-n4 { margin: -40px !important; }
+.ihub-m-n5 { margin: -50px !important; }
+
+.ihub-mt-n1 { margin-top: -10px !important; }
+.ihub-mt-n2 { margin-top: -20px !important; }
+.ihub-mt-n3 { margin-top: -30px !important; }
+.ihub-mt-n4 { margin-top: -40px !important; }
+.ihub-mt-n5 { margin-top: -50px !important; }
+
+/* Similar negative margin patterns for other directions */
+
+
+
+/* 
+  InstinctHub Display Utility Classes
+  Prefix: ihub-
+  Based on Bootstrap's display utility system
+*/
+
+/* Display Values */
+.ihub-d-none { display: none !important; }
+.ihub-d-inline { display: inline !important; }
+.ihub-d-inline-block { display: inline-block !important; }
+.ihub-d-block { display: block !important; }
+.ihub-d-table { display: table !important; }
+.ihub-d-table-row { display: table-row !important; }
+.ihub-d-table-cell { display: table-cell !important; }
+.ihub-d-flex { display: flex !important; }
+.ihub-d-inline-flex { display: inline-flex !important; }
+.ihub-d-grid { display: grid !important; }
+.ihub-d-inline-grid { display: inline-grid !important; }
+
+/* Responsive display classes */
+/* Small devices (sm) */
+@media (min-width: 576px) {
+  .ihub-d-sm-none { display: none !important; }
+  .ihub-d-sm-inline { display: inline !important; }
+  .ihub-d-sm-inline-block { display: inline-block !important; }
+  .ihub-d-sm-block { display: block !important; }
+  .ihub-d-sm-table { display: table !important; }
+  .ihub-d-sm-table-row { display: table-row !important; }
+  .ihub-d-sm-table-cell { display: table-cell !important; }
+  .ihub-d-sm-flex { display: flex !important; }
+  .ihub-d-sm-inline-flex { display: inline-flex !important; }
+  .ihub-d-sm-grid { display: grid !important; }
+  .ihub-d-sm-inline-grid { display: inline-grid !important; }
+}
+
+/* Medium devices (md) */
+@media (min-width: 768px) {
+  .ihub-d-md-none { display: none !important; }
+  .ihub-d-md-inline { display: inline !important; }
+  .ihub-d-md-inline-block { display: inline-block !important; }
+  .ihub-d-md-block { display: block !important; }
+  .ihub-d-md-table { display: table !important; }
+  .ihub-d-md-table-row { display: table-row !important; }
+  .ihub-d-md-table-cell { display: table-cell !important; }
+  .ihub-d-md-flex { display: flex !important; }
+  .ihub-d-md-inline-flex { display: inline-flex !important; }
+  .ihub-d-md-grid { display: grid !important; }
+  .ihub-d-md-inline-grid { display: inline-grid !important; }
+}
+
+/* Large devices (lg) */
+@media (min-width: 992px) {
+  .ihub-d-lg-none { display: none !important; }
+  .ihub-d-lg-inline { display: inline !important; }
+  .ihub-d-lg-inline-block { display: inline-block !important; }
+  .ihub-d-lg-block { display: block !important; }
+  .ihub-d-lg-table { display: table !important; }
+  .ihub-d-lg-table-row { display: table-row !important; }
+  .ihub-d-lg-table-cell { display: table-cell !important; }
+  .ihub-d-lg-flex { display: flex !important; }
+  .ihub-d-lg-inline-flex { display: inline-flex !important; }
+  .ihub-d-lg-grid { display: grid !important; }
+  .ihub-d-lg-inline-grid { display: inline-grid !important; }
+}
+
+/* Extra large devices (xl) */
+@media (min-width: 1200px) {
+  .ihub-d-xl-none { display: none !important; }
+  .ihub-d-xl-inline { display: inline !important; }
+  .ihub-d-xl-inline-block { display: inline-block !important; }
+  .ihub-d-xl-block { display: block !important; }
+  .ihub-d-xl-table { display: table !important; }
+  .ihub-d-xl-table-row { display: table-row !important; }
+  .ihub-d-xl-table-cell { display: table-cell !important; }
+  .ihub-d-xl-flex { display: flex !important; }
+  .ihub-d-xl-inline-flex { display: inline-flex !important; }
+  .ihub-d-xl-grid { display: grid !important; }
+  .ihub-d-xl-inline-grid { display: inline-grid !important; }
+}
+
+/* Special cases for print */
+@media print {
+  .ihub-d-print-none { display: none !important; }
+  .ihub-d-print-inline { display: inline !important; }
+  .ihub-d-print-inline-block { display: inline-block !important; }
+  .ihub-d-print-block { display: block !important; }
+  .ihub-d-print-table { display: table !important; }
+  .ihub-d-print-table-row { display: table-row !important; }
+  .ihub-d-print-table-cell { display: table-cell !important; }
+  .ihub-d-print-flex { display: flex !important; }
+  .ihub-d-print-inline-flex { display: inline-flex !important; }
+}
+
+/* Visibility utilities */
+.ihub-visible { visibility: visible !important; }
+.ihub-invisible { visibility: hidden !important; }
+
+/* Hide/Show utilities for accessibility - visually hidden but accessible to screen readers */
+.ihub-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.ihub-sr-only-focusable:not(:focus) {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+/* Hide on specific screen sizes */
+.ihub-hide-sm-only {
+  @media (min-width: 576px) and (max-width: 767.98px) {
+    display: none !important;
+  }
+}
+
+.ihub-hide-md-only {
+  @media (min-width: 768px) and (max-width: 991.98px) {
+    display: none !important;
+  }
+}
+
+.ihub-hide-lg-only {
+  @media (min-width: 992px) and (max-width: 1199.98px) {
+    display: none !important;
+  }
+}
+
+.ihub-hide-xl-only {
+  @media (min-width: 1200px) {
+    display: none !important;
+  }
+}
+
+/* Show on specific screen sizes */
+.ihub-show-sm-only {
+  @media (max-width: 575.98px), (min-width: 768px) {
+    display: none !important;
+  }
+}
+
+.ihub-show-md-only {
+  @media (max-width: 767.98px), (min-width: 992px) {
+    display: none !important;
+  }
+}
+
+.ihub-show-lg-only {
+  @media (max-width: 991.98px), (min-width: 1200px) {
+    display: none !important;
+  }
+}
+
+.ihub-show-xl-only {
+  @media (max-width: 1199.98px) {
+    display: none !important;
+  }
+}
+
+/* Custom InstinctHub display helpers matching existing patterns in InstinctHub CSS */
+.ihub-ghost { display: none; }
+.ihub-flex { display: flex; justify-content: space-between; }