html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* Highcharts */
.highcharts-container, .highcharts-container svg { width: 100% !important; }
.crisp_edges {
  shape-rendering: crispEdges;
}

body {
  background: #111;
  font-family: Montserrat;
  font-weight: 300;
  font-size: 13px;
  color: #ecf0f1;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* lightblue.light */
::selection { background: #45aaf2; }







/* Fonts */
@font-face{
  font-family:"Montserrat";
  font-weight:100;
  font-style:normal;
  src:url("../font/montserrat/montserrat_100.eot?") format("embedded-opentype"),url("../font/montserrat/montserrat_100.woff") format("woff"),url("../font/montserrat/montserrat_100.ttf") format("truetype"),url("../font/montserrat/montserrat_100.svg#Montserrat") format("svg")
}
@font-face{
  font-family:"Montserrat";
  font-weight:200;
  font-style:normal;
  src:url("../font/montserrat/montserrat_200.eot?") format("embedded-opentype"),url("../font/montserrat/montserrat_200.woff") format("woff"),url("../font/montserrat/montserrat_200.ttf") format("truetype"),url("../font/montserrat/montserrat_200.svg#Montserrat") format("svg")
}
@font-face{
  font-family:"Montserrat";
  font-weight:300;
  font-style:normal;
  src:url("../font/montserrat/montserrat_300.eot?") format("embedded-opentype"),url("../font/montserrat/montserrat_300.woff") format("woff"),url("../font/montserrat/montserrat_300.ttf") format("truetype"),url("../font/montserrat/montserrat_300.svg#Montserrat") format("svg")
}
@font-face{
  font-family:"Montserrat";
  font-weight:400;
  font-style:normal;
  src:url("../font/montserrat/montserrat_400.eot?") format("embedded-opentype"),url("../font/montserrat/montserrat_400.woff") format("woff"),url("../font/montserrat/montserrat_400.ttf") format("truetype"),url("../font/montserrat/montserrat_400.svg#Montserrat") format("svg")
}
@font-face{
  font-family:"Montserrat";
  font-weight:500;
  font-style:normal;
  src:url("../font/montserrat/montserrat_500.eot?") format("embedded-opentype"),url("../font/montserrat/montserrat_500.woff") format("woff"),url("../font/montserrat/montserrat_500.ttf") format("truetype"),url("../font/montserrat/montserrat_500.svg#Montserrat") format("svg")
}
@font-face{
  font-family:"Montserrat";
  font-weight:600;
  font-style:normal;
  src:url("../font/montserrat/montserrat_600.eot?") format("embedded-opentype"),url("../font/montserrat/montserrat_600.woff") format("woff"),url("../font/montserrat/montserrat_600.ttf") format("truetype"),url("../font/montserrat/montserrat_600.svg#Montserrat") format("svg")
}
@font-face{
  font-family:"Montserrat";
  font-weight:700;
  font-style:normal;
  src:url("../font/montserrat/montserrat_700.eot?") format("embedded-opentype"),url("../font/montserrat/montserrat_700.woff") format("woff"),url("../font/montserrat/montserrat_700.ttf") format("truetype"),url("../font/montserrat/montserrat_700.svg#Montserrat") format("svg")
}
@font-face{
  font-family:"Montserrat";
  font-weight:800;
  font-style:normal;
  src:url("../font/montserrat/montserrat_800.eot?") format("embedded-opentype"),url("../font/montserrat/montserrat_800.woff") format("woff"),url("../font/montserrat/montserrat_800.ttf") format("truetype"),url("../font/montserrat/montserrat_800.svg#Montserrat") format("svg")
}
@font-face{
  font-family:"Montserrat";
  font-weight:900;
  font-style:normal;
  src:url("../font/montserrat/montserrat_900.eot?") format("embedded-opentype"),url("../font/montserrat/montserrat_900.woff") format("woff"),url("../font/montserrat/montserrat_900.ttf") format("truetype"),url("../font/montserrat/montserrat_900.svg#Montserrat") format("svg")
}

/* Link styles */
a {
  cursor: pointer;
  transition: color 200ms ease;
}

a:link {
  color: #ecf0f1;
  text-decoration: none;
}

a:visited {
  color: #ecf0f1;
}

a:focus {
  color: #ecf0f1;
}

a:hover {
  color: #bdc3c7;
  text-decoration: none;
}

a:active {
  color: #ecf0f1;
}

a.inverted:link {
  color: #2d98da;
  text-decoration: none;
}

a.inverted:visited {
  color: #2d98da;
}

a.inverted:focus {
  color: #2d98da;
}

a.inverted:hover {
  color: #45aaf2;
  text-decoration: none;
}

a.inverted:active {
  color: #2d98da;
}








.loading_wrapper {
  display: flex;
  justify-content: center;
  height: 30px;
}

.loading_1, .loading_2 {
  position: absolute;
  border: 3px solid #f7b731;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  opacity: 0;
  display: inline-block;

  animation: loading 1200ms cubic-bezier(0, 0.2, 0.8, 1);
  animation-iteration-count: infinite;
}

.loading_2 {
  border: 2px solid #f7b731;
  animation-delay: 400ms;
}

@keyframes loading {
  0% {
    transform: scale(.1);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}


/**
 * Inputs
 */
input[type=checkbox] {
  visibility: hidden;
}

.checkbox {
  position: relative;
  user-select: none;
  margin-bottom: 4px;
}

.checkbox label {
  cursor: pointer;
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  border-radius: 4px;
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
  background: #37474f; /* bluegray light */
}

.checkbox label::after {
  opacity: 0;
  content: '';
  position: absolute;
  width: 12px;
  height: 8px;
  background: transparent;
  top: 5px;
  left: 4px;
  border: 3px solid #2d98da; /* lightblue.base */
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
  transition: opacity 200ms ease;

}

.checkbox input[type=checkbox]:checked + label:after {
  opacity: 1;
}

.checkbox input[type=checkbox]:disabled + label:after {
  opacity: 0.25;
}

input[type=radio] {
  visibility: hidden;
}

.radio {
  position: relative;
  user-select: none;
  margin-bottom: 4px;
}

.radio label {
  cursor: pointer;
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  border-radius: 4px;
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
  background: #37474f; /* bluegray light */
}

.radio label::after {
  opacity: 0;
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: #2d98da; /* lightblue.base */
  top: 4px;
  left: 4px;
  transition: opacity 200ms ease;
  border-radius: 2px;
}

.radio input[type=radio]:checked + label:after {
  opacity: 1;
}

.radio input[type=radio]:disabled + label:after {
  opacity: 0.25;
}

/* Range input */
input[type=range]{
  -webkit-appearance: none;
  background:transparent;
  margin-top: 5px;
  --background: #37474f;
}

input[type=range]::-webkit-slider-runnable-track {
  background: var(--background);
  height: 5px;
  border-radius: 5px;
}

input[type=range]::-moz-range-track {
  background: var(--background);
  height: 5px;
  border-radius: 5px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  border: none;
  background-color: #ffffff;
  transform: translateY(-5px);
}

input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  border: none;
  background-color: #ffffff;
}

/**
 * This is a stripped down version of https://flexgridlite.elliotdahl.com/
 * For futher reading: https://davidwalsh.name/flexbox-layouts;
 */
.row {
  display: flex;
  flex: 0 1 auto;
  margin: 0 -8px 16px -8px;
}
.column {
  /*flex: 0 0 auto;*/
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;
  max-width: 100%;
  min-width: 0;
  padding: 0 8px 0 8px;
}
.column_1 {
  flex-basis: 8.33333%;
  max-width: 8.33333%;
}
.column_2 {
  flex-basis: 16.66667%;
  max-width: 16.66667%;
}
.column_3 {
  flex-basis: 25%;
  max-width: 25%;
}
.column_4 {
  flex-basis: 33.33333%;
  max-width: 33.33333%;
}
.column_5 {
  flex-basis: 41.66667%;
  max-width: 41.66667%;
}
.column_6 {
  flex-basis: 50%;
  max-width: 50%;
}
.column_7 {
  flex-basis: 58.33333%;
  max-width: 58.33333%;
}
.column_8 {
  flex-basis: 66.66667%;
  max-width: 66.66667%;
}
.column_9 {
  flex-basis: 75%;
  max-width: 75%;
}
.column_10 {
  flex-basis: 83.33333%;
  max-width: 83.33333%;
}
.column_11 {
  flex-basis: 91.66667%;
  max-width: 91.66667%;
}
.column_12 {
  flex-basis: 100%;
  max-width: 100%;
}

@media only screen and (max-width: 800px) {
  .row {
    display: block;
  }
  .column {
    max-width: 100%;
    margin-bottom: 16px;
  }
}





/* Icons (materialdesignicons.com) */
@font-face {
  font-family: "Material Design Icons";
  src: url("../font/material_icon/material_icon.eot?v=3.4.94");
  src: url("../font/material_icon/material_icon.eot?#iefix&v=3.4.94") format("embedded-opentype"), url("../font/material_icon/material_icon.woff2?v=3.4.94") format("woff2"), url("../font/material_icon/material_icon.woff?v=3.4.94") format("woff"), url("../font/material_icon/material_icon.ttf?v=3.4.94") format("truetype"), url("../font/material_icon/material_icon.svg?v=3.4.94#materialdesigniconsregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

.icon:before {
  display: inline-block;
  font: normal normal normal 24px/1 "Material Design Icons";
  font-size: inherit;
  text-rendering: auto;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  font-size: 24px;
}

.icon.air_filter:before { content: "\F0D43"; }
.icon.air_purifier:before { content: "\F0D44"; }
.icon.alarm_snooze:before { content: "\F068E"; }
.icon.alert:before { content: "\F0026"; }
.icon.alpha_b:before { content: "\F0AEF"; }
.icon.alpha_b_box:before { content: "\F0B09"; }
.icon.apple:before { content: "\F0035"; }
.icon.arrow_down:before { content: "\F0045"; }
.icon.arrow_expand_horizontal:before { content: "\F084E"; }
.icon.arrow_expand_vertical:before { content: "\F084F"; }
.icon.arrow_horizontal_lock:before { content: "\F115B"; }
.icon.arrow_left:before { content: "\F004D"; }
.icon.basket_fill:before { content: "\F0077"; }
.icon.basket_unfill:before { content: "\F0078"; }
.icon.battery_10:before { content: "\F007A"; }
.icon.bell:before { content: "\F009A"; }
.icon.bell_off:before { content: "\F009B"; }
.icon.border_none_variant:before { content: "\F08A4"; }
.icon.bullhorn:before { content: "\F00E6"; }
.icon.calendar:before { content: "\F00ED"; }
.icon.calendar_alert:before { content: "\F0A31"; }
.icon.calendar_edit:before { content: "\F08A7"; }
.icon.calendar_month:before { content: "\F0E17"; }
.icon.calendar_week:before { content: "\F0A33"; }
.icon.cancel:before { content: "\F073A"; }
.icon.card_plus_outline:before { content: "\F1200"; }
.icon.card_remove_outline:before { content: "\F1605"; }
.icon.cash:before { content: "\F0114"; }
.icon.chart_bar_stacked:before { content: "\F076A"; }
.icon.chart_line:before { content: "\F012A"; }
.icon.check:before { content: "\F012C"; }
.icon.chevron_down:before { content: "\F0140"; }
.icon.chevron_up:before { content: "\F0143"; }
.icon.clock_outline:before { content: "\F0150"; }
.icon.close:before { content: "\F0156"; }
.icon.close_network:before { content: "\F015B"; }
.icon.cloud_question:before { content: "\F0A39"; }
.icon.code_tags:before { content: "\F0174"; }
.icon.cog:before { content: "\F0493"; }
.icon.credit_card_lock:before { content: "\F18E7"; }
.icon.credit_card_settings:before { content: "\F0FF5"; }
.icon.currency_usd:before { content: "\F01C1"; }
.icon.delete:before { content: "\F01B4"; }
.icon.dots_vertical:before { content: "\F01D9"; }
.icon.download:before { content: "\F01DA"; }
.icon.earth:before { content: "\F01E7"; }
.icon.email:before { content: "\F01EE"; }
.icon.exit_to_app:before { content: "\F0206"; }
.icon.eye:before { content: "\F0208"; }
.icon.eye_circle:before { content: "\F0B94"; }
.icon.eye_off:before { content: "\F0209"; }
.icon.fan:before { content: "\F0210"; }
.icon.fast_forward:before { content: "\F0211"; }
.icon.fire:before { content: "\F0238"; }
.icon.floor_plan:before { content: "\F0821"; }
.icon.forum:before { content: "\F028C"; }
.icon.gift:before { content: "\F0E44"; }
.icon.google_play:before { content: "\F02BC"; }
.icon.grid:before { content: "\F02C1"; }
.icon.grid_off:before { content: "\F02C2"; }
.icon.heart:before { content: "\F02D1"; }
.icon.help_circle:before { content: "\F02D7"; }
.icon.home:before { content: "\F02DC"; }
.icon.home_floor_a:before { content: "\F0D83"; }
.icon.home_search:before { content: "\F13B0"; }
.icon.home_switch:before { content: "\F1794"; }
.icon.information:before { content: "\F02FC"; }
.icon.key:before { content: "\F0306"; }
.icon.label:before { content: "\F0315"; }
.icon.label:before { content: "\F0315"; }
.icon.label_off:before { content: "\F0ACB"; }
.icon.layers:before { content: "\F0328"; }
.icon.layers_plus:before { content: "\F0E4D"; }
.icon.link_off:before { content: "\F0338"; }
.icon.magnify_close:before { content: "\F0980"; }
.icon.magnify_minus_outline:before { content: "\F06EC"; }
.icon.magnify_plus_outline:before { content: "\F06ED"; }
.icon.map_marker:before { content: "\F05F8"; }
.icon.menu_down:before { content: "\F035D"; }
.icon.menu_up:before { content: "\F0360"; }
.icon.message:before { content: "\F0361"; }
.icon.moon_waning_crescent:before { content: "\F0F65"; }
.icon.network_strength_4:before { content: "\F08FA"; }
.icon.network_strength_off:before { content: "\F08FC"; }
.icon.numeric_0:before { content: "\F0B39"; }
.icon.numeric_0_box:before { content: "\F03A1"; }
.icon.numeric_10:before { content: "\F0FE9"; }
.icon.numeric_10_box:before { content: "\F0F7D"; }
.icon.numeric_1:before { content: "\F0B3A"; }
.icon.numeric_1_box:before { content: "\F03A4"; }
.icon.numeric_2:before { content: "\F0B3B"; }
.icon.numeric_2_box:before { content: "\F03A7"; }
.icon.numeric_3:before { content: "\F0B3C"; }
.icon.numeric_3_box:before { content: "\F03AA"; }
.icon.numeric_4:before { content: "\F0B3D"; }
.icon.numeric_4_box:before { content: "\F03AD"; }
.icon.numeric_5:before { content: "\F0B3E"; }
.icon.numeric_5_box:before { content: "\F03B1"; }
.icon.numeric_6:before { content: "\F0B3F"; }
.icon.numeric_6_box:before { content: "\F03B3"; }
.icon.numeric_7:before { content: "\F0B40"; }
.icon.numeric_7_box:before { content: "\F03B6"; }
.icon.numeric_8:before { content: "\F0B41"; }
.icon.numeric_8_box:before { content: "\F03B9"; }
.icon.numeric_9:before { content: "\F0B42"; }
.icon.numeric_9_box:before { content: "\F03BC"; }
.icon.octagram:before { content: "\F06F9"; }
.icon.open_in_new:before { content: "\F03CC"; }
.icon.open_in_app:before { content: "\F03CB"; }
.icon.patreon:before { content: "\F0882"; }
.icon.pause:before { content: "\F03E4"; }
.icon.pencil:before { content: "\F03EB"; }
.icon.play:before { content: "\F040A"; }
.icon.plus:before { content: "\F0415"; }
.icon.pound:before { content: "\F0423"; }
.icon.redo:before { content: "\F044E"; }
.icon.refresh:before { content: "\F0450"; }
.icon.resistor:before { content: "\F0B44"; }
.icon.restart:before { content: "\F0709"; }
.icon.restart_off:before { content: "\F0D95"; }
.icon.snowflake:before { content: "\F0717"; }
.icon.sticker_emoji:before { content: "\F0785"; }
.icon.swap_horizontal:before { content: "\F04E1"; }
.icon.thermometer:before { content: "\F050F"; }
.icon.thermostat:before { content: "\F0393"; }
.icon.thumb_up:before { content: "\F0513"; }
.icon.tune:before { content: "\F062E"; }
.icon.twitter:before { content: "\F0544"; }
.icon.undo:before { content: "\F054C"; }
.icon.update:before { content: "\F06B0"; }
.icon.vector_square_plus:before { content: "\F18DB"; }
.icon.vector_square_remove:before { content: "\F18DC"; }
.icon.view_quilt:before { content: "\F0574"; }
.icon.water_off:before { content: "\F058D"; }
.icon.water_percent:before { content: "\F058E"; }
.icon.weather_cloudy:before { content: "\F0590"; }
.icon.weather_fog:before { content: "\F0591"; }
.icon.weather_hail:before { content: "\F0592"; }
.icon.weather_hazy:before { content: "\F0F30"; }
.icon.weather_lightning_rainy:before { content: "\F067E"; }
.icon.weather_partly_cloudy:before { content: "\F0595"; }
.icon.weather_pouring:before { content: "\F0596"; }
.icon.weather_snowy:before { content: "\F0598"; }
.icon.weather_snowy_heavy:before { content: "\F0F36"; }
.icon.weather_sunny:before { content: "\F0599"; }
.icon.weather_tornado:before { content: "\F0F38"; }
.icon.weather_windy:before { content: "\F059D"; }
.icon.white_balance_sunny:before { content: "\F05A8"; }
.icon.wifi_strength_1_alert:before { content: "\F0920"; }
.icon.wifi_strength_4:before { content: "\F0928"; }
.icon.zigbee:before { content: "\F0D41"; }

.icon.f16:before { font-size: 16px; }
.icon.f24:before { font-size: 24px; }
.icon.f32:before { font-size: 32px; }
.icon.f48:before { font-size: 48px; }
.icon.f64:before { font-size: 64px; }