/*Mixins*/
.message-text {
  text-align: center;
}
.message-text span {
  font-family: Segoe UI, Helvetica, sans-serif;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #181818;
}
.page-background {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #181818;
  overflow: hidden;
}
.container {
  margin: 0 auto;
}
.container .spinner {
  position: absolute;
}
.container .status-text-area {
  position: relative;
  width: 91.5%;
  height: 39.5%;
  left: 4%;
  top: 37%;
}
.container .logo {
  display: block;
  margin: 0 auto;
  width: 53.5%;
  height: 30%;
}
.container .user-agent {
  text-align: center;
  position: relative;
  width: 97.8%;
  margin: 22px 0px -4px 4px;
}
.container .user-agent span {
  font-family: Segoe UI, Helvetica, sans-serif;
}
.container .user-agent span {
  color: #8f8f8f;
  overflow: hidden;
  position: relative;
  display: inline-block;
  top: -0.5px;
}
.container .status {
  text-align: center;
}
.container .status span {
  font-family: Segoe UI, Helvetica, sans-serif;
}
.container .status span {
  position: relative;
  display: inline-block;
  top: -0.5px;
}
.container .status span.connected {
  color: #36B6E5;
}
.container .status span.disconnected {
  color: #F6422F;
}