<style>
body {
    background: #121212;
    color: white;
    font-family: 'Segoe UI', sans-serif;
    margin: 20px;
}
MyClass {
    color: #FCD038;
}
.green th {
    color: #ABFA54;
    column-rule-color: #7BFBEE;
}
#dateHeader {
    font-size: 24px;
    color: #00d4ff;
    margin-bottom: 20px;
    font-weight: bold;
}
/* Threshold Control Style */
.controls {
    margin-bottom: 20px;
    background: #1e1e1e;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #333;
}
.controls label {
    font-size: 14px;
    color: #aaa;
    margin-right: 10px;
}
.controls input {
    background: #121212;
    color: #00d4ff;
    border: 1px solid #444;
    padding: 5px;
    width: 60px;
    font-weight: bold;
    border-radius: 4px;
}
table {
    width: 100%;
    border-collapse: collapse;
    background: #1e1e1e;
    table-layout: auto;
	border-spacing: 0; /* Add this argument to ensure 0 gap between cells */
	/* table-layout: fixed; */
}
th, td {
    padding: 2px;
    text-align: left;
    border-bottom: 1px solid #333; /* This is your gray line */
    font-size: 12px;
    vertical-align: top;
    color: #FFFFFF;
}
.col-pos-neg {
    width: 30px;
    text-align: center;
}

.col-comp {
    /* width: 270px  !important;   /* 130px;  */  
	min-width: 130px;
    color: #80FFFF;
    font-weight: bolder;
}
.col-price {
    width: 45px;
    position: relative !important;
    overflow: visible !important; /* Critical for Chrome! */
}
.col-inc {
    width: 40px;
    color: #80FFFF;
}
.col-time {
    width: 85px; /* Bump this up slightly from 65px to fit the bold text */
    white-space: nowrap; /* CRITICAL: Prevents the 2-line wrap */
}
/* Also target the specific data cell to be safe */
td.local-time {
    white-space: nowrap;
    width: 1%; /* This forces it to shrink to the exact width of the time string */
}
.col-kw {
    width: 20px;
	/* position: relative !important;  */
    /* overflow: visible !important; /* Critical for Chrome! */ 
}
/* This forces Chrome to treat the cell as the anchor for your absolute popup 
th.col-kw, th.col-price, th {
    position: relative !important;
    overflow: visible !important;
	vertical-align: bottom; /* Keeps 'Typ' and 'Price' at the bottom of the cell */
}
.col-text {
    width: auto; 
	text-align: left;
	 /* 2. ADD "SPACES" VIA PADDING */
    /* 20px is roughly 3-4 spaces; adjust as needed */
    /* padding-left: 125px !important;   */
	/* text-align: left !important; */
    /* Use border-left as 'bulletproof' padding for Chrome */
    /* border-left: 125px solid transparent !important;  */
	/* white-space: nowrap;  */
}
th.col-time, td.local-time {
    text-align: left;
    padding-right: 5px; /* Give it a tiny bit of breathing room from the TYP column */
}
/* Find the th block and add this to the bottom of the file */
th.col-text {
    width: 100%; /* This tells the browser: "Make every other column small, and give ALL the leftover space to NEWS" */
}
th {
    /* position: -webkit-sticky;  */
    /* position: sticky;  */
    /* top: 0; */
    background-color: #252525 !important;
    color: #86FBEF;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
   /*  z-index: 1000;  */
    border-bottom: 2px solid #444;
}
.col-sym {    /* for column header */
    width: 10px;
    color: #80FFFF;
}
/* Fix for the Symbol Link color */
.symbol a {
    color: #00d4ff !important; /* Bright Cyan/Blue */
    text-decoration: none;
    font-weight: bold;
}
.symbol a:hover {
    color: #80FFFF; /* Lighter highlight on hover */
    text-decoration: underline;
}
/* Ensure the symbol class itself is bright if no link is used */
.symbol {
    color: #FFCB97; /* Your original Peach color */
    font-weight: bold;
}
.significant {
    background-color: #003333 !important;
    color: #FF0000;
    font-weight: bold;
    border-radius: 4px;
}
.wrap-text {
    white-space: normal;
    word-wrap: break-word;
}
tr:hover {
    background-color: #2a2a2a;
    color: #BFFD7B;
}
.floating-logo {
	position: absolute;
	top: -10px;
	left: 363px;
	z-index: 500;
}
body,td,th {
    font-family: "Segoe UI", sans-serif;
}
.sign-pos { color: #ABFA54; font-weight: bold; text-align: center; }
.sign-neg { color: #FF4444; font-weight: bold; text-align: center; }
.align-right { text-align: right !important; padding-right: 10px; }

/* For "i" icon Info button hover and click popup */
    .header-btn-wrap {
    position: relative !important; 
    display: inline-block !important; 
	transform: translate(0, 0); 
	z-index: 10;	
    cursor: pointer;
	/* Reset any inherited table header styles */
    text-transform: uppercase !important;
    font-weight: bold;	    
    color: #00d4ff !important;/* 2. OVERRIDE THE <tr> GREEN ROW COLOR WITH BLUE */
	 /* 3. ADD THE UNDERLINE */
    text-decoration: underline !important;
    text-underline-offset: 3px; /* Gives a little breathing room between text and line */
  }
  /* The shared popup box */
  .popup-box {
	white-space: pre-line !important; /* pressing the ENTER key gives line break */
    visibility: hidden;
    opacity: 0;
    width: 140px; 	/* Set width to ~28 characters */
    min-width: 28ch; 
    background-color: #333;
    color: #D1FFD1 !important; 
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
	/* CRITICAL CHROME FIX */
    height: 0 !important; 
	max-height: 0 !important;
    overflow: visible !important;
    display: block !important;    
    /* Ensure it doesn't push the table row down */
    margin-bottom: 0 !important;
	    /* CHANGE THIS: Use a negative 'top' instead of 'bottom' 
       to force it ABOVE the text in Chrome */
    bottom: 125% !important; /* Position above image */
    /* left: 50%; */
    /* Keep the -50% for centering, but ensure it's forced */
    /* transform: translateX(-50%) !important;    */
    /* Chrome visibility fix */    
	top: auto !important; /* Forces it to use 'bottom' instead */ 
    z-index: 9999 !important; /* Ensure it stays on top of other rows */
    /* transform: translateX(0%) translateY(0px);        /* ANIMATE Y is verticle Negative is up. X +ve is right */
    transition: opacity 0.93s ease, transform 0.93s ease; /* Smooth timing */
    font-size: 13px;	
    font-weight: 500; /* Ensure the font weight is clear */
    pointer-events: none; /* Prevents flickering when mouse moves */
	line-height: 1.4;
    /* Ensure text inside doesn't capitalize */
    text-transform: none !important; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  }
  /* Show on Hover */
  .header-btn-wrap:hover .popup-box, .popup-box.is-clicked 
  {
    height: auto !important;
    max-height: none !important;
	visibility: visible;
    opacity: 1;
	transform: translateX(-40%) translateY(-0%); /* Slides left to final position */
  }
  /* Persistent show class for Click 
  .is-clicked {
    visibility: visible !important;
    opacity: 1 !important;
  }
  */
</style>
