html, body {
  font-family: 'Helvetica Neue', 'Helevetica', 'Arial', 'sans-serif';
  color: #333;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.row {
  padding-top: 10px;
  padding-bottom: 10px;
}

a {
  text-decoration: none;
  color: #31D8A0;
}

a:hover,
a:focus {
  text-decoration: none;
  color: #27C895;
}

.button {
  text-align: center;
}

.button-primary {
  padding: 0.6em 1.2em;
  background: #31D8A0;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  transition: background 0.2s;
}

.button-primary:hover,
.button-primary:focus {
  background: #27C895;
  color: #ffffff;
}

/* ======================================= */
/* Home Page */
/* ======================================= */

main.home {
  padding-top: 100px;
  padding-bottom: 100px;
}

main.home img.logo {
  width: 100%;
  max-width: 400px;
}

main.home h3.title {
  color: #969696;
  font-weight: 100;
  text-transform: uppercase;
  margin-bottom: 40px;
}

main.home .button.login,
main.home .button.signup {
  padding-top: 1.2em;
  padding-bottom: 1.2em;
}

main.home .button.login {
  background: none;
  border: 2px solid #CFCFCF;
  color: #999;
}

main.home .button.login:hover,
main.home .button.login:focus {
  background: none;
  border: 2px solid #31D8A0;
  color: #31D8A0;
}

/* ======================================= */
/* Signup and Login */
/* ======================================= */

main.login,
main.signup {
  padding-top: 100px;
  padding-bottom: 100px;
}

main.login fieldset,
main.signup fieldset {
  padding: 10px 0;
}

main.login fieldset input,
main.signup fieldset input{
  width: 100%;
  padding: 1.4em 0.7em;
}

main.login .button-primary,
main.signup .button-primary {
  padding-top: 1.2em;
  padding-bottom: 1.2em;
  margin-top: 40px;
  width: 100%;
}


/* ======================================= */
/* Chat App */
/* ======================================= */

#app {
  height: 100%;
}

/* Header */
header.title-bar {
  padding: 10px 0;
  border-bottom: 1px solid #f1f1f1;
}

header.title-bar img.logo {
  width: 100%;
  max-width: 140px;
}

header.title-bar span.title {
  color: #969696;
  font-weight: 100;
  text-transform: uppercase;
  font-size: 1.2em;
  margin-left: 7px;
}

/* User List Sidebar */

aside.sidebar {
  background: #f8f8f8;
  // height: 100%;
  max-width: 340px;
  padding: 15px;
  border-right: 1px solid #f1f1f1;
}

aside.sidebar .online-count {
  color: #31D8A0;
  margin-right: 5px;
}

aside.sidebar h4 {
  margin: 0 0 20px 0;
  color: #C3C3C3;
}

aside.sidebar .user-list {
  overflow-y: scroll;
}

aside.sidebar li {
  margin: 15px 0;
}

aside.sidebar li > a {
  color: #555555;
}

aside.sidebar li > a:hover > span,
aside.sidebar li > a:focus > span, {
  color: #31D8A0;
}

aside.sidebar img.avatar {
  border-radius: 100%;
  height: 45px;
  width: 45px;
  margin-right: 10px;
}

aside.sidebar .username {
  position: absolute;
  line-height: 45px;
}

aside.sidebar footer {
  // min-height: 60px;
}

/* Main Chat */

main.chat {
  padding: 10px;
  overflow-y: scroll;
}

main.chat img.avatar {
  border-radius: 100%;
  height: 45px;
  width: 45px;
  flex: none;
}

main.chat .message {
  flex: 0 0 auto;
}

main.chat .message img.avatar {
  margin-right: 10px;
}

main.chat .message p.message-header {
  margin: 0;
  font-size: 0.9em;
}

main.chat .message p.message-header span.sent-date {
  color: #969696;
}

/* Send Message Form */

#app form {
  min-height: 60px;
  padding: 10px 20px;
}

#app form input {
  height: auto !important;
}

#app form button {
  margin-left: 10px;
}