@charset "UTF-8";
/* CSS Document */

.chartContainer {
	/* DIV that the canvas expands to. */
	display: block;
	font-family: Roboto, Helvetica, sans-serif;
	font-size: 12px;
	position: relative; /* chart container must be relative for internal DOM elements to be correct */
}

.sharing .ciq-no-share {
	display: none !important;
}

.stx-canvas-shim {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

/* --------------------------------------------------------- BUTTONS --------------------------------------------------------- */

/* Basic Buttons */

.stx-btn {
	/* Inactive Button */
	display: inline-block;
	cursor: pointer;
	padding: 0px 8px;
	border: solid 1px #ddd;
	font-weight: bold;
	line-height: 27px;
	color: #7e7e7e;
	text-align: center;
	overflow: visible;
	background-repeat: no-repeat;
	border-radius: 3px;
	transition:
		color 0.25s,
		border 0.25s,
		box-shadow 0.25s;
	user-select: none;
}
/* Button Hover State */
/*.stx-btn:hover {
	color: #444444;
	border: solid 1px #c5c5c5;
	-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, .1), inset 0px -8px 6px rgba(100, 100, 100, .03);
	-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, .1), inset 0px -8px 6px rgba(100, 100, 100, .03);
	box-shadow: 0px 1px 1px rgba(0, 0, 0, .1), inset 0px -8px 6px rgba(100, 100, 100, .03);
}*/
/* Button Active State */
.stx-btn:active {
	color: #333;
	-webkit-box-shadow: inset 0px 8px 6px rgba(100, 100, 100, 0.03);
	-moz-box-shadow: inset 0px 8px 6px rgba(100, 100, 100, 0.03);
	box-shadow: inset 0px 8px 6px rgba(100, 100, 100, 0.03);
}

/* Panel Buttons */

.stx-btn-panel,
.stx-btn-panel span {
	/* Button Defaults */
	display: inline-block;
	width: 25px;
	height: 25px;
	cursor: pointer;
	transition: transform 0.2s;
}
.stx-btn-panel {
	/* Button Spacing */
	margin: 6px 2px 3px 2px;
}
/*.stx-btn-panel:hover span,*/
.stx-btn-panel:active span {
	/* Make buttons full opacity on hover or hit */
	opacity: 1;
}
.stx-btn-panel:active {
	/* Scale up when active */
	-webkit-transform: scale(1.2, 1.2);
	-ms-transform: scale(1.2, 1.2);
	transform: scale(1.2, 1.2);
}
.stx-btn-panel span {
	/* Button Icons */
	background-image: url(img/stx-sprite-panels.svg);
	opacity: 0.6;
	transition: opacity 0.2s;
}

.stx-btn-panel > span.stx-ico-up {
	background-position: -150px -25px;
}
.stx-btn-panel > span.stx-ico-down {
	background-position: -200px -25px;
}
.stx-btn-panel > span.stx-ico-close {
	background-position: -250px -25px;
}
.stx-btn-panel > span.stx-ico-edit {
	background-position: -300px -25px;
}
.stx-btn-panel > span.stx-ico-focus {
	background-position: -350px -25px;
}

/* --------------------------------------------------------- CHART CONTROLS --------------------------------------------------------- */

.stx_chart_controls {
	/* Chart Control module */
	position: absolute;
	display: block;
	bottom: 60px;
	left: 50%;
	height: 25px;
	margin-bottom: 0;
	width: auto;
	text-align: center;
	z-index: 30;
	transform: translateX(
		calc(-50% - 0.5px)
	); /* half pixel to make sure tooltip border doesn't get blurred */
}

.chartSize,
.chartSize span {
	/* Chart Control element defaults */
	height: 25px;
	display: inline-block;
	user-select: none;
}
.chartSize {
	/* Chart size container */
	margin: 0px auto;
	position: relative;
	border-radius: 3px;
	background: rgba(250, 250, 250, 0.8); /* converted to rgb from #fafafa */
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
	transform-origin: bottom center;
	transform: scale(1.15);
	transition:
		transform 350ms cubic-bezier(0.77, 0, 0.175, 1),
		opacity 350ms linear;
}

.chartSize span:after {
	/* Divider between zoom buttons */
	content: "";
	display: block;
	position: relative;
	top: 10%;
	width: 1px;
	height: 80%;
	float: right;
	background: rgba(0, 0, 0, 0.2);
}
.chartSize span {
	/* Chart size (+) and (-) buttons */
	background-image: url(img/stx-sprite-panels.svg);
	width: 35px;
	cursor: pointer;
	transition:
		opacity 0.25s,
		transform 0.2s;
	opacity: 0.6;
}

.chartSize .stx-zoom-out {
	/* Zoom out */
	background-position: -45px -25px;
	border-radius: 0;
}
.chartSize .stx-zoom-in {
	/* Zoom in */
	background-position: -95px -25px;
	border-radius: 0;
}
.chartSize .stx-chart-control-button {
	position: relative; /* set relative to position tooltip */
	background: #ccc center no-repeat;
	background-size: contain;
	height: 25px;
	box-sizing: border-box;
	transition: none;
}
.chartSize .stx-chart-control-button.active {
	border-bottom: solid 3px #398dff;
	height: 22px;
	margin-bottom: 0;
}
.chartSize span.stx-chart-control-button:active {
	/* override the scale set on :active because it has side effects on the .active border*/
	transform: scale(1);
}

/* SmartZoom button icon */
.chartSize .stx-smart-zoom {
	background: url(img/smart-zoom.svg) center no-repeat;
	background-size: contain;
}

/* Full Screen button icon */
.chartSize .stx-full-screen {
	background: url(img/full-screen.svg) center no-repeat;
	background-size: 19px;
	background-position: 50% calc(50% + 1px);
}

/*.chartSize span:hover,*/
.chartSize span:active,
/*.stx_jump_today:hover,*/
.stx_jump_today:active {
	/* Make buttons full opacity on hover or hit */
	opacity: 1;
}
.chartSize span:active {
	/* Scale up when active */
	transform: scale(1.2, 1.2);
}

*[interactable]:not([last-interaction="touch"]) .chartSize span:hover {
	opacity: 1;
}

/* Chart control tool-tips */
.stx_chart_controls .stx-tooltip {
	position: absolute;
	display: block;
	opacity: 0;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	padding: 3px;
	min-width: 44px;
	text-align: center;
	font-weight: 400;
	font-size: 10px;
	background: #398dff;
	color: #f8f8f8;
	border: solid 1px #e4e4e4;
	border-radius: 1px;
	transform: translate(-50%, 0) scale(0.86); /* scale 0.86 corrects for 1.15 scale on parent */
	z-index: 4;
}

*[interactable]:not([last-interaction="touch"])
	.stx_chart_controls
	*:hover
	> .stx-tooltip {
	top: 110%;
	opacity: 1;
	transition:
		opacity 0.1s 0.1s,
		top 0.5s 0.1s;
}

.stx_notification_tray {
	cursor: pointer;
	/* height: 25px; */
	right: 70px;
	position: absolute;
	z-index: 30;
	background: #fafafa;
	border-radius: 3px;
}

.stx_notification_tray div {
	box-sizing: content-box;
	position: relative;
	height: 16px;
	padding: 4px;
	margin-bottom: 1px;
	text-align: end;
}

.stx_notification_tray div > * {
	height: 16px;
	padding: 4px;
	margin-bottom: 1px;
}

.stx_jump_today {
	/* Button  jumping to today's data */
	color: #fff;
	overflow: hidden;
	position: absolute;
	bottom: 12px;
	right: 10px;
	line-height: 0px;
	height: 25px;
	width: 30px;
	padding: 0px;
	border-radius: 3px;
	background: #fafafa;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
	transition: background 0.25s;
	cursor: pointer;
	z-index: 30;
}

.stx_jump_today span {
	background-image: url(img/stx-sprite-panels.svg);
	background-repeat: no-repeat;
	display: inline-block;
	line-height: 25px;
	height: 25px;
	width: 30px;
	padding-top: 25px;
	background-position: -448px -25px;
	transition:
		opacity 0.25s,
		transform 0.2s;
	opacity: 0.6;
}
*[interactable]:not([last-interaction="touch"]) .stx_jump_today:hover span {
	opacity: 1;
}

/* --------------------------------------------------------- PANEL CONTROL TEMPLATES --------------------------------------------------------- */

.stx-baseline-handle {
	/* used for dragging the baseline up and down */
	background-image: url(img/stx-sprite-ui.svg);
	background-position: -770px -26px;
	display: none;
	height: 25px;
	position: absolute;
	width: 25px;
	z-index: 30;
	background-color: #eee;
	border: solid 1px #999;
	border-radius: 5px;
	transform: scale(0.75);
	box-sizing: border-box;
}
.stx-baseline-handle:hover,
.stx-baseline-handle:active {
	transform: scale(1);
}

.stx_anchor_handle {
	width: 5px;
	position: absolute;
	z-index: 30;
	background-color: #398dff;
	border-radius: 6px;
	cursor: ew-resize;
	border-left-color: #888;
}
/*.stx-baseline-handle:hover,*/
.stx-baseline-handle:active,
.stx-baseline-handle.stx-grab {
	opacity: 1;
	cursor: grab;
}
.stx-baseline-handle.stx-grabbing {
	opacity: 1;
	cursor: grabbing;
}

.stx-drag-chart {
	/* Use the hand icon when grabbing and moving the chart */
	cursor: url(img/closedhand.cur), default !important;
}
.stx-ico-handle {
	/* The div that allows users to adjust the panels */
	position: absolute;
	left: 0%;
	height: 6px;
	width: 100%;
	overflow: hidden;
	cursor: url(img/vertical.cur), ns-resize;
	z-index: 30;
}
.stx-ico-handle:active {
	/* Use the vertical resize when adjusting panels */
	cursor: url(img/vertical.cur), ns-resize;
}

.stx-panel-control {
	/* Panel Control buttons template */
	position: absolute;
	top: 10px;
	left: 0px;
	overflow: hidden;
	z-index: 30;
	display: none;
}

.stx-panel-control * {
	user-select: none;
}

.stx-panel-control.stx-show {
	display: inline-block; /*backwards compat*/
}

.stx-panel-control.stx-show .stx-btn-panel {
	display: none;
}

.stx-panel-control.stx-show .stx-btn-panel.stx-show {
	display: inline;
	z-index: 2;
}

.stx-panel-title {
	/* Panel/Chart Titles */
	margin: 2px 10px 5px;
	float: left;
	color: #333;
	padding: 0 10px 0 10px;
	line-height: 22px;
	font-size: 12px;
	text-align: left;
	text-transform: uppercase;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
}

.stx-panel-control .stx-btn {
	/* Float all icons so they stay in line on the left */
	float: left;
}

.stx-panel-control .stx-panel-legend {
	display: none;
}

.stx-panel-legend .stx-panel-control .stx-panel-legend {
	display: inline-block;
	vertical-align: top;
	width: 154px;
}
/* ------------------------------------------------------- CHART OVERLAY ELEMENTS ------------------------------------------------------ */

.mSticky {
	/* These are the small divs that come up when you hover over a drawing or study overlay */
	display: none;
	background: #efefef;
	border: solid #ddd 1px;
	border-radius: 3px;
	color: #666;
	font-size: 11px;
	/*text-transform: capitalize;*/
	white-space: nowrap;
	z-index: 40;
}
.mSticky.hide {
	padding: 0;
	border: none;
}
.mSticky,
.vectorTrashCan,
.overlayTrashCan,
.overlayEdit,
.overlayText {
	position: absolute;
	z-index: 40;
}
.mStickyInterior,
#sMeasure {
	/* Drawing and study info div contents*/
	margin: 0px;
	padding: 5px 10px 5px 10px;
	float: left;
}
.overlayText.stx-btn,
.overlayEdit.stx-btn,
.overlayTrashCan.stx-btn,
.vectorTrashCan.stx-btn {
	/* Drawing and study info div delete button wrappers for mobile */
	background: #efefef;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	width: 23px;
	height: 23px;
	padding: 0;
	border: solid #ddd 1px;
	margin: 0 0 0 18px;
}
.overlayText.stx-btn span,
.overlayEdit.stx-btn span,
.overlayTrashCan.stx-btn span,
.vectorTrashCan.stx-btn span {
	/* Drawing and study info div delete button content */
	display: block;
	margin: 0;
	width: 23px;
	height: 25px;

	overflow: hidden;
	text-indent: 100px;
	background: transparent;

	background-image: url(img/stx-sprite-panels.svg);
	background-position: -400px -26px;
}

.overlayEdit {
	opacity: 0;
}

.overlayTrashCan {
	margin-left: 5px;
}

/* To enable editing of overlay studies on mobile. You'll need to also implement studyOverlayEdit callbackListener
.overlayEdit {
	margin-left: 5px;
	opacity: 1;
}
.overlayTrashCan {
	margin-left: 34px;
}
*/

.mouseDeleteInstructions,
.stickyLongPressText,
.mousePinTooltip,
.customInstructions {
	margin: 0px;
	display: block;
	clear: both;
	font-size: xx-small;
}
.mouseDeleteText,
.mouseManageText,
.leftClickPin,
.dragAnchorText {
	display: none;
}
.rightclick_drawing .mouseDeleteText {
	display: inline;
}
.rightclick_series .mouseDeleteText {
	display: inline;
}
.rightclick_study .mouseDeleteText {
	display: inline;
}
.customInstructions .dragAnchorText {
	display: inline;
}

.stx-loader {
	/* Loading image size and placement */
	position: absolute;
	top: 280px;
	left: 50%;
	margin-left: -20px;
	width: 40px;
	height: 40px;
	z-index: 50;
}

.stx_draw_ok,
.stx_drag_ok {
	position: absolute;
	z-index: 40;
	background-color: rgba(255, 255, 255, 0.5);
	display: none;
	vertical-align: top;
	padding: 3px 3px 0;
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.2);
}

.stx_draw_ok .field,
.stx_drag_ok .field {
	padding-left: 3px;
	white-space: nowrap;
	color: #000000;
	float: right;
}

.stx_draw_ok .icon,
.stx_drag_ok .icon {
	margin-bottom: 0.5em;
	margin-top: 0;
	background-color: rgba(255, 255, 255, 1);
	border: 1px solid #5cb85c;
	box-sizing: content-box;
	color: #5cb85c;
	border-radius: 50%;
	width: 1em;
	height: 1em;
	float: left;
}

.stx_draw_ok .icon:after,
.stx_drag_ok .icon:after {
	animation-duration: 1500ms;
	animation-timing-function: ease;
	animation-name: checkmark;
	transform: scaleX(-1) rotate(135deg);
	opacity: 1;
	height: 0.5em;
	width: 0.25em;
	transform-origin: left top;
	border-right: 2px solid #5cb85c;
	border-top: 2px solid #5cb85c;
	content: "";
	left: 0.4em;
	top: 0.8em;
	position: absolute;
}

@keyframes checkmark {
	0% {
		height: 0;
		width: 0;
		opacity: 1;
	}
	20% {
		height: 0;
		width: 0.25em;
		opacity: 1;
	}
	40% {
		height: 0.5em;
		width: 0.25em;
		opacity: 1;
	}
	100% {
		height: 0.5em;
		width: 0.25em;
		opacity: 1;
	}
}

.stx-draggable {
	/* Use the grab (hand) icon when hovering a draggable item */
	cursor: -webkit-grab; /* chrome < 68 */
	cursor: grab;
}

.stx-draggable.stx-drag-series {
	/* Use the 4-directional icon when grabbing and moving a series or study */
	cursor: url(img/all-directional.cur), move !important;
}
.stx-draggable.stx-drag-axis {
	/* Use the horizontal icon when grabbing and moving an axis */
	cursor: url(img/horizontal.cur), ew-resize !important;
}

/* --------------------------------------------------------- CHART ELEMENT STYLES --------------------------------------------------------- */

/* -------- Current Price label (Floating last price on y-axis)-------- */

.stx_current_hr_up {
	/* 'Up' color for current chart value */
	background-color: #8cc176;
	color: #fff;
}
.stx_current_hr_down {
	/* 'Down' color for current chart value */
	background-color: #b82c0c;
	color: #fff;
}

/* -------- Axis Styles -------- */

.stx_xaxis {
	/* x-axis date styles */
	font-size: 12px;
	font-family: Roboto, Helvetica, sans-serif;
	color: #666;
}
.stx_xaxis_dark {
	/* x-axis date divider -- color only -- */
	color: #444444;
}
.stx_yaxis {
	/* y-axis price styles */
	font-size: 12px;
	font-family: Roboto, Helvetica, sans-serif;
	color: #333;
}

/* -------- Crosshairs lines and labels-------- */

.stx-float-date {
	/* Crosshair Floating x-axis date label*/
	position: absolute;
	font-size: 10px;
	font-family: Roboto, Helvetica, sans-serif;
	z-index: 30;
	border-radius: 3px;
	color: #fff;
	padding: 1px 6px;
	text-align: center;
	width: 70px;
	background-color: #333;
}
.stx-float-price {
	/* Crosshair Floating y-axis value label*/
	color: #fff;
	background-color: #333;
}
.stx_crosshair {
	/* Standard Crosshair lines color */
	position: absolute;
	z-index: 10;
	background-color: #999;
}
.stx_crosshair_drawing {
	/* Darker crosshairs lines when drawing */
	position: absolute;
	z-index: 10;
	background-color: #333;
}
.crossY,
.stx_crosshair_y {
	/* Vertical Crosshair line size */
	left: 0px;
	height: 1px;
	width: 98%;
	margin-top: -1px; /* since we're using border-top to draw the actual line */
}
.crossX,
.stx_crosshair_x {
	/* Horizontal Crosshair line size */
	top: 0px;
	width: 1px;
	height: 100%;
}
.stx-crosshair-cursor-on {
	/* Crosshair pointer icon */
	cursor: crosshair;
}

/* -------- Chart and Study Panel Styling -------- */

.stx_panels {
	/* Panel Title text */
	font-family: Roboto, Helvetica, sans-serif;
	font-size: 10px;
	color: white;
}
.stx_panel_background {
	/* Panel Title background */
	color: #7c878b;
}
.stx_panel_border {
	/* Divider between panels */
	width: 1px;
	color: #cccccc;
}
.stx_panel_drag {
	/* Darker Divider between panels when resizing */
	width: 2px;
	color: #666;
}
.stx_solo_lit span {
	/* Add background to expand button when toggled on */
	background-color: #b1b7b8;
	color: #ffffff;
	opacity: 1;
	margin-top: 3px;
	position: relative;
}

/* -------- Chart Grid -------- */

.stx_grid {
	/* Default Grid */
	color: #efefef;
	opacity: 1;
	border-style: solid;
}
.stx_grid_dark {
	/* Default Grid dividers */
	color: #cccccc;
	opacity: 0.9;
	border-style: solid;
}
.stx_grid_border {
	/* Default Grid borders */
	color: #999999;
	border-style: solid;
}

/* -------- Chart Type Styles -------- */

.stx_line_chart,
.stx_line_up,
.stx_line_down {
	/* Default width for line Charts */
	width: 1px;
	border-top-style: solid;
}
.stx_bar_chart,
.stx_bar_up,
.stx_bar_down,
.stx_bar_even {
	/* Default width for bar Charts */
	width: 1px;
}
/* Default color for line and bar Charts */
.stx_line_chart,
.stx_bar_chart {
	color: #000;
}

.stx_bar_down {
	/* Down Bar color */
	color: #b82c0c;
}
.stx_bar_up {
	/* Up Bar color */
	color: #8cc176;
}

.stx_baseline_delta_mountain {
	/* Default color for baseline delta mountain Charts */
	background-color: rgba(
		163,
		102,
		255,
		0.5
	); /* background color for mountain. */
	color: rgba(163, 102, 255, 0.01); /* Optional gradient. */
	border: transparent; /* No border */
	padding: 3px; /* Optional padding between the baseline and the mountain shading*/
}

.stx_colored_mountain_chart {
	/* Default color for colored mountain Charts */
	background-color: rgba(
		163,
		102,
		255,
		0.5
	); /* background color for mountain. */
	color: rgba(163, 102, 255, 0.01); /* Optional gradient. */
	width: 2px; /* Optional line width */
	border: transparent; /* No border */
	padding: 4px; /* Optional padding between the baseline and the mountain shading*/
}

.stx_mountain_chart {
	/* Default color for mountain Charts */
	background-color: rgba(
		102,
		202,
		196,
		0.5
	); /* background color for mountain. */
	color: rgba(102, 202, 196, 0.01); /* Optional gradient. */
	border: #66cac4; /* Optional line color */
	width: 1px; /* Optional line width */
}
/*.stx_mountain_chart.color {width:24px;}*/

.stx_histogram_down {
	/* Down Bar color */
	color: #b82c0c;
	border-left-color: #000000;
}
.stx_histogram_up {
	/* Up Bar color */
	color: #8cc176;
	border-left-color: #000000;
}
.stx_histogram_even {
	/* Even Bar color */
	color: #999999;
	border-left-color: #000000;
}

.stx_highlight_vector {
	/* change the color and weight of drawings and study overlays on hover */
	color: red;
	width: 3px;
}

.stx_candle_shadow,
.stx_bar_even {
	/* Candle wick color */
	color: #2e383b;
}
.stx_candle_shadow_up {
	color: #8cc176;
}
.stx_candle_shadow_down {
	color: #b82c0c;
}

.stx_candle_down,
.stx_line_down {
	/* Down Candle color */
	color: #b82c0c;
	border-left-color: transparent;
}
.stx_candle_up,
.stx_line_up {
	/* Up Candle color */
	color: #8cc176;
	border-left-color: transparent;
}

.stx_hollow_candle_down {
	color: #b82c0c;
}
.stx_hollow_candle_up {
	color: #8cc176;
}
.stx_hollow_candle_even {
	color: #888888;
}

.stx_baseline {
	/* color of baseline (dashed horizontal line) */
	color: #2e383b;
	width: 2px;
}
.stx_baseline_down {
	/* under area color */
	color: #eb242b;
	width: 2px;
}
.stx_baseline_up {
	/* over area color */
	color: #49ba59;
	width: 2px;
}

.stx_channel_down {
	/* under area color */
	color: rgba(235, 36, 43, 0.25);
}
.stx_channel_up {
	/* over area color */
	color: rgba(73, 186, 89, 0.25);
}

.stx_hlcbox_chart {
	color: cyan;
	background-color: blue;
	border-left-color: blue;
}

.stx_kagi_down {
	/* Kagi chart width and color for downtrend */
	color: #ff0000;
	width: 1px;
}
.stx_kagi_up {
	/* Kagi chart width and color for uptrend */
	color: #00ff00;
	width: 3px;
}

.stx_pandf_down {
	/* P&F chart color, padding, width for downtrend */
	color: #ff0000;
	padding: 2px 0px 2px 0px;
	width: 2px;
}
.stx_pandf_up {
	/* P&F chart color, padding, width for uptrend */
	color: #00ff00;
	padding: 2px 0px 2px 0px;
	width: 2px;
}

.stx_volume_up {
	/* Up Volume color */
	color: #8cc176; /* legacy only. Use study library output "Up Volume" instead */
	border: #000000;
}
.stx_volume_down {
	/* Down volume color */
	color: #b82c0c; /* legacy only. Use study library output "Down Volume" instead */
	border: #000000;
}

/* Volume underlay styles */
.stx_volume_underlay_up {
	color: rgb(
		140,
		193,
		118
	); /* legacy only. Use study library output "Up Volume" instead */
	opacity: 0.6;
	border-left-color: rgb(0, 0, 0);
}
.stx_volume_underlay_down {
	color: rgb(
		184,
		45,
		12
	); /* legacy only. Use study library output "Down Volume" instead */
	opacity: 0.6;
	border-left-color: rgb(0, 0, 0);
}

/* Volume profile styles */
.stx_volume_profile {
	opacity: 0.3;
	border-color: rgb(0, 0, 0);
}

/* Line color for projections */

.stx_projection_new {
	/* Line color for active line when drawing projections */
	color: blue;
}

.stx_gaps {
	/* Transparent gaps overlay style */
	color: #b1b7b8;
	opacity: 0.3;
}

.stx_histogram {
	/* Default color for histograms */
	color: #000000;
	opacity: 0.2;
}

/* -------- Annotations -------- */

.stx_annotation {
	/* Annotation styles */
	padding: 0px;
	font-size: 12px;
	font-family: Helvetica, sans-serif;
	background: transparent;
	border: none;
	box-shadow: none;
	outline: none;
	color: #333;
	resize: none;
	z-index: 1000;
}
.stx_annotation_bg {
	/* Annotation backgrounds */
	color: #f5f5f5;
}
.stx_annotation_highlight {
	/* Annotation highlight color */
	color: white;
}
.stx_annotation_highlight_bg {
	/* Annotation highlight background color */
	color: #3d4447;
}
.stx-btn.stx_annotation_save,
.stx-btn.stx_annotation_cancel {
	/* Annotation buttons */
	position: absolute;
	display: none;
	width: 25px;
	height: 25px;
	cursor: pointer;
	opacity: 0.8;
	z-index: 50;
}
.stx-btn.stx_annotation_save {
	background-image: url(img/stx-sprite-ui.svg);
	background-position: -573px -50px;
}
.stx-btn.stx_annotation_cancel {
	background-image: url(img/stx-sprite-ui.svg);
	background-position: -523px -77px;
}

.stx-btn.stx_annotation_save:hover,
.stx-btn.stx_annotation_cancel:hover {
	opacity: 1;
}

.stx_watermark {
	/* Optional watermark style */
	font-size: 16px;
	font-family: Roboto, Helvetica, sans-serif;
}
.stx_fib_levels {
	/* Text for fibonacci values */
	font-size: 12px;
	font-family: Roboto, Helvetica, sans-serif;
	color: transparent;
}

/* -------- Text for shared charts -------- */

.stx_share {
	font-size: 14px;
	font-family: Georgia, "Times New Roman", serif;
	color: #000000;
	width: 1px;
}
.stx_share_symbol {
	font-size: 14px;
	font-family: Arial, sans-serif;
	font-weight: bold;
}

.stx-holder {
	display: block;
	position: absolute;
	overflow: hidden;
	z-index: 20;
}

.stx-subholder {
	position: absolute;
	overflow: hidden;
	box-sizing: border-box;
	border: none 5px #398bff;
}

.stx-subholder.dropzone.all {
	border-style: solid;
}
.stx-subholder.dropzone.top {
	border-top-style: solid;
}
.stx-subholder.dropzone.bottom {
	border-bottom-style: solid;
}
.stx-subholder.dropzone.left {
	border-left-style: solid;
}
.stx-subholder.dropzone.right {
	border-right-style: solid;
}

/* -------- Colors for session shading -------- */
.stx_market_session.divider {
	background-color: rgba(0, 255, 0, 0.8);
	width: 1px;
}
.stx_market_session.pre {
	background-color: rgba(255, 255, 0, 0.1);
}
.stx_market_session.post {
	background-color: rgba(0, 0, 255, 0.2);
}

/* -------- Heads up tooltip ( hover with cross hairs on )-------- */
stx-hu-tooltip {
	display: none;
} /* turn off "old" tooltip */

.hu-tooltip {
	position: absolute;
	left: -50000px;
	z-index: 30;
	white-space: nowrap;
	padding: 6px;
	border: 2px solid #4ea1fe;
	background-color: rgba(255, 255, 255, 0.9);
	color: #000;
	font-size: 14px;
}

.hu-tooltip caption {
	height: 0px;
	opacity: 0;
}

.hu-tooltip .hu-tooltip-sr-only {
	opacity: 0;
	font-size: 0;
}

.hu-tooltip [hu-tooltip-field]:first-of-type * {
	padding-top: 5px;
}
.hu-tooltip [hu-tooltip-field]:last-of-type * {
	padding-bottom: 5px;
}

.hu-tooltip .hu-tooltip-name {
	text-align: left;
	padding: 0 5px;
	font-weight: bold;
}
.hu-tooltip .hu-tooltip-name:after {
	content: ":";
}

.hu-tooltip .hu-tooltip-value {
	text-align: right;
	padding: 0 5px;
}

.hu-tooltip-highlight {
	position: absolute;
	height: 100%;
	z-index: 10;
	background-color: rgba(191, 191, 191, 0.2);
}