body
{
  	font-family: Roboto;
	color: #222222;
}

.header 
{
	font-size: 20px; 
	font-weight:bold;
	display: block;
  	font-family: Roboto;
	color: #222222;
	
}

.StockList
{
 	height:985px; 
}

a:link 
{
  color: #0000EE;
}

/* visited link */
a:visited 
{
  color: #551A8B;
}

/* mouse over link */
a:hover 
{
  color: red;
}

/* selected link */
a:active 
{
  color: blue;
}

.tabHeader
{
	padding: 0px;
	padding-bottom: 0px;
	font-weight:bold;
	font-size: 14px;
  	font-family: Roboto;
	color: #222222;

}

.StockTable
{
	font-size: 13px;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  	font-family: Roboto;
	color: #222222;
}

.StockTable tbody
{
  display:block;
  width: 100%;
  overflow: auto;
  height: 960px;
}

.StockTable thead tr 
{
   display: block;
}

.StockTable thead 
{
	font-weight:bold;
	font-size: 14px;
}

.StockTable th, .StockTable td 
{
  
}
.StockTableHeader
{
}

.changeNo
{
}

.changeUp
{
	color: #008000;
}

.changeDown
{
	color: #FF0000;
}

.qtd
{
	font-size: 11px;
	padding-bottom: 7px;

}

.qtdVal
{
	font-weight: bold;
	padding-right: 10px;
}

.ajax__tab_xp 
{
    background-color:transparent;
    margin: 0px;
    padding: 0px;    
    text-align: left;
    float: left;
}

.ajax__tab_header
{
	height: 21px;
}

 @media (max-width: 500px) {
  /* QTD / MTD / YTD */
  .qtd { display:block; white-space:normal !important; line-height:1.3; }
  .qtdVal { padding-right:0; font-weight:bold; }
  .qtdVal::after { content:""; display:block; }

  /* Tab container can stay fluid */
  .ajax_tab_xp.ajax_tab_container,
  #Main_WidgetTabContainer { width:100% !important; max-width:100% !important; min-width:300px !important;}
  .ajax_tab_xp .ajax_tab_body { box-sizing:border-box; padding:6px !important; }
  
   
	  /* 1) Beat the inline height on the tab body (exact ID) */
	#Main_WidgetTabContainer_ctl00_SegmentTabContainer_PEER_body {
	  height: auto !important;
	  overflow-y: visible !important;
	}

	/* 2) The StockList inside that tab has inline overflow-y:hidden. Override it. */
	#Main_WidgetTabContainer_ctl00_SegmentTabContainer_PEER_body .StockList {
	  height: auto !important;
	  overflow-y: visible !important;
	}
	
		  /* 1) Beat the inline height on the tab body (exact ID) */
	#Main_WidgetTabContainer_ctl01_SegmentTabContainer_BOI_body {
	  height: auto !important;
	  overflow-y: visible !important;
	}
	
		/* 2) The StockList inside that tab has inline overflow-y:hidden. Override it. */
	#Main_WidgetTabContainer_ctl01_SegmentTabContainer_BOI_body .StockList {
	  height: auto !important;
	  overflow-y: visible !important;
	}

  /* <<< Put the min-width on the scrolling wrapper */
	.StockList {
	  width: 100%;
	  max-width: 100%;
	  overflow-x: auto;
	  overflow-y: visible !important;   /* let height grow naturally */
	  height: auto !important;  /* override any fixed desktop height */
	  box-sizing: border-box;
	  display: block;
	}

  /* Table */
  .StockTable {
    width:100%;
    table-layout:fixed;     /* stable columns */
    border-collapse:collapse;
    font-size:11px;
  }
  .StockTable th, .StockTable td { padding:2px 4px; }

  /* Revert desktop hacks so header/body align */
  .StockTable thead { display:table-header-group !important; }
  .StockTable thead tr { display:table-row !important; }
  .StockTable tbody {
    display:table-row-group !important;
    width:auto !important; height:auto !important; overflow:visible !important;
  }

  /* Neutralize any inline widths (e.g., Name had 420px) */
  .StockTable th[style], .StockTable td[style] { width:auto !important; }

  /* Keep Name on one line and take remaining space */
  .StockTable th:nth-child(2), .StockTable td:nth-child(2) {
    width:auto !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
	.StockTable thead {
		font-weight: bold;
		font-size: 12px;
	}

  /* Squeeze other columns so Name can grow */
  .StockTable th:nth-child(1), .StockTable td:nth-child(1) { width:14% !important; }    /* Symbol */
  .StockTable th:nth-child(3), .StockTable td:nth-child(3) { width:20% !important; text-align:right; } /* Price */
  .StockTable th:nth-child(4), .StockTable td:nth-child(4) { width:18% !important; text-align:right; } /* Change */

  /* Hide cols 5–6 on mobile (keep if desired) */
  .StockTable th:nth-child(5), .StockTable th:nth-child(6),
  .StockTable td:nth-child(5), .StockTable td:nth-child(6) { display:none; }
  
  /* keep header labels from bleeding into next column */
.StockTable th {
  white-space: nowrap;        /* don't wrap header words */
  box-sizing: border-box;
}

/* give the Symbol header a tiny guaranteed width so 'Symbol' doesn't crush Name */
.StockTable th:nth-child(1),
.StockTable td:nth-child(1) {
  width: 16% !important;   
}

.ajax__tab_xp .ajax__tab_body {
    padding: 5px !important;
	height: 70px !important;
}