@import url(oswald-font.css);
header, .network, #check-for-updates div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

footer {
  margin-bottom: 90px;
}

.ips, #last-login {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-right: 20px;
  margin-left: 20px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.ip {
  margin-left: 10px;
  margin-right: 10px;
}

#checkForUpdate {
  flex-break-after: always;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
}

a {
  text-decoration: underline;
  color: white;
}

a.iconhref {
  text-decoration: none;
}

html, body {
  position: relative;
  height: 100%;
  overflow: auto;
}

body {
  font-family: 'Oswald', 'Open Sans', 'Helvetic Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: white;
  background-image: url("../images/city-tile.png"), url("../images/stars.png"), -webkit-gradient(linear, left bottom, left top, from(#0084af), to(#0c152a));
  background-image: url("../images/city-tile.png"), url("../images/stars.png"), -moz-gradient(linear, left bottom, left top, from(#0084af), to(#0c152a));
  background-image: url("../images/city-tile.png"), url("../images/stars.png"), -webkit-linear-gradient(bottom, #0084af, #0c152a);
  background-image: url("../images/city-tile.png"), url("../images/stars.png"), -moz-linear-gradient(bottom, #0084af, #0c152a);
  background-image: url("../images/city-tile.png"), url("../images/stars.png"), linear-gradient(bottom, #0084af, #0c152a);
  background-position: center bottom, center top;
  background-repeat: repeat-x;
  -webkit-background-size: 320px auto, 320px auto, auto;
  background-size: 320px auto, 320px auto, auto;
}

body p {
  font-size: 17px;
}

body, h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}

h1 {
  text-align: center;
}

h1, h2 {
  font-size: 20px;
}

img {
  max-height: 100%;
  max-width: 100%;
}

small {
  font-size: 0.9em;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
}

#checkForUpdate:hover,
.toggle:hover,
#SSH:hover {
  cursor: pointer;
}

.inputError{
  text-decoration: none;
  margin: 0 0 .75em 0;
  color: red;
}

.error {
  text-decoration: underline;
  font-size: .75em;
  margin: 0 0 .75em 0;
  color: red;
}


.close {
  text-decoration: none;
}

.subheading {
  float: right;
  font-size: 17px;
}

.editable {
  outline: none;
  background: rgb(0, 173, 238);
  border: 1px solid rgb(0, 173, 238);
  color: white;
  -webkit-appearance: none;
  padding: 0em .3em 0em .3em;
  font-size: 13px;
  border-radius: 5px;
  font: -webkit-small-control;
  line-height: normal;
  margin-bottom: 5px;
}

select {
  outline: none;
  background: rgb(0, 173, 238);
  border: 1px solid rgb(0, 173, 238);
  color: white;
  -webkit-appearance: none;
  padding: 0em .3em 0em .3em;
  font-size: 13px;
}

.inline-style {
  display: inline;
}

.setting {
  float: right;
}

.editable form {
  display: inline;
}

.links {
  color: #ffcc00;
  font-weight: 400;
}

.links form {
  display: inline;
}

.links {
  text-decoration: underline;
}

.icon {
  height: 44px;
  width: 44px;
}

.container {
  position: relative;
  margin: 0 auto;
  padding: 0px 17px;
  max-width: 480px;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column;
  -ms-flex-flow: column;
  flex-flow: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#main {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  min-height: 330px;
  flex-grow: 1;
}

.network {
  margin-bottom: 32px;
  padding-right: 8px;
}
.network > * {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.network header {
  -webkit-flex-basis: 120px;
  -ms-flex-preferred-size: 120px;
  flex-basis: 120px;
  padding-right: 10px;
}
.network .title {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.speed {
  white-space: nowrap;
}

.speed .upload {
  color: #00adee;
}
.speed .download {
  color: #f3bf20;
}
.off .speed .upload,
.off .speed .download,
.off .speed small {
  color: rgba(255, 255, 255, 0.4);
}

.devices {
  background: url(../images/devices.png) left center no-repeat;
  -webkit-background-size: 44px;
  background-size: 44px;
  padding-left: 44px;
  color: #ffffff;
  text-transform: uppercase;
}

.ping {
  color: #ffffff;
  text-transform: uppercase;
}

.bandwidth, .data-use {
  color: #ffffff;
  text-transform: uppercase;
  display: inline-block;
}

.data-use {
  padding-left: 10px;
}

.devices small,
.ping small,
.bandwidth small,
.data-use small {
  font-size: 10px;
}

h2 small {
  font-size: .7em;
}

.status {
  color: rgba(255, 255, 255, 0.6);
}

.status .on.on-button,
.connected {
  color: #ffffff;
}

.status .off.off-button,
.disconnected {
  color: #ffcc00;
}

.status .on.off-button, .status .off.on-button {
  color: rgba(255, 255, 255, 0.6);
}

/* Hide the toggle for private WiFi because we expect it is not a common use
 * case, and it is easy to lock yourself out of your router with it. */
#PrivateWiFi.status.toggle {
 display: none;
}

#last-login {
  margin-bottom: 10px;
}

#check-for-updates div, #last-login {
  -ms-flex-preferred-size: 44px;
  -webkit-flex-basis: 44px;
          flex-basis: 44px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #ffcc00;
}
footer p {
  padding-right: 0.5em;
}
footer img {
  height: 30px;
  width: 30px;
}
#last-login span,footer span {
  color: #FFED21;
}
.inputError,
#restartSuccess {
  display: none;
}
#enterSshKey {
  display: none;
  padding: 1em;
  padding-bottom: 0;
}
#enterSshKey .controls {
  margin: 0;
  padding: 0;
  text-align: right;
}
#input-SSH {
  width: 100%;
  height: 11em;
}
#cancel-SSH, #submit-SSH {
  outline: medium none;
  background: none repeat scroll 0% 0% #00ADEE;
  border: 2px solid #00ADEE;
  color: #FFF;
  margin-left: 0.8em;
}
label {
  margin-right: 1em;
}
.section {
  padding-left: 1em;
  padding-bottom: 1em;
}

#check-for-updates .loading-message {
    display: none;
}

#check-for-updates .message {
    display: flex;
}

#check-for-updates.loading .loading-message {
    display: flex;
}

#check-for-updates.loading .message {
    display: none;
}
