/*
----------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------- GENERAL SETTINGS -----------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

body {
  margin: 0;
  background-color: #F5F5F5;
  font-family: Leelewadi;
  font-size: 1.9565vh; /* ~18px on a 920px tall viewport */
  line-height: 1.25;
  color: #333;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------- HEADER SETTINGS ------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.top-bar {
  background-color: #145536;
  color: white;
  padding: 1.087vh 1.042vw; /* ~10px on a 920px tall viewport and ~20px on a 1920px wide viewport */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar-button-container {
  display: flex;
  max-width: 60%;
  width: 60%;
  justify-content: space-between;
  margin: 0 auto; /* Centers the container horizontally */
}

.top-bar-left {
  display: flex;
  align-items: center;
}

.shield-icon {
  width: 1.042vw; /* ~20px on a 1920px wide viewport */
  height: 2.174vh; /* ~20px on a 920px tall viewport */
  margin-right: 0.521vw; /* ~10px on a 1920px wide viewport */
}

.top-bar-right {
  display: flex;
  align-items: center;
}

.contact-us {
  color: white;
  text-decoration: none;
  margin-right: 1.042vw;
  font-size: 1em;
}

.login-button {
  background-color: transparent;
  color: white;
  border: 0.1087vh solid white; /* ~1px on a 920px tall viewport */
  padding: 0.5435vh 0.7813vw; /* ~5px on a 920px tall viewport and ~15px on a 1920px wide viewport */
  border-radius: 0.5435vh; /* ~5px on a 920px tall viewport */
  cursor: pointer;
  font-size: 1em;
}

.login-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Main Navigation Bar */
.main-nav {
    background-color: #145536; /* Optional: Matches the top bar */
    color: white;
    padding: 2.1739vh; /* ~20px on a 920px tall viewport */
    display: flex;
    align-items: center;
}

.main-nav-container {
  display: flex;
  max-width: 60%;
  width: 60%;
  justify-content: space-between;
  margin: 0 auto; /* Centers the container horizontally */
}

.logo {
  margin-right: 1.042vw; /* ~20px on a 1920px wide viewport */
  font-size: 3.2609vh; /* ~30px on a 920px tall viewport */
  font-weight: bold;
  left: 0%;
  width: 25%;
  white-space: nowrap; /* Prevents text wrapping to multiple lines */
}

.logo-link {
    display: inline-block; /* Keeps it inline if needed */
    text-decoration: none; /* No underline by default */
}

.logo-link:hover {
    text-decoration: underline; /* Adds underline on hover */
    text-decoration-color: white; /* Makes the underline white */
}

.nav-links {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

.nav-links ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  flex-grow: 1; /* Allows ul to expand within nav-links */
  justify-content: space-around; /* Evenly spaces the links */
}

.nav-links li {
	/* No margin right now */
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-size: 1.9565vh; /* ~18px on a 920px tall viewport */
}

.nav-links a.active {
  border-bottom: 0.2174vh solid white; /* ~2px on a 920px tall viewport */
}

.nav-links a:hover {
  opacity: 0.8;
}

.language-selector {
  display: flex;
  margin-left: auto;
  align-items: center;
}

.globe-icon {
  width: 1.042vw; /* ~20px on a 1920px wide viewport */
  height: 2.174vh; /* ~20px on a 920px tall viewport */
  margin-right: 0.2604vw; /* ~5px on a 1920px wide viewport */
}

/* Hero Section */
.hero-section {
  background: linear-gradient(to bottom, #145536, #1c754e);
  padding: 1vh 1.0417vw 10.8696vh 1.0417vw; /* ~9px and ~100px on a 920px tall viewport and ~20px and ~20px on a 1920px wide viewport */
  position: relative;
  overflow: hidden;
}

.hero-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    max-width: 60vw; /* ~1152px on a 1920px wide viewport - 60% width */
    margin: 0 auto;
    padding: 2.174vh; /* ~20px on a 920px tall viewport */
}

.hero-left {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-right: 1.042vw; /* ~20px on a 1920px wide viewport */
}

.hero-left h1 {
    margin-bottom: 1vh; /* ~9px on a 920px tall viewport */
    color: white;
    font-size: 1.75em;
    text-align: left;
}

.hero-left p {
    margin-bottom: 2.174vh; /* ~20px on a 920px tall viewport */
    color: white;
    font-size: 1em;
    line-height: 1.5
}

.hero-buttons {
    display: flex;
    gap: 0.7813vw; /* ~15px on a 1920px wide viewport */
    margin-top: 2.174vh; /* ~20px on a 920px tall viewport */
}

.hero-buttons button {
    padding: 1.087vh 1.042vw; /* ~10px on a 920px tall viewport and ~20px on a 1920px wide viewport */
    border-radius: 0.5435vh; /* ~5px on a 920px tall viewport */
    cursor: pointer;
}

.primary-button {
  background-color: #145536;
  color: white;
  padding: 1.087vh 1.042vw; /* ~10px on a 920px tall viewport and ~20px on a 1920px wide viewport */
  border: none;
  border-radius: 2.7174vh; /* ~25px on a 920px tall viewport */
  cursor: pointer;
  font-size: 1em;
}

.primary-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.secondary-button {
  background-color: transparent;
  color: white;
  border: 0.2174vh solid white; /* ~2px on a 920px tall viewport */
  padding: 1.087vh 1.042vw; /* ~10px on a 920px tall viewport and ~20px on a 1920px wide viewport */
  border-radius: 2.7174vh; /* ~25px on a 920px tall viewport */
  cursor: pointer;
  font-size: 1em;
}

.secondary-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Carousel Container */
.carousel {
  position: relative;
  width: 100%;
}

/* Hide all slides by default */
.carousel-slide {
  display: none;
  height: 32.6087vh; /* ~300px on a 920px tall viewport */
}

/* Show the active slide */
.carousel-slide.active {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Carousel Controls (Arrows and Dots) */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2.174vh; /* ~20px on a 920px tall viewport */
}

/* Arrows */
.carousel-arrow {
  background: none;
  border: none;
  font-size: 2.6087vh; /* ~24px on a 920px tall viewport */
  cursor: pointer;
  color: white; /* Matches white dots; adjust if needed */
  margin: 0 0.5208vw; /* ~10px on a 1920px wide viewport */
  padding: 0.5435vh; /* ~5px on a 920px tall viewport */
}

.carousel-dots {
    display: flex;
    align-items: center;
}

.carousel-dots span {
    width: 0.5208vw; /* ~10px on a 1920px wide viewport */
    height: 1.086vh; /* ~10px on a 920px tall viewport */
    background-color: white;
    border-radius: 50%;
    margin: 0 0.2604vw; /* ~5px on a 1920px wide viewport */
    opacity: 0.5;
}

.carousel-dots .active {
    opacity: 1;
}

.dot {
  width: 0.5208vw; /* ~10px on a 1920px wide viewport */
  height: 1.086vh; /* ~10px on a 920px tall viewport */
  background-color: white;
  border-radius: 50%;
  margin: 0 0.2604vw; /* ~5px on a 1920px wide viewport */
  opacity: 0.5;
  cursor: pointer;
}

.dot.active {
  opacity: 1;
}

.hero-right {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center; /* Ensures vertical centering */
}

.illustration {
    width: 100%;
    max-width: 13.0208vw; /* ~250px on a 1920px wide viewport */
    height: auto;
    display: block;
    margin: 0 auto; /* Centers the image horizontally */
}

.-pattern {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10.8696vh; /* ~100px on a 920px tall viewport */
  background: url('cssReferencedPicture/headerBackgroundPattern.png') repeat-x;
  background-size: auto 100%; /* Scales image height to fill container (keeps relative size/aspect); adjust 'auto' to a fixed width like 10vh if tiles need proportional width */
  background-position: bottom; /* Ensures alignment at bottom */
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  body {
    font-size: 1.9565vw; /* Adjust font size to be relative to width for better scaling on narrow screens */
  }

  .top-bar {
    padding: 1.087vh 2vw; /* Increase horizontal padding slightly for touch-friendly spacing */
    flex-direction: column; /* Stack elements vertically if needed */
  }

  .top-bar-button-container {
    max-width: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .top-bar-left, .top-bar-right {
    margin-bottom: 1vh;
  }

  .shield-icon {
    width: 5vw;
    height: 5vw; /* Make square for better mobile fit */
    margin-right: 2vw;
  }

  .contact-us {
    margin-right: 0;
    margin-bottom: 1vh;
  }

  .login-button {
    width: 100%; /* Full width for easier tapping */
  }

  .main-nav {
    padding: 2vh;
  }

  .main-nav-container {
    max-width: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .logo {
    margin-right: 0;
    margin-bottom: 2vh;
    width: 100%;
    text-align: center;
    font-size: 4vw;
  }

  .nav-links {
    width: 100%;
    justify-content: center;
  }

  .nav-links ul {
    flex-direction: column;
    align-items: center;
  }

  .nav-links li {
    margin-bottom: 1vh;
  }

  .nav-links a {
    font-size: 3vw;
  }

  .language-selector {
    margin-left: 0;
    margin-top: 1vh;
  }

  .globe-icon {
    width: 5vw;
    height: 5vw;
    margin-right: 1vw;
  }

  .hero-section {
    padding: 5vh 4vw 10vh 4vw; /* Increase horizontal padding for mobile */
  }

  .hero-content {
    flex-direction: column;
    max-width: 100%;
    padding: 2vh 0;
    align-items: center;
    text-align: center;
  }

  .hero-left, .hero-right {
    width: 100%;
    padding-right: 0;
    align-items: center;
  }

  .hero-left h1 {
    font-size: 1.5em; /* Slightly smaller for mobile */
    text-align: center;
  }

  .hero-left p {
    font-size: 0.9em;
    text-align: center;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 2vh;
    width: 100%;
    justify-content: center;
  }

  .hero-buttons button {
    width: 100%; /* Full width buttons for easy tapping */
    padding: 2vh 4vw;
    font-size: 3vw;
  }

  .primary-button, .secondary-button {
    padding: 2vh 4vw;
    border-radius: 5vh;
    font-size: 3vw;
  }

  .carousel-slide {
    height: auto; /* Allow content to determine height */
  }

  .carousel-controls {
    margin-top: 2vh;
  }

  .carousel-arrow {
    font-size: 5vw;
    margin: 0 2vw;
  }

  .carousel-dots span, .dot {
    width: 3vw;
    height: 3vw;
    margin: 0 1vw;
  }

  .hero-right {
    margin-top: 4vh; /* Add space between left and right sections */
  }

  .illustration {
    max-width: 50vw; /* Larger relative to mobile screen */
  }

  .-pattern {
    height: 10vh; /* Slightly adjust for mobile proportionality */
  }
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------ CHART SETTINGS ------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60%;
    height: 30%;
    margin: 5% auto 0 auto; /* centers the container horizontally */
    margin-bottom: 4vh;
    position: relative;
  	min-height: 400px;
}

#stockInfoContent .chart-container.chart-error .chart-error-msg{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:5;
}

.chart {
    width: 50%;
    height: 30%;
}

.range_container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 5% auto;
}

.form_control {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 1.8vh;
  color: #635a5a;
}

input[type="number"] {
  color: #8a8383;
  width: 2.60417vw; /* ~50px on a 1920px wide viewport */
  height: 3.26087vh; /* ~30px on a 920px tall viewport */
  font-size: 2.17391vh; /* ~20px on a 920px tall viewport */
  border: none;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}

.chartButton {
  display: inline-block;
  padding: 1.087vh 1.042vw; /* ~10px on a 920px tall viewport and ~20px on a 1920px wide viewport */
  font-size: 2.6087vh; /* ~24px on a 920px tall viewport */
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #1c754e;
  border: none;
  border-radius: 1.63044vh; /* ~15px on a 920px tall viewport */
  box-shadow: 0 0.97826vh #999; /* ~9px on a 920px tall viewport */
}

.chartButton:hover {background-color: #145536}

.chartButton:active {
  background-color: #145536;
  box-shadow: 0 0.54348vh #666; /* ~5px on a 920px tall viewport */
  transform: translateY(0.43478vh); /* ~4px on a 920px tall viewport */
}

.sliders_control {
  position: relative;
  min-height: 50px;
  margin: 30px 0;
  height: 50px;
}

/* Invisible track — we don't want the browser to draw anything */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  position: absolute;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0;
  pointer-events: none;         /* only thumbs get events */
  z-index: 2;
}

/* Remove the grey track completely */
input[type="range"]::-webkit-slider-runnable-track {
  background: transparent !important;
  border: none;
  height: 8px;
}
input[type="range"]::-moz-range-track {
  background: transparent !important;
  border: none;
  height: 8px;
}

/* Slimmer & taller thumbs – the 2025 premium look */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 18px;                  /* ← much slimmer (was 30px) */
  height: 36px;                 /* ← slightly taller for elegance */
  background: white;
  border-radius: 9px;           /* perfect pill shape */
  box-shadow: 0 0 0 1.5px #C6C6C6, 0 4px 10px rgba(0,0,0,0.12);
  cursor: pointer;
  margin-top: -14px;            /* (36px height / 2) - (8px track / 2) = -14px */
  z-index: 10;
  transition: all 0.18s ease;
}

input[type="range"]::-moz-range-thumb {
  pointer-events: all;
  width: 18px;
  height: 36px;
  background: white;
  border-radius: 9px;
  box-shadow: 0 0 0 1.5px #C6C6C6, 0 4px 10px rgba(0,0,0,0.12);
  cursor: pointer;
  border: none;
  transition: all 0.18s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 3px #1c754e33, 0 6px 16px rgba(0,0,0,0.2);
  transform: scale(1.08);
}

input[type="range"]::-webkit-slider-thumb:active {
  background: #1c754e;
  box-shadow: 0 0 0 4px #1c754e44;
  transform: scale(1.1);
}

/* Remove your old specific rules */
#fromSlider{
  height: 50px !important;   /* override any height:0 */
  z-index: 5;
}

#toSlider {
    z-index: 10 !important;   /* higher than green bar (z-index:5) and fromSlider */
}

#toSlider::-webkit-slider-thumb,
#toSlider::-moz-range-thumb {
    z-index: 10 !important;
    position: relative;       /* helps some browsers respect z-index */
}

/* Green bar that represents the selected range */
.sliders_control::before {
  content: "";
  position: absolute;
  height: 8px;
  background: #1c754e;
  left: 15px;                     /* thumb radius */
  right: 15px;                    /* thumb radius */
  top: 50%;
  transform: translateY(-50%);
  border-radius: 4px;
  pointer-events: none;
  z-index: 5;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------- STYLE FOR THE STOCK SELECTION BOX -------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.chartStockPickBox {
  width: 49.957%;
  box-sizing: border-box;
  border: 0.21739vh solid #ccc; /* ~2px on a 920px tall viewport */
  border-radius: 0.32609vh; /* ~3px on a 920px tall viewport */
  font-size: 2.17391vh; /* ~20px on a 920px tall viewport */
  background-color: white;
  background-size: 3.26087vh 1.5625vw; /* ~30px on a 920px tall viewport and ~30px on a 1920px wide viewport */
  background-position: 0.32609vh center; /* ~3px on a 920px tall viewport */
  background-repeat: no-repeat;
  padding: 1.30435vh 2.60416vw 1.30435vh 2.60416vw; /* ~12px and ~12px on a 920px tall viewport and ~50px and ~50px on a 1920px wide viewport */
  transition: width 0.4s ease-in-out;
}

.chartStockPickBox:focus {
  width: 49.957%;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------- SELECT DROPDOWN APPEARENCE SETTINGS ------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.custom-select {
  position: relative;
  font-family: Leelewadi;
  width: 20%;
}

.custom-select select {
  display: none; /*hide original SELECT element:*/
}

.select-selected {
  background-color: #1c754e;
  height: 5.43478vh; /* ~50px on a 920px tall viewport */
  border-radius: 2.17391vh; /* ~20px on a 920px tall viewport */
  line-height: 5.43478vh; /* ~50px on a 920px tall viewport */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.08696vh; /* ~10px on a 920px tall viewport */
  text-align: left;
  font-size: 1.73913vh; /* ~24px on a 920px tall viewport */
  position: relative;
  padding-right: 4.34783vh; /* ~40px on a 920px tall viewport */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Remove bottom rounded corners when the dropdown is active */
.select-selected.select-arrow-active {
  border-radius: 2.17391vh 2.17391vh 0 0; /* Rounded corners for top only ~20px on a 920px tall viewport */
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 50%;
  right: 0.54348vh; /* ~5px on a 920px tall viewport */
  width: 0;
  height: 0;
  border: 0.65217vh solid transparent; /* ~6px on a 920px tall viewport */
  border-color: #fff transparent transparent transparent;
}

.select-items div, .select-selected {
  color: #ffffff;
  padding: 0.86957vh 0.83333vw; /* ~8px on a 920px tall viewport and ~16px on a 1920px wide viewport */
  cursor: pointer;
  user-select: none;
  font-size: 1.73913vh;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*style items (options):*/
.select-items {
  position: absolute;
  border-radius: 0 0 2.17391vh 2.17391vh; /* Rounded corners for bottom only ~20px on a 920px tall viewport */
  background-color: #1c754e;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------- SELECT DROPDOWN APPEARENCE SETTINGS 2 ----------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.custom-select2 {
  position: relative;
  font-family: Leelewadi;
  width: 5vw !important;
  height: 3.8vh !important;
}

.custom-select2 select {
  display: none; /*hide original SELECT element:*/
}

.select-selected2 {
  background-color: #1c754e;
  height: 3.8vh; /* ~50px on a 920px tall viewport */
  border-radius: 1.9vh; /* ~20px on a 920px tall viewport */
  line-height: 3.8vh; /* ~50px on a 920px tall viewport */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.83333vw; /* ~10px on a 1920px wide viewport */
  text-align: left;
  font-size: 1.52174vh; /* ~24px on a 920px tall viewport */
  position: relative;
  padding-right: 1.45vw; /* ~40px on a 1920px wide viewport */
  width: 100%; /* Fixed width for the button */
  box-sizing: border-box; /* Ensure padding is included in the width */
}

/* Remove bottom rounded corners when the dropdown is active */
.select-selected2.select-arrow-active2 {
  border-radius: 2.17391vh 2.17391vh 0 0; /* Rounded corners for top only ~20px on a 920px tall viewport */
}

/*style the arrow inside the select element:*/
.select-selected2:after {
  position: absolute;
  content: "";
  top: 50%;
  right: 0.54348vh; /* ~5px on a 920px tall viewport */
  width: 0;
  height: 0;
  border: 0.65217vh solid transparent; /* ~6px on a 920px tall viewport */
  border-width: 0.5vh;
  border-color: #fff transparent transparent transparent;
}

.select-items2 div, .select-selected2 {
  color: #ffffff;
  padding: 0.6vh 0.52vw; /* ~8px on a 920px tall viewport and ~16px on a 1920px wide viewport */
  cursor: pointer;
  user-select: none;
  font-size: 1.43vh;
}

/*style items (options):*/
.select-items2 {
  position: absolute;
  border-radius: 0 0 2.17391vh 2.17391vh; /* Rounded corners for bottom only ~20px on a 920px tall viewport */
  background-color: #1c754e;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  width: 100%; /* Fixed width for the dropdown items */
  box-sizing: border-box; /* Ensure padding is included in the width */
}

/*hide the items when the select box is closed:*/
.select-hide2 {
  display: none;
}

.select-items2 div:hover, .same-as-selected2 {
  background-color: rgba(0, 0, 0, 0.1);
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------- BOTTOM CONTROLS APPEARENCE SETTINGS ------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.controls-container {
    display: flex;
    flex-wrap: nowrap;           /* var: wrap → hold alt på én række, aldrig ombrudt */
    align-items: center;
    gap: 1.2vh 0.8vw;
    width: 100%;                 /* spænder over grafens bredde (som slideren/datoerne) */
    margin-top: 1.5vh;
}
.controls-group { display: flex; align-items: center; gap: 0.8vw; min-width: 0; }   /* min-width:0 → må krympe i stedet for at ombryde */
.controls-group--search { flex: 1 1 auto; min-width: 0; }   /* søgegruppen fylder resten → rækken når helt ud */

.chartButton, .chartStockPickBox { margin: 0; }   /* afstand styres nu af gap på grupperne */

*,
*:before,
*:after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

input[type="date"].form_control_container__time__input {
    background-color: #1c754e;
    padding: 1.08696vh; /* ~10px on a 920px tall viewport */
    font-family: Leelewadi;
    color: #ffffff;
    font-size: 1.95652vh; /* ~18px on a 920px tall viewport */
    border: none;
    outline: none;
    border-radius: 0.54348vh; /* ~5px on a 920px tall viewport */
}

/* If the calendar icon is also styled, keep this part */
input[type="date"].form_control_container__time__input::-webkit-calendar-picker-indicator {
    background-color: #ffffff;
    padding: 0.54348vh; /* ~5px on a 920px tall viewport */
    cursor: pointer;
    border-radius: 0.32609vh; /* ~3px on a 920px tall viewport */
}

.chartTitel {
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin: 0 0 14px 0;
    padding: 3vh 0 0 0;
    border-top: 2px solid #d9d9d9;   /* tynd linje over — som sektions-overskrifterne / billede 5 */
    font-family: 'Leelewadi', Georgia, serif;
    font-weight: 700;
    font-size: 2.9vh;
    text-align: left;
    color: #111;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------ TABLE SETTINGS ------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.table-container {
  margin: auto;
  max-width: 62.5vw; /* ~1200px on a 1920px wide viewport */
  min-height: 100vh;
  overflow: scroll;
  width: 100%;
  margin-top: 10%;
  margin-bottom: 10%;
}
table {
  border-collapse: collapse;
  width: 100%;
}
thead tr {
  border-bottom: 0.1087vh solid #ddd; /* ~1px on a 920px tall viewport */
  border-top: 0.1087vh solid #ddd; /* ~1px on a 920px tall viewport */
  height: 0.1087vh; /* ~1px on a 920px tall viewport */
}
th {
  font-weight: bold;
  height: inherit;
  padding: 0;
}
th:not(:first-of-type) {
  border-left: 0.1087vh solid #ddd; /* ~1px on a 920px tall viewport */
}
th button {
  background-color: #eee;
  border: none;
  cursor: pointer;
  display: block;
  font: inherit;
  height: 100%;
  margin: 0;
  min-width: max-content;
  padding: 0.35rem 0.4rem;
  position: relative;
  text-align: left;
  width: 100%;
}

th button::after {
  position: absolute;
  right: 0.5rem;
}

tbody tr {
  border-bottom: 0.1087vh solid #ddd; /* ~1px on a 920px tall viewport */
}
td {
  padding: 0.5rem 1rem;
  text-align: left;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------- SCREENING TABLE SELECT SETTINGS ----------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.screeningCustom-Select {
    width: 100%;
    font-family: Leelewadi;
    position: relative;
    margin-bottom: 1%;
    margin-top: 1%;
  }

.screeningSelect-Box {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.54348vh 2.08333vw 0.54348vh 0.52083vw;
    border-bottom: 2px solid #d9d9d9;              /* was black → grey */
    cursor: pointer;
    font-weight: 700;
    font-size: clamp(20px, 3vh, 29px);             /* was 4.34782vh → matches step titles */
    color: #111;                                   /* was #000000 */
    text-transform: uppercase;                     /* NEW */
    letter-spacing: .01em;                         /* NEW */
    font-family: 'Leelewadi', Georgia, serif;      /* NEW */
    text-align: left;                              /* NEW (ensure left) */
  }

.screeningSelect-Box::after {
    content: "+";                                  /* was "▶" */
    position: absolute;
    right: 0.52083vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(22px, 3.4vh, 32px);           /* was 3.26087vh */
    color: #111;                                   /* was #000000 */
    width: 2.08333vw;
    height: 4.34783vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Leelewadi', Georgia, serif;
}

.screeningSelect-Box.expanded::after {
    content: "\2212";                              /* minus sign, was "▼" */
}

.screeningOptions-Container {
	visibility: hidden;
	max-height: 0;
    width: 100%;
    transition: visibility 0.3s, max-height 0.3s ease-out;
    border-top: none;
    z-index: 2;
    background: #F5F5F5;
    overflow-y: hidden; /* Add scroll */
    padding: 0.54348vh; /* ~5px on a 920px tall viewport */
    margin-top: 1%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

.screeningOptions-Container.expanded {
	visibility: visible;
	max-height: 54.34783vh;
	overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    background: rgba(255,255,255,.95);
    border-radius: 1.30435vh;
    box-shadow: 0 0 2.4vh rgba(0,0,0,.08), 0 .9vh 1.6vw rgba(0,0,0,.16);
    padding: 2.6vh 1vw;            /* var 1.4vh → lidt højere box */
  }

.screeningOption-Item {
    padding: 0.54348vh 0.52083vw;
    color: #fff;
    margin: 0.21739vh;
    flex: 0 0 calc(20% - 0.43478vh);
    cursor: pointer;
    background: #1c754e;
    border-radius: 0.54348vh;
  }

.screeningOption-Item.selected {
    font-weight: bold;
    background: #145536;
  }

.screeningOption-Item:hover {
    background-color: #14553680;
  }

.green-heading {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.54348vh 2.08333vw 0.54348vh 0.52083vw;
    border-bottom: 2px solid #d9d9d9;              /* was black → grey */
    cursor: pointer;
    font-weight: 700;
    font-size: clamp(20px, 3vh, 29px);             /* was 4.34783vh */
    color: #111;                                   /* was #000000 */
    text-align: left;
    margin-bottom: 2.17391vh;
    text-transform: uppercase;                     /* NEW */
    letter-spacing: .01em;                         /* NEW */
    font-family: 'Leelewadi', Georgia, serif;      /* NEW */
}
  
/*
----------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------- STYLE FOR SCREENING TABLE INPUT BOX ------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.screeningTableInputBox {
  width: 75%;
  box-sizing: border-box;
  border: 0.21739vh solid #ccc; /* ~2px on a 920px tall viewport */
  border-radius: 0.32609vh; /* ~3px on a 920px tall viewport */
  font-size: 1.30435vh; /* Smaller input text - ~12px on a 920px tall viewport */
  background-color: white;
  background-size: 3.26087vh 1.5625vh; /* ~30px on a 920px tall viewport and a 1920px wide viewport */
  background-position: 0.1087vh center; /* ~1px on a 920px tall viewport */
  background-repeat: no-repeat;
  padding: 0.43478vh 0.3125vw; /* ~4px on a 920px tall viewport and 6px on a 1920px wide viewport */
  transition: width 0.4s ease-in-out;
  display: block; /* Ensures it's a block element */
  margin: 0 auto; /* Center the input box */
}

.screeningTableInputBox:focus {
  width: 75%; /* Ensure the width remains the same on focus */
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------- STYLE FOR SCREENING TABLE FOCUS BUTTON -----------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/
/* Basic button styles */
.focus-button {
  background-color: #1c754e;
  color: white; /* White text */
  font-size: 1.30435vh; /* Font size - ~16px on a 920px tall viewport */
  border-radius: 0.54348vh; /* Rounded corners - ~5px on a 920px tall viewport */
  cursor: pointer; /* Pointer cursor on hover */
  transition: all 0.3s ease; /* Smooth transition for focus state */
  margin: 0 auto; /* Center horizontally */
  margin-left: 0.31vw !important;
  width: 10%;
  text-align: center;
}

/* Button hover state */
.focus-button:hover {
  background-color: #145536; /* Darker blue on hover */
}

/* Button focus state */
.focus-button:focus {
  background-color: #145536; /* Slightly different blue background */
}

.logo4 {
  /* Adjust the size and margin of the logo as needed */
  width: 1.04167vw; /* ~40px on a 1920px wide viewport */
  height: 2.17391vh; /* ~40px on a 920px tall viewport */
  margin: 0 auto; /* Center horizontally */
  position: relative;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------- STYLE FOR UP AND DOWN SORT ARROWS -------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.sort-up, .sort-down {
    margin: 0;
    padding: 0.3vh; /* ~5px on a 920px tall viewport */
    border: none;
    background-color: inherit;
    color: white;
    cursor: pointer;
    font-size: 1.2vh;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------- SECTOR SELECT SETTINGS -------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.sectorCustom-Select {
    width: 100%;
    min-width: 20.83333vw; /* ~400px on a 1920px wide viewport */
    font-family: Leelewadi;
    position: relative;
    margin-bottom: 1%;
    margin-top: 1%;
  }

.sectorSelect-Box {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.54348vh 0.52083vw; /* ~5px on a 920px tall viewport and 10px on a 1920px wide viewport */
    padding-left: 5%;
    cursor: pointer;
    font-weight: bold; /* Make text bold */
  	font-size: 1.73913vh; /* ~16px on a 920px tall viewport */
  }

.sectorSelect-Box::after {
    content: "+";
    position: absolute;
    left: 2.5%;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold; /* Make text bold */
  	font-size: 4.34783vh; /* ~40px on a 920px tall viewport */
  }

.sectorSelect-Box.expanded::after {
    content: "-";
    font-size: 1.30435vh; /* ~12px on a 920px tall viewport */
  }

.sectorOptions-Container {
	visibility: hidden;
	max-height: 0;
    width: 100%;
    transition: visibility 0.3s, max-height 0.3s ease-out;
    border-top: none;
    z-index: 2;
    background-color: #1c754e;
    overflow-y: hidden; /* Add scroll */
    padding: 0.54348vh; /* ~5px on a 920px tall viewport */
    margin-top: 1%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

.sectorOptions-Container.expanded {
	visibility: visible;
	max-height: 54.34783vh; /* ~500px on a 920px tall viewport */
	overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

.sectorOption-Item {
    padding: 0.54348vh 0.52083vw; /* ~5px on a 920px tall viewport and 10px on a 1920px wide viewport */
    color: #F5F5F5;
    margin: 0.21739vh; /* ~2px on a 920px tall viewport */
    flex: 0 0 calc(20% - 0.43478vh); /* Adjust the width for 3 items per row - ~4px on a 920px tall viewport */
    cursor: pointer;
    background: #1c754e;
    border-radius: 0.54348vh; /* ~5px on a 920px tall viewport */
    border: 0.21739vh solid #fff; /* ~2px on a 920px tall viewport */
    font-size: 1.30435vh; /* ~12px on a 920px tall viewport */
  }

.sectorOption-Item.selected {
    font-weight: bold;
    background: #145536;
  }

.sectorOption-Item:hover {
    background-color: #14553680;
  }

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------- SCREENING TABLE APPEARENCE SETTINGS -------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.screeningTableContainer{
  width: 60%;
  max-width: 60%;
  overflow-x: auto;
  margin: 0 auto;
  box-sizing: border-box;
  margin-top: 2.17391vh; /* ~20px on a 920px tall viewport */
}

h1 {
margin-top: 0;
text-align: center;
}

.screeningTableInput-container{
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.screeningTableStyle {
  font-family: Leelewadi;
  border-collapse: collapse;
  width: 100%;
}

.screeningTableStyle th {
  border: 0.1087vh solid #ddd;
  font-size: 1.52174vh;
  padding: 0.65vh 0.31vw;
}
.screeningTableStyle td {
  border: 0.1087vh solid #ddd;
  font-size: 1.30435vh;
  padding: 0.5vh 0.42vw;
}

.screeningTableStyle tr:nth-child(even){background-color: #BBBB;}

.screeningTableStyle tr:hover {background-color: #ddd;}

.screeningTableStyle th {
  padding-top: 1.30435vh; /* ~12px on a 920px tall viewport */
  padding-bottom: 1.30435vh; /* ~12px on a 920px tall viewport */
  text-align: left;
  background-color: #1c754e;
  color: white;
}


#rows,
#columns {
padding: 1.08696vh; /* ~10px on a 920px tall viewport */
font-size: 1.73913vh; /* ~16px on a 920px tall viewport */
margin-right: 0.52083vw; /* ~10px on a 1920px wide viewport */
border-radius: 0.54348vh; /* ~5px on a 920px tall viewport */
border: 0.1087vh solid #ccc; /* ~1px on a 920px tall viewport */
}

#rows:focus,
#columns:focus{
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 0.1087vh 0.1087vh rgba(0,0,0,.075), 0 0 0.86957vh rgba(102,175,233,.6); /* ~1px and 8px on a 920px tall viewport */
box-shadow: inset 0 0.1087vh 0.1087vh rgba(0,0,0,.075), 0 0 0.86957vh rgba(102,175,233,.6); /* ~1px and 8px on a 920px tall viewport */
}

.screeningTableButton {
padding: 1.08696vh 1.04167vw; /* ~10px on a 920px tall viewport and ~20px on a 1920px wide viewport */
font-size: 1.73913vh; /* ~16px on a 920px tall viewport */
cursor: pointer;
background-color: #1c754e;
color: white;
border: none;
border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
}

.screeningTableButton:hover {
opacity: 0.8;
}

table {
  border-collapse: collapse;
  width: 100%;
}
.screeningTableHeader-input {
  width: 100%;
  box-sizing: border-box;
  font-weight: bold;
  border: none;
  outline: none;
  text-transform: uppercase;
}

#screeningTable{
  margin-top: 3.26087vh; /* ~30px on a 920px tall viewport */
}

th, td {
  border: 0.1087vh solid black; /* ~1px on a 920px tall viewport */
  padding: 0.86957vh; /* ~8px on a 920px tall viewport */
  text-align: left;
}

.screenTableEditable-cell {
  background-color: #f2f2f2;
  outline: none
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}

.screeningTableStyle td {
  color: black;
}

.screeningTableStyle td a {
  color: black;
  text-decoration: underline; /* Optional: to make links visible */
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------- SCREENING TABLE APPEARENCE SETTINGS -------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

/* Containeren scroller ikke længere selv — det gør scroll-området indeni — så overskrift,
   Update-knap og sektor-vælger står stille mens kun tabellen kører sidelæns. */
.screeningTableContainer { overflow: visible; }

/* Tabellens egen top-margin fjernes; kortet nedenfor styrer nu afstanden. */
#screeningTable { margin-top: 0; }

/* ---- Det hvide "kort" der pakker tabellen (login-container-look: afrundet + blød fade) --------- */
.screenerPanel {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin-top: 2.17391vh;
    padding: 0.7vh 0.42vw;                      /* tynd hvid ramme rundt om tabellen (jf. billede 8) */
    background: rgba(255, 255, 255, 0.95);
    border-radius: 1.30435vh;                   /* samme radius som .login-container */
    /* blød fade hele vejen rundt, en anelse kraftigere nedenunder så det virker "løftet" */
    box-shadow: 0 0 2.4vh rgba(0, 0, 0, 0.08),
                0 0.9vh 1.6vw rgba(0, 0, 0, 0.16);
}

/* ---- Fælles look for begge scrollbars (top + bund): grøn, i sidens stil --------------------- */
.screenerScrollbar-top,
.screenerTable-scroll {
    scrollbar-width: thin;                      /* Firefox */
    scrollbar-color: #145536 #dfe5e2;           /* thumb  track (Firefox) */
}
.screenerScrollbar-top::-webkit-scrollbar,
.screenerTable-scroll::-webkit-scrollbar {
    height: 1.15vh;                             /* tykkelse på den vandrette bar */
}
.screenerScrollbar-top::-webkit-scrollbar-track,
.screenerTable-scroll::-webkit-scrollbar-track {
    background: #dfe5e2;
    border-radius: 1vh;
}
.screenerScrollbar-top::-webkit-scrollbar-thumb,
.screenerTable-scroll::-webkit-scrollbar-thumb {
    background: #1c754e;
    border-radius: 1vh;
    border: 0.2vh solid #dfe5e2;                /* lille indryk så thumb'en læses som en pille */
}
.screenerScrollbar-top::-webkit-scrollbar-thumb:hover,
.screenerTable-scroll::-webkit-scrollbar-thumb:hover {
    background: #145536;
}

/* ---- Top-scrollbar-striben (det lille afrundede felt lige over headerne) ----------------------- */
.screenerScrollbar-top {
    width: 100%;
    height: 1.4vh;                              /* plads til at vise scrollbaren */
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 0.5vh;
    /* JS skjuler striben når tabellen ikke er bred nok til at scrolle */
}
.screenerScrollbar-top-spacer {
    height: 0.1vh;                              /* usynlig; det er dens BREDDE (sat af JS) der driver scroll */
}

/* ---- Det ene element der scroller tabellen sidelæns -------------------------------------------- */
.screenerTable-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;          /* blød momentum-scroll på touch */
}

/* ---- Loader-felt ------------------------------------------------------------------------------- */
/* Skjult indtil JS sætter kortet i en loading-tilstand. */
.screenerLoader-panel {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: center;
}

/* HENTNING (Create / Update): loaderen sidder UNDER kolonne-headerne og strækker kortet ned,
   så du får den høje "venter"-boks fra din skitse. */
.screenerPanel.is-loading .screenerLoader-panel {
    display: flex;
    position: relative;
    min-height: 32vh;
}

/* SORTERING (klient-side): loaderen lægger sig som et blødt slør OVER tabellen, så rækkerne ikke
   hopper op og ned ved hvert klik. */
.screenerPanel.is-sorting .screenerLoader-panel {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 30;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 1.30435vh;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------- SCREENER TABLE - SHORT-WRAPPER, DOUDBLE SCROLLBAR & LOADER-FIELD -----------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/
.screeningTableContainer { overflow: visible; }

/* Tabellens egen top-margin fjernes; kortet nedenfor styrer nu afstanden. */
#screeningTable { margin-top: 0; }

/* ---- Det hvide "kort" der pakker tabellen (login-container-look: afrundet + blød fade) --------- */
.screenerPanel {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin-top: 2.17391vh;
    margin-bottom: 2vh;
    padding: 0.7vh 0;                            /* tynd hvid ramme foroven/forneden; siderne flugter */
    background: rgba(255, 255, 255, 0.95);
    border-radius: 1.30435vh;                   /* samme radius som .login-container */
    box-shadow: 0 0 2.4vh rgba(0, 0, 0, 0.08),
                0 0.9vh 1.6vw rgba(0, 0, 0, 0.16);
}

/* ---- Scroll-containeren: native scrollbar SKJULES helt (vi tegner vores egen) --------------- */
.screenerTable-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;          /* momentum på touch */
    scrollbar-width: none;                       /* Firefox: skjul native */
}
.screenerTable-scroll::-webkit-scrollbar {
    display: none;                               /* WebKit: skjul native */
}

/* ---- Vores egen bjælke (identisk i top og bund, ALTID synlig og samme højde) ---------------- */
/* En almindelig <div> vi selv farver → hverken OS eller browser kan skjule den eller ændre dens
   look. Top og bund bruger præcis samme regel, så de er identiske (jf. billede 1). */
.screenerScrollbar {
    position: relative;
    width: auto;
    height: 1.1vh;                              /* bjælkens tykkelse — samme top og bund */
    margin: 0.45vh 0.5vw;                       /* lille indryk så den ikke rammer de runde hjørner */
    box-sizing: border-box;
    background: #dfe5e2;                         /* track (den lyse rende) */
    border-radius: 1vh;
    /* Bemærk: bliver ALDRIG display:none → pladsen bevares selv uden noget at scrolle (billede 4-fix) */
}

/* Selve "gribe-klodsen" — altid samme grønne look */
.screenerScrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;                                /* JS sætter den rigtige bredde; fuld når intet skal scrolles */
    background: #1c754e;                         /* den mørkegrønne — samme i alle tilstande */
    border-radius: 1vh;
    cursor: pointer;
}
.screenerScrollbar-thumb:hover,
.screenerScrollbar-thumb.dragging {
    background: #145536;                         /* en anelse mørkere ved hover/træk = lidt feedback */
}

/* ---- Loader-felt ------------------------------------------------------------------------------- */
/* Skjult indtil JS sætter kortet i en loading-tilstand. */
.screenerLoader-panel {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: center;
}

/* HENTNING (Create / Update): loaderen sidder UNDER kolonne-headerne og strækker kortet ned,
   så du får den høje "venter"-boks fra din skitse. */
.screenerPanel.is-loading .screenerLoader-panel {
    display: flex;
    position: relative;
    min-height: 32vh;
}

/* SORTERING (klient-side): loaderen lægger sig som et blødt slør OVER tabellen, så rækkerne ikke
   hopper op og ned ved hvert klik. */
.screenerPanel.is-sorting .screenerLoader-panel {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 30;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 1.30435vh;
}

.screenerPanel .screener-error{
  padding: 4vh 1vw;
  text-align: center;
  color: #999;
  font-family: Leelewadi;
  font-size: 1.8vh;
}
.screenerPanel.is-error .screenerTable-scroll,
.screenerPanel.is-error .screenerScrollbar{ display: none; }

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------- SCREENER GUIDE - EDITORIAL TEXT BLOCKS (NEW, SCOPED UNDER .TPG) ------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

/* intro lead / page title (no stripe — this is the hero) */
.tpg .tpLead{padding-bottom:3vh;margin-bottom:.5vh;border-bottom:2px solid #d9d9d9;}
.tpg .tpLead-title{font-family:'Leelewadi',Georgia,serif;font-size:clamp(26px,4vh,40px);font-weight:700;line-height:1.12;color:#111;margin:0 0 1.6vh 0;text-align:left;letter-spacing:.005em;}
.tpg .tpLead-body{font-size:2vh;line-height:1.72;color:#1e1e1e;margin:0;}

/* eyebrow label ( | STEP 1 | , | WHAT YOU CAN SCREEN FOR | ) */
.tpg .tpMini-label,
.tpg .tpStep-eyebrow{display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:clamp(14px,2.1vh,20px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#145536;line-height:1;padding:1px 11px;border-left:2px solid #145536;border-right:2px solid #145536;margin-bottom:1.6vh;}

/* "what you can screen for" block: green stripe hugs the text, black bold lead-ins */
.tpg .tpMini{position:relative;padding:3vh 0 1vh 1vw;}
.tpg .tpMini::before{content:"";position:absolute;left:0;top:3vh;bottom:1vh;width:4px;background:#1c754e;border-radius:2px;}
.tpg .tpMetrics{margin:.4vh 0 0 0;}
.tpg .tpMetrics-row{font-size:2vh;line-height:1.55;color:#1e1e1e;margin:0 0 .9vh 0;}
.tpg .tpMetrics-row b{color:#111;font-weight:700;}

/* a numbered step: green stripe hugs the text + grey divider, black bold sub lead-ins */
.tpg .tpStep{position:relative;padding:3.4vh 0 3.4vh 1vw;border-bottom:2px solid #d9d9d9;}
.tpg .tpStep:last-of-type{border-bottom:none;}
.tpg .tpStep::before{content:"";position:absolute;left:0;top:3.4vh;bottom:3.4vh;width:4px;background:#1c754e;border-radius:2px;}
.tpg .tpStep-title{font-family:'Leelewadi',Georgia,serif;font-size:clamp(20px,3vh,29px);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1.18;color:#111;margin:0 0 1.5vh 0;}
.tpg .tpStep-body{font-size:2vh;line-height:1.72;color:#1e1e1e;margin:0;}
.tpg .tpStep-body + .tpStep-body{margin-top:1.4vh;}
.tpg .tpStep-sub{font-size:2vh;line-height:1.6;color:#1e1e1e;margin:1.4vh 0 0 0;}
.tpg .tpStep-sub + .tpStep-body{margin-top:1.4vh;}
.tpg .tpStep-sub b{color:#111;font-weight:700;}

/* lead paragraph beside a panel (short block — border-left stripe already hugs it) */
.tpg .tpPanelLead{font-size:2vh;line-height:1.72;color:#1e1e1e;margin:1.6vh 0 .4vh 0;padding:.4vh 0 .4vh .9vw;border-left:4px solid #1c754e;}
.tpg .tpPanelLead b{color:#145536;font-weight:700;}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------- SCREENER HEADER INFO ---------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/
/* the "i" inside each green header cell */
.screenerInfo-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:18px;height:18px;min-width:18px;margin:0 0 0 5px;padding:0;vertical-align:middle;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.75);
    background:rgba(255,255,255,.14);
    color:#fff;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;
    font-size:12px;line-height:1;cursor:pointer;
    transition:background .15s ease,color .15s ease;
}
.screenerInfo-btn:hover,
.screenerInfo-btn:focus{background:#fff;color:#145536;outline:none;}

/* the pop-out description card */
.screenerInfo-popup{
    position:fixed;z-index:10001;display:none;
    min-width:220px;max-width:320px;width:max-content;
    background:#fff;border-radius:10px;border-top:4px solid #1c754e;
    box-shadow:0 12px 36px rgba(0,0,0,.22);
    padding:13px 16px 15px;
    font-family:'Leelewadi',Georgia,serif;color:#222;text-align:left;
}
.screenerInfo-popup.open{display:block;}
.screenerInfo-close{
    position:absolute;top:5px;right:9px;background:none;border:none;
    font-size:19px;line-height:1;color:#9a9a9a;cursor:pointer;padding:2px;
}
.screenerInfo-close:hover{color:#333;}
.screenerInfo-title{font-weight:700;font-size:16px;color:#145536;margin:0 20px 0 0;line-height:1.2;}
.screenerInfo-subtitle{font-size:12.5px;font-weight:700;color:#1c754e;margin-top:9px;}
.screenerInfo-text{font-size:13.5px;line-height:1.55;color:#222;margin:3px 0 0;}
.screenerInfo-loading{font-size:13px;color:#888;}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------ FOOTER SETTINGS -----------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.footer {
    background: linear-gradient(to bottom, #1c754e, #145536);
    color: white;
    padding: 2.17391vh; /* ~20px on a 920px tall viewport */
    font-family: 'Leelewadi';
}

.footer-columns {
    display: flex;
    max-width: 80%;
    width: 80%;
    margin: 0 auto; /* Centers the container horizontally */
    align-items: flex-start; /* Aligns all columns at the top */
}

.column1 {
    flex: 1;
    padding: 0 0.52083vw; /* ~10px on a 1920px wide viewport */
    display: flex;
    flex-direction: column; /* Stacks content vertically */
    align-items: flex-start; /* Aligns content to the left */
    min-height: 200px; /* Ensures consistent minimum height across columns */
}

.column2 {
    flex: 1;
    padding: 0 0.78125vw; /* ~15px on a 1920px wide viewport */
    display: flex;
    justify-content: center;
    align-items: center;
}

h3 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.95652vh; /* ~18px on a 920px tall viewport */
    margin-bottom: 1.08696vh; /* ~10px on a 920px tall viewport */
}

h4 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.73913vh; /* ~16px on a 920px tall viewport */
    margin-top: 1.63044vh; /* ~15px on a 920px tall viewport */
    margin-bottom: 0.54348vh; /* ~5px on a 920px tall viewport */
}

p {
    font-size: 1.52174vh; /* ~14px on a 920px tall viewport */
    margin: 0.54348vh 0; /* ~5px on a 920px tall viewport */
}

.description {
    text-align: justify;
}

.secondary {
    color: #B0B0B0;
    font-size: 1.30435vh; /* ~12px on a 920px tall viewport */
}

ul {
    list-style: none;
    padding: 0;
}

li {
    margin-bottom: 0.54348vh; /* ~5px on a 920px tall viewport */
}

a {
    color: white;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 80%;
    width: 80%;
    margin: 0 auto; /* Centers the container horizontally */
    margin-top: 4.34783vh; /* ~40px on a 920px tall viewport */
}

.social-media {
    display: flex;
    justify-content: center;
    gap: 1.63044vh; /* ~15px on a 920px tall viewport */
    align-items: center;
}

/* Payment Methods Header */
.footer-bottom h2 {
    font-size: 1.73913vh; /* ~16px on a 920px tall viewport */
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
    text-align: center;
}

.payment-methods {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.52083vw; /* ~10px on a 1920px wide viewport */
    flex-wrap: wrap;
}

.payment-methods p {
    text-transform: uppercase;
    font-size: 1.52173vh; /* ~14px on a 920px tall viewport */
    margin: 0.54348vh 0; /* ~5px on a 920px tall viewport */
}

.logo2 {
    width: 2.60417vw; /* ~50px on a 1920px wide viewport */
    height: auto;
}

.logo3 {
    width: 1.5625vw; /* ~30px on a 1920px wide viewport */
    height: auto;
}

.payment-icon {
    width: 2.08333vw; /* ~40px on a 1920px wide viewport */
    height: 3.26087vh; /* ~30px on a 920px tall viewport */
    margin: 0 0.54348vh; /* ~5px on a 920px tall viewport */
    filter: grayscale(100%);
}

/* socialMediaContainer styling (default state) */
.socialMediaContainer {
    width: 2.60417vw; /* ~50px on a 1920px wide viewport */
    height: 5.43478vh; /* ~50px on a 920px tall viewport */
    background: linear-gradient(to bottom, #145536, #1c754e);
    border-radius: 1.08696vh; /* ~10px on a 920px tall viewport */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

/* Hover state */
.socialMediaContainer:hover {
    background: #145536;
}

/* Specific styling for disclaimer button */
#disclaimerButton {
    color: white;
    background-color: transparent;
    cursor: pointer;
    text-align: left;
    font-family: 'Leelewadi';
    font-size: 1.52174vh; /* Matches p tag size for consistency */
    font-weight: normal;
    border: none;
    outline: none;
    padding: 0.5em 0; /* Adds vertical spacing instead of offset */
    width: 100%; /* Ensures it takes full column width */
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------ BACK TO TOP BUTTON SETTINGS -----------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

#backToTop {
    position: fixed;
    bottom: 2.17391vh; /* ~20px on a 920px tall viewport */
    left: 1.04167vw; /* ~20px on a 1920px wide viewport */
    z-index: 1000;
    display: none;
    background-color: #1c754e;
    color: white;
    border: none;
    border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
    padding: 1.08696vh 1.04166vw; /* ~10px on a 920px tall viewport & 20px on a 1920px wide viewport */
    font-family: Leelewadi;
    font-weight: bold;
    font-size: 1.73913vh; /* ~16px on a 920px tall viewport */
    cursor: pointer;
    transition: opacity 0.3s, background-color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

#backToTop:hover {
    background-color: #145536;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------- DISCLAIMER STYLE -----------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

/* Button Styling */
#disclaimerButton {
    color: white;
    background-color: transparent;
    cursor: pointer;
    text-align: left;
    font-family: Leelewadi;
    font-size: 1.73913vh; /* Reasonable default to match body text - ~16px on a 920px tall viewport */
    font-weight: normal; /* Matches typical non-bold text */
    border: none; /* Removes any default border */
    outline: none; /* Removes the focus outline */
    top: -5.43478vh; /* ~50px on a 920px tall viewport */
}

#disclaimerButton:hover {
    outline: none; /* Removes the default outline */
    text-decoration: underline;
}

/* Popup Styling */
#disclaimerPopup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 0.1087vh solid #ccc; /* Light gray border for a paper edge - ~1px on a 920px tall viewport */
    box-shadow: 0 0.43478vh 1.30435vh rgba(0,0,0,0.15); /* Slightly stronger shadow for depth - ~4px & 12px on a 920px tall viewport */
    z-index: 1000;
    padding: 4.34782vh 2.60417vw; /* Generous padding for document margins - ~40px on a 920px tall viewport & 50px on a 1920px wide viewport */
    width: 60%; /* Narrower width for a document feel */
    max-height: 80%; /* Limits height to fit screens */
    overflow-y: auto; /* Scrollable if content overflows */
    font-family: Leelewadi;
    color: black; /* Standard black text */
    line-height: 1.8; /* Increased for better readability */
}

/* Header Styling */
#disclaimerHeader {
    text-align: center;
    margin-bottom: 3.26087vh; /* ~30px on a 920px tall viewport */
}

#disclaimerHeader h1 {
    font-size: 3.04348vh; /* Prominent title - ~28px on a 920px tall viewport */
    font-weight: bold;
    margin-bottom: 1.08696vh; /* ~10px on a 920px tall viewport */
}

#disclaimerHeader p {
    font-size: 1.52174vh; /* Smaller for date or subtitle - ~14px on a 920px tall viewport */
    color: #555; /* Gray for less emphasis */
}

/* Paragraph Styling */
#disclaimerPopup p {
    font-size: 1.73913vh; /* Readable text size - ~16px on a 920px tall viewport */
    text-align: justify; /* Formal, justified alignment */
    margin-bottom: 2.17391vh; /* Spacing between paragraphs - ~20px on a 920px tall viewport */
    line-height: 1.8; /* Matches the popup's line height */
}

/* List Styling */
#disclaimerPopup ul {
    font-size: 1.73913vh; /* Consistent with paragraphs - ~16px on a 920px tall viewport */
    margin-bottom: 2.17391vh; /* Spacing after lists - ~20px on a 920px tall viewport */
    padding-left: 1.5625vw; /* Indentation for clarity - ~30px on a 1920px wide viewport */
    list-style-type: disc; /* Classic bullet points */
}

/* Footer Styling */
#disclaimerFooter {
    text-align: center;
    margin-top: 3.26087vh; /* ~30px on a 920px tall viewport */
    font-size: 1.30435vh; /* Smaller text for footer - ~12px on a 920px tall viewport */
    color: #777; /* Light gray for subtlety */
}

/* Close Button Styling */
#closeButton {
    position: absolute;
    top: 1.08696vh; /* ~10px on a 920px tall viewport */
    right: 0.52083vw; /* ~10px on a 1920px wide viewport */
    cursor: pointer;
    font-size: 1.73913; /* Smaller to be unobtrusive - ~16px on a 920px tall viewport */
    color: #666; /* Subtle gray */
}

#closeButton:hover {
    color: #333; /* Darker gray on hover */
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------- AD SIDE BAR STYLE ----------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

/* Left sidebar */
.left-sidebar {
  position: fixed;
  left: 0;
  width: 15.625vw; /* Narrow width for elongated proportion - ~300px on a 1920px wide viewport */
  border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
  background-color: #f1f1f1;
  z-index: 1000; /* Ensure above content but consider if header/footer need higher */
  overflow: hidden;
  margin-left: 1.04167vw; /* ~20px on a 1920px wide viewport */
  /* Add background image and repeat */
  background: url('cssReferencedPicture/adIllustration.png') repeat-y;
}

/* Right sidebar */
.right-sidebar {
  position: fixed;
  right: 0;
  width: 15.625vw; /* Narrow width for elongated proportion - ~300px on a 1920px wide viewport */
  border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
  background-color: #f1f1f1;
  z-index: 1000;
  overflow: hidden;
  margin-right: 1.04167vw; /* ~20px on a 1920px wide viewport */
  /* Add background image and repeat */
  background: url('cssReferencedPicture/adIllustration.png') repeat-y;
}

/* Media query remains unchanged */
@media screen and (max-width: 768px) {
  .left-sidebar, .right-sidebar {
    display: none;
  }
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------- STICKY AD SIDE BAR STYLE ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

/* Sticky left sidebar */
.sticky-left-sidebar {
  position: fixed;
  left: 0;
  width: 15.625vw; /* Narrow width for elongated proportion - ~300px on a 1920px wide viewport */
  height: 86.95652vh; /* ~800px on a 920px tall viewport */
  border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
  background-color: #f1f1f1;
  z-index: 1000;
  overflow: hidden;
  margin-left: 1.04167vw; /* ~20px on a 1920px wide viewport */
  /* Add background image and repeat if desired 
  background: url('cssReferencedPicture/adIllustration.png') repeat-y;
  */
}

/* Sticky right sidebar */
.sticky-right-sidebar {
  position: fixed;
  right: 0;
  width: 15.625vw; /* Narrow width for elongated proportion - ~300px on a 1920px wide viewport */
  height: 86.95652vh; /* ~800px on a 920px tall viewport */
  border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
  background-color: #f1f1f1;
  z-index: 1000;
  overflow: hidden;
  margin-right: 1.04167vw; /* ~20px on a 1920px wide viewport */
  /* Add background image and repeat if desired 
  background: url('cssReferencedPicture/adIllustration.png') repeat-y;
  */
}

/* Media query to hide on small screens, matching the original */
@media screen and (max-width: 768px) {
  .sticky-left-sidebar, .sticky-right-sidebar {
    display: none;
  }
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------- STICKY AD HORIZONTAL BAR STYLE ---------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

/* Sticky horizontal bar */
.sticky-horizontal-bar {
  position: fixed;
  left: 50%; /* Position left edge at center */
  transform: translateX(-50%); /* Shift left by half its width to center perfectly */
  width: 52.08333vw; /* Fixed width on desktop; adjust as needed - ~1000px on a 1920px wide viewport */
  height: 32.6087vh; /* Fixed height; adjust as needed for your content - ~300px on a 920px tall viewport */
  border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
  background-color: #f1f1f1;
  z-index: 1000;
  overflow: hidden;
  /* Add background image and repeat horizontally if desired 
  background: url('cssReferencedPicture/adIllustration.png') repeat-x;
  */
}

/* Media query to scale width on phone screens (assuming phone as max-width: 768px, matching your existing query) */
@media screen and (max-width: 768px) {
  .sticky-horizontal-bar {
    width: 100%; /* Scale to full width on phone */
    left: 0; /* Align to left for full width */
    transform: none; /* Remove transform as it's full width */
    margin: 0; /* Remove any margins if needed */
  }
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------- HORIZONTAL AD BAR STYLE ---------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

/* Simple horizontal bar */
.horizontal-bar {
  display: flex;
  justify-content: center;
  width: 57.29167vw; /* Full width by default - ~1100px on a 1920px wide viewport */
  height: 32.6087vh; /* Adjust height as needed - ~300px on a 920px tall viewport */
  border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
  background-color: #f1f1f1;
  overflow: hidden;
  margin: 3vh auto 8vh auto;
  /* Optional: Add background image and repeat horizontally 
  background: url('cssReferencedPicture/adIllustration.png') repeat-x;
  */
}

/* Optional: Media query to adjust on smaller screens if desired */
@media screen and (max-width: 768px) {
  .horizontal-bar {
    height: 50px; /* Example: Smaller height on mobile */
  }
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------- VIDEO AD STYLE -----------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

#videoAdContainer {
	display: flex;
    width: 60%;
    height: 100%; /* Fill parent's height */
    margin: 6vh auto; /* Center it on the page - ~20px on a 1920px wide viewport */
    border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
    overflow: hidden;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------- LEFT & RIGHT TEXTBOX, VIDEO AD CONTAINER -----------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.leftRightContainer {
    display: flex;
    flex-direction: row; /* For side-by-side layout */
    align-items: stretch; /* Stretch items to fill height */
    justify-content: center; /* Horizontally centers the content */
    gap: 1.04167vw; /* Adds space between text and video - ~20px on a 1920px wide viewport */
    width: 60%;
    height: 34.722%; /* Set fixed height instead of min-height for % to apply */
    margin: 5% auto 0 auto; /* Centers the container horizontally */
    margin-bottom: 10%;
}

.leftRightTextbox {
    width: calc(60% - 0.52083vw); /* Fill half of container minus half gap - ~10px on a 1920px wide viewport */
    height: 100%; /* Fill parent's height */
    border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
    font-family: Leelewadi;
    color: #333;
    box-sizing: border-box; /* Ensures padding is included in width/height */
    overflow: auto; /* Handles content overflow if needed */
}

#videoAdContainerLeftRight {
    width: calc(40% - 0.52083vw);  /* Fill half of container minus half gap - ~10px on a 1920px wide viewport */
    height: 100%; /* Fill parent's height */
    border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
    flex-shrink: 0; /* Prevents shrinking in flex layout */
    margin: 0; /* Remove auto margin to fit side-by-side */
}

#videoAdContainerLeftRight video {
    width: 100%;
    height: 100%;
    border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------- LEFT & RIGHT TEXTBOX, VIDEO AD CONTAINER 2 ----------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.leftRightContainer2 {
    display: flex;
    flex-direction: row; /* For side-by-side layout */
    align-items: stretch; /* Stretch items to fill height */
    justify-content: center; /* Horizontally centers the content */
    gap: 1.04167vw; /* Adds space between text and video - ~20px on a 1920px wide viewport */
    width: 80%;
    height: 34.722%; /* Set fixed height instead of min-height for % to apply */
    margin: 5% auto 0 auto; /* Centers the container horizontally */
    margin-bottom: 10%;
}

.leftRightTextbox2 {
    width: calc(50% - 0.52083vw); /* Fill half of container minus half gap - ~10px on a 1920px wide viewport */
    height: 100%; /* Fill parent's height */
    border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
    font-family: Leelewadi;
    color: #333;
    box-sizing: border-box; /* Ensures padding is included in width/height */
    overflow: auto; /* Handles content overflow if needed */
}

#symbolPrompt .leftRightTextbox2 {
  overflow: visible;
}

#videoAdContainerLeftRight2 {
    width: calc(50% - 0.52083vw);  /* Fill half of container minus half gap - ~10px on a 1920px wide viewport */
    height: 100%; /* Fill parent's height */
    border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
    flex-shrink: 0; /* Prevents shrinking in flex layout */
    margin: 0; /* Remove auto margin to fit side-by-side */
}

#videoAdContainerLeftRight2 video {
    width: 100%;
    height: 100%;
    border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------- HIDE AD STYLE ------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

/* Hide all ad containers for paying users */
body.ad-free .left-sidebar,
body.ad-free .right-sidebar,
body.ad-free .sticky-left-sidebar,
body.ad-free .sticky-right-sidebar,
body.ad-free .horizontal-bar,
body.ad-free .sticky-horizontal-bar,
body.ad-free #videoAdContainer,
body.ad-free #videoAdContainerLeftRight,
body.ad-free #videoAdContainerLeftRight2,
body.ad-free .leftRightContainer,
body.ad-free .co-video-ad {
    display: none !important;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------- POLICY PAGE -------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

/* Fede etiketter i sort i stedet for sitets grønne <strong> */
.policy-page strong { color: #000; }

/* Gør links tydelige på den lyse politik-baggrund */
.policy-page a {
    color: #1b5e20;            /* mørkegrøn — skift til din præcise brand-farve */
    text-decoration: underline;
}
.policy-page a:hover { text-decoration: none; }

/* Indryk de punktopstillede lister */
.policy-page ul {
    margin: 0.5em 0;
    padding-left: 1.75em;
    list-style-type: disc;     /* sæt til 'none' hvis du helt vil undvære bullets */
}
.policy-page li { margin-bottom: 0.5em; }

/* Cookietabel (flyttet ud af HTML'en) */
.policy-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.95em;
}
.policy-table th, .policy-table td {
    border: 1px solid #ddd;
    padding: 0.6em 0.8em;
    text-align: left;
    vertical-align: top;
}
.policy-table th { background: #f5f5f5; font-weight: bold; color: #000; }

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------- TEXT BOX CONTAINERS AND STYLES ---------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

/* Main text container, centered and taking up 60% of viewport width */
.mainTextContainer {
    display: flex;
    flex-direction: column;
    width: 60%;
    margin: 6vh auto; /* Centers horizontally, matches your margin specs */
    box-sizing: border-box;
}

/* Full-width textbox for main heading and intro paragraph */
.full-width-textbox {
    width: 100%;
    border-radius: 0.43478vh; /* ~4px on a 920px tall viewport */
    font-family: Leelewadi;
    color: #333;
    box-sizing: border-box;
    overflow: auto; /* Handles content overflow if needed */
}

/* Styling for feature list items */
.leftRightTextbox ul {
    padding-left: 2vw;
    margin: 0;
}

.leftRightTextbox li {
    margin-bottom: 1vh;
}

/* Responsive headings */
.mainTextContainer h1 {
    font-size: 3.2609vh; /* ~30px on a 920px tall viewport */
    margin-bottom: 1vh;
    color: #000000; /* Dark teal for emphasis, matches professional tone */
    text-align: left; /* Align h1 to the left */
}

.mainTextContainer h2 {
    font-size: 2.3913vh; /* ~22px on a 920px tall viewport */
    margin-top: 2vh;
    margin-bottom: 1vh;
    color: #000000;
    text-align: left; /* Align h2 to the left */
}

.mainTextContainer p, li {
    font-size: 1.9565vh; /* Matches body font size */
    line-height: 1.25;
}

/* Ensure text remains readable on smaller screens */
@media (max-width: 768px) {
    .header-container {
        width: 90%;
        margin: 3% auto 5% auto;
    }

    .leftRightTextbox {
        width: 100%; /* Full width on smaller screens */
    }

    .full-width-textbox {
        padding: 1vh 3vw;
    }
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------- HARMONISING -------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.mainTextContainer h1:not(.tpLead-title):not(.chartTitel){
    color:#111; padding-bottom:1.4vh; margin-bottom:2.4vh; border-bottom:2px solid #d9d9d9;
}
#stockInfoContent .mainTextContainer h1:not(.chartTitel){
    border-bottom:none; padding-bottom:0; margin-bottom:1vh;
}
.mainTextContainer .full-width-textbox h2{
    color:#111; padding-top:3vh; margin-top:3.4vh; border-top:2px solid #d9d9d9;
}
.mainTextContainer .leftRightTextbox h2,
.mainTextContainer .leftRightTextbox2 h2{
    color:#111;
}
.mainTextContainer .leftRightTextbox,
.mainTextContainer .leftRightTextbox2{
    border-left:4px solid #1c754e; padding-left:1vw;
}
.mainTextContainer li strong{ color:#145536; }

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------- TICKER SEARCH ------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/
/* Wrapper om et søge-input, så resultatlisten kan ligge absolut lige under feltet. */
.ticker-search-wrapper {
  position: relative;
  width: 100%;
}
.ticker-search-wrapper input {
  width: 100%;
  box-sizing: border-box;
}

/* Selve resultatlisten (skjult indtil JS viser den). */
.ticker-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 1vh);              /* luft mellem felt og liste (får den til at "springe ned") */
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-top: 0.4vh solid #1c754e;    /* grøn accent-kant, som sidens .screenerInfo-popup */
  border-radius: 1vh;                 /* samme runde look som .login-container / .screenerPanel */
  box-shadow: 0 0 2.4vh rgba(0,0,0,.08), 0 0.9vh 1.6vw rgba(0,0,0,.16);  /* sidens kort-skygge */
  max-height: 46vh;
  overflow: hidden auto;              /* klipper rækkerne pænt til de runde hjørner */
  font-family: 'Leelewadi', Georgia, serif;   /* samme font-stak som resten af siden */
}

/* Én række i listen. */
.ticker-search-item {
  display: flex;
  align-items: center;
  gap: 0.8vw;
  padding: clamp(8px, 1.4vh, 14px) clamp(10px, 1vw, 18px);   /* lidt luftigere */
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.15s ease;
}
.ticker-search-item:last-child { border-bottom: none; }

/* Hover + tastatur-markering: sidens grønne tone i stedet for grå. */
.ticker-search-item:hover,
.ticker-search-item.active {
  background-color: rgba(20, 85, 54, 0.07);
}

/* Ticker-symbolet: sidens grønne accent + fed, fast min-bredde så navnene flugter. */
.ticker-search-symbol {
  color: #145536;
  font-weight: 700;
  flex: 0 0 auto;
  min-width: 6ch;
  font-size: clamp(13px, 1.9565vh, 18px);
}

/* Firmanavn: mørkt, fylder resten, forkortes med ellipsis hvis for langt. */
.ticker-search-name {
  color: #222;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(13px, 1.9565vh, 18px);
}

/* Land + børs: grå, højrestillet, lidt mindre. */
.ticker-search-meta {
  color: #8c8c8c;
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 1vw;
  white-space: nowrap;
  font-size: clamp(11px, 1.6vh, 15px);
}

/* Besked-række (fx "accepter TOS" eller ingen resultater). */
.ticker-search-empty {
  padding: clamp(10px, 1.6vh, 18px);
  color: #8c8c8c;
  font-size: clamp(12px, 1.7vh, 16px);
  font-family: 'Leelewadi', Georgia, serif;
}

.chart-search-wrapper {
  display: inline-block;
  flex: 1 1 auto;
  width: auto;
  margin: 0;
}
.chart-search-wrapper .chartStockPickBox {
  width: 100%;
  margin: 0;
}
@media (max-aspect-ratio: 7/6) {
  .chart-search-wrapper { width: auto; }   /* var: 100% → bliv i rækken (ikke fuld bredde/stak) */
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------- CONTACT FORM STYLES ---------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

form {
     display: flex;
     flex-direction: column;
     gap: 1vh;
 }

 input, select, textarea {
     padding: 1vh 1vw;
     border: 1px solid #ccc;
     border-radius: 0.43478vh;
     font-family: Leelewadi, sans-serif;
     font-size: 1.9565vh;
     color: #333;
     background-color: #F5F5F5;
     box-sizing: border-box;
 }

 textarea {
     resize: vertical;
     min-height: 20vh;
 }

 button {
     padding: 1vh 2vw;
     background-color: #1c754e;
     color: #FFFFFF;
     border: none;
     border-radius: 0.43478vh;
     cursor: pointer;
     font-size: 1.9565vh;
 }

 button:hover {
     background-color: #145536;
 }

 .error {
     color: red;
     font-size: 1.5vh;
 }

 /* Success confirmation modal */
 .contactFormModal {
     display: none;
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: #FFFFFF;
     padding: 2vh 3vw;
     border-radius: 0.43478vh;
     box-shadow: 0 0.21739vh 0.43478vh rgba(0, 0, 0, 0.2);
     text-align: center;
     z-index: 1000;
 }

 .contactFormModal p {
     font-size: 2vh;
     color: #1A3C34;
 }

 .contactFormModal button {
     margin-top: 2vh;
 }

 .contactFormOverlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 999;
 }

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------- FINANCIAL ENCYCLOPEDIA --------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

/* Hvert emne er nu ren prosa i PolicyPage-stil (intet kort), med luft imellem. */
.encyclopedia-entry { margin: 0 0 4vh 0; }

/* Klikbar header (fjern browserens standard-trekant). Hele title+intro-området folder ud/ind. */
.encyclopedia-entry > summary {
  list-style: none;
  cursor: pointer;
  display: block;
}
.encyclopedia-entry > summary::-webkit-details-marker { display: none; }

/* Titel-række: fed overskrift + grå streg under (som PolicyPage), med +/- yderst til højre. */
.encyclopedia-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1vw;
  font-family: 'Leelewadi', Georgia, serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: 3vh;
  color: #111;
  padding-bottom: 1.4vh;
  border-bottom: 2px solid #d9d9d9;
}
.encyclopedia-title::after {
  content: "+";
  flex: 0 0 auto;
  font-size: clamp(22px, 3.4vh, 32px);
  line-height: 1;
  color: #111;
  transition: color 0.15s ease;
}
.encyclopedia-entry[open] .encyclopedia-title::after { content: "\2212"; }          /* minus når åben */
.encyclopedia-entry > summary:hover .encyclopedia-title::after { color: #145536; }  /* lille hover-hint */

/* Lille intro — altid synlig. Klippes til 3 linjer når sammenklappet, fuld når udfoldet. */
.encyclopedia-intro {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 1.6vh;
  font-size: clamp(15px, 2.1vh, 20px);
  line-height: 1.6;
  color: #1e1e1e;
}
.encyclopedia-entry[open] .encyclopedia-intro {
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Brødtekst — vises når emnet foldes ud (samme prosa som PolicyPage). */
.encyclopedia-body p {
  font-size: clamp(15px, 1.9565vh, 19px);
  line-height: 1.72;
  color: #1e1e1e;
  margin: 1.6vh 0 0 0;
}

/* Skjul encyklopædi-annoncer for betalende (ad-free) brugere, ligesom sidens øvrige annoncer. */
body.ad-free .encyclopedia-ad { display: none !important; }
.encyclopedia-ad { margin: 1.5em 0; } 

/* Horisontal annonce: genbruger .horizontal-bar, men i fuld container-bredde så den flugter emnerne. */
.encyclopedia-ad.horizontal-bar { width: 100%; }

/* Video-annonce (billede 3): to halvdele — annonce-panel + video — så video-feltet "skrumper" ind. */
.encyclopedia-video-ad {
  display: flex;
  flex-direction: row;
  align-items: flex-start;         /* video beholder sit naturlige forhold */
  gap: 1.04167vw;
  width: 100%;
  margin: 4vh auto;
}
.encyclopedia-video-ad-text {
  flex: 1 1 auto;
  min-width: 0;                     /* lange ord sprænger ikke kolonnen */
  border-left: 4px solid #1c754e;   /* grøn streg som .leftRightTextbox2 / billede 3 */
  padding-left: 1vw;
}
.encyclopedia-video-ad-text .encyclopedia-entry { margin: 0; }   /* rækken styrer afstanden */
.encyclopedia-video-ad-video {
  flex: 0 0 calc(50% - 0.52083vw);
}
.encyclopedia-video-ad-video video {
  width: 100%;
  height: auto;                     /* naturligt 16:9 som About-siden */
  display: block;
  border-radius: 0.43478vh;         /* samme radius som sidens andre videoer */
}

/* Betalende (ad-free) brugere: skjul KUN videoen; emnet bliver stående i fuld bredde. */
body.ad-free .encyclopedia-video-ad-video { display: none !important; }
body.ad-free .encyclopedia-video-ad-text  { border-left: none; padding-left: 0; }

/* Smalle skærme: stak tekst over video. */
@media (max-aspect-ratio: 7/6) {
  .encyclopedia-video-ad { flex-direction: column; }
  .encyclopedia-video-ad-video { flex-basis: auto; width: 100%; }
}

#encyclopedia-content { position: relative; }
#encyclopedia-content.encyclopedia-loading { min-height: 40vh; }

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------- STOCK INFO ---------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

#stockInfoContent{padding-bottom:6vh;}

/* JS-fyldte sektioner holdes i samme centrerede kolonne (ikke under ad-rails) */
#keyStatsSection,
#financialsSection,
#policySection,
#newsSection{width:60%;margin-left:auto;margin-right:auto;box-sizing:border-box;}

/* Stock-info-kolonnen: 60% er fint på desktop, men for smalt på telefon. Samme mønster som
   screener/login-kortene — gå til ~90% i portræt-båndet, med lidt margen til kort-skyggen.
   Desktop (bredere end 7/6) beholder 60%. */
@media (max-aspect-ratio: 7/6) {
  #keyStatsSection,
  #financialsSection,
  #policySection,
  #newsSection,
  #stockInfoContent .mainTextContainer,
  #stockInfoContent .chart-container { width: 90%; }
}

/* sektioner + overskrifter */
#stockInfoContent .sec{margin-top:3.261vh;}
#stockInfoContent .sec > h2{font-size:2.9vh;font-weight:700;color:#111;margin:0 0 1.522vh;padding-top:3vh;border-top:0.217vh solid #d9d9d9;}

/* kompakt firma-header (co-head) */
#stockInfoContent .co-head{border-left:0.435vh solid #1c754e;padding:.4vh 0 .4vh 0.833vw;margin-bottom:2.174vh;}
#stockInfoContent .co-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:1.087vh 0.521vw;margin:0 0 0.652vh;}
#stockInfoContent .full-width-textbox .co-title h1{font-size:3.4vh;font-weight:700;color:#111;margin:0;border:none;padding:0;}
#stockInfoContent .co-tag{font-family:Arial,sans-serif;font-size:1.25vh;font-weight:700;letter-spacing:.04em;background:#e7efe9;color:#145536;border-radius:0.543vh;padding:0.326vh 0.417vw;}
#stockInfoContent .co-facts{display:flex;flex-wrap:wrap;gap:0.652vh 1.25vw;font-size:1.85vh;color:#333;margin:0.435vh 0 0.870vh;}
#stockInfoContent .co-facts b{color:#145536;}
#stockInfoContent .co-desc{font-size:2vh;line-height:1.6;color:#333;max-width:80ch;margin:0;}
/* ==== Stock News bias tags — same pill shape as .co-tag, colour-coded ==== */
#stockInfoContent .news-tags{display:flex;flex-wrap:wrap;gap:0.4vh;margin:0.4vh 0 0.2vh;}
#stockInfoContent .news-tag{font-family:Arial,sans-serif;font-size:1.1vh;font-weight:700;letter-spacing:.04em;border-radius:0.543vh;padding:0.28vh 0.42vw;white-space:nowrap;}
#stockInfoContent .news-tag .nt-label{font-weight:600;opacity:.62;}
/* Political lean: blå (venstre) -> grå (center) -> rød (højre) */
#stockInfoContent .news-tag.lean-far-left  {background:#d3e0f2;color:#123a6b;}
#stockInfoContent .news-tag.lean-left      {background:#e5edf7;color:#1a4a86;}
#stockInfoContent .news-tag.lean-lean-left {background:#eef4fb;color:#24507f;}
#stockInfoContent .news-tag.lean-center    {background:#eceeef;color:#4a5157;}
#stockInfoContent .news-tag.lean-lean-right{background:#fdeeee;color:#9a3a30;}
#stockInfoContent .news-tag.lean-right     {background:#f7e6e6;color:#8a2626;}
#stockInfoContent .news-tag.lean-far-right {background:#f3d6d6;color:#6f1d1d;}

/* Company stance: for / imod / neutral */
#stockInfoContent .news-tag.stance-for-company    {background:#e7efe9;color:#145536;}
#stockInfoContent .news-tag.stance-against-company{background:#f7e6e6;color:#8a2626;}
#stockInfoContent .news-tag.stance-neutral        {background:#eceeef;color:#4a5157;}

/* Factuality: grøn (høj) -> rav (mixed) -> rød (lav) */
#stockInfoContent .news-tag.fact-very-high{background:#dcefe1;color:#145536;}
#stockInfoContent .news-tag.fact-high     {background:#e7efe9;color:#2c6b45;}
#stockInfoContent .news-tag.fact-mixed    {background:#f5ecd6;color:#8a6516;}
#stockInfoContent .news-tag.fact-low      {background:#fbe7dc;color:#9a4a1f;}
#stockInfoContent .news-tag.fact-very-low {background:#f7e6e6;color:#8a2626;}

/* header: firma-info til venstre, video-annonce til højre (skjules for ad-free via body.ad-free) */
#stockInfoContent .co-head::after{content:'';display:block;clear:both;}   /* så co-head omslutter floaten (grøn bjælke i fuld højde) */
#stockInfoContent .co-video-ad{float:right;width:44%;margin:0.4vh 0 1.2vh 1.5vw;border-radius:0.435vh;overflow:hidden;}
#stockInfoContent .co-video-ad video{width:100%;height:auto;display:block;border-radius:0.435vh;}
@media (max-aspect-ratio:7/6){
  #stockInfoContent .co-video-ad{float:none;width:100%;margin:0 0 1.5vh 0;}      /* mobil: video øverst i fuld bredde */
}

/* key statistics */
#stockInfoContent .kwrap{display:flex;gap:2.391vh 1.146vw;flex-wrap:wrap;}
#stockInfoContent .kstats{flex:1 1 520px;column-count:2;column-gap:1.354vw;}
#stockInfoContent .kstats .grp{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:1.74vh;}
#stockInfoContent .kstats .grp b{display:block;color:#145536;font-size:1.65vh;margin:0 0 0.435vh;border-bottom:0.109vh solid #d9d9d9;padding-bottom:0.326vh;}
#stockInfoContent .kstats .row{display:flex;justify-content:space-between;font-size:1.8vh;padding:0.217vh 0;color:#333;}
#stockInfoContent .kstats .row span:last-child{font-weight:700;color:#111;}
#stockInfoContent .fin-controls{display:flex;flex-wrap:wrap;gap:0.652vh 0.521vw;margin:0 0 1.304vh;}
#stockInfoContent .fin-ctl{font-family:'Leelewadi',Georgia,serif;font-size:1.55vh;color:#145536;background:#eef5f0;border:0.109vh solid #bcd6c6;border-radius:0.543vh;padding:0.435vh 0.6vw;cursor:pointer;}
#stockInfoContent .fin-ctl:hover{background:#e2efe7;}
#stockInfoContent .fin-note{font-family:Arial,sans-serif;font-size:1.4vh;color:#8a8a8a;margin:0.8vh 0 0;}

/* financial statement tabs + tabel (screener-look) */
#stockInfoContent .fin-tabs{display:flex;flex-wrap:wrap;gap:0.652vh 0.313vw;border-bottom:0.217vh solid #d9d9d9;}
#stockInfoContent .fin-tab{background:none;border:none;border-bottom:0.326vh solid transparent;margin-bottom:-0.217vh;padding:0.978vh 0.729vw;font-family:'Leelewadi',Georgia,serif;font-size:1.95vh;color:#555;cursor:pointer;}
#stockInfoContent .fin-tab:hover{color:#145536;}
#stockInfoContent .fin-tab.active{color:#145536;font-weight:700;border-bottom-color:#1c754e;}
#stockInfoContent .fin-tablewrap{position:relative;margin-top:1.2vh;padding:0.7vh 0;background:rgba(255,255,255,0.95);border-radius:1.30435vh;overflow:hidden;box-shadow:0 0 2.4vh rgba(0,0,0,0.08), 0 0.9vh 1.6vw rgba(0,0,0,0.16);}
/* grøn scrollbar i BÅDE top og bund — altid synlig */
#stockInfoContent .fin-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
#stockInfoContent .fin-scroll::-webkit-scrollbar{display:none;}
/* vores egen bjælke (identisk i top og bund, ALTID synlig) — samme værdier som .screenerScrollbar */
#stockInfoContent .fin-scrollbar{position:relative;width:auto;height:1.1vh;margin:0.45vh 0.5vw;box-sizing:border-box;background:#dfe5e2;border-radius:1vh;}
#stockInfoContent .fin-scrollbar-thumb{position:absolute;top:0;left:0;height:100%;width:100%;background:#1c754e;border-radius:1vh;cursor:pointer;}
#stockInfoContent .fin-scrollbar-thumb:hover,
#stockInfoContent .fin-scrollbar-thumb.dragging{background:#145536;}
#stockInfoContent table.fin{font-family:Leelewadi;border-collapse:collapse;width:100%;white-space:nowrap;}
#stockInfoContent table.fin thead th{border:0.109vh solid #ddd;background:#1c754e;color:#fff;font-weight:700;font-size:1.7vh;padding:1.304vh 0.31vw;text-align:right;}
#stockInfoContent table.fin thead th:first-child{text-align:left;position:sticky;left:0;z-index:3;}
#stockInfoContent table.fin td{border:0.109vh solid #ddd;color:#000;font-size:1.65vh;padding:0.5vh 0.42vw;text-align:right;}
#stockInfoContent table.fin tbody tr:nth-child(even) td{background:#cdcdcd;}
#stockInfoContent table.fin tbody tr:hover td{background:#ddd;}
#stockInfoContent table.fin tbody th.metric{position:sticky;left:0;z-index:2;border:0.109vh solid #ddd;background:#fff;color:#000;font-weight:400;font-size:1.65vh;padding:0.5vh 0.42vw;text-align:left;}
#stockInfoContent table.fin tbody tr:nth-child(even) th.metric{background:#cdcdcd;}
#stockInfoContent table.fin tbody tr:hover th.metric{background:#ddd;}
#stockInfoContent table.fin tr.strong th.metric,#stockInfoContent table.fin tr.strong td{font-weight:700;color:#000;}
#stockInfoContent table.fin tbody tr.sub th.metric{padding-left:calc(0.42vw + 1.5em);}   /* underposter rykkes ind */
#stockInfoContent table.fin td.neg{color:#c0392b;}
#stockInfoContent .fin-empty{font-family:Arial,sans-serif;font-size:1.8vh;color:#999;padding:2.826vh 0.625vw;text-align:center;}
#stockInfoContent .full-width-textbox.co-load-error .co-head{display:none;}

/* company policy cards (expandable) */
#stockInfoContent .policy-intro{font-family:Arial,sans-serif;font-size:1.55vh;color:#8a8a8a;margin:-0.435vh 0 1.304vh;}
#stockInfoContent .policy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.522vh 0.729vw;align-items:start;}
#stockInfoContent .policy-card{border:0.109vh solid #d9d9d9;border-left:0.435vh solid #1c754e;border-radius:0.652vh;background:#fff;overflow:hidden;}
#stockInfoContent .pc-head{padding:1.522vh 0.833vw;cursor:pointer;user-select:none;}
#stockInfoContent .pc-head .top{display:flex;justify-content:space-between;align-items:baseline;gap:1.087vh 0.521vw;}
#stockInfoContent .pc-head h3{margin:0;font-size:2vh;color:#145536;}
#stockInfoContent .pc-head .score{font-family:Arial,sans-serif;font-size:1.55vh;color:#888;white-space:nowrap;}
#stockInfoContent .bar{height:0.652vh;background:#e7efe9;border-radius:0.435vh;margin:0.870vh 0;overflow:hidden;}
#stockInfoContent .bar > i{display:block;height:100%;background:#1c754e;border-radius:0.435vh;}
#stockInfoContent .pc-hint{font-family:Arial,sans-serif;font-size:1.55vh;color:#145536;}
#stockInfoContent .pc-hint .arrow{display:inline-block;transition:transform .25s;}
#stockInfoContent .policy-card.open .pc-hint .arrow{transform:rotate(180deg);}
#stockInfoContent .pc-summary{list-style:disc;margin:0.978vh 0 0.217vh;padding-left:0.938vw;}
#stockInfoContent .pc-summary li{font-size:1.8vh;line-height:1.55;color:#555;margin-bottom:0.326vh;}
#stockInfoContent .policy-card.open .pc-summary{display:none;}
#stockInfoContent .pc-body{max-height:0;overflow:hidden;transition:max-height .35s ease;}
#stockInfoContent .policy-card.open .pc-body{max-height:300vh;}
#stockInfoContent .pt{padding:1.304vh 0.833vw;border-top:0.109vh solid #d9d9d9;}
#stockInfoContent .pt h4{margin:0 0 0.543vh;font-size:1.9vh;color:#145536;}
#stockInfoContent .pt p{margin:0;font-size:1.8vh;line-height:1.6;color:#444;}

/* news */
#stockInfoContent .news-item{border-top:0.109vh solid #d9d9d9;padding:1.304vh 0;}
#stockInfoContent .news-item:first-child{border-top:none;}
#stockInfoContent .news-item .meta{font-family:Arial,sans-serif;font-size:1.5vh;color:#8a8a8a;letter-spacing:.03em;}
#stockInfoContent .news-item h4{margin:0.326vh 0 0.435vh;font-size:2vh;color:#145536;}
#stockInfoContent .news-item h4 a{color:#145536;text-decoration:none;}
#stockInfoContent .news-item h4 a:hover{text-decoration:underline;}
#stockInfoContent .news-item p{margin:0;font-size:1.8vh;line-height:1.55;color:#444;}
/* ==== Load more articles-knap ==== */
#stockInfoContent .load-more-wrap{text-align:center;margin:2vh 0 0.8vh;}
#stockInfoContent .load-more-btn{
  display:inline-flex;align-items:center;gap:1vh;
  padding:1.4vh 2.4vw;font-family:Arial,sans-serif;font-size:1.9vh;font-weight:700;
  border:none;border-radius:1vh;cursor:pointer;
  background:#1c754e;color:#fff;transition:background .15s,transform .05s;
}
#stockInfoContent .load-more-btn:hover:not(:disabled){background:#145536;}
#stockInfoContent .load-more-btn:active:not(:disabled){transform:translateY(0.12vh);}
#stockInfoContent .load-more-btn:disabled{opacity:.6;cursor:default;}
#stockInfoContent .load-more-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.4vh;height:2.4vh;border-radius:50%;
  background:rgba(255,255,255,.22);font-size:2.2vh;line-height:1;
}
/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------- TOS AND AD-BLOCKER MODALS ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.tos-modal,
.adblock-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.tos-modal-content,
.adblock-modal-content {
    background: white;
    padding: 3.26087vh;
    max-width: 26.04167vw;
    border-radius: 1.08696vh;
    text-align: center;
    box-shadow: 0 0.43478vh 1.04167vw rgba(0, 0, 0, 0.3);
}

.tos-modal-content h2,
.adblock-modal-content h2 {
    margin-top: 0;
    color: #333;
}

.tos-modal-content p,
.adblock-modal-content p {
    margin: 2.17391vh 0;
    font-size: 1.1em;
    color: #555;
}

.modal-button {
    margin: 1.08696vh;
    padding: 1.30435vh 1.25vw;
    border: none;
    border-radius: 0.54348vh;
    cursor: pointer;
    font-size: 1em;
    transition: all 0.2s;
}

.modal-button.accept {
    background: #1c754e;
    color: white;
}

.modal-button.accept:hover {
    background: #145536;
}

.modal-button.reject {
    background: #CC0000;
    color: white;
}

.modal-button.reject:hover {
    background: #A30000;
}

.modal-button.adblock {
    background: #007bff;
    color: white;
}

.modal-button:hover {
    transform: scale(1.05);
}

.tos-modal-warning-text {
    font-size: 0.9em;
    color: #666;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------- REGISTER AND LOGIN STYLES ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.login-container {
    max-width: 52.08333vw;
    height: 92.3913vh;
    margin: 1.08696vh auto 4.16667vw;
    padding: 4.34783vh 1.5625vw;
    background: rgba(255,255,255,0.95);
    border-radius: 1.30435vh;
    box-shadow: 0 1.08695vh 1.5625vw rgba(0,0,0,0.3);
    color: #222;
}

.login-container h1 {
    text-align: center;
    margin-bottom: 3.26087vh;
}

.login-container2 {
    max-width: 52.08333vw;
    height: 92.3913vh;
    margin: 1.08696vh auto 4.16667vw;
    padding: 4.34783vh 1.5625vw;
    background: rgba(255,255,255,0.95);
    border-radius: 1.30435vh;
    box-shadow: 0 1.08695vh 1.5625vw rgba(0,0,0,0.3);
    color: #222;
}

.login-container2 h1 {
    text-align: left;           /* ← changed to left */
    margin-bottom: 3.26087vh;
}

.login-container3 {
    max-width: 52.08333vw;
    max-height: 350vh; /* Longer */
    margin: 1.08696vh auto 4.16667vw;
    padding: 4.34783vh 1.5625vw;
    background: rgba(255,255,255,0.95);
    border-radius: 1.30435vh;
    box-shadow: 0 1.08695vh 1.5625vw rgba(0,0,0,0.3);
    color: #222;
}

.login-container h3 {
    text-align: center;
    color: #145536;
    margin-bottom: 3.26087vh;
}

.form-group { 
    margin-bottom: 2.17391vh; 
}

.form-group label { 
    display: block; 
    margin-bottom: 0.65217vh; 
    font-weight: 600; 
}

.form-group input {
    width: 100%;
    padding: 1.52174vh;
    border: 0.1087vh solid #ccc;
    border-radius: 0.65217vh;
    font-size: 1.73913vh;
}

.tos-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.41667vw;
    font-size: 1.73913vh;
}

.tos-checkbox-label input[type="checkbox"] {
    width: 2vw;
    height: 2vw;
    accent-color: #145536;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.tos-link {
    color: #145536;
    text-decoration: underline;
    text-decoration-color: #145536;
}

/* Changed from .login-button to .login-button2 */
.login-button2 {
    width: 100%;
    padding: 1.73913vh;
    background: #1c754e;
    color: white;
    font-size: 1.95652vh;
    font-weight: bold;
    border: none;
    border-radius: 0.65217vh;
    cursor: pointer;
    margin-top: 1.08696vh;
}

.login-button2:hover { 
    background: #145536; 
}

.register-link {
    text-align: center;
    margin-top: 2.71739vh;
    color: #000000;
}

.register-link a { 
    color: #000000; 
    text-decoration: underline;
}

.success-message {
    text-align: left;           /* left-aligned text */
    font-size: 1.95652vh;
    margin: 2.71739vh 0 1.82291vw 0;      /* removed horizontal auto-centering */
    line-height: 1.6;
    max-width: 19.79167vw;           /* keeps it from becoming too wide */
}

.button-row {
    display: flex;
    gap: 1.63044vh;
    justify-content: center;
}

.single-button {
    display: inline-block;
    text-align: center;
}

.logout-Button {
  background-color: transparent;
  color: white;
  border: 0.1087vh solid white; /* ~1px on a 920px tall viewport */
  padding: 0.5435vh 0.7813vw; /* ~5px on a 920px tall viewport and ~15px on a 1920px wide viewport */
  border-radius: 0.5435vh; /* ~5px on a 920px tall viewport */
  cursor: pointer;
  font-size: 1em;
}

.logout-Button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------- BILLING TOGGLE STYLES ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.billing-toggle {
    text-align: center;
    margin: 30px 0 25px;
}

.toggle-container {
    display: inline-flex;
    background: #f1f1f1;
    border-radius: 50px;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.toggle-btn {
    padding: 10px 28px;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    background: transparent;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
}

.toggle-btn.active {
    background: #145536;
    color: white;
}

.best-value {
    font-size: 0.85em;
    color: #145536;
}

/* ====================== PRICING CARDS ====================== */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25vw;
    margin-top: 4.5vh;
    margin-bottom: 3.26vh;
}

.plan-card {
    background: white;
    border: 0.22vh solid #e5e5e5;
    border-radius: 1.74vh;
    padding: 3.04vh 1.25vw;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 0.43vh 0.78vw rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}

.plan-card.popular {
    border-color: #145536;
    transform: scale(1.04);
}

.plan-card.popular:hover {
    transform: scale(1.04) translateY(-4px);
}

/* Most Popular Badge */
.popular-badge {
    position: absolute;
    top: -1.6vh;
    left: 50%;
    transform: translateX(-50%);
    background: #145536;
    color: white;
    font-size: 1.5vh;
    font-weight: 700;
    padding: 0.7vh 1.04vw;
    border-radius: 3.26vh;
    white-space: nowrap;
    box-shadow: 0 0.43vh 0.625vw rgba(0, 100, 0, 0.3);
}

/* Plan Title */
.plan-title {
    margin: 0 0 1.74vh 0;
    font-size: 2.4vh;
    font-weight: 700;
    color: #222;
}

/* Price Container */
.price-container {
    margin: 20px 0 24px;
    min-height: 72px;
}

.price {
    font-size: 3.7vh;
    font-weight: 700;
    line-height: 1;
    color: #111;
}

.price-unit {
    font-size: 0.42em;
    font-weight: 500;
    vertical-align: middle;
}

/* Hide yearly prices by default */
.yearly-price {
    display: none;
}

.price-period {
    color: #666;
    font-size: 1.8vh;
    margin-top: 0.43vh;
}

/* Features List */
.plan-features {
    text-align: left;
    padding-left: 0;
    margin-bottom: 3.48vh;
    line-height: 1.8;
    list-style: none;
}

.plan-features li {
    margin-bottom: 1.3vh;
    position: relative;
    padding-left: 1.5625vw;
    font-size: 1.62vh;
}

.plan-features li:last-child {
    margin-bottom: 0;
}

.plan-features li:before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #145536;
    font-weight: bold;
    font-size: 1.7vh;
}

/* Select Button */
.select-plan-btn {
    width: 100%;
    padding: 1.4vh;
    background: #145536;
    color: white;
    border: none;
    border-radius: 1.09vh;
    font-size: 1.8vh;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: auto;
}

.select-plan-btn:hover {
    background: #005000;
    transform: translateY(-1px);
}

/* Selected card highlight */
.plan-card.selected,
.plan-card.current-tier {
    border-color: #145536;
    box-shadow: 0 0 0 8px rgba(0, 100, 0, 0.25);
}

.current-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #1c754e;
    color: white;
    font-size: 0.8em;
    font-weight: 700;
    padding: 4px 16px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 4px 12px #1c754e;
}

.upgrade-button {
	margin: 20px 0;
	font-size: 1.1em;
	font-weight: 600;
	color: #145536;
	text-align: center;
}

/* ==================== UPGRADE COST INFO ==================== */
.upgrade-cost-info {
    color: #222;
    text-align: left;
    font-weight: bold;
    font-size: 4rem;
    padding-left: 10px;
}

/* Clean email display when logged in */
.user-email {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    transition: color 0.2s ease;
}

.user-email:hover {
    text-decoration: underline; /* Adds underline on hover */
    text-decoration-color: white; /* Makes the underline white */
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------- USER SETTING STYLES ---------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.profile-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e5e5;
}

.profile-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.profile-row:last-child {
    border-bottom: none;
}

.profile-label {
    font-weight: 600;
    color: #222;
    font-size: 2rem;
}

.profile-value {
    font-weight: 500;
    color: #006400;
    font-size: 2rem;
}

/* Affiliate Dashboard */
.affiliate-dashboard {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e5e5;
}

.affiliate-dashboard h2 {
    margin-bottom: 20px;
    color: #222;
}

.affiliate-payout-info {
    margin: 2vh 0;
    padding: 1.5vh;
    background-color: #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: 4px;
    font-size: 0.9em;
    line-height: 1.4;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------- AFFILIATE SIGNUP STYLES ---------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.affiliate-container {
    max-width: 52.08333vw;
    margin: 1.08696vh auto 4.16667vw;
    padding: 4.34783vh 2.60417vw;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 1.30435vh;
    box-shadow: 0 1.08695vh 1.5625vw rgba(0, 0, 0, 0.3);
    color: #222;
}

.affiliate-container h1 {
    text-align: center;
    margin: 0 0 2.17391vh 0;
    color: #222;
}

.affiliate-intro {
    text-align: left;
    font-size: 1.9565vh;
    line-height: 1.6;
    margin: 0 0 1.08696vh 0;
    color: #222;
}

.affiliate-intro strong {
    color: #222;
    font-weight: 700;
}

.affiliate-subtitle {
    text-align: left;
    font-size: 1.73913vh;
    line-height: 1.6;
    margin: 0 0 3.26087vh 0;
    color: #444444;
}

.affiliate-steps {
    background: #f7f9fc;
    border-left: 0.43478vh solid #145536;
    padding: 2.17391vh 1.5625vw;
    margin: 2.71739vh 0;
    border-radius: 0.65217vh;
}

.affiliate-steps h3 {
    margin: 0 0 1.63044vh 0;
    color: #222;
    font-size: 2.17391vh;
    font-weight: bold;
    text-transform: none;       /* override global uppercase */
    letter-spacing: 0;
}

.affiliate-steps ol {
    padding-left: 1.5625vw;
    margin: 0;
    line-height: 1.7;
    color: #333;
    font-size: 1.73913vh;
    list-style: decimal;
}

.affiliate-steps ol li {
    margin-bottom: 1.08696vh;
}

.affiliate-steps ol li:last-child {
    margin-bottom: 0;
}

.affiliate-steps code {
    background: rgba(20, 85, 54, 0.1);
    color: #145536;
    padding: 0.21739vh 0.41667vw;
    border-radius: 0.32609vh;
    font-family: 'Courier New', monospace;
    font-size: 0.95em;
}

.affiliate-requirements {
    background: #fffbe6;
    border-left: 0.43478vh solid #d4a017;
    padding: 2.17391vh 1.5625vw;
    margin: 2.71739vh 0;
    border-radius: 0.65217vh;
}

.affiliate-requirements strong {
    display: block;
    margin-bottom: 0.86957vh;
    color: #222;
    font-size: 1.9565vh;
    font-weight: 700;
}

.affiliate-requirements ul {
    padding-left: 1.5625vw;
    margin: 0;
    line-height: 1.7;
    color: #333;
    font-size: 1.73913vh;
    list-style: disc;
}

.affiliate-requirements li {
    margin-bottom: 0.54348vh;
}

.affiliate-requirements li:last-child {
    margin-bottom: 0;
}

.affiliate-input-hint {
    display: block;
    margin-top: 0.54348vh;
    color: #666;
    font-size: 1.52174vh;
    line-height: 1.4;
}

.affiliate-brand-label {
    display: flex;
    align-items: flex-start;
    gap: 0.52083vw;
    font-size: 1.73913vh;
    margin: 1.63044vh 0 2.17391vh 0;
    color: #333;
    line-height: 1.5;
    font-weight: normal;
    cursor: pointer;
}

.affiliate-brand-label input[type="checkbox"] {
	width: 2vw;
	height: 2vw;
	accent-color: #145536;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.affiliate-brand-label code {
    background: rgba(20, 85, 54, 0.1);
    color: #145536;
    padding: 0.10870vh 0.31250vw;
    border-radius: 0.32609vh;
    font-family: 'Courier New', monospace;
    font-size: 0.92em;
}

.affiliate-tos-label {
    display: flex;
    align-items: flex-start;
    gap: 0.52083vw;
    font-size: 1.73913vh;
    margin: 2.17391vh 0;
    color: #333;
    line-height: 1.5;
    font-weight: normal;
    cursor: pointer;
}

.affiliate-tos-label input[type="checkbox"] {
	width: 2vw;
	height: 2vw;
	accent-color: #145536;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.affiliate-tos-label a {
    color: #222;
    text-decoration: underline;
    font-weight: 600;
}

.affiliate-tos-label a:hover {
    color: #444444;
}

.affiliate-settings-link {
    margin-top: 2.71739vh;
    text-align: center;
    font-size: 1.52174vh;
    color: #888;
    line-height: 1.5;
}

.affiliate-settings-link a {
    color: #222;
    text-decoration: underline;
}

.affiliate-settings-link a:hover {
    color: #444444;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------- ACCOUNT DELETION STYLES --------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.delete-account-link-wrapper {
    margin-top: 4vh;
    text-align: center;
}

.delete-account-link {
    text-decoration: underline;
    color: inherit;
    cursor: pointer;
}

.delete-account-sub-link {
    text-decoration: underline;
    color: inherit;
    cursor: pointer;
    font-size: 0.9em;
}

.hide-delete-section-wrapper {
    margin-top: 1vh;
}

.danger-zone {
    display: none;
    margin-top: 2vh;
    padding: 2vh;
    border: 2px solid #c0392b;
    border-radius: 8px;
}

.danger-zone.visible {
    display: block;
}

.danger-zone-title {
    color: #c0392b;
}

.danger-button {
    background-color: #8b0000;
    color: white;
    border: none;
    padding: 1vh 2vh;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}

.danger-button:hover {
    background-color: #6b0000;
}

.danger-button.cancel-deletion {
    background-color: #1c754e;
}

.danger-button.cancel-deletion:hover {
    background-color: #155a3c;
}

.deletion-countdown {
    display: none;
    color: #c0392b;
    margin-top: 1vh;
    font-weight: bold;
}

.deletion-countdown.visible {
    display: block;
}

.deletion-warning-list {
    text-align: left;
    margin: 1.5vh 0;
}

.hide-delete-section-wrapper.hidden {
    display: none;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------ LOADING ICON --------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

.loader{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  z-index:20;
}
.loader.hidden{ display:none; }

.loader svg{
  /* blød dybde – fjern hvis du vil have den helt flad */
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.16));
}

/* --- farver (rent mørkegrøn/hvid/grøn) --- */
.planet     { fill:#145536; }   /* skiven (planeten) */
.ocean      { fill:#1c754e; }   /* havet i bunden    */
.graph-line { stroke:#ffffff; } /* grafen            */
.dot        { fill:#ffffff; }   /* knudepunkterne    */

/* --- farver (rent sort/hvid/grå) --- */
.loader.sekundaer{
  --planet:#0e2a3a;
  --ocean:#2f7fa8;
  --graf:#ffffff;
}

/* --- linjen tegnes op, hviler, og trækkes tilbage i loop --- */
.graph-line{
  animation:draw 2.8s linear infinite;
  will-change:stroke-dashoffset;
}
@keyframes draw{
  0%   { stroke-dashoffset:224; }  /* skjult                   */
  48%  { stroke-dashoffset:0;   }  /* fuldt tegnet – på toppen */
  64%  { stroke-dashoffset:0;   }  /* hviler et øjeblik        */
  92%  { stroke-dashoffset:224; }  /* trukket helt tilbage     */
  100% { stroke-dashoffset:224; }  /* kort pust før den gentager */
}

/* --- prikkerne deler samme tidslinje som linjen --- */
.dot{
  opacity:0;
  transform:scale(.35);
  transform-box:fill-box;      /* så skaleringen sker om prikkens eget centrum */
  transform-origin:center;
  animation-duration:2.8s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  will-change:opacity, transform;
}
.dot-1{ animation-name:dot1; }
.dot-2{ animation-name:dot2; }
.dot-3{ animation-name:dot3; }
.dot-4{ animation-name:dot4; }
.dot-5{ animation-name:dot5; }
.dot-6{ animation-name:dot6; }

/* Hvert vindue er beregnet ud fra hvor langt henne på linjen prikken sidder,
   så den lander præcis når linjen når den – og forsvinder når linjen ruller forbi den igen. */
@keyframes dot1{ /* nås 0%  · forlades 92% */
  0%,0%     { opacity:0; transform:scale(.35); }
  4%        { opacity:1; transform:scale(1);   }
  92%       { opacity:1; transform:scale(1);   }
  96%,100%  { opacity:0; transform:scale(.35); }
}
@keyframes dot2{ /* nås 8%  · forlades 87% */
  0%,8%     { opacity:0; transform:scale(.35); }
  12%       { opacity:1; transform:scale(1);   }
  87%       { opacity:1; transform:scale(1);   }
  91%,100%  { opacity:0; transform:scale(.35); }
}
@keyframes dot3{ /* nås 13% · forlades 84% */
  0%,13%    { opacity:0; transform:scale(.35); }
  17%       { opacity:1; transform:scale(1);   }
  84%       { opacity:1; transform:scale(1);   }
  88%,100%  { opacity:0; transform:scale(.35); }
}
@keyframes dot4{ /* nås 27% · forlades 77% */
  0%,27%    { opacity:0; transform:scale(.35); }
  31%       { opacity:1; transform:scale(1);   }
  77%       { opacity:1; transform:scale(1);   }
  81%,100%  { opacity:0; transform:scale(.35); }
}
@keyframes dot5{ /* nås 34% · forlades 72% */
  0%,34%    { opacity:0; transform:scale(.35); }
  38%       { opacity:1; transform:scale(1);   }
  72%       { opacity:1; transform:scale(1);   }
  76%,100%  { opacity:0; transform:scale(.35); }
}
@keyframes dot6{ /* nås 47% · forlades 64% (kun synlig mens grafen er helt oppe) */
  0%,47%    { opacity:0; transform:scale(.35); }
  51%       { opacity:1; transform:scale(1);   }
  64%       { opacity:1; transform:scale(1);   }
  68%,100%  { opacity:0; transform:scale(.35); }
}

/* "Loading..."-tekst under alle spinner-ikoner */
.loader { flex-direction: column; gap: 1.4vh; }
.loader::after {
  content: "Loading...";
  color: #145536;
  font-family: Leelewadi;
  font-size: 1.8vh;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Tilgængelighed: stå stille som en færdigtegnet graf hvis brugeren fravælger animation */
@media (prefers-reduced-motion: reduce){
  .graph-line{ animation:none; stroke-dashoffset:0; }
  .dot{ animation:none; opacity:1; transform:scale(1); }
}

/* Samme princip som .chart-container: positioneret boks + reserveret højde, så
   husets .loader centrerer sig dér hvor indholdet lander (i stedet for at flygte
   op i skærmen, fordi ingen forælder var position:relative). */

/* --- Firma-headeren (beskrivelsen) --- */
#stockInfoContent .full-width-textbox { position: relative; }
#stockInfoContent .full-width-textbox.loading { min-height: 40vh; }

#stockInfoContent .full-width-textbox.loading .co-title,
#stockInfoContent .full-width-textbox.loading .co-facts,
#stockInfoContent .full-width-textbox.loading .co-desc { visibility: hidden; }

#stockInfoContent .full-width-textbox.loading #info-loader { right: 46%; }
@media (max-width: 768px) {
  #stockInfoContent .full-width-textbox.loading #info-loader { right: 0; }
}

/* --- De JS-renderede sektioner (Key Statistics, Financials, Policy, News) --- */
#stockInfoContent .sec .sec-loader { position: relative; min-height: 26vh; }
#stockInfoContent #financialsSection .sec-loader { min-height: 34vh; }
#stockInfoContent #policySection     .sec-loader { min-height: 24vh; }
#stockInfoContent #newsSection       .sec-loader { min-height: 30vh; }

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------ ADAPTIVE ASPECT-RATIO LAYER (added below) --------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------

   HOW THIS LAYER WORKS
   --------------------
   Everything ABOVE this line is the original design, tuned for a 16:9 screen. It is left
   completely untouched and is used as the DEFAULT. This layer sits on top and only re-tunes a
   small set of high-impact "control" values per aspect-ratio band, so the 16:9 look is preserved
   exactly while every other screen shape gets a sensible layout.

   Three repeated values are routed through CSS variables, so each band only has to flip one or
   two numbers instead of duplicating hundreds of rules:

     --content-width : width of the main centred column (top-bar row, nav row, hero, chart,
                       tables, video ad, text blocks, disclaimer popup).      Default 60%
     --footer-width  : width of the wider blocks (footer + the wide text/video rows). Default 80%
     --rail-display  : whether the fixed left/right ad rails show (block) or not (none). Default block

   ABOUT THE BANDS
   ---------------
   "aspect-ratio" in a media query = viewport width / height. Real screens almost never match a
   named ratio exactly, so each requested ratio owns a *band* (a min/max range). The band edges
   sit at the midpoints between neighbouring ratios, so any screen falls into its nearest band:

        ratio     decimal    band (aspect-ratio range)        typical device
        9:16      0.562      up to 0.625                      phone, portrait
        2:3       0.667      0.625 - 0.778                    tablet, portrait
        8:9       0.889      0.778 - 0.944                    tall window / near-square
        1:1       1.000      0.944 - 1.167                    square window
        4:3       1.333      1.167 - 1.417                    classic monitor, landscape
        3:2       1.500      1.417 - 1.550                    landscape
        16:10     1.600      1.550 - 1.688                    wide laptop, landscape
        16:9      1.778      1.688 - 2.056                    << DEFAULT: no override needed >>
        21:9      2.333      from 2.056                       ultra-wide monitor

   A NOTE ON UNITS
   ---------------
   Widths stay in % (relative to the parent, exactly like the original) and everything else stays
   in vh / vw, as requested. The only px-like values are the rem bounds inside the clamp() used for
   body text on portrait screens: because an aspect ratio does NOT tell us the physical size (a 9:16
   viewport can be a 400px phone or a 1400px portrait monitor), those bounds keep the text readable
   at both extremes while the preferred value still tracks the width in vw.

   AD BANNERS
   ----------
   The two fixed side rails need horizontal room next to the ~60% column, so they only show on
   landscape shapes (roughly 4:3 and wider). On a square screen and on every portrait screen they
   are hidden (--rail-display: none) and the horizontal banner is stretched to full width instead -
   which is the layout the phone screenshots use. (body.ad-free still hides every banner as before,
   because it uses !important.)
*/

/* Base variable values = the original 16:9 design ------------------------------------------------ */
:root {
  --content-width: 60%;
  --footer-width: 80%;
  --rail-display: block;
}

/* Route the repeated widths / rail visibility through the variables. These appear after the
   originals, so they win by source order and, at their defaults, resolve to exactly the same
   numbers as before (i.e. 16:9 is visually unchanged). */
.top-bar-button-container,
.main-nav-container,
.chart-container,
.screeningTableContainer,
#videoAdContainer,
.leftRightContainer,
.mainTextContainer,
#disclaimerPopup {
  width: var(--content-width);
  max-width: var(--content-width);
}

.hero-content {
  max-width: var(--content-width); /* the hero centres via max-width only */
}

.footer-columns,
.footer-bottom,
.leftRightContainer2 {
  width: var(--footer-width);
  max-width: var(--footer-width);
}

/* The footer has FIVE link columns (.column1). Originally they were flex:1 with a 0 basis, so they
   never wrapped - on a square or small screen all five got crushed into one row (~140px each, with a
   whole disclaimer paragraph inside). Let them wrap based on *physical* width (a rem threshold), the
   same reasoning as the portrait body-text clamp(): how readable a text column is depends on its real
   width, not on the screen's aspect ratio. The 12rem basis is chosen so a 16:9 desktop keeps all five
   on ONE row down to ~1200px wide (your calibrated 1920 look is unchanged); narrower/square/portrait
   screens gracefully reflow to 3 -> 2 -> 1 columns. row-gap only spaces the wrapped rows (no effect
   when everything fits on one line, i.e. none on 16:9). */
.footer-columns { flex-wrap: wrap; row-gap: 3vh; }
.column1 { flex: 1 1 12rem; }

.left-sidebar,
.right-sidebar,
.sticky-left-sidebar,
.sticky-right-sidebar {
  display: var(--rail-display); /* body.ad-free .*-sidebar still wins with !important */
}


/* =================================================================================================
   SHARED  |  SQUARE + ALL PORTRAIT   (aspect-ratio <= ~1.167)
   Hide the side rails, promote the horizontal banner to full width, and let the pricing grid drop
   to two columns. Common to a square screen and to every portrait screen.
   ================================================================================================= */
@media (max-aspect-ratio: 7/6) {
  :root { --rail-display: none; }

  .horizontal-bar,
  .sticky-horizontal-bar {
    width: 100%;
    left: 0;
    transform: none;
    margin: 6vh auto;
  }

  .plans-grid { grid-template-columns: repeat(2, 1fr); }
}


/* =================================================================================================
   SHARED  |  PORTRAIT ONLY   (aspect-ratio <= ~0.944)
   Taller-than-wide screens: stack the header rows, the hero and the footer so nothing gets squeezed
   into a column that is too narrow, and drop the pricing grid to a single column. Driven by aspect
   ratio (not px width) so it also works for a portrait tablet or a portrait desktop monitor.
   ================================================================================================= */
@media (max-aspect-ratio: 17/18) {
  .top-bar { flex-direction: column; }
  .top-bar-button-container,
  .main-nav-container { flex-direction: column; align-items: center; }
  .top-bar-left,
  .top-bar-right { margin-bottom: 1vh; }
  .login-button { width: 100%; }

  .logo { margin-right: 0; margin-bottom: 2vh; width: 100%; text-align: center; }
  .nav-links { width: 100%; justify-content: center; }
  .nav-links ul { flex-direction: column; align-items: center; }
  .nav-links li { margin-bottom: 1vh; }
  .language-selector { margin-left: 0; margin-top: 1vh; }

  .hero-content { flex-direction: column; align-items: center; text-align: center; }
  .hero-left,
  .hero-right { width: 100%; padding-right: 0; align-items: center; }
  .hero-left h1,
  .hero-left p { text-align: center; }
  .hero-buttons { flex-direction: column; align-items: center; width: 100%; }
  .hero-buttons button,
  .primary-button,
  .secondary-button { width: 100%; }
  .hero-right { margin-top: 4vh; }
  .illustration { max-width: 50vw; }

  /* full-width single stack: 100% basis makes each column take its own row (works with the
     flex-wrap set above, so wrapping and portrait-stacking use the same mechanism) */
  .footer-columns { align-items: center; text-align: center; }
  .column1 { align-items: center; min-height: 0; margin-bottom: 3vh; flex-basis: 100%; }
  .footer-bottom { flex-direction: column; gap: 2vh; }

  .plans-grid { grid-template-columns: 1fr; }
}


/* =================================================================================================
   PER-RATIO BANDS
   Each band owns an exclusive range and only re-tunes the column widths (plus body text size on
   portrait). Ordered widest -> narrowest for readability.
   ================================================================================================= */

/* --- 21:9  ultra-wide ---------------------------------------------------------------------------
   Very wide and short: pull the column in so text lines don't run huge and the rails get plenty of
   room; charts still get well over half the width. */
@media (min-aspect-ratio: 37/18) {
  :root {
    --content-width: 54%;
    --footer-width: 72%;
  }
}

/* --- 16:10  wide landscape --------------------------------------------------------------------- */
@media (min-aspect-ratio: 31/20) and (max-aspect-ratio: 27/16) {
  :root {
    --content-width: 62%;
    --footer-width: 82%;
  }
}

/* --- 3:2  landscape ---------------------------------------------------------------------------- */
@media (min-aspect-ratio: 17/12) and (max-aspect-ratio: 31/20) {
  :root {
    --content-width: 62%;
    --footer-width: 82%;
  }
}

/* --- 4:3  classic landscape -------------------------------------------------------------------
   The narrowest landscape shape: keep the column near 60% so the side rails still fit comfortably. */
@media (min-aspect-ratio: 7/6) and (max-aspect-ratio: 17/12) {
  :root {
    --content-width: 60%;
    --footer-width: 84%;
  }
}

/* --- 1:1  square ------------------------------------------------------------------------------
   No rails (set in the shared block above); widen the column so content isn't stuck in a thin strip,
   but keep the desktop-style header/hero (no stacking). */
@media (min-aspect-ratio: 17/18) and (max-aspect-ratio: 7/6) {
  :root {
    --content-width: 80%;
    --footer-width: 88%;
  }
}

/* --- 8:9  near-square portrait ---------------------------------------------------------------- */
@media (min-aspect-ratio: 7/9) and (max-aspect-ratio: 17/18) {
  :root {
    --content-width: 90%;
    --footer-width: 93%;
  }
  body { font-size: clamp(0.9rem, 2vw, 1.25rem); }
}

/* --- 2:3  portrait tablet ---------------------------------------------------------------------- */
@media (min-aspect-ratio: 5/8) and (max-aspect-ratio: 7/9) {
  :root {
    --content-width: 92%;
    --footer-width: 95%;
  }
  body { font-size: clamp(0.9rem, 2.4vw, 1.25rem); }
}

/* --- 9:16  portrait phone ---------------------------------------------------------------------- */
@media (max-aspect-ratio: 5/8) {
  :root {
    --content-width: 94%;
    --footer-width: 96%;
  }
  body { font-size: clamp(0.85rem, 3.6vw, 1.2rem); }
}

/*
----------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------- END OF ADAPTIVE ASPECT-RATIO LAYER -----------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------
*/


/*
====================================================================================================
==== REFINEMENTS v2  — from the cross-device screenshots ===========================================
====   (cross-browser hero, proportional icons/logos, chart-control layout, spacing)             ===
====================================================================================================
   Appended last, so these override earlier rules by source order. At 16:9 every value resolves to
   ~the original number, so the approved desktop look is preserved; the changes only bite off-16:9
   or where a value was previously unbounded.
*/

/* 1) HERO CAROUSEL HEIGHT — stops the copy painting over the buttons (Chrome vs Firefox, and the
      half-width window in 3monitor.png) and removes the empty band under short slides on phones.
      Cause: .carousel-slide had a FIXED height (32.6vh); only the active slide shows, so the
      carousel is exactly that tall. When the text needed more than 32.6vh (taller line metrics in
      Firefox, a web-font fallback, or a narrower column) it overflowed the box and landed on the
      .hero-buttons that follow it. Fix: height:auto + min-height, so the slide grows to fit its text
      in any browser at any width (buttons always sit below), while min-height keeps the 16:9 rhythm. */
.carousel-slide { height: auto; min-height: 32.6087vh; }

/* 2) PROPORTIONAL ICONS / LOGOS — stops icons distorting + collapsing on non-16:9 / small screens
      (the shield + globe became thin slivers, the social badges tall pills, the payment/social icons
      specks), WITHOUT shrinking them on large monitors.
      Cause: WIDTH in vw but HEIGHT in vh — the two axes drift apart off the tuned ratio and the vw
      side collapses on a phone. Fix: max(px-floor, original-vw) + height:auto. The vw term is the
      element's ORIGINAL width, so at 1920 it equals the original size and it keeps scaling UP on
      QHD / ultrawide exactly as before (a fixed clamp ceiling was capping them too small on big
      screens). The px floor only kicks in on small screens so the icon never collapses; height:auto
      keeps each image's intrinsic ratio, and the social badge is made square. */
.shield-icon,
.globe-icon           { width: max(16px, 1.042vw); height: auto; }
.socialMediaContainer { width: max(38px, 2.604vw); height: max(38px, 2.604vw); }
.logo3                { width: max(20px, 1.5625vw); height: auto; }   /* social glyph */
.logo2                { width: max(30px, 2.604vw); height: auto; }    /* payment icon */

/* 3) SQUARE + PORTRAIT refinements (<= ~7/6), matching the rest of the layer. */
@media (max-aspect-ratio: 7/6) {

  /* The hero has a decorative chevron strip (.-pattern) pinned to its bottom that is 10.87vh tall;
     the hero's bottom padding must reserve at least that much room, or the stacked illustration
     overlaps the strip on phones. (v2 wrongly cut this to 5vh — that was the "logo under the png
     strip" bug.) Keep it a touch above the strip height so the illustration clears it. */
  .hero-section   { padding-bottom: 11vh; }
  .carousel-slide { min-height: 0; }          /* content-drive height so short slides don't leave a gap */

  /* hero illustration: bounded + fluid instead of a raw 50vw (which is huge on a big portrait screen) */
  .illustration   { max-width: clamp(140px, 40vw, 240px); }

  /* Chart bottom controls: keep everything on ONE row on all widths (was: stacked column).
     Buttons keep their size; the dropdown + search field shrink (and truncate) to make room. */
  .controls-container { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 1.5vw; }
  .controls-group { flex: 1 1 0; min-width: 0; gap: 1.5vw; }               /* de to grupper deler bredden ligeligt */
  .controls-group--search { flex: 1 1 0; min-width: 0; }
  .custom-select { width: auto !important; flex: 1 1 0; min-width: 0; }    /* ophæver inline 15.625vw + den gamle 100% */
  .chart-search-wrapper { flex: 1 1 0; min-width: 0; width: auto; }
  .chartStockPickBox { width: 100%; min-width: 0; }
  .chartButton { flex: 0 0 auto; white-space: nowrap; }                    /* knap-tekst ombryder ikke → felterne krymper i stedet */

  /* mindre tekst + venstrestillet dropdown-label, så alt kan være der og trunkeres pænt */
  .controls-container .select-selected   { font-size: clamp(11px, 1.7vh, 15px); justify-content: flex-start; text-align: left; padding-right: 3vh; }
  .controls-container .chartButton       { font-size: clamp(11px, 1.7vh, 15px); padding: 1vh 2.5vw; }
  .controls-container .chartStockPickBox { font-size: clamp(11px, 1.7vh, 15px); }

  .chart-container { height: auto; }

  /* Wide data table: keep it in its horizontal-scroll wrapper (the right pattern on a phone) and make
     that scroll smooth. Forcibly reflowing a many-column table hurts more than it helps. */
  .screeningTableContainer { -webkit-overflow-scrolling: touch; }
}

/*
----------------------------------------------------------------------------------------------------
------------------------------------- END OF REFINEMENTS v2 ----------------------------------------
----------------------------------------------------------------------------------------------------
*/


/*
====================================================================================================
==== REFINEMENTS v3  — second round of screenshots ================================================
====================================================================================================
*/

@media (max-aspect-ratio: 7/6) {

  /* HEADER sits too low on phones: the top-bar + main-nav vertical padding is vh-based and stacks up
     on tall screens, pushing the TICKER PICKER logo well down the page. Tighten the header padding so
     the logo comes back up. (Horizontal padding kept generous.) */
  .top-bar  { padding-top: 0.8vh; padding-bottom: 0.8vh; }
  .main-nav { padding: 1vh 3vw; }        /* was 2.17vh on every side */
  .logo     { margin-bottom: 0.8vh; }

  /* SCREENER TABLE icons too small on phones. The table lives in a horizontal-scroll wrapper, so on a
     phone its cells stay near desktop scale while the page scrolls — but the sort arrows / crown /
     sort markers inside were sized in vw and collapsed to a few px. Size any in-table image to track
     the table's own text (vh) with a px floor, so the markers read at a sensible size again.
     (These controls are generated by JS, so this targets images inside the table generically; if an
     arrow is drawn as a font glyph instead of an image, tell me its class and I'll size that too.) */
  .screeningTableStyle img { height: clamp(14px, 2vh, 22px); width: auto; }
}

/*
----------------------------------------------------------------------------------------------------
------------------------------------- END OF REFINEMENTS v3 ----------------------------------------
----------------------------------------------------------------------------------------------------
*/


/*
====================================================================================================
==== REFINEMENTS v4  — third round of screenshots =================================================
====================================================================================================
*/

/* CAROUSEL DOTS — same width-vw + height-vh distortion as the other icons, so on a phone the round
   dots squished into thin vertical bars ("|||||"). Make them square with a px floor. At 1920 this is
   ~10px, same as before. */
.carousel-dots span,
.dot { width: max(9px, 0.55vw); height: max(9px, 0.55vw); }

@media (max-aspect-ratio: 7/6) {

  /* HEADER — pull it tighter still on phones so the TICKER PICKER logo sits right under the top bar
     instead of dropping into the green space below it. The leftover gap was the top-bar-right margin
     + top-bar bottom padding + main-nav top padding stacking up; trim all three. */
  .top-bar        { padding-top: 0.5vh; padding-bottom: 0.4vh; }
  .top-bar-left,
  .top-bar-right  { margin-bottom: 0.4vh; }
  .main-nav       { padding: 0.5vh 3vw; }
  .logo           { margin-bottom: 0.5vh; }
  .nav-links li   { margin-bottom: 0.5vh; }

  /* SCREENER TABLE — the Above/Below/Between filter dropdown (.custom-select2) was 5vw wide (~18px on
     a phone), so its label spilled over the column edge and, once expanded, the option list was far
     too narrow to read. Give it a real width that fits "Between"; the column and the absolutely-
     positioned option list both follow this width. (JS-generated control; this is the dropdown class
     the stylesheet already defines for the table filter.) */
  .custom-select2 { width: clamp(88px, 26vw, 120px) !important; }

  /* Column-header text was sized in vh and read a bit large + bold for a phone, so the header row
     wrapped tall and looked out of proportion with the data rows. Scale it down a touch (px floor)
     and tighten the header padding so the header block is more compact. */
  .screeningTableStyle th     { font-size: clamp(10px, 1.2vh, 12px); padding-top: 0.7vh; padding-bottom: 0.7vh; }
  .screeningTableHeader-input { font-size: clamp(10px, 1.2vh, 12px); }
}

/*
----------------------------------------------------------------------------------------------------
------------------------------------- END OF REFINEMENTS v4 ----------------------------------------
----------------------------------------------------------------------------------------------------
*/


/*
====================================================================================================
==== REFINEMENTS v5  — login / account card width on mobile =======================================
====================================================================================================
*/

@media (max-aspect-ratio: 7/6) {
  /* The login / account cards (login-container, -container2, -container3) were never routed through
     the adaptive width system, so they kept their desktop max-width of ~52vw — only about half the
     screen on a phone. Widen them on narrow screens so the form uses the width properly, while
     leaving a small margin for the card's shadow. Desktop 16:9 keeps the original 52vw look. */
  .login-container,
  .login-container2,
  .login-container3 { max-width: 90%; }
}

/*
----------------------------------------------------------------------------------------------------
------------------------------------- END OF REFINEMENTS v5 ----------------------------------------
----------------------------------------------------------------------------------------------------
*/


/*
====================================================================================================
==== REFINEMENTS v6 — sector-selection menu (pop-out rectangle + smaller chips) ===================
====   Pairs with a small JS change in Dynamic_screeningTable.js (toggleOptions + positionSectorMenu).
====================================================================================================
*/

/* The Sector cell no longer has to reserve ~400px of width for the options (they now pop OUT over the
   table), so let the Sector column size to its data instead of being forced huge. */
.sectorCustom-Select { min-width: 8vw; }

/* The options list pops out of the narrow cell as an absolute overlay. The JS sets left/width/top so it
   spans the whole table just below the filter row; the values here are safe fallbacks if JS hasn't run
   yet. z-index lifts it above the table body; box-sizing keeps the JS width = the table width exactly. */
.sectorOptions-Container {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  box-sizing: border-box;
  padding: 1vh;
  gap: 0.4vh 0.4vw;
}

/* Expanded = the "rectangle": a distinct white border + shadow so it reads as a pop-out lifted off the
   table. It scales to its content height (the JS sets max-height to the content's scrollHeight). */
.sectorOptions-Container.expanded {
  border: 0.22vh solid #fff;
  border-radius: 0.8vh;
  box-shadow: 0 0.6vh 1.2vh rgba(0, 0, 0, 0.35);
}

/* Smaller chips: size to their own text instead of a forced 20% width, with smaller (bounded) type.
   Keeps the bordered-green look you liked — just more compact. Spacing comes from the container gap. */
.sectorOption-Item {
  flex: 0 1 auto;
  max-width: 100%;
  margin: 0;
  padding: 0.35vh 0.6vw;
  font-size: clamp(9px, 1.05vh, 12px);
  line-height: 1.25;
  text-align: center;
}

@media (max-aspect-ratio:7/6){
  #stockInfoContent .policy-grid{grid-template-columns:1fr;}
}

/*
----------------------------------------------------------------------------------------------------
------------------------------------- END OF REFINEMENTS v6 ----------------------------------------
----------------------------------------------------------------------------------------------------
*/


/*
====================================================================================================
==== REFINEMENTS v7 — sector chip text a touch larger on monitors (landscape) =====================
====================================================================================================
*/
@media (min-aspect-ratio: 7/6) {
  /* On monitor / landscape aspect ratios the chips have room, so bump the text back up a bit (~the
     original size). Portrait / mobile aspect ratios keep the smaller v6 size, which read fine there. */
  .sectorOption-Item { font-size: clamp(12px, 1.3vh, 15px); }
}