/* ========================================
   CSS Utilities Kit
   Generated by ClaudCode
   Date: 2026-04-10 10:00:39
   Framework: None
   ======================================== */

/* Base Styles - Typography */
h1, .h1 {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-bottom: 0.5em !important;
}
h2, .h2 {
  font-size: 2rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-bottom: 0.5em !important;
}
h3, .h3 {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-bottom: 0.5em !important;
}
h4, .h4 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-bottom: 0.5em !important;
}
h5, .h5 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-bottom: 0.5em !important;
}
h6, .h6 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-bottom: 0.5em !important;
}

p, .p {
  margin-bottom: 1rem !important;
  line-height: 1.6 !important;
}

/* Base Styles - Alerts */
.alert-success, span.success {
  display: inline-block !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0.25rem !important;
  background-color: #d4edda !important;
  border: 1px solid #c3e6cb !important;
  border-radius: 0.25rem !important;
  color: #155724 !important;
  font-size: 0.875rem !important;
}
.alert-error, span.error {
  display: inline-block !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0.25rem !important;
  background-color: #f8d7da !important;
  border: 1px solid #f5c6cb !important;
  border-radius: 0.25rem !important;
  color: #721c24 !important;
  font-size: 0.875rem !important;
}
.alert-warning, span.warning {
  display: inline-block !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0.25rem !important;
  background-color: #fff3cd !important;
  border: 1px solid #ffeaa7 !important;
  border-radius: 0.25rem !important;
  color: #856404 !important;
  font-size: 0.875rem !important;
}
.alert-info, span.info {
  display: inline-block !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0.25rem !important;
  background-color: #d1ecf1 !important;
  border: 1px solid #bee5eb !important;
  border-radius: 0.25rem !important;
  color: #0c5460 !important;
  font-size: 0.875rem !important;
}

/* Base Styles - Info Toolbars */
.toolbar-info {
  display: block !important;
  padding: 1rem !important;
  margin: 1rem 0 !important;
  background-color: #e7f3ff !important;
  border-left: 4px solid #2196F3 !important;
  border-radius: 0.25rem !important;
}
.toolbar-success {
  display: block !important;
  padding: 1rem !important;
  margin: 1rem 0 !important;
  background-color: #edf7ed !important;
  border-left: 4px solid #4caf50 !important;
  border-radius: 0.25rem !important;
}
.toolbar-warning {
  display: block !important;
  padding: 1rem !important;
  margin: 1rem 0 !important;
  background-color: #fff8e1 !important;
  border-left: 4px solid #ff9800 !important;
  border-radius: 0.25rem !important;
}
.toolbar-danger {
  display: block !important;
  padding: 1rem !important;
  margin: 1rem 0 !important;
  background-color: #ffebee !important;
  border-left: 4px solid #f44336 !important;
  border-radius: 0.25rem !important;
}

/* Base Styles - Text Utilities */
.bold, .font-bold { font-weight: 700 !important; }
.semibold, .font-semibold { font-weight: 600 !important; }
.medium, .font-medium { font-weight: 500 !important; }
.normal, .font-normal { font-weight: 400 !important; }
.light, .font-light { font-weight: 300 !important; }
.italic { font-style: italic !important; }
.uppercase { text-transform: uppercase !important; }
.lowercase { text-transform: lowercase !important; }
.capitalize { text-transform: capitalize !important; }

/* Base Styles - Text Alignment */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* Base Styles - Display */
.d-block, .block { display: block !important; }
.d-inline, .inline { display: inline !important; }
.d-inline-block, .inline-block { display: inline-block !important; }
.d-none, .hidden { display: none !important; }

/* Base Styles - Position */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }
.sticky { position: sticky !important; }

/* Colors - Text */
.text-primary { color: #3490dc !important; }
.text-green { color: #59AE91 !important; }
.text-orange { color: #E4702E !important; }
.text-gray { color: #6c757d !important; }

/* Colors - Background */
.bg-primary { background-color: #3490dc !important; }
.bg-green { background-color: #59AE91 !important; }
.bg-orange { background-color: #E4702E !important; }
.bg-gray { background-color: #6c757d !important; }

/* Colors - Borders */
.border-primary { border-color: #3490dc !important; }
.border-green { border-color: #59AE91 !important; }
.border-orange { border-color: #E4702E !important; }
.border-gray { border-color: #6c757d !important; }

/* Sizing - Width */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-80 { width: 80% !important; }
.w-90 { width: 90% !important; }
.w-95 { width: 95% !important; }
.w-100 { width: 100% !important; }

/* Sizing - Min Width */
.min-w-25 { min-width: 25px !important; }
.min-w-50 { min-width: 50px !important; }
.min-w-75 { min-width: 75px !important; }
.min-w-100 { min-width: 100px !important; }
.min-w-150 { min-width: 150px !important; }
.min-w-200 { min-width: 200px !important; }
.min-w-250 { min-width: 250px !important; }
.min-w-300 { min-width: 300px !important; }

/* Sizing - Max Width */
.max-w-300 { max-width: 300px !important; }
.max-w-400 { max-width: 400px !important; }
.max-w-500 { max-width: 500px !important; }
.max-w-600 { max-width: 600px !important; }
.max-w-700 { max-width: 700px !important; }
.max-w-800 { max-width: 800px !important; }
.max-w-900 { max-width: 900px !important; }
.max-w-1000 { max-width: 1000px !important; }

/* Sizing - Height */
.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.height-auto { height: auto !important; }

/* Spacing - Padding */
.p-0 { padding: 0px !important; }
.px-0 { padding-left: 0px !important; padding-right: 0px !important; }
.py-0 { padding-top: 0px !important; padding-bottom: 0px !important; }
.p-5 { padding: 5px !important; }
.px-5 { padding-left: 5px !important; padding-right: 5px !important; }
.py-5 { padding-top: 5px !important; padding-bottom: 5px !important; }
.p-10 { padding: 10px !important; }
.px-10 { padding-left: 10px !important; padding-right: 10px !important; }
.py-10 { padding-top: 10px !important; padding-bottom: 10px !important; }
.p-15 { padding: 15px !important; }
.px-15 { padding-left: 15px !important; padding-right: 15px !important; }
.py-15 { padding-top: 15px !important; padding-bottom: 15px !important; }
.p-20 { padding: 20px !important; }
.px-20 { padding-left: 20px !important; padding-right: 20px !important; }
.py-20 { padding-top: 20px !important; padding-bottom: 20px !important; }
.p-25 { padding: 25px !important; }
.px-25 { padding-left: 25px !important; padding-right: 25px !important; }
.py-25 { padding-top: 25px !important; padding-bottom: 25px !important; }
.p-30 { padding: 30px !important; }
.px-30 { padding-left: 30px !important; padding-right: 30px !important; }
.py-30 { padding-top: 30px !important; padding-bottom: 30px !important; }
.p-40 { padding: 40px !important; }
.px-40 { padding-left: 40px !important; padding-right: 40px !important; }
.py-40 { padding-top: 40px !important; padding-bottom: 40px !important; }
.p-50 { padding: 50px !important; }
.px-50 { padding-left: 50px !important; padding-right: 50px !important; }
.py-50 { padding-top: 50px !important; padding-bottom: 50px !important; }

/* Spacing - Margin */
.m-0 { margin: 0px !important; }
.mx-0 { margin-left: 0px !important; margin-right: 0px !important; }
.my-0 { margin-top: 0px !important; margin-bottom: 0px !important; }
.m-5 { margin: 5px !important; }
.mx-5 { margin-left: 5px !important; margin-right: 5px !important; }
.my-5 { margin-top: 5px !important; margin-bottom: 5px !important; }
.m-10 { margin: 10px !important; }
.mx-10 { margin-left: 10px !important; margin-right: 10px !important; }
.my-10 { margin-top: 10px !important; margin-bottom: 10px !important; }
.m-15 { margin: 15px !important; }
.mx-15 { margin-left: 15px !important; margin-right: 15px !important; }
.my-15 { margin-top: 15px !important; margin-bottom: 15px !important; }
.m-20 { margin: 20px !important; }
.mx-20 { margin-left: 20px !important; margin-right: 20px !important; }
.my-20 { margin-top: 20px !important; margin-bottom: 20px !important; }
.m-25 { margin: 25px !important; }
.mx-25 { margin-left: 25px !important; margin-right: 25px !important; }
.my-25 { margin-top: 25px !important; margin-bottom: 25px !important; }
.m-30 { margin: 30px !important; }
.mx-30 { margin-left: 30px !important; margin-right: 30px !important; }
.my-30 { margin-top: 30px !important; margin-bottom: 30px !important; }
.m-40 { margin: 40px !important; }
.mx-40 { margin-left: 40px !important; margin-right: 40px !important; }
.my-40 { margin-top: 40px !important; margin-bottom: 40px !important; }
.m-50 { margin: 50px !important; }
.mx-50 { margin-left: 50px !important; margin-right: 50px !important; }
.my-50 { margin-top: 50px !important; margin-bottom: 50px !important; }

/* Typography - Font Size */
.font-10 { font-size: 10px !important; }
.font-12 { font-size: 12px !important; }
.font-14 { font-size: 14px !important; }
.font-16 { font-size: 16px !important; }
.font-18 { font-size: 18px !important; }
.font-20 { font-size: 20px !important; }
.font-22 { font-size: 22px !important; }
.font-24 { font-size: 24px !important; }
.font-28 { font-size: 28px !important; }
.font-32 { font-size: 32px !important; }
.font-36 { font-size: 36px !important; }
.font-40 { font-size: 40px !important; }
.font-48 { font-size: 48px !important; }

/* Typography - Line Height */
.lineheight-20 { line-height: 20% !important; }
.lineheight-30 { line-height: 30% !important; }
.lineheight-40 { line-height: 40% !important; }
.lineheight-50 { line-height: 50% !important; }
.lineheight-60 { line-height: 60% !important; }
.lineheight-70 { line-height: 70% !important; }
.lineheight-80 { line-height: 80% !important; }
.lineheight-90 { line-height: 90% !important; }
.lineheight-100 { line-height: 100% !important; }

/* Typography - Font Weight */
.font-light { font-weight: 300 !important; }
.font-normal { font-weight: 400 !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.font-black { font-weight: 900 !important; }

/* Typography - Text Decoration */
.nodecoration { text-decoration: none !important; }
.underline { text-decoration: underline !important; }
.line-through { text-decoration: line-through !important; }

/* Flexbox & Grid */
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-full-width { flex: 0 0 100% !important; }
.flex-1 { flex: 1 !important; }
.flex-grow { flex-grow: 1 !important; }
.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.items-start { align-items: flex-start !important; }
.items-center { align-items: center !important; }
.items-end { align-items: flex-end !important; }

/* Borders */
.border { border: 1px solid #dee2e6 !important; }
.border-top { border-top: 1px solid #dee2e6 !important; }
.border-bottom { border-bottom: 1px solid #dee2e6 !important; }
.border-left { border-left: 1px solid #dee2e6 !important; }
.border-right { border-right: 1px solid #dee2e6 !important; }
.border-0 { border: 0 !important; }

/* Border Radius */
.rounded { border-radius: 0.25rem !important; }
.rounded-sm { border-radius: 0.125rem !important; }
.rounded-lg { border-radius: 0.5rem !important; }
.rounded-xl { border-radius: 1rem !important; }
.rounded-full { border-radius: 9999px !important; }

/* Box Shadow */
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important; }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; }

/* Effects - Cursor */
.cursor-p { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-grab { cursor: grab !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* Effects - Opacity */
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* Effects - Transitions */
.transition-all { transition: all 0.3s ease !important; }
.transition-colors { transition: color 0.3s ease, background-color 0.3s ease !important; }
.transition-transform { transition: transform 0.3s ease !important; }

/* Dividers */
hr.gray {
  margin: 10px 5px;
  border-top: 1px solid #d6d3d3;
}
hr.thick {
  margin: 15px 0;
  border-top: 3px solid #dee2e6;
}
hr.dotted {
  margin: 10px 0;
  border-top: 2px dotted #dee2e6;
}

/* Background Gradients */
.bg-gradient-purple {
  background-image: linear-gradient(to right, #667eea, #764ba2) !important;
}
.bg-gradient-sunset {
  background-image: linear-gradient(to right, #ff6b6b, #ffa500) !important;
}
.bg-gradient-ocean {
  background-image: linear-gradient(to right, #2e3192, #1bffff) !important;
}

/* Tabs Component */
.tabs {
  display: flex !important;
  border-bottom: 2px solid #dee2e6 !important;
  margin-bottom: 1rem !important;
}
.tab {
  padding: 0.75rem 1.5rem !important;
  cursor: pointer !important;
  border: none !important;
  background: transparent !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  transition: all 0.3s ease !important;
}
.tab:hover {
  color: #3490dc !important;
  border-bottom-color: #3490dc !important;
}
.tab-active {
  color: #3490dc !important;
  border-bottom-color: #3490dc !important;
  font-weight: 600 !important;
}
.tab-content {
  padding: 1rem 0 !important;
}
.tab-pane {
  display: none !important;
}
.tab-pane-active {
  display: block !important;
}

/* Accordion Component */
.accordion {
  border: 1px solid #dee2e6 !important;
  border-radius: 0.25rem !important;
}
.accordion-item {
  border-bottom: 1px solid #dee2e6 !important;
}
.accordion-item:last-child {
  border-bottom: none !important;
}
.accordion-header {
  padding: 1rem 1.25rem !important;
  cursor: pointer !important;
  background-color: #f8f9fa !important;
  font-weight: 600 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  transition: background-color 0.3s ease !important;
}
.accordion-header:hover {
  background-color: #e9ecef !important;
}
.accordion-header-active {
  background-color: #3490dc !important;
  color: white !important;
}
.accordion-body {
  padding: 1rem 1.25rem !important;
  display: none !important;
}
.accordion-body-active {
  display: block !important;
}
.accordion-icon {
  transition: transform 0.3s ease !important;
}
.accordion-icon-active {
  transform: rotate(180deg) !important;
}