.sidebarButton{
    background-color : #428bca;
}
.sidebarButton:hover{
    background-color : #337AB7;
}

#charts-container {
    margin-top: 8px;
}

@media screen and (max-width: 991px) {
    #charts-container {
        margin-top: 15px;
    }
}

.input-group .input-group-addon {
    border-top-right-radius : 3px;
    border-bottom-right-radius : 3px;
}

.chart-outer-div {
    background-color : #f9f9f9;
    margin-top : 15px;
    border : 1px solid #DDD;
    padding-bottom: 15px;
    height:auto;
}

.chart-outer-div:nth-of-type(odd) {
    background-color: #f9f9f9;
}

.add-info {
    font-size: 17px;
    float: left;
    padding-left: 20px;
    width: 100%;
}

.chart-svg {
    width:100%;
    height: 250px;
}

.mini-svg {
    margin-top : -2px;
    margin-bottom : -5px;
    margin-right : 10px;
    width: 60px;
    height: 20px;
}

.magic-rect {
    fill: #F9F9F9;
}

.mouseevent-rect {
    opacity: 0;
}

.tt-rect {
    opacity: 0.75;
    fill: #3c8dbc;
    border-radius : 5px;
}

#checkbox1 { 
    margin-top: 12px; 
}

.padding-right{
    padding-right :15px
}

.c-and-r-btn-padding {
    padding-top : 20px;
    padding-right:20px;
}
        
@media (max-width: 767px) { 
    .media-sm-remove-margin-add-padding {
        padding-right: 45px;
        margin-left: 15px;
    }
}

.heading-padding {
    padding-left:20px;
    padding-bottom:10px;      
           
}

.list-group-item {
    user-select: none;
}

.list-group > div {
    background-color : #f9f9f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-group > div:nth-of-type(odd) {
    background-color : #efefef;
}

.list-group > div:hover {
    background-color : lightgrey;
    color: white;
}

/*-----Styles for the preview chart block-----*/
#chart-outer-div-hidden {
	border: 2px dashed rgb(221, 221, 221);
    /*background-image : url("/pictures/chart_bg.png");*/
    background-size:100% 100%;
    /*opacity: 0.5;*/
    /*background-color : red;*/
}

#chart-outer-div-hidden .sensor-buttons {
    display: none;
}

#chart-outer-div-hidden h2 {
    padding-top: 30px;
    padding-left : 35px;
    padding-right : 35px;
    color: grey;
    height: 266px;
}

#chart-outer-div-hidden #chart-svg--1--1 {
    height: 1px;
}
/*-----/Styles for the preview chart block-----*/

.oneIsShown h2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 90px);
    float: left;
    margin-top: 0px;
}

.heading-and-buttons {
    padding: 20px 20px 0 20px;
    height: 75px;
    width: 100%;
}

#chart-outer-div-hidden  .heading-and-buttons {
    padding: 0px;
}

.sensor-buttons {
    float: right;
    width: 35%;
    text-align: right;
}

.sensor-heading {
    float: left;
    width: 65%;
    font-size: 30px;
}

.barChartDiv {
    width: 100%;
    height: auto;
    clear: both;
    display: block;
}

.areaChartDiv {
    width: 100%;
    height: auto;
    clear: both;
    display: block;
}

.bar-legend {
    margin:auto;
    padding: 0 !important;
    text-align: center;
}

.chart-legend li {
    list-style: none;
    display: inline;
    margin-right: 10px;
}

.chart-legend li span {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
}

.indicator_box {
    width: 55px;
    height: 5px;
    padding: 5px;
    margin: 5px 10px 5px 10px;
    padding-left: 5px;
    display: block;
    float: left;
}

#list-item-hidden {
    display: none;
}

.fixed-btn-width {
    width: 75px;
}

/*d3js stuff*/

.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.area {
    fill : #3c8dbc;
    fill-opacity: 0.5;
    stroke-opacity: 1;
    stroke-width: 0;
    stroke: #3c8dbc;
}

.pathFunction {
    stroke: #3c8dbc;
    stroke-opacity: 1;
    stroke-width: 1;
    fill-opacity: 0;
}

.grid .tick {
    stroke: lightgrey;
    stroke-opacity: 0.3;
    shape-rendering: crispEdges;
}

.grid path {
    stroke-width: 0;
}


#sensor-list-container {
    margin-bottom: -18px;
}

/*--------------------Other stuff--------------------*/

/* Oli stuff */
.oli-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.oli-col-left {
    padding-right: 0px;
}


@media screen and (max-width: 991px) {
    .oli-col-left {
        padding-right: 15px;
    }
}
        
.oli-margin-bottom-small {
    margin-bottom: 15px;
}

.zoomRectangle {
    stroke: #39b1dd;
    stroke-width: 1px;
    stroke-linecap: round;
            
    pointer-events: none;
    fill: #39a4dd;
    fill-opacity: 0.25;
}

.cross-line {
    pointer-events: none;
    fill: #333;
    fill-opacity: 0.3;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*.table td {
    text-align: center;   
}*/

/*daterangepicker adaptations*/

.daterangepicker .ranges li {
    color: #333;
}

.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
	background: #3c8dbc none repeat scroll 0% 0%;
	border: 1px solid #3c8dbc;
	color: #FFF;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
	background-color: #3c8dbc;
	border-color: #74ad38;
	color: #FFF;
}

.daterangepicker td.in-range {
	background-color: #3c8dbc;
    opacity: 0.25;
}

.daterangepicker td.end-date {
	border-radius: 0px 4px 4px 0px;
    opacity: 1;
}

.demo {
    color : #3c8dbc;
}