/**
 * Typography & Layout Improvements - TEST VERSION
 * 
 * This stylesheet applies recommended typography improvements for testing.
 * Currently loaded ONLY on lesson 105-vulnerability for testing purposes.
 * 
 * TO REVERT: Remove or comment out the conditional link in lesson-page.njk
 * 
 * Improvements included:
 * 1. Content width standardization
 * 2. Vertical rhythm system
 * 3. Enhanced list styling
 * 4. Improved mobile typography
 * 5. Enhanced content density management
 * 6. Font weight refinement
 * 7. Complete heading hierarchy (H5/H6)
 */

/* ==========================================================================
   CSS Custom Properties - Rhythm System
   ========================================================================== */
:root {
  --rhythm-unit: 1.5rem; /* Base rhythm unit for consistent spacing */
}

/* ==========================================================================
   1. Content Width Standardization
   ========================================================================== */
/* Apply readable width to all main content - ensure it applies across all courses */
.lesson-body .light-block,
.lesson-body .bright-block-details,
.light-block,
.bright-block-details {
  max-width: 65ch !important; /* Optimal reading width (65-75 characters) */
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important; /* Override any top margin */
  margin-bottom: 0 !important; /* Override any bottom margin */
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  width: 100% !important; /* Ensure it takes full width up to max-width */
  box-sizing: border-box !important; /* Include padding in width calculation */
}

/* Override the margin: 20px from course.css */
.lesson-body .light-block {
  margin: 0 auto !important; /* Center with auto margins, no top/bottom */
}

/* Force two-column layout to always be single column */
.light-block .twoColumns {
  column-count: 1 !important; /* Always single column */
  column-gap: 0 !important; /* Remove column gap since it's single column */
}

/* Disable twoColumns-break CSS - no column breaks needed in single column */
.light-block .twoColumns-break,
.light-block .break-column,
.light-block .columnTopTH {
  break-before: auto !important; /* Disable column breaks */
  -webkit-column-break-before: auto !important;
  page-break-before: auto !important;
}

/* Disable two-column layout at all screen sizes */
@media (min-width: 900px) {
  .light-block .twoColumns {
    column-count: 1 !important; /* Force single column even on large screens */
  }
  
  /* Ensure break classes are disabled at all screen sizes */
  .light-block .twoColumns-break,
  .light-block .break-column,
  .light-block .columnTopTH {
    break-before: auto !important;
    -webkit-column-break-before: auto !important;
    page-break-before: auto !important;
  }
}

@media (max-width: 768px) {
  .light-block,
  .bright-block-details {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Quiz forms should use full width on mobile */
  .quiz-panel-form,
  .light-block form:has(table),
  body form:has(table) {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ==========================================================================
   2. Vertical Rhythm System
   ========================================================================== */
/* Heading spacing with consistent rhythm */
h1 {
  margin-top: calc(var(--rhythm-unit) * 2) !important; /* 3rem */
  margin-bottom: var(--rhythm-unit) !important; /* 1.5rem */
}

h2 {
  margin-top: calc(var(--rhythm-unit) * 1.5) !important; /* 2.25rem */
  margin-bottom: calc(var(--rhythm-unit) * 0.75) !important; /* 1.125rem */
}

h3 {
  margin-top: var(--rhythm-unit) !important; /* 1.5rem */
  margin-bottom: calc(var(--rhythm-unit) * 0.75) !important; /* 1.125rem */
}

h4 {
  margin-top: var(--rhythm-unit) !important; /* 1.5rem - reduced from 3rem */
  margin-bottom: calc(var(--rhythm-unit) * 0.5) !important; /* 0.75rem */
  font-weight: 400 !important; /* Regular weight to reduce visual jump from H3 */
}

/* Define H5 and H6 for complete hierarchy */
h5 {
  font-size: 1.25rem !important;
  line-height: 1.4 !important;
  font-weight: 400 !important; /* Regular weight (Roboto supports 300, 400, 700) */
  margin-top: var(--rhythm-unit) !important; /* 1.5rem */
  margin-bottom: calc(var(--rhythm-unit) * 0.5) !important; /* 0.75rem */
  color: var(--senior-text-color, #222222) !important;
}

h6 {
  font-size: 1.125rem !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  margin-top: calc(var(--rhythm-unit) * 0.75) !important; /* 1.125rem */
  margin-bottom: calc(var(--rhythm-unit) * 0.5) !important; /* 0.75rem */
  color: var(--senior-text-color, #222222) !important;
}

/* Consistent paragraph spacing */
p {
  margin-top: 0 !important;
  margin-bottom: var(--rhythm-unit) !important; /* 1.5rem */
}

h4 + p {
  margin-top: calc(var(--rhythm-unit) * 0.5) !important; /* 0.75rem */
}

h5 + p,
h6 + p {
  margin-top: calc(var(--rhythm-unit) * 0.5) !important; /* 0.75rem */
}

/* ==========================================================================
   3. Enhanced List Styling
   ========================================================================== */
/* Restore visual list markers with better styling */
ul, ol {
  padding-left: 0 !important;
  list-style: none !important;
  margin-right: 4rem !important; /* Add right margin to create visual separation from main text */
  margin-top: 1rem !important; /* Add top margin for spacing */
  margin-bottom: 1rem !important; /* Add bottom margin for spacing */
}

li {
  position: relative !important;
  padding-left: 1.5rem !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.4 !important; /* Tighter than body (1.6) since list items are typically shorter lines */
  font-size: var(--senior-body-size, 1.25rem) !important; /* Same size as body for accessibility */
  font-weight: 300 !important;
  color: var(--senior-text-color, #222222) !important;
}

/* Custom bullet for unordered lists */
ul li::before {
  content: "•" !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--senior-text-color, #222222) !important;
  font-weight: 600 !important;
  font-size: 1.2em !important;
}

/* Exclude navigation menu from bullet styling */
.nav__list li::before,
.nav__item::before,
.nav__submenu-item::before {
  content: none !important;
  display: none !important;
}

/* Numbered markers for ordered lists */
ol {
  counter-reset: list-counter !important;
}

ol li {
  counter-increment: list-counter !important;
  padding-left: 2rem !important;
}

ol li::before {
  content: counter(list-counter) "." !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--senior-text-color, #222222) !important;
  font-weight: 500 !important;
  font-size: 1em !important;
}

/* ==========================================================================
   4. Improved Mobile Typography
   ========================================================================== */
@media screen and (max-width: 600px) {
  h1 {
    font-size: 1.75rem !important; /* Increased from 1.5rem */
    line-height: 1.3 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Breadcrumb: meet minimum size */
  .lesson-breadcrumb,
  .lesson-breadcrumb * {
    font-size: 0.875rem !important; /* 14px - meets minimum */
  }
  
  /* Table: maintain readability with scroll indicator */
  .table-responsive .table {
    font-size: 0.875rem !important; /* 14px minimum */
    min-width: 600px !important; /* Allow horizontal scroll */
  }
  
  .table-responsive {
    position: relative !important;
  }
  
  /* Visual indicator for horizontal scroll */
  .table-responsive::after {
    content: "→ Scroll →" !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.75rem !important;
    color: #999 !important;
    pointer-events: none !important;
    background: rgba(255, 255, 255, 0.9) !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 4px !important;
  }
}

/* ==========================================================================
   5. Enhanced Content Density Management
   ========================================================================== */
/* Add breathing room to dense content blocks */
.light-block {
  padding: 2rem 2rem !important; /* Increased from 26px */
  overflow-x: visible !important; /* Allow fanned cards to extend beyond container */
  overflow-y: visible !important;
}

/* Consistent spacing between all elements in light-block */
.light-block > * + * {
  margin-top: 1.5rem !important;
}

/* Better separation for key concepts */
.light-block h4 {
  margin-top: 2.25rem !important; /* Extra space before new concepts */
  padding-top: 1rem !important;
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Improve table readability */
.table-responsive .table {
  font-size: 1rem !important; /* Ensure minimum size */
  line-height: 1.6 !important;
}

.table-responsive .table th {
  font-size: 1rem !important;
  padding: 1rem 0.75rem !important;
}

.table-responsive .table td {
  padding: 0.75rem !important;
  font-size: 1rem !important;
}

/* ==========================================================================
   6. Font Weight Refinement
   ========================================================================== */
/* Increase body weight for better authority and presence */
/* Note: Roboto supports 300, 400, 700. Using 400 for better presence than 300 */
body,
p,
.light-block {
  font-weight: 400 !important; /* More authoritative than 300 */
}

/* Ensure bold text appears with subtle emphasis */
/* Since Roboto only supports 300, 400, 700, we use 400 (regular) with slightly larger size for subtle emphasis */
b,
strong,
.light-block b,
.light-block strong,
.light-block .twoColumns b,
.light-block .twoColumns strong,
.light-block * b,
.light-block * strong {
  font-weight: 400 !important; /* Regular weight (700 is too heavy for body text) */
  font-size: 1.1em !important; /* Slightly larger for subtle emphasis */
  letter-spacing: 0.01em !important; /* Slight letter spacing for distinction */
}

/* Ensure headings maintain proper weights */
/* Note: Roboto supports 300, 400, 700. Using 400 for all headings for consistency */
h1, h2, h3, h4, h5 {
  font-weight: 400 !important;
}

/* Ensure italic text (em) matches paragraph text weight and color */
.light-block em,
.light-block p em {
  font-weight: 300 !important; /* Match body/paragraph weight */
  color: inherit !important; /* Inherit color from parent */
}

/* ==========================================================================
   7. Additional Improvements
   ========================================================================== */
/* Better image spacing */
.light-block img {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* Improve quiz form readability */
form label {
  font-size: var(--senior-body-size, 1.25rem) !important;
  line-height: var(--senior-line-height, 1.6) !important;
  margin-bottom: 0.75rem !important;
}

/* Reduce label margin when followed by a hand - use more specific selectors */
form td:has(label + br + .hand) label,
form:has(label + br + .hand) label,
form table td:has(label + br + .hand) label {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.2 !important; /* Tighter line height */
}

/* Also target labels that are directly followed by a hand */
form label:has(+ .hand),
form td label:has(+ .hand) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Better spacing for form elements */
form div {
  margin-bottom: 0.75rem !important;
}

/* Improve hr spacing */
hr {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

/* ==========================================================================
   8. Hand Display Spacing (Quiz Context)
   ========================================================================== */
/* Adjust spacing for hand displays in quiz contexts */
/* Override the default 60px bottom margin from display-png-hand.css */
/* Target all hands in forms - reduce margins and make container fit content */
form .hand,
.light-block form .hand,
form table .hand,
form table td .hand,
.light-block form table .hand,
.light-block form table td .hand {
  margin: -4rem 0 2.5rem 0 !important; /* Much smaller top margin (-64px) to minimize gap above, increased bottom for spacing below */
  margin-left: 4rem !important; /* Increased left margin to push hand right, ensuring leftmost fanned card is fully visible */
  margin-right: 0 !important; /* Changed from auto - no right margin extension */
  width: fit-content !important; /* Only as wide as the cards */
  max-width: 100% !important; /* Prevent overflow on mobile */
  justify-content: flex-start !important;
  padding: 0 1rem 0 0 !important; /* No left padding - margin provides the space */
  padding-bottom: 2rem !important; /* Add bottom padding to create gap below cards */
  overflow: visible !important; /* Ensure fanned cards aren't clipped */
}

/* Remove padding from table cells containing hands */
form table td:has(.hand),
form td:has(.hand) {
  padding-top: 0 !important;
}

/* Ensure realhand container has enough space for fanned cards */
form .hand .realhand,
.light-block form .hand .realhand,
form table .hand .realhand,
form table td .hand .realhand,
.light-block form table .hand .realhand,
.light-block form table td .hand .realhand {
  overflow: visible !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Remove or minimize spacing from br tags after labels (before hands) */
form label + br,
form td label + br,
form table label + br,
form table td label + br {
  display: none !important; /* Hide br tag completely to remove spacing */
  line-height: 0 !important;
  margin: 0 !important;
  height: 0 !important;
  padding: 0 !important;
}

/* Reduce spacing from br tags after hands (before choices) - halved */
form .hand + br,
.light-block form .hand + br {
  line-height: 1.5rem !important; /* Halved - reduce br spacing after hand */
  margin: 0 !important;
  display: block !important;
  height: 1.5rem !important;
}

/* ==========================================================================
   Enhanced Visual Design & Hierarchy
   ========================================================================== */

/* Enhanced H3 headings with color accent */
.light-block h3 {
  color: #00BFA5 !important; /* Brand teal */
  font-size: 1.75rem !important;
  font-weight: 600 !important;
  margin-top: 3rem !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 3px solid #00BFA5 !important;
  position: relative !important;
}

/* Add decorative element to H3 */
.light-block h3::before {
  content: "◆" !important;
  color: #00BFA5 !important;
  margin-right: 0.75rem !important;
  font-size: 0.9em !important;
}

/* Enhanced H4 with subtle background */
.light-block h4 {
  background: linear-gradient(to right, rgba(0, 191, 165, 0.1), transparent) !important;
  padding: 0.75rem 1rem !important;
  margin-left: -1rem !important;
  margin-right: -1rem !important;
  border-left: 4px solid #00BFA5 !important;
  font-weight: 600 !important;
  color: #212121 !important;
  border-top: none !important; /* Override previous border-top */
}

/* Styled HR dividers */
.light-block hr {
  border: none !important;
  height: 2px !important;
  background: linear-gradient(to right, transparent, #00BFA5, transparent) !important;
  margin: 2.5rem 0 !important;
}

/* Enhanced light-block with subtle depth */
.light-block {
  background: #ffffff !important; /* Change from gray to white for contrast */
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
  border-radius: 8px !important;
}

/* Styled callout for FAQ section headings */
.light-block h4 em {
  background: rgba(251, 140, 0, 0.1) !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 4px !important;
  font-style: normal !important;
  display: inline-block !important;
}

/* Better image treatment */
.light-block img {
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Add visual interest to lists */
.light-block ul li {
  position: relative !important;
  padding-left: 1.75rem !important;
}

.light-block ul li::before {
  content: "▸" !important;
  color: #00BFA5 !important;
  position: absolute !important;
  left: 0 !important;
  font-weight: bold !important;
}

/* Style for "Commonly Asked Questions" section - will apply to all h3, can be refined */

/* Enhanced lesson number dot */
.lesson-number-dot {
  box-shadow: 0 4px 16px rgba(255, 87, 34, 0.3) !important;
  border: 3px solid rgba(255, 255, 255, 0.3) !important;
}

/* ==========================================================================
   Quiz Section Styling - Distinct Panel Design
   ========================================================================== */

/* Style quiz sections - using class added by JavaScript for reliability */
.quiz-panel-header {
  background: linear-gradient(135deg, #e8f5f3 0%, #f0f9f7 100%) !important;
  color: #212121 !important;
  padding: 1.25rem 1.5rem !important;
  border-radius: 8px 8px 0 0 !important;
  margin: 3rem 0 0 0 !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  text-align: left !important;
  border: 2px solid #00BFA5 !important;
  border-bottom: 3px solid #00BFA5 !important;
  box-shadow: 0 2px 8px rgba(0, 191, 165, 0.15) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Add a prominent icon or indicator before quiz heading */
.quiz-panel-header::before {
  content: "✓" !important;
  display: inline-block !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  line-height: 1.75rem !important;
  text-align: center !important;
  background: #00BFA5 !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  margin-right: 0.875rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  vertical-align: middle !important;
  box-shadow: 0 2px 4px rgba(0, 191, 165, 0.3) !important;
}

/* Style quiz form panel */
.quiz-panel-form {
  background: #ffffff !important;
  border: 2px solid #999 !important; /* Changed from #00BFA5 (teal) to mid grey */
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  padding: 2rem 1.5rem !important;
  margin: 0 0 2.5rem 0 !important;
  box-shadow: 0 4px 16px rgba(0, 191, 165, 0.2) !important;
  display: block !important;
  position: relative !important;
}

/* Add a left border accent to the quiz form */
.quiz-panel-form::before {
  display: none !important; /* Hide the teal left border accent */
}

/* Add spacing between multiple quizzes */
.quiz-panel-form + .quiz-panel-header {
  margin-top: 3rem !important;
}

/* Style quiz table */
.quiz-panel-form table {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
}

/* Fallback: Also target forms with tables using :has() for modern browsers */
.light-block form:has(table),
body form:has(table) {
  background: #ffffff !important;
  border: 2px solid #999 !important; /* Changed from #00BFA5 (teal) to mid grey */
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  padding: 2rem 1.5rem !important;
  margin: 0 0 2.5rem 0 !important;
  box-shadow: 0 4px 16px rgba(0, 191, 165, 0.2) !important;
  display: block !important;
  position: relative !important;
}

.light-block form:has(table)::before,
body form:has(table)::before {
  display: none !important; /* Hide the teal left border accent */
}

/* Fallback: Style h4 before form with table using :has() */
.light-block h4:has(+ form table),
body h4:has(+ form table) {
  background: linear-gradient(135deg, #e8f5f3 0%, #f0f9f7 100%) !important;
  color: #212121 !important;
  padding: 1.25rem 1.5rem !important;
  border-radius: 8px 8px 0 0 !important;
  margin: 3rem 0 0 0 !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  text-align: left !important;
  border: 2px solid #00BFA5 !important;
  border-bottom: 3px solid #00BFA5 !important;
  box-shadow: 0 2px 8px rgba(0, 191, 165, 0.15) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.light-block h4:has(+ form table)::before,
body h4:has(+ form table)::before {
  content: "✓" !important;
  display: inline-block !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  line-height: 1.75rem !important;
  text-align: center !important;
  background: #00BFA5 !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  margin-right: 0.875rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  vertical-align: middle !important;
  box-shadow: 0 2px 4px rgba(0, 191, 165, 0.3) !important;
}

/* Style quiz labels */
form label {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: #212121 !important;
  display: block !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 2px solid #f0f0f0 !important;
}

/* Style quiz checkboxes and options */
form input[type="checkbox"] {
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin-right: 0.75rem !important;
  cursor: pointer !important;
  accent-color: #00BFA5 !important;
}

form div {
  padding: 0.75rem 0 !important;
  font-size: 1.0625rem !important;
  transition: background-color 0.2s ease !important;
  border-radius: 4px !important;
  padding-left: 0.5rem !important;
}

form div:hover {
  background-color: rgba(0, 166, 147, 0.05) !important;
}

/* Style the HR in quiz */
form hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(to right, transparent, #00a693, transparent) !important;
  margin: 1.5rem 0 !important;
}

/* ==========================================================================
   Mobile Quiz Fixes - Prevent Horizontal Scrolling
   ========================================================================== */
/* Add box-sizing and overflow control to quiz forms */
.quiz-panel-form,
.light-block form:has(table),
body form:has(table) {
  box-sizing: border-box !important;
  overflow-x: hidden !important; /* Prevent horizontal scrolling */
  overflow-y: visible !important; /* Allow vertical overflow for fanned cards */
  max-width: 100% !important;
  padding-left: 0 !important; /* Remove left padding - hand margin handles positioning */
  position: relative !important; /* Ensure positioning context */
}

/* Ensure parent containers allow cards to extend */
.lesson-body {
  overflow-x: visible !important; /* Allow fanned cards to extend beyond container */
}

.light-block {
  overflow-x: visible !important; /* Allow fanned cards to extend beyond container */
}

/* Mobile-specific padding reduction for quiz forms */
@media screen and (max-width: 600px) {
  /* Full width quiz forms on mobile - no margins */
  .quiz-panel-form,
  .light-block form:has(table),
  body form:has(table) {
    padding: 1.5rem 1rem !important; /* Reduced padding on all sides */
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Ensure quiz table containers fit viewport */
  .quiz-panel-form .table-responsive,
  .light-block form .table-responsive,
  body form .table-responsive {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: visible !important; /* Don't force horizontal scroll */
  }
  
  /* Ensure quiz tables themselves fit and wrap text */
  .quiz-panel-form .table-responsive .table,
  .light-block form .table-responsive .table,
  body form .table-responsive .table {
    min-width: 0 !important; /* Remove any minimum width constraints */
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .quiz-panel-form .table-responsive .table th,
  .quiz-panel-form .table-responsive .table td,
  .light-block form .table-responsive .table th,
  .light-block form .table-responsive .table td,
  body form .table-responsive .table th,
  body form .table-responsive .table td {
    white-space: normal !important; /* Allow text wrapping */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Scale down card hands on mobile to prevent overflow */
  form .hand,
  .light-block form .hand,
  form table .hand,
  form table td .hand,
  .light-block form table .hand,
  .light-block form table td .hand {
    margin-left: 0.5rem !important; /* Minimal left margin */
    margin-right: 0.5rem !important;
    margin-top: calc(-4rem + 20px) !important; /* Move hand down 20px from existing negative margin */
    margin-bottom: 2.5rem !important; /* Increased bottom margin to create gap below */
    max-width: calc(100% - 1rem) !important; /* Fit within container with minimal margins */
    padding-bottom: 2rem !important; /* Add bottom padding to create gap below quiz options */
  }
  
  /* Ensure realhand container accommodates scaled cards */
  form .hand .realhand,
  .light-block form .hand .realhand,
  form table .hand .realhand,
  form table td .hand .realhand,
  .light-block form table .hand .realhand,
  .light-block form table td .hand .realhand {
    max-width: 100% !important;
    overflow: visible !important;
  }
}