@import url(./../node_modules/spin.js/spin.css);
html {
  height: 100%;
  overflow-y: scroll; }

body {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  padding: 0;
  margin: 50px 100px 0 100px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: #000000;
  background-color: #ffffff; }

a {
  color: #468cc8;
  text-decoration: none; }
  a:visited {
    color: #468cc8; }
  a:hover {
    text-decoration: underline; }

.loadingOverlay {
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  left: 0;
  top: 0;
  overflow: show;
  margin: auto;
  display: block;
  background-color: #000000; }

.header {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px 0 0 0; }
  .header--title {
    font-size: 36px;
    font-weight: bold; }
  .header--version {
    font-size: 18px; }

.nav {
  margin: 10px 0 0 0; }
  .nav__dropdown {
    width: 300px;
    height: 50px;
    border-radius: 10px;
    border: 0px;
    margin: 15px 0 0 0;
    padding: 0 0 0 20px;
    color: #ffffff;
    background-color: #468cc8; }

.status {
  margin: 15px 0 0 0;
  font-weight: bold; }
  .status--icon {
    font-size: 120px; }
  .status--weather {
    font-size: 60px; }
  .status--location {
    font-size: 40px; }

.details {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  max-width: 70%; }
  .details__suntimes, .details__temperature, .details__humidity, .details__air, .details__wind {
    margin: 15px 0 0 0;
    padding: 15px 0 0 0;
    font-size: 25px; }

.credit {
  align-self: flex-start;
  margin: 70px 0 0 0; }

@media screen and (max-width: 1500px) {
  .details {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: column nowrap; } }

@media screen and (max-width: 690px) {
  .header {
    margin-top: 20px; }
    .header--title {
      font-size: 20px;
      font-weight: bold; }
    .header--version {
      display: none; }
  .nav {
    margin-top: 15px; }
    .nav__label {
      font-size: 14px; }
    .nav__dropdown {
      width: 275px; }
  .status {
    margin-top: 15px;
    font-weight: bold; }
    .status--icon {
      font-size: 45px; }
    .status--weather {
      font-size: 24px; }
    .status--location {
      font-size: 16px; }
  .details {
    max-width: 80%; }
    .details__suntimes, .details__temperature, .details__humidity, .details__air, .details__wind {
      margin-top: 15px;
      font-size: 16px; }
  .credit {
    font-size: 13px;
    margin-bottom: 15px; } }