@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  src: url('../../fonts/montserrat.eot'); /* IE9 Compat Modes */
  src: local('Montserrat'), local('Montserrat'),
       url('../../fonts/montserrat.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/montserrat.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/montserrat.woff') format('woff'), /* Modern Browsers */
       url('../../fonts/montserrat.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../fonts/montserrat.svg#Montserrat') format('svg'); /* Legacy iOS */
}

.app {
  font-family: Montserrat, Veranda, sans-serif;
}

#app-block {
    padding: 0 0.7rem;
}
.app-block {
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

.app-header,
.graph-header {
  display: table;
}
.app-header > div,
.graph-header > div {
  display: table-cell;
}
.app-header .title,
.graph-header .title {
  font-weight: bold;
  padding: 10px;
}
.app-header .action,
.graph-header .action,
.graph-footer .action {
  padding: 11px;
  min-width: 30px;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  border-left: 1px solid rgba(255,255,255,0.333);
  cursor: pointer;
}

.app-body {
  display: table;
  padding: 10px;
  color: #333;
  background-color: #fff;
}
.app-body > .title,
.app-body > .value {
  display: table-row;
}
.app-body > .title > div {
  display: table-cell;
  white-space: nowrap;
}
.app-body > .value > div {
  display: table-cell;
  line-height: 1em;
}
.app-body .title {
  font-size: 14px;
  font-weight: bold;
}
.app-body .value {
  font-size: 30px;
  font-weight: bold;
}
.app-body .consumption {
  color: #44b3e2;
}
.app-body .consumption.cost {
  color: #dd7777 !important;
}
.app-body .generation {
  color: #ffcb47;
}
.app-body .generation.cost {
  color: #b9cb9c !important;
}
.app-body .selfcons {
  color: #ccc;
  font-size: 90%;
}
.app-body .power {
  padding-right: 30px;
}
.app-body .energy {
  padding-left: 30px;
}
.app-body .unit {
  font-size: 75%;
}

.graph-body {
  position: relative;
  padding: 10px;
}
.graph-body .graph {
  min-height: 200px;
  max-height: 500px;
}

.graph-footer {
  min-height: 42px;
}
.graph-footer > div {
  color: #333;
  background-color: #eee;
}

.graph-info {
  height: 42px;
  display: table;
}
.graph-info > div {
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
}
.graph-info .window {
  padding: 10px;
  color: #666;
}
.graph-info .action:hover {
  background-color: #f5f5f5;
  color: #666;
}

.graph-stats {
  padding: 10px;
  height: auto;
}
.graph-stats > table {
  width: 100%;
  margin: 0px;
}

.graph-tooltip {
  z-index: 100;
  position: absolute;
  padding: 5px;
  opacity: 0.75;
  color: #000;
  background-color: #fff;
  border: 1px solid #333;
  text-align: left;
  font-family: Montserrat, Veranda, sans-serif;
}

.graph-loader {
  background-color: rgba(255, 255, 255, .5);
}

.right {
  text-align: right;
}
.grow {
  width: 100%;
}

/* -------------------------------------------------------------------
   MOBILE FIRST:

   Extra small devices (portrait phones, 320px and up)
--------------------------------------------------------------------*/
@media (ax-width: 400px) {
  
}

@media (max-width: 576px) {
  .app-header .action,
  .app-header .title,
  .graph-header .action,
  .graph-header .title {
    font-size:12px;
    padding:8px;
    min-width:20px;
  }
  .dmy { display:none }
}

/* -------------------------------------------------------------------
   Small devices (landscape phones, 576px and up)
--------------------------------------------------------------------*/
@media (max-width: 768px) {
  .app-body .generation,
  .graph-info .generation,
  .graph-info .details {
    display: none !important;
  }

  .graph-header .power.time {
    display: none !important;
  }
}

/* -------------------------------------------------------------------
   Medium devices (tablets, 768px and up)
--------------------------------------------------------------------*/
@media (max-width: 992px) {
  .app-body .title {
    font-size: 14px;
  }
  .app-body .value {
    font-size: 30px;
  }
}

/* -------------------------------------------------------------------
   Large devices (desktops, 992px and up)
--------------------------------------------------------------------*/
@media (min-width: 992px) {
  .app-body .title {
    font-size: 16px;
  }
  .app-body .value {
    font-size: 36px;
  }
}

@media (max-width: 1200px) {
  .app-body .selfcons {
    display: none !important;
  }
}

/* -------------------------------------------------------------------
   Extra large devices (large desktops, 1200px and up)
--------------------------------------------------------------------*/
@media (min-width: 1200px) {
  .app-body .title {
    font-size: 18px;
  }
  .app-body .value {
    font-size: 42px;
  }
}

@media (min-width: 1300px) {
  .app-body .title {
    font-size: 20px;
  }
  .app-body .value {
    font-size: 48px;
  }
}

@media (max-width: 1300px) {
  .graph-info .self {
    display: none !important;
  }
}

@media (max-width: 1400px) {
  .graph-info .window {
    font-size: 14px;
  }
}