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") } /* Beestat logo */ .beestat { font-weight: 200; font-size: 40px; font-family: Montserrat; } .beestat > .bee { color: #f7b731; } .beestat > .stat { color: #20bf6b; } /* 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; } /** * 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.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_range:before { content: "\F0679"; } .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.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.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.fire:before { content: "\F0238"; } .icon.floor_plan:before { content: "\F0821"; } .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.information:before { content: "\F02FC"; } .icon.key:before { content: "\F0306"; } .icon.layers:before { content: "\F0328"; } .icon.layers_plus:before { content: "\F0E4D"; } .icon.magnify_close:before { content: "\F0980"; } .icon.magnify_plus_outline:before { content: "\F06ED"; } .icon.magnify_minus_outline:before { content: "\F06EC"; } .icon.map_marker:before { content: "\F05F8"; } .icon.menu_down:before { content: "\F035D"; } .icon.menu_up:before { content: "\F0360"; } .icon.message:before { content: "\F0361"; } .icon.network_strength_4:before { content: "\F08FA"; } .icon.network_strength_off:before { content: "\F08FC"; } /*.icon.numeric_1_box:before { content: "\F03A4"; } .icon.numeric_3_box:before { content: "\F03AA"; } .icon.numeric_4_box:before { content: "\F03AD"; } .icon.numeric_7_box:before { content: "\F03B6"; }*/ .icon.open_in_new:before { content: "\F03CC"; } .icon.patreon:before { content: "\F0882"; } .icon.pound:before { content: "\F0423"; } .icon.refresh:before { content: "\F0450"; } .icon.resistor:before { content: "\F0B44"; } .icon.snowflake:before { content: "\F0717"; } .icon.swap_horizontal:before { content: "\F04E1"; } .icon.thermostat:before { content: "\F0393"; } .icon.thumb_up:before { content: "\F0513"; } .icon.tune:before { content: "\F062E"; } .icon.twitter:before { content: "\F0544"; } .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.wifi_strength_1_alert:before { content: "\F0920"; } .icon.wifi_strength_4:before { content: "\F0928"; } .icon.zigbee:before { content: "\F0D41"; } .icon.home_plus:before { content: "\F0975"; } .icon.home_switch:before { content: "\F1794"; } .icon.home_remove:before { content: "\F1247"; } .icon.arrow_expand_vertical:before { content: "\F084F"; } .icon.label:before { content: "\F0315"; } .icon.numeric_0:before { content: "\F0B39"; } .icon.numeric_0_box:before { content: "\F03A1"; } .icon.numeric_1:before { content: "\F0B3A"; } .icon.numeric_1_box:before { content: "\F03A4"; } .icon.numeric_10:before { content: "\F0FE9"; } .icon.numeric_10_box:before { content: "\F0F7D"; } .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.alpha_a:before { content: "\F0AEE"; } .icon.alpha_a_box:before { content: "\F0B08"; } .icon.alpha_b:before { content: "\F0AEF"; } .icon.alpha_b_box:before { content: "\F0B09"; } .icon.alpha_c:before { content: "\F0AF0"; } .icon.alpha_c_box:before { content: "\F0B0A"; } .icon.alpha_d:before { content: "\F0AF1"; } .icon.alpha_d_box:before { content: "\F0B0B"; } .icon.alpha_e:before { content: "\F0AF2"; } .icon.alpha_e_box:before { content: "\F0B0C"; } .icon.alpha_f:before { content: "\F0AF3"; } .icon.alpha_f_box:before { content: "\F0B0D"; } .icon.alpha_g:before { content: "\F0AF4"; } .icon.alpha_g_box:before { content: "\F0B0E"; } .icon.alpha_h:before { content: "\F0AF5"; } .icon.alpha_h_box:before { content: "\F0B0F"; } .icon.alpha_i:before { content: "\F0AF6"; } .icon.alpha_i_box:before { content: "\F0B10"; } .icon.alpha_j:before { content: "\F0AF7"; } .icon.alpha_j_box:before { content: "\F0B11"; } .icon.alpha_k:before { content: "\F0AF8"; } .icon.alpha_k_box:before { content: "\F0B12"; } .icon.alpha_l:before { content: "\F0AF9"; } .icon.alpha_l_box:before { content: "\F0B13"; } .icon.alpha_m:before { content: "\F0AFA"; } .icon.alpha_m_box:before { content: "\F0B14"; } .icon.alpha_n:before { content: "\F0AFB"; } .icon.alpha_n_box:before { content: "\F0B15"; } .icon.alpha_o:before { content: "\F0AFC"; } .icon.alpha_o_box:before { content: "\F0B16"; } .icon.alpha_p:before { content: "\F0AFD"; } .icon.alpha_p_box:before { content: "\F0B17"; } .icon.alpha_q:before { content: "\F0AFE"; } .icon.alpha_q_box:before { content: "\F0B18"; } .icon.alpha_r:before { content: "\F0AFF"; } .icon.alpha_r_box:before { content: "\F0B19"; } .icon.alpha_s:before { content: "\F0B00"; } .icon.alpha_s_box:before { content: "\F0B1A"; } .icon.alpha_t:before { content: "\F0B01"; } .icon.alpha_t_box:before { content: "\F0B1B"; } .icon.alpha_u:before { content: "\F0B02"; } .icon.alpha_u_box:before { content: "\F0B1C"; } .icon.alpha_v:before { content: "\F0B03"; } .icon.alpha_v_box:before { content: "\F0B1D"; } .icon.alpha_w:before { content: "\F0B04"; } .icon.alpha_w_box:before { content: "\F0B1E"; } .icon.alpha_x:before { content: "\F0B05"; } .icon.alpha_x_box:before { content: "\F0B1F"; } .icon.alpha_y:before { content: "\F0B06"; } .icon.alpha_y_box:before { content: "\F0B20"; } .icon.alpha_z:before { content: "\F0B07"; } .icon.alpha_z_box:before { content: "\F0B21"; } .icon.f16:before { font-size: 16px; } .icon.f24:before { font-size: 24px; } .icon.f36:before { font-size: 36px; } .icon.f48:before { font-size: 48px; } .icon.f64:before { font-size: 64px; }