/*@import 'https://code.highcharts.com/css/highcharts.css';*/
@import '../plugins/highstock/css/highcharts.css';

.highcharts-range-input rect {
    height: 18px;
}

.highcharts-range-selector:focus {
  border: none !important;
  border-top: 1px solid silver !important;
  border-left: 1px solid silver !important;    
  border-bottom: 1px solid silver !important;  
}

.highchart-height {
    height: 350px;
}

.highcharts-menu-item:hover {
    background: #2b303b !important;
}

.highcharts-reset-zoom {
    fill: #2b303b;
}

.highcharts-reset-zoom text {
    fill: #ffffff !important;
    color: #ffffff !important;
    text-transform: capitalize !important;
}

.highcharts-contextbutton:hover {
    fill: #2b303b;
}

.highcharts-button-symbol {
    /*fill: #2b303b !important;
    stroke: #2b303b !important;*/
}

.highcharts-contextbutton:hover .highcharts-button-symbol,
.highcharts-button-symbol:hover {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

.highcharts-tooltip .highcharts-label-box {
  fill: #2b303b;
  text-align: center !important;
}

.highcharts-tooltip text {
    fill: #fff !important;
    text-align: center !important;
}

.highcharts-tooltip-box {
    stroke: none !important;
    text-align: center !important;
}

.highcharts-axis-line {
  stroke: #000000;
  opacity: 0.1;
}

.highcharts-contextbutton.highcharts-button-pressed rect {
  fill: #2b303b !important;
}

.highcharts-contextbutton.highcharts-button-pressed .highcharts-button-symbol {
  stroke: #fff !important;
}

.highcharts-crosshair-thin {
  stroke-width: 1px;
  stroke: #2b303b;
}

.highcharts-range-input text {
  line-height: 10px !important;
}

.highcharts-range-label {
  margin-right: 10px !important;
}

.highcharts-markers {
    stroke-width: 1px !important;
    stroke: #ffffff !important;
}

.highcharts-range-selector-buttons {
  position: absolute !important;
  left: 0 !important;
}

.hc-temp,
.hc-hum,
.hc-dew,
.hc-air {
    height: 376px;
}

.highcharts-area {
    fill-opacity: 0.25;
    stroke-width: 0;
}

/* Temperature Chart Styles */
.hc-temp .highcharts-button-pressed {
  fill: #e2f6f4 !important;
}

.hc-temp .highcharts-selection-marker {
  fill: #10cfbd !important;
  opacity: 0.8;
}

.hc-temp .highcharts-color-0 {
  stroke: #10cfbd;
  fill: #10cfbd;
}

/* Humidity Chart Styles */
.hc-hum .highcharts-button-pressed {
  fill: #e8f2fa !important;
}

.hc-hum .highcharts-selection-marker {
  fill: #48b0f7 !important;
  opacity: 0.8;
}

.hc-hum .highcharts-color-0 {
  stroke: #48b0f7;
  fill: #48b0f7;
}

/* Dew Chart Styles */
.hc-dew .highcharts-button-pressed {
    fill: #f9f1d7 !important;
}

.hc-dew .highcharts-selection-marker {
    fill: #f8d053 !important;
    opacity: 0.8;
}

.hc-dew .highcharts-color-0 {
    stroke: #f8d053;
    fill: #f8d053;
}

/* Air Chart Styles */
.hc-air .highcharts-button-pressed {
  fill: #eceaf2 !important;
}

.hc-air .highcharts-selection-marker {
  fill: #6d5cae !important;
  opacity: 0.8;
}

.hc-air .highcharts-color-0 {
  stroke: #6d5cae;
  fill: #6d5cae;
}

/* Datepicker */

a.ui-state-default.ui-state-hover {
  color: #fff !important;
}

.highcharts-range-selector.hasDatepicker.min + #ui-datepicker-div,
.highcharts-range-selector.hasDatepicker.max + #ui-datepicker-div {
  position: absolute !important;
  margin-top: 5px !important;
  width: 240px;
  height: auto;
  top: 30px !important;
  left: 12px !important;
  z-index: 9999 !important;
}

.highcharts-range-selector.hasDatepicker.max + #ui-datepicker-div {
  left: 136px !important;
}

.ui-widget {
  font-family: 'Montserrat';
}

.ui-datepicker {
  padding: 0;
}

.ui-widget-content {
  background: #fff;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.19);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.19);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.19);

}

.ui-datepicker-header {
  font-family: 'Montserrat';
  padding: 0;
  color: #fff;
  overflow: hidden;
  background: #2b303b;
  border-radius: 0 !important;
}

.highcharts-label.highcharts-range-input,
.highcharts-range-selector.hasDatepicker {
  font-family: 'Montserrat';
  font-weight: 500;
  font-size: 12px;
}

.ui-datepicker .ui-datepicker-title {
  padding-top: 4px;
  height: 30px;
  line-height: none;
  font-weight: normal;
  font-size: 12px;
}

.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next {
  margin-top: 7px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  border: none !important;
}

.ui-datepicker .ui-datepicker-prev {
  margin-left: 5px;
}

.ui-datepicker .ui-datepicker-next {
  margin-right: 5px;
}

.ui-datepicker .ui-datepicker-prev.ui-datepicker-prev-hover {
  margin-top: 8px;
  cursor: pointer;
  opacity: 0.8;
}

.ui-datepicker .ui-datepicker-next.ui-datepicker-next-hover {
  margin-top: 9px;
  cursor: pointer;
  opacity: 0.95;
}


.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    margin-top: -6px !important;
}

.ui-datepicker .ui-datepicker-prev.ui-state-hover,
.ui-datepicker .ui-datepicker-next.ui-state-hover {
  background: #fff;
}

.ui-datepicker .ui-datepicker-prev {
  left: 0;
  border-right: none;
}

.ui-datepicker .ui-datepicker-next {
  right: 0;
  border-left: none;
}

.ui-datepicker .ui-datepicker-prev span, 
.ui-datepicker .ui-datepicker-next span {
  margin-top: -4px;
  top: 40%;
}

.ui-icon-circle-triangle-e {
  background-image: url(images/ui-icons_ffffff_256x240.png);
  background-position: -32px 0;
}

.ui-icon-circle-triangle-w {
  background-image: url(images/ui-icons_ffffff_256x240.png);
  background-position: -96px 0;
}

.ui-datepicker table {
  margin: 0;
}

.ui-datepicker th {
  padding: .6em 0 .4em;
  text-transform: uppercase;
  color: #bbb;
  font-weight: bold;
  font-size: .8em;
  border-top: 1px solid #e6e6e6;
}

.ui-datepicker td {
  border: none;
  border-top: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 0;
}

td:last-child {
  border-right: 0;
}

td .ui-state-default,
td .ui-state-default.ui-state-hover {
  height: 30px;
  font-weight: normal;
  font-size: 12px;
  color: #454545;
  background: #f6f6f6 !important;
  border: none !important;
}

td .ui-state-default.ui-state-hover {
  color: #fff;
  background: #2b303b !important;
}

.ui-datepicker-calendar .ui-state-hover {
  color: #fff;
  background: #2b303b;
}

td a.ui-state-active,
td a.ui-state-active.ui-state-hover {
  color: #fff !important;
  background: #2b303b !important;
}

@media (max-width: 550px) {

    .highcharts-range-selector.hasDatepicker.min + #ui-datepicker-div,
    .highcharts-range-selector.hasDatepicker.max + #ui-datepicker-div {
      width: 230px;
      top: 60px !important;
    }

}

@media (max-width: 420px) {

    .highcharts-range-selector.hasDatepicker.max + #ui-datepicker-div {
      left: 106px !important;
    }

}