/* Styling for Finjitsu Charts */

html .chart_canvas, 
html .chart_labels_before,
html .chart_labels_after {
    font-family:Helvetica, Arial, sans-serif !important;
}

.chart_canvas {
    position:relative;
    cursor:default;
}

/* Default view has loading icon */
.chart_loader {
    position:absolute;
    height:100%;
    width:100%;
    background:url(/images/icons/loaders/35.gif) center center no-repeat;
}

.chart_canvas .tooltip {
    position:absolute;
    display:none;
    border:solid 1px #333;
    border-radius:5px;
    opacity:0.9;
    background-color:white;
    padding:4px;
    font-size:11.5pt;
    white-space:nowrap;
}

.chartinfo {
    font-family:Helvetica, Arial, sans-serif;
    font-size:12px;
}

div.chartinfo {
    position:absolute;
    display:none;
    padding:4px;
    margin-top:-35px;
    margin-left:-2px;
}

div.chartinfo span {
    padding-right:10px;
}


/* Charts with no legend should have chartinfo directly above chart */
#industry_chart .chartinfo {
    margin-top:-16px;
}

/* Added rules to position chart info for PNG */
text.chartinfo[data-type=date] {
  transform:translate(0px, 0px);
}

text.chartinfo[data-type=value] {
  transform:translate(50px, 0px);
}

text.chartinfo[data-type=symbol] {
  transform:translate(100px, 0px);
}


g.tick line {
    stroke:#cacaca;
    xstroke:#000;
    stroke-width:1px;
}

rect.border {
    stroke:#cacaca;
}

.noborder rect.border {
    stroke:transparent;
}

line.chart-divider {
  stroke:#cacaca;
  stroke-width:1px;
}


#colorkey text {
    font-size:10px;
    font-weight:bold;
    font-family:Helvetica, Arial, sans-serif;
}

#colorkey text.keylabel {
    font-color:#000;
    font-weight:lighter;
}

/* Style for additional axis */
path.additional-axis {
  stroke:#cacaca;
}


/* Following rules are for charts with external labels */
.label_container,
.chart_labels_before,
.chart_labels_after
{
    position:relative;
    margin-top:10px;
}

.chart_labels_before,
.chart_labels_after
{
    margin-left:12px;
}

.label_container .label,
.chart_labels_before .label,
.chart_labels_after .label
{
    width:20px;
    height:10px;
}

.label_container > p,
.chart_labels_before > p,
.chart_labels_after > p
{
    margin:0;
    padding:0;
    font-size:9pt;
}

.label_container > p > span,
.chart_labels_before > p > span,
.chart_labels_after > p > span
{
    float:left;
    clear:right;
    width:10px;
    height:5px;
    margin:4px;
}

/* Styles for MF Total Return % */
.label_container h4,
.chart_labels_before h4,
.chart_labels_after h4
{
    position:absolute;
    top:14px;
    margin:0;
    padding:0;
    font-size:9pt;
    color:#000;
}
.chart_labels_before h4.zer_bar_chart,
.chart_labels_after h4.zer_bar_chart
{
    width:370px;
    font-weight:normal;
}

.label_container h4 span,
.chart_labels_before h4.mf_return_perc span,
.chart_labels_after h4.mf_return_perc span
{
    float:left; 
}
.chart_labels_before h4.mf_return_perc span,
.chart_labels_after h4.mf_return_perc span
{
    /*margin-left:120px;*/
    margin-left:70px;
}
.chart_labels_before h4.zer_bar_chart span,
.chart_labels_after h4.zer_bar_chart span
{
    float:right;
    margin-left:15px;
}

.chart_labels_before h4.mf_return_perc span:first-child,
.chart_labels_after h4.mf_return_perc span:first-child
{
    margin-left:225px;
}


/* Styles for ZER Bar Charts */
.label_container h4.zer_bar_chart,
.chart_labels_before h4.zer_bar_chart,
.chart_labels_after h4.zer_bar_chart
{
    top:0;
    font-size:14px;
}


/* Styles for DataTables */
#chart_table_container .dataTables_wrapper td {
    width:50%;
    padding:0.5em 1.0em;
    border-bottom:1px solid #cacaca;
    font-size:9pt;
}
#chart_table_container table.dataTable.display tbody tr:hover>.sorting_1,
#chart_table_container table.dataTable.order-column.hover tbody tr:hover>.sorting_1 {
    background:#eaeaea;
}


/* Styles for TrendLines */
.chart-context-menu {
  background-color: #FFFFFF;
  border-radius: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: small;
  min-width: 150px;
  border: 1px solid #CCCCCC;
}

.chart-context-menu ul {
  list-style-type: none;
  margin: 4px 0px;
  padding: 0px;
  cursor: default;
}

.chart-context-menu li {
  padding: 4px 16px;
  color: gray;
  font-style: italic;
}

/* "clickable" class applies to menu items that are directly
 * clickable, such as a text label; this class does not appear
 * on menu items with custom HTML, such as a color picker, where
 * individual elements inside the list item have different behaviors
 */
.chart-context-menu li.clickable {
  color: black;
  font-style: normal;
}

.chart-context-menu li.clickable:hover {
  background-color: steelblue;
  color: #EFEFEF;
  cursor: pointer;
}

.chart-context-menu button.color-picker {
  border: none;
  height: 1em;
  width: 1em;
  cursor: pointer;
}

.chart-context-menu button.width-picker {

}

.chart-context-menu button.endpoint-style-picker {

}
 

/* Div containing chart controls */
.chart-controls {
    clear:both;
    float:none;
    padding:15px 40px 20px 10px;
    font-size:10pt;
}

.chart-controls button {
    font-size:10pt;
    margin-top:-4px;
}

.chart-controls div {
    width:15%;
    float:left;
}

.chart-controls div:first-child {
    width:20%;
}

.chart-controls div:last-child {
    float:right;
}


button.timeperiod {
    padding-left:3px !important;
    padding-right:3px !important;
}


/* Customizations for industry/sector charts */
#industry_chart {
    position:relative;
}
.chart_dropdown_container {
    position:absolute;
    top:0;
    right:0;
}
.chart_dropdown_container div {
    margin-bottom:5px;
}

/* media attributes */
@media screen and (max-width:992px)
{
    .chart_dropdown_container { position:relative; }
}


/* EOF */