/**
 * styles for the D3-based visualizations
 */
.chart {
	position: relative;
}

.chart .view {
	position: relative;
}

.chart .view, .chart .summary, .chart .volume {
	font-family: Arial Narrow, sans-serif;
	font-size: 0.85em;
	font-stretch: condensed;
}

.chart .text, .x_axis_text, .x_axis_sub_text, .chart .pie_label {
	font-family: Calibri,Helvetica,Arial,Verdana,sans-serif;
	fill: #032632;
}

.chart .text.clickable {
	cursor: pointer;
}

.chart .text {
	font-size: 11pt;
	font-weight: bold;
}

.x_axis_text, .chart .percent_text {
	font-size: 10pt;
	font-weight: bold;
}

.chart .percent_text {
	color: #000000;
}

.chart .percent_text.bigger {
	font-size: 11pt;
	fill: #032632;
}

.chart .percent_text.value {
	fill: #032632;
}

.x_axis_sub_text {
	font-size: 9pt;
	font-weight: normal;
	fill: #010C0F;
}

.chart .volume_text {
	opacity: 0.7;
}

.chart .summary {
	position: relative;
	top: -4px;
}

.chart .pie_label {
	font-size: 11pt;
	font-weight: bold;
}

.chart .pie_label .pie_label_percent, .chart .pie_label .pie_label_value {
	fill: #003060;
	font-weight: normal;
}

.chart .pie_label_line {
	fill: none;
	stroke: black;
	stroke-width: 1px;
	shape-rendering: auto;
}

/**
 * giving the "volume" section extra margin at the top allows the y-axis
 * labels to bleed a little over the top line. Then we "tuck" it back up
 * by using a negative top and negative margin-bottom
 */
.chart .volume {
	position: relative;
	top: -8px;
	margin-bottom: -9px;
}

.chart path.line_stock {
    fill: none;
    stroke: #46f;
    stroke-width: 1px;
    shape-rendering: auto;
}

.chart path.sparkline {
    fill: none;
    stroke: #1970B1;
    stroke-width: 1px;
    shape-rendering: auto;
}

.chart path.line, .chart .pareto_stub {
	fill: none;
	stroke: black;
	stroke-width: 2px;
	shape-rendering: auto;
}

.chart path.line.pareto, .chart .pareto_stub {
	stroke: #032632;
}

.chart line.ohlc {
    stroke: #666666;
    stroke-width: 1px;
    shape-rendering: crispEdges;
}

.chart line.candle {
    stroke: black;
    stroke-width: 1px;
    shape-rendering: crispEdges;
}

.chart line.volume_bar {
    stroke: #0e36d8;
    stroke-width: 1px;
    shape-rendering: crispEdges;
}

.chart rect.candle_rect {
	fill: white;
    stroke: black;
    stroke-width: 1px;
    shape-rendering: crispEdges;
}

.chart line.ohlc.green {
    stroke: #00d000;
}

.chart line.ohlc.red {
    stroke: #e00000;
}

.chart path.moving {
	fill: none;
	stroke: red;
	stroke-width: 1px;
	stroke-dasharray: 6,2;
	shape-rendering: auto;
}

.chart path.moving_forecast {
	fill: none;
	stroke: red;
	stroke-width: 1px;
	stroke-dasharray: 2,2;
	shape-rendering: auto;
}

.chart path.exponential {
	fill: none;
	stroke: #bf6404;
	stroke-width: 1px;
	stroke-dasharray: 4,4;
	shape-rendering: auto;
}

.chart path.exponential_forecast {
	fill: none;
	stroke: #bf6404;
	stroke-width: 1px;
	stroke-dasharray: 3,2;
	shape-rendering: auto;
}

.chart path.trend {
	fill: none;
	stroke: #02645c;
	stroke-width: 1px;
	stroke-dasharray: 7,3;
	shape-rendering: auto;
}

.chart path.trend_forecast {
	fill: none;
	stroke: black;
	stroke-width: 1px;
	stroke-dasharray: 2,2;
	shape-rendering: auto;
}

.chart path.area_stock {
    fill: #49f;
    opacity: .05;
}

.chart path.area {
    fill: #49f;
    opacity: .8;
}

.chart path.area.fully_opaque {
	opacity: 1;
}

/**
 * 09/20/2017
 * stroke: none caused bleeding in Chrome on Mac
 * so changed it to transparent
 */
.chart .bar {
	stroke: transparent;
	opacity: .8;
}

.chart .bar.fully_opaque {
	opacity: 1;
}

.chart .marker {
	stroke-width: 2px;
}

.chart .marker.pareto {
	stroke: #032632;
	fill: white;
}

.chart .ttpoint {
	stroke: white;
	stroke-width: 1px;
	fill: #000099;
}

.chart line.ttvolume {
    stroke: #0e36d8;
    stroke-width: 3px;
    shape-rendering: crispEdges;
}

.chart .axis {
    shape-rendering: crispEdges;
}

.chart .zero {
	fill: none;
	stroke: #bb0000;
	stroke-width: 1px;
    shape-rendering: crispEdges;
}

.chart .reference {
	fill: none;
	stroke: #b70f17;
	stroke-width: 2px;
	stroke-dasharray: 4,3;
    shape-rendering: crispEdges;
}

.chart .reference.r1 {
	stroke: #000000;
}

.chart .reference.r2 {
	stroke: #005500;
}

.chart .reference.r3 {
	stroke: #000055;
}

.chart .reference.r4 {
	stroke: #555500;
}

.chart .reference.r5 {
	stroke: #550055;
}

.chart .zero_xy {
	fill: none;
	stroke: #bb0000;
	stroke-width: 1px;
    stroke-opacity: .4;
	shape-rendering: crispEdges;
}

.chart .pareto_cutoff_line {
	fill: none;
	stroke: #b70f17;
	stroke-width: 2px;
	stroke-dasharray: 4,3;
    shape-rendering: crispEdges;
}

.chart .x_axis_line, .chart .left_y_axis_line {
	fill: none;
	stroke: #999999;
	stroke-width: 1px;
    shape-rendering: crispEdges;
}

.chart line.tick {
    stroke: #eee;
    shape-rendering: crispEdges;
}

.chart .x.axis .minor {
    stroke-opacity: .5;
}

.chart .x.axis path {
    display: none;
}

.chart .x.axis.xy path, .chart .y_axis_line.xy {
	display: block !important;
	fill: none;
	stroke: #555555;
	stroke-width: 1px;
    shape-rendering: crispEdges;
}

.chart .y.axis path, .chart rect.border {
    fill: none;
    stroke: #000;
    stroke-width: 1px;
    shape-rendering: crispEdges;
}

.chart rect.x_background {
	fill: #c5dcf7;
	stroke: none;
}

.chart .x_summary_axis {
	opacity: .5;
	font-size: 0.75em;
}

.chart path.slice {
	stroke: #ddd;
	stroke-width: 1px;
	shape-rendering: geometricPrecision;
}

.chart .pie_drop_shadow {
	stroke: #666;
	fill: none;
}

.chart .summary rect.border {
    stroke: #ddd;
    shape-rendering: crispEdges;
}

.chart .summary .top_border {
    stroke: #000;
    shape-rendering: crispEdges;
}

.chart .slider {
    fill: none;
    stroke: #000;
}

.chart .slider-top-border {
    stroke: #fff;
    shape-rendering: crispEdges;
}

.chart .slider rect.handle {
    cursor: pointer;
    fill: #eee;
}

.chart .slider .handle-ridges {
    cursor: pointer;
}

.chart .slider line.odd {
    stroke: #fff;
    shape-rendering: crispEdges;
}

.chart .slider line.even {
    stroke: #000;
    shape-rendering: crispEdges;
}

.chart .slider_container line.border {
    stroke: #000;
    shape-rendering: crispEdges;
}

.chart .slider_container rect.sizer {
    shape-rendering: auto;
    fill: #eee;
    stroke: #000;
}

.chart .slider_container rect.sizer:hover {
    fill: #ccc;
    cursor: col-resize;
}

.chart .chart_header_form {
	padding: 5px 8px;
}

.chart .mr {
	margin-right: 7px;
}

.chart .info {
	clear: both;
}
	
.chart .alink {
	color: #005790;
	cursor: pointer;
}

.chart .alink:hover {
	color: #002740;
}

.chart .nalink {
	color: #000000;
	font-weight: bold;
}

.chart .header_table {
	width: 100%;
}


.chart .header_table td {
	vertical-align: top;
}

.chart .header_table td.col1 {
	padding: 5px 2px 5px 8px;
	position: relative;
	min-width: 180px;
	height: 51px;
}

.chart .header_table td.col1.side_by_side {
	border-right-width: 1px;
	border-right-style: solid;
}

.chart .header_table td.col1.vertical {
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.chart .header_table td.col1.slim {
	height: 18px;
}

.chart .header_table td.col2 {
	width: 100%;
}

.chart .header .settings {
	cursor: pointer;
	margin: 0 0 0 10px;
	font-size: 13px;
	padding: 3px 8px 3px 6px;
    border: 1px solid #dddddd;
    color: #333333;
    background-color: #eeeeee;
    user-select: none;
    border-radius: 5px;
    display: inline-block;
}

.chart .header .settings:hover {
	color: black;
	background-color: transparent;
}

.chart .header .settings .icon {
	float: left;
	height: 14px;
	width: 14px;
	margin-right: 3px;
}

.chart .header .close_button {
	float: right;
    margin-left: 6px;
    background-image: url(images/sprite.png);
    overflow: hidden;
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
    cursor: pointer;
	background-position: 0 -108px;
}

.chart .header .close_button:hover {
	background-position: -18px -108px;
}

.chart div.animation_controls {
	position: relative;
}

.chart div.animation_controls .line1, .chart div.animation_controls .line2 {
	height: 22px;
	white-space: nowrap;
}
.chart div.animation_controls .line1 {
	margin-bottom: 3px;
}

.chart div.animation_controls .line0 {
	max-width: 180px;
	margin-bottom: 6px;
}

.chart div.animation_controls .line0.slim {
	float: left;
	margin: 0 16px 3px 0;
}

.chart div.animation_controls .animation_label {
	font-weight: bold;
	line-height: 19px;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.chart div.animation_controls .line2 {
	height: 18px;
	margin-left: -5px;
	margin-bottom: 4px;
}

.chart div.animation_controls .line2.slim {
	margin-left: 0;
	float: left;
}

.chart .select_page {
	border: 1px solid;
	height: 20px !important;
	min-width: 85px;
	max-width: 225px;
	display: inline-block;
	vertical-align: middle;
	margin: 0 9px 0 4px;
}

.vcr {
	padding: 0 !important;
	margin: 0 4px 0 0 !important;
	border-width: 0 !important;
	background-color: transparent !important;
	display: inline-block;
	vertical-align: middle;
}

.vcr .ui-icon {
	margin-left: -7px !important;
	margin-top: -8px !important;
}

.vcr .ui-button-text {
	width: 13px !important;
	font-size: 11px !important;
	line-height: 13px !important;
	padding: 3px !important;
	margin: 0 0 0 0 !important;
}

.animation_slider {
	position: absolute;
	top: 28px;
	left: 77px;
	width: 94px;
	height: 8px;
}

.animation_slider .ui-slider-handle {
	width: 14px;
	height: 14px;
	top: -4px;
	margin-left: -8px;
}

.chart div.animation_controls .line1.slim {
	display: none;
}

.legend {
	text-align: center;
}

.legend_wrapper {
	text-align: left;
	border: 1px solid #d0d0d0;
	margin-left: auto;
    margin-right: auto;
    display: inline-block;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

.legend_title {
	margin: 2px 5px;
}

table.legend_table {
	margin-right: 10px;
}

table.legend_table td {
	vertical-align: top;
}

td.legend_color_column {
	width: 16px;
}

td.legend_color_column.clickable {
	cursor: pointer;
}

div.legend_color_square {
	width: 10px;
	height: 10px;
	margin: 2px;
	border: 1px solid black;
}

/**
 * max width is the desired width (see abstractviz.js)
 * minus 18px for the color square
 * minus 8px for the padding-right here
 * minus 4px for the TD borders (text and square)
 *
 * text may overflow to into the padding before it's overflow is hidden 
 */
td.legend_text {
	padding: 0 8px 0 0;
	max-width: 100px;
	overflow-x: hidden;
}

td.legend_text.clickable {
	cursor: pointer;
}

td.legend_text.clickable:hover {
	color: #0000ee;
}

.chart_tt_box {
	font-family: Calibri,Helvetica,Arial,Verdana,sans-serif;
	font-size: 14px;
	color: #222;
	padding: 8px 5px 8px 8px;
	border: 1px solid black;
	position: absolute;
	overflow-x: hidden;
	overflow-y: auto;
	-moz-box-shadow: 0 0 4px #666;
	-webkit-box-shadow: 0 0 4px #666;
	box-shadow: 0 0 4px #666;
	min-width: 120px;
	z-index: 3;
}

.chart_tt_box .content {
	margin-right: 20px;
}

.chart_tt_box .buttons {
	margin-top: 8px;
}

.chart_tt_box .tt_button {
	clear: left;
	float: left;
	margin-top: 0 !important;
	margin-bottom: 6px !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
	font-size: 13px !important;
	max-width: 100%;
}

.chart_tt_box .tt_button.last {
	margin-bottom: 0 !important;
}
	
.chart_tt_box .tt_button .ui-button-text {
	padding: 2px 4px 2px 24px !important;
	text-align: left;
	white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
}

.chart_tt_box .tt_button .ui-icon {
	left: 3px !important;
}

.chart_tt_box p {
	padding: 0;
	margin: 0 0 3px 0;
}

.chart_tt_box .key {
	font-weight: bold;
}

.chart_tt_box .close {
	padding: 0 !important;
	margin: 0 !important;
	border-width: 0 !important;
	float: right;
}

.chart_tt_box .close .ui-icon {
	margin-left: -9px !important;
	margin-top: -8px !important;
}

.chart_tt_box .close .ui-button-text {
	width: 13px !important;
	font-size: 11px !important;
	line-height: 13px !important;
	padding: 1px !important;
	margin: 0 0 0 0 !important;
}

.chart .view_wrapper {
	position: relative;
}

.chart .view_wrapper button.reset_zoom {
	position: absolute;
}

.zoom_helper {
	position: absolute;
	background-color: #8DB2E3;
	opacity: .4;
}

.zoom_pan_controls button {
	position: absolute;
	top: 0;
	left: 0;
	margin: 10px;
	z-index: 2;
}

.zoom_pan_controls button .ui-button-text {
	padding: 3px 5px 3px 5px !important;
}

path.f {
  fill: #ccc;
  stroke: #fff;
}

path.cp {
  fill: #ccc;
  stroke: #fff;
  stroke-width: .5px;
}

path.st {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5px;
}

.chart .pan_cursor {
	cursor: move;
}

.chart .pan_mark {
	cursor: pointer;
	stroke: #555;
	stroke-linecap: round;
    stroke-width: 2px;
}

.chart .pan_arc {
	cursor: pointer;
	fill: #fff;
	stroke: #555;
	stroke-width: 1px;
}

.chart .zoom_slider_rail {
	fill: #fff;
	stroke: #555;
	stroke-width: 1px;
}

.chart g.zoom {
	cursor: pointer;
}

.chart .zoom rect {
	fill: #fff;
	stroke: #555;
	stroke-width: 2px;
}

.chart .zoom.zoom_slider rect {
	fill: #e5e5e5;
}

.zoom_pan_controls {
	position: absolute;
}

#frame_rate_slider {
	width: 95%;
	margin: 18px 0 10px 6px;
}
/**
 * styles for a calendar chart
 * 
 * copyright (c) 2017 Gadi Yedwab. All Rights Reserved.
 */
table.calendar_title, .calendar_container {
	font-family: Calibri, Helvetica, Arial, Verdana, sans-serif;
	border-spacing: 0;
}

table.calendar_container {
	box-sizing: border-box;
	table-layout: fixed;
	border-collapse: collapse;
}

.calendar_container td {
	padding: 0;
}

.calendar_month_week td {
	font-size: 13px;
	border: 1px solid #dddddd;
}

/**
 * ------- Month ------
 */
table.calendar_container.month div.week_row.background {
	position: relative;
}

table.calendar_container.month div.week_row.overlay {
	position: absolute;
	left: 0;
	top: 0;
}

table.calendar_month_week {
	box-sizing: border-box;
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: 0;
}

table.calendar_month_week td.head {
	height: 24px;
	vertical-align: middle;
	font-weight: bold;
	text-align: center;
	border-bottom-width: 0;
	background-color: #eeeeee;
}

table.calendar_month_week td.body {
	vertical-align: top;
}

/**
 * drawing the border in the overlay is slightly risky because if they don't overlay
 * precisely (for example when we span columns), we'll get a double border
 */
table.calendar_container.month div.week_row.overlay table.calendar_month_week td.body
	{
	border-color: transparent;
}

table.calendar_month_week td.today {
	background-color: #eeeeee;
	border-color: #707070;
}

table.calendar_month_week td.yesterday {
	border-right-color: black;
}

table.calendar_month_week td.tomorrow {
	border-left-color: black;
}

table.calendar_month_week td.one_week_ago {
	border-bottom-color: black;
}

table.calendar_month_week td.one_week_from_today {
	border-top-color: black;
}

table.calendar_month_week div.day_of_month {
	text-align: right;
	padding-top: 2px;
	padding-right: 2px;
	cursor: pointer;
}

table.calendar_month_week div.day_of_month:hover {
	text-decoration: underline;
}

table.calendar_month_week div.day_of_month.today {
	font-weight: bold;
}

table.calendar_month_week div.day_of_month.outside {
	color: #aaaaaa;
}

.calendar_container td.plus_more {
	text-align: left;
	padding: 1px 2px;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	color: #005790;
}

table.calendar_month_week td.event, table.calendar_week td.event {
	width: 100%;
	padding: 1px 2px 0 2px;
}

.calendar_container .event .hour, .calendar_month_day_box .event .hour {
	font-weight: bold;
	margin-left: 3px;
}

.calendar_container .event.multiple .hour, .calendar_month_day_box .event.multiple .hour
	{
	font-weight: normal;
}

.calendar_container .event.continued .hour, .calendar_month_day_box .event.continued .hour
	{
	display: none;
}

.calendar_container .event .title, .calendar_month_day_box .event .title
	{
	margin-left: 3px;
}

.calendar_container .event .subtitle, .calendar_month_day_box .event .subtitle
	{
	margin-left: 3px;
}

.calendar_container .event .separator, .calendar_month_day_box .event .separator
	{
	margin-left: 3px;
}

/**
 * in the diary rectangles, we allow word wrap and use
 * spaces instead of left margin
 */
.calendar_container .entry_div.diary span {
	margin-left: 0;
}

.calendar_container .event .event_div, .calendar_month_day_box .event .event_div
	{
	text-align: left;
	background-color: #ddddff;
	border: 1px solid #dddddd;
	border-radius: 4px;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	height: 16px;
}

.calendar_container .event.continued .event_div, .calendar_month_day_box .event.continued .event_div
	{
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
	border-left-color: transparent;
}

.calendar_container .event .pos, .calendar_month_day_box .event .pos {
	position: relative;
}

/**
 * multi-day events "continued" and "to_be_continued"
 */
.calendar_container .event.continued .pos, .calendar_month_day_box .event.continued .pos
	{
	padding-left: 8px;
}

.calendar_container .event .trl, .calendar_month_day_box .event .trl {
	margin: 0;
	position: absolute;
	left: 0;
	top: 1px;
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 8px solid black;
	display: none;
}

.calendar_month_day_box .event .trl {
	top: 1px;
}

.calendar_container .event.continued .trl, .calendar_month_day_box .event.continued .trl
	{
	display: block;
}

.calendar_container .event.to_be_continued .event_div,
	.calendar_month_day_box .event.to_be_continued .event_div {
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
	border-right-color: transparent;
}

.calendar_container .event.to_be_continued .pos, .calendar_month_day_box .event.to_be_continued .pos
	{
	padding-right: 8px;
}

.calendar_container .event .trr, .calendar_month_day_box .event .trr {
	margin: 0;
	position: absolute;
	right: 0;
	top: 1px;
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 8px solid black;
	display: none;
}

.calendar_month_day_box .event .trr {
	top: 1px;
}

.calendar_container .event.to_be_continued .trr, .calendar_month_day_box .event.to_be_continued .trr
	{
	display: block;
}

/**
 * ----------- Calendar Title ----------------
 */
table.calendar_title td {
	width: 33%;
	height: 44px;
	vertical-align: middle;
	padding: 0;
}

table.calendar_title td.col2 {
	text-align: center;
}

table.calendar_title td.col2.month {
	font-size: 24px;
}

table.calendar_title td.col2.week {
	font-size: 21px;
}

table.calendar_title td.col2.day {
	font-size: 20px;
}

table.calendar_title .btn {
	font-family: "Courier New", Courier, monospace;
	font-size: 24px;
	line-height: 24px;
	text-align: left;
	padding: 0px 6px;
	border: 1px solid #dddddd;
	float: left;
	color: #333333;
	background-color: #eeeeee;
	cursor: pointer;
	-webkit-user-select: none; /* Chrome, Opera, Safari */
	-moz-user-select: none; /* FireFox 2+ */
	-ms-user-select: none; /* IE 10+ */
	user-select: none; /* Standard syntax */
}

table.calendar_title div.today {
	font-family: inherit;
	font-size: 13px;
	border-radius: 5px;
	margin-left: 12px;
}

table.calendar_title div.prev {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

table.calendar_title div.next {
	border-left: none;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

table.calendar_title div.wrapper {
	float: right;
}

table.calendar_title div.day {
	font-family: inherit;
	font-size: 13px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

table.calendar_title div.week {
	font-family: inherit;
	font-size: 13px;
	border-left: none;
}

table.calendar_title div.month {
	font-family: inherit;
	font-size: 13px;
	border-left: none;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

table.calendar_title .btn:hover {
	color: black;
	background-color: transparent;
}

table.calendar_title .btn.active {
	color: black;
	background-color: #cccccc;
	cursor: auto;
}

/**
 * ------ Month Day Box ----
 */
.calendar_month_day_box {
	font-family: Calibri, Helvetica, Arial, Verdana, sans-serif;
	position: absolute;
	width: 200px;
	border: 1px solid #dddddd;
	background-color: #fcfcfe;
	z-index: 2;
	-moz-box-shadow: 0 0 4px #666;
	-webkit-box-shadow: 0 0 4px #666;
	box-shadow: 0 0 4px #666;
	font-size: 13px;
	overflow-x: auto;
}

.calendar_month_day_box .header {
	background-color: #eeeeee;
	font-weight: bold;
	padding: 2px;
}

.calendar_month_day_box .events {
	padding: 2px 0;
}

.calendar_month_day_box .event div {
	margin-top: 2px;
}

.calendar_month_day_box .close {
	padding: 0 2px !important;
	margin: 0 !important;
	border-width: 0 !important;
	float: right;
	background-color: transparent;
	cursor: pointer;
}

/**
 * ----- Week -----
 */
table.calendar_week, table.calendar_week_diary {
	box-sizing: border-box;
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: 0;
}

table.calendar_week th {
	border: 1px solid transparent;
	padding: 0;
}

table.calendar_week td {
	border: 1px solid #dddddd;
	min-height: 4px;
}

table.calendar_week .time_of_day, table.calendar_week_diary .time_of_day
	{
	width: 60px;
}

.calendar_week_multi.background {
	position: relative;
	margin-top: 3px;
	margin-bottom: 5px;
}

table.calendar_week td.time_of_day {
	border-top-color: transparent;
	border-left-color: transparent;
	border-bottom-color: transparent;
}

table.calendar_week th.day {
	text-align: center;
	font-weight: bold;
	font-size: 14px;
}

table.calendar_week th.day .line2 {
	font-weight: normal;
	font-size: 13px;
}

table.calendar_week th.day .line2.small {
	font-size: 11px;
}

.calendar_week_multi.overlay {
	position: absolute;
	top: 0;
	left: 0;
}

.calendar_week_multi.overlay td {
	font-size: 13px;
	border-color: transparent;
}

.calendar_week_multi.overlay td.sizing {
	padding: 0;
	height: 0;
	line-height: 0;
}

.calendar_container .scroll_area {
	overflow-y: scroll;
	border: 1px solid #dddddd;
}

.calendar_container .scroll_area .contents {
	position: relative;
}

.calendar_week_diary {
	position: absolute;
	top: 0;
	left: 0;
}

.calendar_week_diary td {
	padding: 0;
	border-left: 1px solid #dddddd;
	border-right: 1px solid #dddddd;
	height: 1008px;
	vertical-align: top;
}

.calendar_week_diary td.time_of_day {
	border-left-width: 0;
}

.calendar_week.background .today, .calendar_week_diary.background .today
	{
	background-color: #eeeeee;
}

.calendar_week_diary .grid {
	height: 41px;
	border-bottom: 1px solid #dddddd;
	width: 100%;
}

.calendar_week_diary .grid.last {
	border-bottom-color: transparent;
}

.calendar_week_diary .sub_grid {
	height: 20px;
	border-bottom: 1px dotted #dddddd;
}

.calendar_week_diary .tod_time {
	text-align: right;
	padding: 1px 2px 0 0;
}

.calendar_week_diary .entries {
	position: relative;
	width: 100%;
}

.calendar_week_diary .entry {
	position: absolute;
}

.calendar_week_diary .entry.overlapped {
	border-left: 1px solid white;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	border-radius: 4px;
}

.calendar_week_diary .entry .entry_div {
	border: solid 1px #dddddd;
	border-radius: 4px;
	overflow-y: hidden;
	overflow-x: hidden;
	padding: 1px 2px 0 2px;
}

.calendar_container .event .event_div.past, .calendar_month_day_box .event .event_div.past,
	.calendar_week_diary .entry .entry_div.past {
	color: #666666;
}

.calendar_week_diary .entry .entry_div.continued {
	border-top-width: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.calendar_week_diary .entry .entry_div.to_be_continued {
	border-bottom-width: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.calendar_week .collapser {
	float: right;
	background-image: url("images/sprite.png") !important;
	overflow: hidden;
	background-repeat: no-repeat;
	height: 16px;
	width: 16px;
	cursor: pointer;
}

.calendar_week .collapser.open {
	background-position: -54px -18px;
}

.calendar_week .collapser.collpased {
	background-position: -54px -36px;
}

.calendar_week_diary hr.thin_red_line {
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
	background-color: red;
	height: 1px;
	padding: 0;
	margin: 0;
}/**
 * a scorecard is laid out as an HTML table with the main indicator
 * at the center and cells above and below (cell span of 3), and left
 * and right  
 */
.scorecard {
	font-family: Calibri,Helvetica,Arial,Verdana,sans-serif;
	border-spacing: 0;
	padding: 6px;
}

table.scorecard_group {
	border: 1px solid #666666;
	padding: 0;
}

table.scorecard_group td.above {
	padding: 6px 6px 0 6px;
}

table.scorecard_group.single_line td.above,
table.scorecard_group.single_line td.left,
table.scorecard_group.single_line td.right,
table.scorecard_group.single_line td.main,
table.scorecard_group.single_line td.below {
	padding: 3px 6px 3px 6px;
}

/**
 * even though we overwrite the height at runtime,
 * the height matters when jQuery UI calculates how
 * far down to allow the user to drag so that the
 * element can be placed at the last position 
 */
table.scorecard_group tbody.sort_placeholder_single_line {
	display: table-row;
	height: 55px;
}

table.scorecard_group tbody.sort_placeholder_multi_line {
	display: table-row;
	height: 160px;
}

table.scorecard_group td.below {
	padding: 0px 6px 6px 6px;
}

table.scorecard_group td.left {
	padding-left: 6px;
}

table.scorecard_group td.right {
	padding-right: 6px;
}

.scorecard_group tbody:nth-child(odd) {
	background: #ebf2f9;
}

.scorecard_group tbody:nth-child(even) {
	background: #faf9fb;
}

.scorecard.pub {
	margin-left: auto;
	margin-right: auto;
}

.scorecard.clickable, .scorecard_group tbody.clickable {
	cursor: pointer;
}

.scorecard tr, .scorecard td {
	padding: 0;
}

.scorecard .title {
	font-weight: bold;
	font-size: 20px;
	color: #303030;
	text-align: center;
}

.scorecard.single_line .title {
	text-align: left;
}

.scorecard .subtitle {
	font-size: 18px;
	color: #303030;
	text-align: center;
}

.scorecard.single_line .subtitle {
	text-align: left;
}

.scorecard td.main {
	padding: 4px 8px;
	text-align: center;
	white-space: nowrap;
}

.scorecard.single_line td.main {
	text-align: right;
}

.scorecard .main_indicator {
	font-size: 40px;
}

.scorecard .indicator_line {
	text-align: center;
}

.scorecard.single_line .indicator_line {
	text-align: right;
}

.scorecard svg.arrow {
	vertical-align: text-bottom;
	margin-right: 4px;
}

.scorecard path.arrow {
	fill: #20ee20;
	stroke: #003300;
}

.scorecard path.arrow.degraded {
	fill: #ee2020;
	stroke: #330000;
}

.scorecard path.arrow.neutral {
	visibility: hidden;
}

.scorecard .indicator_wrapper {
	white-space: nowrap;
}

/**
 * secondary indicator may be implemented using either DIV or SPAN
 * when using SPAN, the top/bottom padding is ignored
 */
.scorecard .secondary_indicator {
	font-size: 18px;
	padding: 1px 0;
	text-align: center;
}

.scorecard.single_line .secondary_indicator {
	text-align: right;
}

.scorecard .sparkline {
	text-align: center;
}

.scorecard .improved {
	color: #20aa20;
}

.scorecard .degraded {
	color: #cc3030;
}

.scorecard .label {
	font-size: 16px;
	text-align: center;
}

.scorecard.single_line .label {
	text-align: left;
}

.scorecard div.label {
	padding: 1px 4px;
}

.scorecard span.label.before {
	margin-right: 4px;
}

.scorecard span.label.after {
	margin-left: 4px;
}

.scorecard.border {
	border: 1px solid #666666;
}

table.scorecard_group .rotated {
    -ms-transform: rotate(5deg); /* IE 9 */
    -webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
    transform: rotate(5deg);
}
/**
 * manage drawing of sparkline
 * 
 * copyright (c) 2018 Gadi Yedwab. All Rights Reserved.
 */
.sparkline_container {
	width: 100%;
	height: 20px;
}

.sparkline_container.percent table {
	width: 100%;
	border: 0;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	border-spacing: 0;
}

.sparkline_container.percent td {
	border: 0;
	padding : 0;
}

.sparkline_container.percent td.col1 {
	text-align: right;
	padding-right : 2px;
	min-width: 50px;
}

.sparkline_container.percent td.col2 {
	background-color: #e0e0f0;
	width: 100%;
	min-width: 50px;
}

.sparkline_container.percent td.col2 .bar {
	background-color: #1f76e8;
	height: 20px;
}