@charset "utf-8";

#content {
    background: #f2f2f2;
    padding: 0px 12px 12px 12px;
    overflow: hidden;
    width: 95%;
}

#section-configure {
    float: left;
    width: 320px;
}

#section-analyze {
    overflow: hidden;
    padding-left: 12px;
}

#section-analyze-top {
    overflow: hidden;
}

/***************************************/
/* Analyze section 					    */
/***************************************/
.graph-header {
    width: 100%;
    height: 42px;
    color: #fff;
    display: block;
    font-size: 1.2em;
    text-indent: 12px;
    background: #4387FD;
    border-bottom: solid 3px #4387FD;
    margin-top: 12px;
}

.graph-content {
    width: 100%;
    background: #FFFFFF;
    /* border-bottom: solid 3px #DDDDDD;
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;*/
    overflow: hidden;
}

/***************************************/
/* Left menubar					       */
/***************************************/
#section-configure-input {
    overflow: hidden;
    position: relative;
}

#section-configure-settings {
    overflow: hidden;
    position: relative;
}

.accordion-header {
    color: #fff;
}

/**************/
/* Date Range */
/**************/
#accordion-date-header {
    background: #4387FD;
    border-bottom: solid 3px #4387FD;
}

/******************/
/* Output variable*/
/******************/
#accordion-output-header {
    background: #4387FD;
    border-bottom: solid 3px #4387FD;
}

#accordion-output-content {
    line-height: 2em;
    color: #555555;
}

#accordion-output-content select {
    margin-bottom: 12px;
    height: 35px;
    width: 100%;
    border-radius: 4px;
    border: solid 1px #ddd;
}

#button-output-varsettings {
    width: 100%;
}

/*******************/
/* Correlation card*/
/*******************/
#correlation-gauge {
    font-size: 1.15em;
/ / padding-left: 12 px;
    width: 0px;
    float: left;
}

#correlation-gauge .graph-content {
    height: 350px;
}

#correlation-gauge td {
    vertical-align: middle;
    border: none;
}

#correlation-gauge tr:nth-child(even) {
    background-color: #F5FBFB;
}

/*******************/
/* Scatterplot card*/
/*******************/
#scatterplot-graph {
/ / padding-left: 12 px;
    overflow: hidden;
}

#scatterplot-graph .graph-content {
    height: 350px;
}

/*******************/
/* Bar Graph card*/
/*******************/
#bar-graph {
    overflow: hidden;
}

#bar-graph .graph-content {

}

#bar-graph .highcharts-button {
    display: none;
}

/****************/
/* Timeline card*/
/****************/
#timeline-graph {
    overflow: hidden;
}

#timeline-graph .graph-content {
    height: 450px;
}

.inoutstate {
    float: left;
    width: 200px
}

.outstate {
}

.daterange {
}

/* Responsive stuffs */
@media only screen and (max-width: 1480px) {

}

@media only screen and (max-width: 1100px) {
    #correlation-gauge {
        width: 100%;
    }

    #scatterplot-graph {
        width: 100%;
        padding-left: 0;
    }
}

@media only screen and (max-width: 768px) {
    #section-configure {
        width: 100%;
    }

    #section-analyze {
        overflow: visible;
        padding: 0;
    }
}

.variableInBarGraph .variableName {
    width: 150px;
    float: left;
}

.variableInBarGraph .gear {
    width: 16px;
}

.variableInBarGraph .setButton {
    cursor: pointer;
    opacity: 0;
    border: none;
    transition: all 0.2s ease-in-out;
    margin-left: 3px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    color: #FFF;
    float: left;
}

.variableInBarGraph {
    width: 190px;
    cursor: pointer;
}

.variableInBarGraph:hover {
    /*color: #FFF;*/
}

.variableInBarGraph:hover .setButton {
    opacity: 1;
    color: #FFF;
}

#selectVariableCategorySetting[disabled] {
    background-color: #eeeeee;
    opacity: 1;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

/**********************/
/* new inlined styles */
/**********************/
.floatRight {
    float: right;
}

.marginTopTen {
    margin-top: 10px;
}

.marginTopThree {
    margin-top: 3px;
}

.marginTopSeven {
    margin-top: 7px;
}

.generalHeader {
    float: left;
    line-height: 42px;
    max-height: 42px;
    overflow: hidden;
}

.bargraphHeader {
    max-width: 255px;
    font-size: 18px;
}

.resolutionHeader {
    max-width: 165px;
}

.questionMark {
    float: right;
    margin-right: 3px;
    margin-top: 6px !important;
    font-size: 22px;
    text-indent: 0px;
}

.questionMarkAlone {
    margin-right: 7px !important;
}

.questionMarkPlus {
    margin-right: 4px !important;
}

.correlationHeader {
    max-width: 320px;
}

.scatterplotHeader {
    /*max-width: 290px;*/
}

.plusMark {
    float: right;
    margin-top: 7px !important;
    margin-right: 3px;
    font-size: 28px !important;
    text-indent: 0px;
    cursor: pointer;
}

.timelineHeader {
    max-width: 900px;
}

.keepInline {
    position: absolute;
    right: 12px;

}

.resolutionOnTimeLine {
    height: 22px !important;
    padding: 0px !important;
}

.resolutionOnTimeLine span {
    padding-top: 2.5px !important;
    padding-bottom: 2.5px !important;
}

.resolutionLabel {
    position: absolute;
    top: 31px;
    left: -60px;
    color: #666;
    font-size: 12px;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #666;
    fill: #666;
}

.resolutionCover {
    position: absolute !important;
    top: 28px !important;
    width: 200px !important;
    border-bottom: none !important;
}

#selectOutputCategory, #selectOutputVariable, #selectOutputAsType {
    display: none;
}

#selectOutputVariable {
    width: 100%;
}

#please-wait {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

#please-wait-overlay {
    width: 100%;
    height: 100%;
    background-color: #000;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.2;
}

.please-wait-content {
    opacity: 1;
    padding: 5px;
    border-radius: 5px;
    color: #000;
    background-color: #fff;
    position: absolute;
    margin: 0 auto;
    width: 150px;
    top: 50%;
    right: 40%;
}

.highcharts-tooltip > span {
    z-index: 99 !important;
    background-color: #FFF;
    margin-left: -7px !important;
}

.highcharts-tooltip .tooltip-wrap {
    padding-left: 7px;
}