canvas.footprint {
	position: sticky;
	top: 0px;
	left: 0px;
}
.ui-layout-west {
	position: fixed;          /* lock to viewport */
	top: 0;
	left: 0;
	bottom: 0;
	width: 250px;             /* whatever width you use in your layout */
	overflow: hidden;         /* stop the entire pane from scrolling */
	display: flex;
	flex-direction: column;   /* lets children stack vertically */
}

.ui-layout-west .scrollable-content {
	box-sizing: border-box;
	padding: 0;        /* so clientHeight == CSS height */
	margin: 0;
	overflow: auto;
}


.scrollable-content {
	scrollbar-width: thin;
	scrollbar-color: #555 #1b1b1b;
}

.scrollable-content::-webkit-scrollbar {
	width: 8px;
}

.scrollable-content::-webkit-scrollbar-track {
	background: #1b1b1b;
}

.scrollable-content::-webkit-scrollbar-thumb {
	background-color: #555;
	border-radius: 8px;
}


div.chart-footprint {
	position: relative;
	background-color: black;
}


div.canvas-container div.date {
	color: #ffffff;
	border-radius: 8px;
	background-color: #333;
	padding: 10px;
}
div.instruments .headerLabel {
	cursor: pointer;
}
.calendar-container {
	background: #e8e8e8!important;
	flex: 0 0 auto;
}
.chart-canvas-container { 
	flex: 1 1 auto; 
}

.pl-pct.text-end {
	width: 50px;
}
.chart-canvas-container {
  position: relative;
}

.chart-canvas-container svg.chart {
  position: relative;    /* make z-index work */
  z-index: 2;            /* sits on top */
}

.chart-canvas-container canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;            /* behind the SVG */
}

.chart-canvas-container canvas.option-quotes {
  z-index: 1000;            /* behind the SVG */
}


.ui-layout-pane-center {
	background: #000!important;
}
div#VWAP svg {
	height: 50vh;
}

div.calendarIFrame iframe { height: 85vh; }
div#header div.logo img {
	height: 10vh;
}

.zentrixa-logo {
	width: 25vw;
}

.zentrixa-logo-calendar {
	height: 10vh;
}
text.angleU, text.angleL {
	alignment-baseline: middle;
	fill: white;
	font-size: 1.5em;
	white-space: pre;
}

g.tradeLabels text.label {
	alignment-baseline: bottom;
	fill: white;
}
div.statsWindow {
	position: absolute;
	z-index: 3;
	height: 500px;
	width: 500px;
	border: medium solid #646464;
	border-radius: 10px;
	background-color: black;
}



g.snapshot text.label { pointer-events: none;}
svg circle.optionVolume {fill-opacity: 0}
g.graph { pointer-events: all;}
g.range line { opacity: 0.8;}
text.cycle-high, text.cycle-low { font-size: 1.5em; text-anchor: middle; }
rect.bar-put, rect.bar-call { opacity: 0.5;}
rect.bar-put { fill: red; }
rect.bar-call { fill: green; }

.cycle-low { fill: red; stroke: white;}
.cycle-high{ fill: green; stroke: white;}

.full-height-width { width: 100%; height: 100%}
.center{
        width: 200px;
        height: 200px;
        position:absolute; /*it can be fixed too*/
        left:0; right:0;
        top:0; bottom:0;
        margin:auto;

        /*this to solve "the content will not be cut when the window is smaller than the content": */
        max-width:100%;
        max-height:100%;
        overflow:auto;
}
td.bidException { font-size: 1.10em;border: 4px solid purple!important;}
div#bidExceptions div.label, div#decayResistant div.label { color: white; background-color: red;}
div#earningsThisWeek div.label { color: black; background-color: yellow;}

div#bidExceptions div.label, div#decayResistant div.label, div#earningsThisWeek div.label { width: 160px;}

div.exc, div.earnings, div.DR { display: inline; float:left;margin-left:5px; cursor: pointer;}
div#expirations div.exp { white-space:pre;}
div#snapshot, div#snapshot table {width:950px;white-space:pre;}

div#snapshot table tbody td {white-space: pre;}
div#snapshot table thead tr th {text-align: right;}

div.deltas div.delta {background-color:#f8f8f8;margin-bottom:1px;white-space:pre;}
td.details-control {
    background: url('/images/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('/images/details_close.png') no-repeat center center;
}
text.hoverTS { cursor: pointer;}
path.sto21k { stroke: purple; stroke-width: 1; }

table.sideBySide {
        width: 100%;
    }

table.sideBySide thead, table.sideBySide tbody, table.sideBySide tr, table.sideBySide td, table.sideBySideth { display: block; }

table.sideBySide tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

table.sideBySide thead th {
    height: 30px;

    /*text-align: left;*/
}

table.sideBySide tbody {
    overflow-y: auto;
}

table.sideBySide thead {
    /* fallback */
}


table.sideBySide tbody td, table.sideBySide thead th {
    width: 10%;
    float: left;
}

div#views div label { white-space:nowrap;font-size:0.8em;}
.axisWhite line{
  stroke: #f8f8f8;
}

.axisWhite path{
  stroke: #f8f8f8;
}

.axisWhite text{
  fill: #f8f8f8;
}  

.sto-recent {
	font-size:1.5em;
}
line.q-bar { stroke: #646464;}
div.expirations .menuOpt {float:left;text-align:center;cursor:pointer;}
div.expirations .menuOpt:hover {background-color: #fff;}
div.expirations .menuOpt.selected {background-color: #646464; color: white;}

text.itm {fill: black;}
text.itm.tickUp {fill: green;}
text.itm.tickDown {fill: red;}

text.otm {fill: #343434;}

rect.call-hover:hover, rect.put-hover:hover {
	fill: #949494;
}
rect.call-hover:hover ~ text.call-bid, 
rect.call-hover:hover ~ text.call-ask, 
rect.put-hover:hover ~ text.put-bid,  
rect.put-hover:hover ~ text.put-ask {
	fill: yellow;
}


div.chain {
	color: white;
	/*font-size: 0.75em;*/
}
div.Anomaly{ padding-left: 5px;}

.poc circle, 
.track-overlay,
.vwap circle,
#logoutBtn,
div.Anomaly,
div.ui-accordion-content div,
div#instruments div.instrument,
div#favorites div.instrument,
div#playbook > div,
g.control-buttons foreignObject .play,
g.chain,
table.anomaliesTable tbody tr, 
table.eventsTable tbody tr, 
table.executionsTable tbody tr 
{ 
	cursor: pointer;
}

div.anomaly:hover{ background-color: #646464; color: white;}

td.up { background-color: green;}
td.down { background-color: red;}
table.candidates { border-collapse:collapse !important;}
table.candidates tr.openPosition {border: 5pt solid black;}

table.candidates td.up, table.candidates td.down, div#snapshot table td.up, div#snapshot table td.down { color:white;}
table.candidates td.yellow { color:black;background-color:yellow;}
table.candidates td.blue { color:white;background-color:blue;}
table.candidates td { white-space:pre;}

td.neutral { background-color: #646464;}
table.marketOverview td { color: #ffffff;}

div.marketOverview table tbody tr td:nth-child(1) {	width: 75px;}
div.marketOverview table tbody tr td:nth-child(2) {	width: 75px;}
div.marketOverview table tbody tr td:nth-child(3) {	width: 75px;}
div.marketOverview table tbody tr td:nth-child(4) {	width: 75px;}
div.marketOverview table tbody tr td:nth-child(5) { width: 75px;}

div.marketOverview table tbody tr td { 
	text-align: right;
}

div.marketOverview table thead th { 
	background-color: #646464;
	color: #f8f8f8;
	width: 20%;
}


div.marketOverview table { 
	text-align: center;
}

table.marketOverview { width: 100%; border-collapse: collapse;}


div#playbook > div.ui-accordion-content, 
div.ui-accordion-content > div.instrument, 
div#favorites > div.instrument, 
div.date, div.visual { 
	padding-left: 10px !important;
}

div#playbook > div {
	padding-left: 0 0 0 15px;
}

div#instruments div { padding-left: 5px;white-space: pre;}
div#instruments > div:nth-of-type(odd) {
    background: #d1d1d1 !important;
	color: #646464 !important;
}
div#instruments > div:nth-of-type(even) {
    background: #f1f1f1!important;
	color: #646464;	
}
div#instruments div.chart { padding: 0px;background-color: #000000 !important;}

div#playbook > div:nth-of-type(odd) {
    background: #d1d1d1 !important;
	color: #646464 !important;
}
div#playbook > div:nth-of-type(even) {
    background: #f1f1f1!important;
	color: #646464;	
}
table.dataTable { width: 100% !important;}

.dt-left, .dt-center, .dt-right {
	white-space:nowrap;
}

.earningsTable .dt-left {
	width: 100px !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

tbody > tr:nth-of-type(odd) {
    background: #d1d1d1 !important;
	color: #646464 !important;
}
tbody > tr:nth-of-type(even) {
    background: #f1f1f1!important;
	color: #646464;	
}

#logoutBtn {

}

text.short, text.long { font-size:1.5em;}

circle.optionVolume,
circle.q-p, 
circle.reversal,
circle.t-p,
circle.t-pline.mcp-lvn, 
line.q-bar,
g.price-line *, 
g.stochastics-line-k *, 
g.stochastics-line-d *, 
g.sma-line *, 
text.mcp-lvn-label, 
text.poc-label, 
text.hvn,
.bg-line, 
.current-price-text,
.cvp-bar, 
.cvp-lvn,
.cvp-label,
.cvp-hvn,
.hover-price, 
.hover-price .price-line, 
.hover-price-strike, 
.hover-time .time-line, 
.hover-time, 
.mcp-bar, 
path:not(.trade),
g.stochastics line,
g.ticks path.swing,
g.local-lows path.low,
g.local-highs path.high,
.planets text, 
.price-marker,
.price-marker path,
.range,
.retrace-marker *,
.signal-bg,
rect.support,
rect.resistance,
.va,
g.markers *,
circle.lr-slope
{
	pointer-events: none;
}
path.high, path.low { pointer-events: all;}
div.EQUITY div#stats, div.ETF div#stats { display: none;}
div#stats {
	position:relative;
	border: 2px solid #1f6c40;
}

svg.stats text {
	font-size: 0.4em;
}

body{ 
	font-family: Ubuntu Mono, monospace;
	font-size:10pt;
	background-color: #f2f6ec;
	min-height:100%;
}
/*
@font-face {
    font-family: StockerCondensed;
    src: url(/fonts/Interstate-RegularCondensed.ttf);
}
*/
div.ui-accordion-content > div:nth-of-type(odd), div#favorites > div:nth-of-type(odd) {
    background: #d1d1d1;
	color: #646464;
}
div.ui-accordion-content > div:nth-of-type(even), div#favorites > div:nth-of-type(even) {
    background: #f1f1f1;
	color: #646464;	
}

div#instruments div.selected {
	color: #fff!important;
	background: #1f6c40!important;
}


.axis path,
.axis line {
    stroke: #d2d2d2;
    shape-rendering: crispEdges;
}

.axis text, .chart-label, .va-label, .cvp-label {
	font-family: Ubuntu Mono, monospace;
}

.track,
.track-inset,
.track-overlay {
  stroke-linecap: round;
}

.track {
	stroke: #000;
	stroke-opacity: 0.3;
	stroke-width: 10px;
}

.track-inset {
	stroke: #ddd;
	stroke-width: 8px;
}

.track-overlay {
	pointer-events: stroke;
	stroke-width: 10px;
	stroke: transparent;
}

.handle {
	fill: #1f6c40;
	stroke: #000;
	stroke-opacity: 0.5;
	stroke-width: 1.25px;
}
g.grid foreignObject { 
	background-color: #1f6c40;
	opacity: 0.1;
}

foreignObject div.poc, 
	foreignObject div.ticks, 
	foreignObject div.status,
	foreignObject div.trend,
	foreignObject div.exl,
	foreignObject div.vah,
	foreignObject div.val 
{
	display: inline-block;
	text-align: right;
	width: 50px;
}

.bid-line {
  stroke: green;
  stroke-width: 0.5;
}
.ask-line {
  stroke: red;
  stroke-width: 0.5;
}
g.context text { fill: gray;}
.price-graph, .lr-line-p { stroke: yellow; stroke-width: 1; }
	
.lr-line-p060,
	.lr-line-p120,
	.lr-line-p180,
	.lr-line-p240,
	.lr-line-p300,
	.lr-line-p360,
	.lr-line-p420,
	.lr-line-p480,
	.lr-line-p540 { stroke: cyan; stroke-width: 1; }
	
.price-graph-highs { stroke: red; stroke-width: 1; }
.price-graph-lows { stroke: green; stroke-width: 1; }
.price-graph-comp {stroke: cyan;  stroke-width: 1; opacity: 1;}
.price-graph-ndx {stroke: white;  stroke-width: 1; opacity: 1;}
.price-graph-second {
	stroke: #cccccc;
	stroke-width: 2;
}

.comp-graph { stroke: pink; stroke-width: 1; }

.sma-graph-1, .lr-line-ma1 { stroke: white; stroke-width: 1; } 
.sma-graph-2, .lr-line-ma2 {stroke: Chartreuse;stroke-width: 1;}
.sma-graph-3, .lr-line-ma3 {stroke: #5CACEE; stroke-width: 1;}
.twap-graph { stroke: orange; stroke-width: 2; } 

.graph-resistance { stroke: cyan; stroke-width: 2; }
.graph-support { stroke: red; stroke-width: 2; }

.sma-graph-30, .sma-graph-60, .sma-graph-120, .sma-graph-180 {stroke: white; opacity: 1}
.sma-graph-30, .sma-graph-60 {stroke-dasharray: 1 1}
.sma-graph-120 {stroke-dasharray: 2 2;}
.sma-graph-180 {stroke-dasharray: 3 3;}

.sma-graph-cse{ stroke: yellow; stroke-width: 3; display: none;}

.price-graph-dark {
	stroke: #000000;
	stroke-width: 0.5;
}

foreignObject div.status, foreignObject div.trend {
	
	margin: 2px 10px;
	background-color: #000000;
	color: #FFFFFF;
	text-align: center;
	opacity: 0.15;
	width:7px;
}
g.control-buttons foreignObject .play {
	background-color: #646464;
	color: #ffffff;
	text-align: center;
	border: 1px solid #d1d1d1;
}

.sweep-card {
	border: 1px solid var(--sweep-border, #444);
	border-radius: 12px;
	padding: 12px 14px;
	margin: 8px 0;
	color: #e5e7eb;
	background: var(--sweep-bg, #111827);
	box-shadow: 0 4px 14px rgba(0,0,0,0.25);
	font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.sweep-card[data-side="buySweep"] { --sweep-bg:#062a1a; --sweep-border:#16a34a; }
.sweep-card[data-side="sellSweep"]{ --sweep-bg:#2a0b0b; --sweep-border:#ef4444; }