@font-face {
  font-family: "Open Sans";
  font-weight: normal;
  src: local("Open Sans Regular"), local("OpenSans-Regular"), url(OpenSans-Regular.ttf) format("truetype"); }

@font-face {
  font-family: "Open Sans";
  font-weight: bold;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url(OpenSans-Bold.ttf) format("truetype"); }

html, body {
  margin: 0;
  padding: 0;
  background: #1b1c22;
  color: white;
  font-family: "Open Sans";
  font-size: 110%;
  line-height: 1.3em;
  height: 100vh;
  width: 100vw;
  position: absolute; }

.list {
  background: #22232b; }

.roomListItem {
  background: #22232b; }
  .roomListItem:hover {
    background: #282b33; }
  .roomListItem.active {
    background: #282b33; }

.chat, .info, .input, .sidebar .filter {
  background: #282b33;
  border-color: #282b33; }

.input, .info {
  background: #434756; }

input {
  font-family: "Open Sans", sans-serif; }

body {
  height: 100vh;
  display: flex; }

.loginwrapper {
  margin-top: -15rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  grid-column-start: span 2; }
  .loginwrapper input, .loginwrapper label, .loginwrapper button, .loginwrapper span {
    font-size: 140%; }
  .loginwrapper img {
    height: 15rem;
    width: 15rem;
    text-align: center;
    align-self: center; }

.errorMessage {
  color: #CC6666;
  font-size: 140%; }

.login {
  align-self: center;
  display: inline-grid;
  grid-template-columns: 1fr 1fr; }
  .login label, .login input, .login button, .login span {
    margin: 0.3em;
    padding: 0.3em;
    line-height: 140%; }
  .login label {
    background: #81A2BE;
    justify-self: left; }
  .login label.inactive {
    background: #999; }
  .login label.error {
    background: #CC6666; }
    .login label.error ~ input, .login label.error ~ span {
      border-color: #CC6666; }
  .login label.validated {
    background: #B5BD68; }
    .login label.validated ~ input, .login label.validated ~ span {
      border-color: #B5BD68; }
  .login span {
    display: inline-block;
    border: 0.05rem solid #999; }
  .login input {
    border: 0.1rem solid #81A2BE;
    background: transparent;
    color: white; }
  .login button {
    grid-column-start: 2;
    background: #81A2BE;
    color: white;
    justify-self: right;
    border: none; }

#root, .app {
  height: 100%;
  width: 100%; }

.app {
  position: relative;
  display: grid;
  box-sizing: border-box;
  justify-content: center;
  grid-template-columns: 15% 85%; }

.compact {
  font-size: 0.9em; }
  .compact .sidebar .roomListItem {
    height: 2.5rem;
    grid-template-columns: 2.5rem auto;
    grid-column-gap: .3rem; }
  .compact .chat .events {
    display: grid;
    grid-template-columns: 13rem 1fr;
    grid-column-gap: .8rem;
    align-content: end;
    padding: 0 .6em; }
    .compact .chat .events .paginateBackwards {
      grid-column: span 2;
      justify-self: center;
      margin-bottom: 0.5rem; }
    .compact .chat .events .divider {
      grid-column: span 2;
      border-bottom: 1px solid #3e3e3e; }
    .compact .chat .events .userTag {
      display: grid;
      grid-template-columns: auto 1fr;
      align-content: flex-start;
      padding: 0.175rem 0; }
      .compact .chat .events .userTag .avatarContainer {
        display: flex;
        justify-self: center;
        align-self: center; }
        .compact .chat .events .userTag .avatarContainer #avatar {
          display: block;
          width: 1rem;
          margin-right: .4rem; }
      .compact .chat .events .userTag .user {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: flex;
        align-self: center;
        display: inline-block; }
    .compact .chat .events .reply {
      border: none !important;
      padding-left: 0.7rem !important;
      margin-top: 0 !important;
      display: grid;
      grid-template-columns: auto auto 1fr;
      grid-column-gap: .3em;
      opacity: 0.7;
      font-size: .9em; }
      .compact .chat .events .reply .prefix {
        margin-right: .5em; }
      .compact .chat .events .reply .user, .compact .chat .events .reply .body {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline; }
      .compact .chat .events .reply .user {
        max-width: 12rem; }
      .compact .chat .events .reply .body {
        padding: 0; }
  .compact .input .replyEvent {
    padding: 0.4rem 0.91rem; }
    .compact .input .replyEvent blockquote {
      /* FIXME: Use same style as in event timeline */
      margin: 0;
      padding-left: 0.7rem; }
  .compact .input textarea {
    font-size: 1rem !important;
    padding: 0.3rem 0.7rem !important; }
  .compact .input .fileUpload {
    margin: 0.3rem !important; }
    .compact .input .fileUpload img {
      height: 1.2em;
      margin-bottom: -.2em; }

.sidebar, .main {
  position: relative;
  box-sizing: border-box;
  height: calc(100% - 2*$spacing);
  width: calc(100% - 2*$spacing);
  overflow-y: auto;
  margin: 0.7rem;
  display: flex;
  flex-direction: column; }
  .sidebar > div:nth-child(2), .main > div:nth-child(2) {
    flex: 1 1 auto;
    overflow-y: auto; }

.sidebar {
  margin-right: 0;
  flex: 0 0 15vw;
  max-width: 15vw; }
  .sidebar .filter {
    border: none;
    border-bottom: 0.2rem solid transparent;
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem;
    color: white;
    font-size: 1rem;
    margin: 0;
    font-weight: bold; }

.main {
  flex: 1 1 auto; }

.list div {
  cursor: pointer; }

.roomListItem {
  height: 3.75rem;
  display: grid;
  grid-template-columns: 4.2rem auto;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  transition: 0.2s; }
  .roomListItem.active #avatar, .roomListItem.active #name {
    transition: 0.2s; }
  .roomListItem.active #avatar {
    border: 3px solid #81A2BE;
    transform: rotate(-5deg); }
  .roomListItem.active #name {
    color: #81A2BE;
    font-weight: bold; }
  .roomListItem #avatar {
    box-sizing: border-box;
    justify-self: center;
    height: calc(100% - 0.5rem);
    width: 80%;
    object-fit: cover;
    border: 3px solid #383b47;
    border-radius: 0.4rem; }
  .roomListItem #name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1rem;
    padding: 0.7rem;
    padding-left: 0; }

.info {
  padding: 0.7rem;
  color: #81A2BE;
  font-size: 1rem;
  font-weight: bold;
  border-bottom: 0.2rem solid transparent;
  box-sizing: border-box; }

.chat {
  position: relative;
  /* To make the StickyScroll element work */
  padding: 0;
  box-sizing: border-box;
  word-wrap: anywhere; }
  .chat .events {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100%;
    padding: 0 0.7rem; }
    .chat .events .paginateBackwards {
      align-self: center;
      border: 0.2rem solid #515567;
      background: #515567;
      color: white;
      border-radius: 0.2rem;
      padding: 0.4rem;
      cursor: pointer;
      margin-top: 1rem; }
    .chat .events .eventGroup {
      padding-top: 0.7rem;
      display: grid;
      grid-template-columns: 3rem auto;
      grid-template-areas: "avatar content";
      margin-bottom: 0.35rem; }
      .chat .events .eventGroup #avatar {
        height: 3rem;
        width: 3rem;
        object-fit: cover;
        box-sizing: border-box;
        object-fit: cover;
        border: 0.2rem solid #383b47;
        position: sticky;
        top: 0.7rem; }
      .chat .events .eventGroup .col {
        grid-area: content;
        padding: 0 0.35rem; }
        .chat .events .eventGroup .col .user {
          font-weight: bold;
          padding-left: 0.35rem; }
        .chat .events .eventGroup .col h1, .chat .events .eventGroup .col h2, .chat .events .eventGroup .col h3, .chat .events .eventGroup .col h4, .chat .events .eventGroup .col h5, .chat .events .eventGroup .col h6 {
          margin: 0; }
    .chat .events .reply + .event {
      margin-bottom: 0.7rem; }
    .chat .events .event {
      padding: 0 0.35rem; }
      .chat .events .event .reply, .chat .events .event .body blockquote {
        border-left: 0.2rem solid #81A2BE;
        padding-left: 0.7rem;
        margin-top: 0.35rem; }
        .chat .events .event .reply .user, .chat .events .event .body blockquote .user {
          padding: 0; }
      .chat .events .event:nth-child(2) .reply {
        margin-top: 0; }
      .chat .events .event .body {
        padding: 0.175rem 0;
        white-space: normal; }
        .chat .events .event .body img {
          max-height: 40vh;
          max-width: 90%;
          object-fit: contain; }
        .chat .events .event .body blockquote {
          margin: .4rem 0;
          padding-top: .2rem;
          padding-bottom: .2rem; }
      .chat .events .event code {
        font-size: 1rem; }
      .chat .events .event:hover {
        border-radius: 0.1rem;
        background: rgba(255, 255, 255, 0.05);
        transition: 0.1s; }
      .chat .events .event.local {
        color: #8d92a5; }

.input {
  display: flex;
  flex-direction: column;
  border-top: 0.2rem solid transparent; }
  .input .replyEvent, .input .imgPreview {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-bottom: 0.1rem solid #515567;
    max-width: 100%; }
  .input .replyEvent {
    padding: 0.7rem 0.91rem; }
    .input .replyEvent .header {
      font-size: 0.9em;
      color: #b1b1b1; }
    .input .replyEvent .user {
      display: inline-block;
      margin-right: .7em;
      font-weight: bold; }
  .input .imgPreview {
    padding: 0.35rem 0.7rem;
    object-fit: cover;
    display: flex; }
  .input .imgPreview div {
    height: 5rem;
    width: 5rem;
    object-fit: cover;
    margin: 2px;
    margin-right: 0.7rem;
    position: relative; }
    .input .imgPreview div img {
      height: 5rem;
      width: 5rem;
      object-fit: cover; }
    .input .imgPreview div span {
      position: absolute;
      top: 2px;
      right: 2px; }
  .input .fileUpload input {
    display: none; }
  .input .fileUpload label img {
    height: 1.5em; }
  .input .content {
    display: flex; }
    .input .content textarea {
      color: white;
      background: transparent;
      box-sizing: border-box;
      flex: 1 1 auto;
      padding: 0.7rem;
      font-size: 1.2rem;
      border: none;
      resize: none;
      overflow: hidden;
      overflow-y: auto;
      outline: none;
      max-height: 150px; }
    .input .content .fileUpload {
      flex: 0 0 auto;
      display: inline-block;
      margin: 0.7rem;
      align-self: center;
      cursor: pointer; }

.event .eventError, .replyEvent .eventError {
  display: inline;
  color: #b1b1b1;
  font-size: 0.9em; }
  .event .eventError > .header, .replyEvent .eventError > .header {
    font-weight: bold;
    color: #fb5e5e; }

.noselect {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none; }

.fg-palet-red {
  color: #CC6666; }

.fg-palet-green {
  color: #B5BD68; }

.fg-palet-yellow {
  color: #F0C674; }

.fg-palet-blue {
  color: #81A2BE; }

.fg-palet-purple {
  color: #B294BB; }

.fg-palet-cyan {
  color: #8ABEB7; }

.spinner {
  align-self: center;
  text-align: center; }

.spinner > div {
  width: 1rem;
  height: 1rem;
  margin: 0.2rem;
  background-color: white;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both; }

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s; }

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s; }

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0); }
  40% {
    -webkit-transform: scale(1); } }

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0); }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1); } }