@charset "UTF-8";
@font-face {
  font-family: 'fontello';
  src: url("../../fontello/fontello.eot?82235393");
  src: url("../../fontello/fontello.eot?82235393#iefix") format("embedded-opentype"), url("../../fontello/fontello.woff2?82235393") format("woff2"), url("../../fontello/fontello.woff?82235393") format("woff"), url("../../fontello/fontello.ttf?82235393") format("truetype"), url("../../fontello/fontello.svg?82235393#fontello") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }

.icon-search:before {
  content: '\e800'; }

/* '' */
.icon-mail:before {
  content: '\e801'; }

/* '' */
.icon-mail-alt:before {
  content: '\e802'; }

/* '' */
.icon-heart:before {
  content: '\e803'; }

/* '' */
.icon-heart-empty:before {
  content: '\e804'; }

/* '' */
.icon-star:before {
  content: '\e805'; }

/* '' */
.icon-star-empty:before {
  content: '\e806'; }

/* '' */
.icon-star-half:before {
  content: '\e807'; }

/* '' */
.icon-star-half-alt:before {
  content: '\e808'; }

/* '' */
.icon-plus-squared:before {
  content: '\e809'; }

/* '' */
.icon-minus-squared:before {
  content: '\e80a'; }

/* '' */
.icon-help-circled:before {
  content: '\e80b'; }

/* '' */
.icon-info-circled:before {
  content: '\e80c'; }

/* '' */
.icon-home:before {
  content: '\e80d'; }

/* '' */
.icon-link:before {
  content: '\e80e'; }

/* '' */
.icon-lock:before {
  content: '\e80f'; }

/* '' */
.icon-pin:before {
  content: '\e810'; }

/* '' */
.icon-eye:before {
  content: '\e811'; }

/* '' */
.icon-eye-off:before {
  content: '\e812'; }

/* '' */
.icon-thumbs-up:before {
  content: '\e813'; }

/* '' */
.icon-thumbs-down:before {
  content: '\e814'; }

/* '' */
.icon-thumbs-up-alt:before {
  content: '\e815'; }

/* '' */
.icon-thumbs-down-alt:before {
  content: '\e816'; }

/* '' */
.icon-pencil:before {
  content: '\e817'; }

/* '' */
.icon-chat:before {
  content: '\e818'; }

/* '' */
.icon-bell-alt:before {
  content: '\e819'; }

/* '' */
.icon-bell-off:before {
  content: '\e81a'; }

/* '' */
.icon-trash:before {
  content: '\e81b'; }

/* '' */
.icon-cog:before {
  content: '\e81c'; }

/* '' */
.icon-sliders:before {
  content: '\e81d'; }

/* '' */
.icon-logout:before {
  content: '\e81e'; }

/* '' */
.icon-down-big:before {
  content: '\e81f'; }

/* '' */
.icon-left-big:before {
  content: '\e820'; }

/* '' */
.icon-right-big:before {
  content: '\e821'; }

/* '' */
.icon-up-big:before {
  content: '\e822'; }

/* '' */
.icon-level-up:before {
  content: '\e823'; }

/* '' */
.icon-coffee:before {
  content: '\e824'; }

/* '' */
.icon-recycle:before {
  content: '\e825'; }

/* '' */
.icon-github:before {
  content: '\e826'; }

/* '' */
.icon-gplus:before {
  content: '\e827'; }

/* '' */
.icon-stackoverflow:before {
  content: '\e828'; }

/* '' */
.icon-twitter:before {
  content: '\e829'; }

/* '' */
.icon-window:before {
  content: '\e82a'; }

/* '' */
.icon-up:before {
  content: '\e82b'; }

/* '' */
.icon-up-small:before {
  content: '\e82c'; }

/* '' */
.icon-snow:before {
  content: '\e82d'; }

/* '' */
.icon-reddit:before {
  content: '\e82e'; }

/* '' */
.icon-user:before {
  content: '\e82f'; }

/* '' */
.icon-user-plus:before {
  content: '\e830'; }

/* '' */
.icon-user-times:before {
  content: '\e831'; }

/* '' */
.icon-users:before {
  content: '\e832'; }

/* '' */
.icon-user-1:before {
  content: '\e833'; }

/* '' */
.icon-arrows-cw:before {
  content: '\e834'; }

/* '' */
.icon-play:before {
  content: '\e835'; }

/* '' */
.icon-stop:before {
  content: '\e836'; }

/* '' */
.icon-eject:before {
  content: '\e837'; }

/* '' */
.icon-fast-backward:before {
  content: '\e838'; }

/* '' */
.icon-fast-forward:before {
  content: '\e839'; }

/* '' */
.icon-step-backward:before {
  content: '\e83a'; }

/* '' */
.icon-step-forward:before {
  content: '\e83b'; }

/* '' */
.icon-pause:before {
  content: '\e83c'; }

/* '' */
.icon-code:before {
  content: '\f121'; }

/* '' */
.icon-sort-name-up:before {
  content: '\f15d'; }

/* '' */
.icon-sort-name-down:before {
  content: '\f15e'; }

/* '' */
.icon-sort-alt-up:before {
  content: '\f160'; }

/* '' */
.icon-sort-alt-down:before {
  content: '\f161'; }

/* '' */
.icon-sort-number-up:before {
  content: '\f162'; }

/* '' */
.icon-sort-number-down:before {
  content: '\f163'; }

/* '' */
.icon-user-secret:before {
  content: '\f21b'; }

/* '' */
.icon-snowflake-o:before {
  content: '\f2dc'; }

/* '' */
.tag-bubble pre.prettyprint {
  color: #333; }

.user-messages .avatar {
  border-radius: 50%; }

button, input[type="reset"], input[type="submit"] {
  color: #333;
  background-color: #fcfcfc;
  background-image: linear-gradient(to bottom, #fcfcfc 0, #f1f1f1 100%);
  border-color: #c2c0c2 #c2c0c2 #a19fa1;
  line-height: 1.4; }
  button:hover, input[type="reset"]:hover, input[type="submit"]:hover {
    color: #000;
    background-image: linear-gradient(to bottom, #ebebf1 0, #e0e0ff 100%); }

.fontello, .room-control::before, .mountyhall-refresh-troll::before, #mountyhall-team-refresh-button::before, #mountyhall-team-open-view-button::before, .mountyhall-help-icon::before {
  font-family: "fontello";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

body {
  background: white;
  font-family: Tahoma, Geneva, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  color: #222;
  margin: 0;
  padding: 0; }
  body.chat.mobile {
    background: white; }

.logo-link {
  display: inline-block; }

.Miaou-logo {
  pointer-events: none;
  color: #e5e7eb; }

button, input[type=button], input[type=submit], input[type=reset] {
  background-color: rgba(255, 255, 255, 0.9);
  color: #111;
  padding: 4px 8px;
  border: 1px solid #999;
  margin: 1px 4px;
  border-radius: 2px;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  transition: all 100ms ease; }
  button.small, input[type=button].small, input[type=submit].small, input[type=reset].small {
    font-size: 75%;
    padding: 2px 4px;
    border-radius: 2px;
    box-shadow: none; }
  button:hover, button:focus, input[type=button]:hover, input[type=button]:focus, input[type=submit]:hover, input[type=submit]:focus, input[type=reset]:hover, input[type=reset]:focus {
    border-color: #003;
    color: #003;
    background-color: white; }

div.radios {
  text-align: center;
  margin: 3px; }
  div.radios span.label {
    font-size: 90%;
    margin-right: 4px; }
  div.radios span.radio {
    font-size: 80%;
    background-color: #E3DAC9;
    padding: 2px 2px;
    border: 1px solid #999;
    margin: 0;
    cursor: pointer;
    border-radius: 0;
    border-left: none;
    border-right: none; }
    div.radios span.radio span {
      position: relative; }
    div.radios span.radio.selected {
      cursor: auto;
      box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.3); }
      div.radios span.radio.selected span {
        transform: translate(2px, 2px);
        left: 1px;
        top: 1px; }
  div.radios :not(.radio) + span.radio {
    border-radius: 7px 0 0 7px;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    padding-left: 4px; }
  div.radios .radio + .radio {
    border-radius: 0; }
  div.radios span.radio:last-child {
    border-radius: 0 7px 7px 0;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    padding-right: 4px; }

input:invalid {
  border: 2px solid red; }

body.desktop .MP {
  width: 70%;
  max-width: 1000px;
  min-width: 800px; }

body.desktop .thinMP {
  width: 70%;
  max-width: 600px;
  min-width: 500px;
  margin: auto; }

.MP, .thinMP {
  margin: auto;
  position: relative; }

.mobile .desktop {
  display: none; }

#prefs, #room-info {
  margin: 5px; }

#left, #right, #center {
  position: fixed; }

#left {
  top: 0;
  left: 0;
  bottom: 0;
  width: 140px;
  background: #131825;
  overflow-y: auto; }

#center {
  display: flex;
  top: 0;
  bottom: 0;
  box-shadow: 0 0 2px black;
  z-index: 2; }

#right {
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  background: #e5e7eb;
  overflow-y: auto;
  overflow-x: hidden; }

@media (max-width: 1300px) {
  #left {
    width: 110px; }
  #right {
    width: 280px; }
  #center {
    left: 110px;
    right: 280px; } }

@media (min-width: 1300px) {
  #left {
    width: 140px; }
  #right {
    width: 400px; }
  #center {
    left: 140px;
    right: 400px; } }

#vert-center {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1 0 0;
  min-width: 0; }

#message-scroller {
  overflow-y: scroll;
  overflow-x: hidden;
  flex: 1 0 0; }

#notifications {
  flex-grow: 0; }

.table {
  display: table;
  width: 100%;
  height: 100%;
  table-layout: fixed; }

section {
  margin: 0 0 8px 0; }

#prefs {
  padding: 4px;
  text-align: center; }
  #prefs .pref {
    line-height: 180%; }
  #prefs button {
    margin-bottom: 8px; }

#users {
  padding-top: 2px;
  height: 95%;
  display: flex;
  flex-direction: column; }
  #users .user, #users .user.profiled {
    position: relative;
    flex: 1 0 18px;
    max-height: 30px;
    cursor: pointer; }
    #users .user span, #users .user.profiled span {
      position: absolute;
      z-index: 5;
      top: 0;
      left: 0;
      bottom: 0;
      color: #999;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 1px 5px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      font-style: italic;
      font-size: 95%; }
    #users .user.connected span, #users .user.profiled.connected span {
      font-style: normal;
      color: #eee; }

.pad #users .user::before {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  content: "";
  background: #40485f;
  transition: width 2s; }

.pad #users .user.profiled.connected::before {
  opacity: 0; }

.pad #users .user.connected::before {
  width: 100%;
  transition: width 2s; }

.pad #users .user::after, .pad #users .user.profiled::after {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  content: "";
  background: transparent; }

.pad #users .user:hover::after, .pad #users .user.profiled:hover::after {
  background: rgba(9, 30, 90, 0.85); }

body.pad #me {
  font-style: italic; }

#messages {
  background: linear-gradient(#EFF1F3, white); }

#messages, .messages {
  margin-top: 0;
  vertical-align: top;
  position: relative; }
  #messages .message, .messages .message {
    margin: 0;
    transition: background 0.6s;
    border-top: none;
    border-bottom: none; }
    #messages .message.me, .messages .message.me {
      border-top: none;
      border-bottom: none; }
    #messages .message.before-disrupt .content, .messages .message.before-disrupt .content {
      border-bottom: none; }
    #messages .message.after-disrupt .content, .messages .message.after-disrupt .content {
      border-top: thin dashed #ccc; }
    #messages .message:hover .content, .messages .message:hover .content {
      background: transparent; }
  #messages .rvis + .rnvis, .messages .rvis + .rnvis {
    border-top: 6px dotted rgba(0, 0, 0, 0.1); }

.user-messages {
  position: relative;
  margin-top: 4px;
  margin-bottom: 4px;
  border-top: none;
  border-bottom: none;
  padding: 2px 0; }
  .user-messages.me {
    background: rgba(229, 231, 235, 0.45);
    border-top: none;
    border-bottom: none; }
    .user-messages.me .user {
      color: inherit; }
  .user-messages .user {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    padding: 1px 3px;
    width: 110px;
    z-index: 6;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: none;
    box-shadow: 2px 0 0;
    transition: box-shadow .3s;
    border-right: none; }
    .user-messages .user span {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      min-height: 18px;
      color: #555; }
    .user-messages .user.bot {
      font-style: italic; }
    .user-messages .user div.avatar {
      background: #eee; }
  .user-messages:hover .user {
    border-right: none;
    box-shadow: 4px 0 0;
    transition: box-shadow .3s; }
  .user-messages .user.profiled, .user-messages:hover .user.profiled {
    border-right: none; }
  .user-messages .user .avatar-wrapper {
    width: 16px;
    height: 16px; }
    .user-messages .user .avatar-wrapper .avatar {
      max-width: 100%;
      max-height: 100%;
      height: auto; }
  .user-messages .user.size1 .avatar-wrapper {
    width: 20px;
    height: 20px;
    margin-right: 2px; }
  .user-messages .user.size2 {
    flex-direction: column; }
    .user-messages .user.size2 .avatar-wrapper {
      width: 26px;
      height: 26px;
      margin-bottom: 2px; }
    .user-messages .user.size2 span {
      width: 100%;
      text-align: center; }
  .user-messages .user.size3 {
    flex-direction: column; }
    .user-messages .user.size3 .avatar-wrapper {
      width: 40px;
      height: 40px;
      margin-bottom: 2px; }
    .user-messages .user.size3 span {
      width: 100%;
      text-align: center; }
  .user-messages .user.size4 {
    flex-direction: column; }
    .user-messages .user.size4 .avatar-wrapper {
      width: 56px;
      height: 56px;
      margin-bottom: 2px; }
    .user-messages .user.size4 span {
      width: 100%;
      text-align: center; }

.message, #messages .error, .access_request {
  position: relative; }
  .message .content, .message .rendered, #messages .error .content, #messages .error .rendered, .access_request .content, .access_request .rendered {
    border-radius: inherit;
    padding: 4px;
    background: transparent;
    word-wrap: break-word; }
    .message .content.closed, .message .rendered.closed, #messages .error .content.closed, #messages .error .rendered.closed, .access_request .content.closed, .access_request .rendered.closed {
      max-height: 132px; }
    .message .content ul, .message .content ol, .message .rendered ul, .message .rendered ol, #messages .error .content ul, #messages .error .content ol, #messages .error .rendered ul, #messages .error .rendered ol, .access_request .content ul, .access_request .content ol, .access_request .rendered ul, .access_request .rendered ol {
      margin: 0; }
    .message .content input[type=checkbox], .message .rendered input[type=checkbox], #messages .error .content input[type=checkbox], #messages .error .rendered input[type=checkbox], .access_request .content input[type=checkbox], .access_request .rendered input[type=checkbox] {
      vertical-align: middle; }
    .message .content pre + br, .message .content ul + br, .message .content ol + br, .message .rendered pre + br, .message .rendered ul + br, .message .rendered ol + br, #messages .error .content pre + br, #messages .error .content ul + br, #messages .error .content ol + br, #messages .error .rendered pre + br, #messages .error .rendered ul + br, #messages .error .rendered ol + br, .access_request .content pre + br, .access_request .content ul + br, .access_request .content ol + br, .access_request .rendered pre + br, .access_request .rendered ul + br, .access_request .rendered ol + br {
      display: none; }

.message .content, .rendered {
  min-width: 0; }
  .message .content .box, .rendered .box {
    background: white;
    border: thin solid #ddd;
    color: #222;
    margin: 2px;
    max-width: 100%;
    overflow-x: auto; }
    .message .content .box h1, .rendered .box h1 {
      margin: 10px;
      font-size: 120%;
      color: #333; }
    .message .content .box img, .rendered .box img {
      max-width: 40%;
      height: auto; }
    .message .content .box .mainimg, .rendered .box .mainimg {
      margin: 5px;
      margin-right: 10px;
      float: left; }
    .message .content .box[href], .rendered .box[href] {
      cursor: pointer; }
  .message .content div.tablewrap, .rendered div.tablewrap {
    overflow-x: auto;
    overflow-y: auto;
    display: inline-block;
    max-width: 100%;
    max-height: 55vh; }
  .message .content table, .rendered table {
    border-collapse: collapse;
    display: inline-table;
    margin: 5px 0; }
    .message .content table th, .message .content table td, .rendered table th, .rendered table td {
      border: 1px solid #bbb;
      padding: 0 3px; }
    .message .content table tr:nth-child(even), .rendered table tr:nth-child(even) {
      background: rgba(120, 120, 120, 0.09); }
  .message .content hr, .rendered hr {
    width: 100%;
    height: 1px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    display: inline-block; }
  .message .content strike::before, .message .content strike::after, .rendered strike::before, .rendered strike::after {
    content: "\00a0"; }
  .message .content .pragma, .rendered .pragma {
    width: 100%;
    opacity: 0; }
    .message .content .pragma:hover, .rendered .pragma:hover {
      opacity: 1;
      transition: opacity .2s; }

.message.has-opener .content {
  padding-bottom: 24px; }
  .message.has-opener .content.closed {
    padding-bottom: 12px; }

#messages .error .user, .messages .error .user {
  justify-content: center; }

#messages .message, #messages .error, #messages .access_request, .messages .message, .messages .error, .messages .access_request {
  min-height: 30px;
  display: flex;
  flex-direction: row;
  align-items: stretch; }
  #messages .message .user, #messages .error .user, #messages .access_request .user, .messages .message .user, .messages .error .user, .messages .access_request .user {
    align-self: stretch;
    flex: 0 0 120px;
    display: flex;
    flex-direction: row;
    align-items: center; }
  #messages .message .content, #messages .error .content, #messages .access_request .content, .messages .message .content, .messages .error .content, .messages .access_request .content {
    margin: 0;
    line-height: 1.5;
    flex-grow: 1; }
    #messages .message .content.wide, #messages .error .content.wide, #messages .access_request .content.wide, .messages .message .content.wide, .messages .error .content.wide, .messages .access_request .content.wide {
      flex-grow: 1; }
  #messages .message .mdate, #messages .error .mdate, #messages .access_request .mdate, .messages .message .mdate, .messages .error .mdate, .messages .access_request .mdate {
    align-self: flex-start;
    flex: 0 0 90px;
    text-align: right;
    font-size: 80%;
    padding: 2px; }

.decorations {
  z-index: 7;
  flex: 0 0 120px;
  display: flex;
  align-items: center;
  justify-content: flex-end; }
  .decorations button {
    text-align: center;
    padding: 0 2px;
    margin: 0 1px;
    border-radius: 2px;
    box-shadow: none;
    font-size: 10px;
    line-height: 14px;
    overflow: hidden; }
    .decorations button:last-child {
      margin-right: 12px; }
  .decorations .decoration {
    font-family: "fontello";
    margin: 1px;
    flex: 0 0 15px;
    cursor: default;
    color: #aaa; }
    .decorations .decoration.clickable {
      color: #444;
      cursor: pointer; }

.message .decorations .decoration:last-child {
  margin-right: 10px; }

#users .decorations {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%; }

.rendered {
  text-align: left; }

.message.deleted .content {
  font-family: "fontello";
  color: #666;
  margin-right: 4px;
  font-size: 80%; }
  .message.deleted .content a {
    color: #666; }
  .message.deleted .content::before {
    content: "\e81b  deleted"; }

.content img, .rendered img {
  border: none;
  max-width: 100%;
  max-height: 130px;
  width: auto; }

.content img {
  cursor: pointer; }

#search-results-navigator {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 12px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
  user-select: none;
  height: 0;
  overflow-y: hidden;
  transition: height .3s; }
  #search-results-navigator.enabled {
    height: 24px;
    transition: height .3s; }

#mpad #search-results-navigator.enabled {
  height: 36px;
  transition: height .3s; }

#search-results-count {
  flex: 1 1 auto;
  text-align: center; }

#search-results-previous-page, #search-results-next-page {
  font-size: 14px;
  opacity: .3; }
  #search-results-previous-page.enabled, #search-results-next-page.enabled {
    cursor: pointer;
    opacity: 1; }

#search-results-previous-page, #search-results-page, #search-results-next-page {
  flex: 0 0 auto;
  margin: 0 4px; }

#search-results .content img, #notable-messages .content img, .messages .content img,
table.list .rendered img, .rooms-list .rendered img {
  max-height: 70px;
  max-width: 220px; }

#room-description {
  padding: 5px;
  font-size: 13px; }
  #room-description img {
    max-height: 75vh; }

.message-menu {
  position: absolute;
  top: 0;
  right: 1px;
  background: white;
  color: #555;
  font-size: 90%; }
  .message-menu .txt {
    color: black; }
  .message-menu .vote {
    font-family: "fontello";
    color: #888;
    margin: 0 4px;
    cursor: pointer; }
    .message-menu .vote.on {
      color: #222; }
    .message-menu .vote:hover {
      color: #555; }
  .message-menu .unpin {
    cursor: pointer;
    margin: 0 4px; }
  .message-menu .link, .message-menu .makemwin, .message-menu .copysrc {
    cursor: pointer;
    font-family: "fontello";
    color: #336;
    margin: 0 4px;
    text-decoration: none; }

body.mobile .message-menu .vote {
  margin: 0 10px; }

.message-votes {
  position: absolute;
  bottom: 7px;
  right: 1px;
  color: black;
  opacity: 0.6;
  font-size: 80%; }

.nminfo {
  opacity: 0.7;
  font-size: 80%;
  padding-top: 2px; }

.message-votes .vote, .nminfo .vote {
  font-family: "fontello";
  color: black;
  margin: 0 4px; }

#notable-messages, #search-results {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden; }
  #notable-messages .message, #search-results .message {
    border-top: thin solid rgba(255, 255, 255, 0.1); }
  #notable-messages .message, #search-results .message {
    font-size: 12px;
    border-bottom: thin solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    padding: 7px; }
    #notable-messages .message:nth-child(odd), #search-results .message:nth-child(odd) {
      background: rgba(0, 0, 0, 0.03); }
    #notable-messages .message:hover, #search-results .message:hover {
      background: rgba(9, 30, 90, 0.2);
      transition: background 0.2s; }
    #notable-messages .message.selected, #search-results .message.selected {
      background: rgba(9, 30, 90, 0.4);
      transition: background 0.2s; }
    #notable-messages .message.pin, #search-results .message.pin {
      font-size: 13px; }
  #notable-messages .content, #search-results .content {
    opacity: 0.9; }
  #notable-messages .closed, #search-results .closed {
    max-height: 48px; }

#notable-messages:empty:after {
  font-family: "fontello";
  content: "\e810 Pin or \e805 Star a message to move it here";
  font-size: 85%;
  opacity: .5;
  text-align: center;
  display: block;
  padding: 20px 0; }

pre {
  overflow-x: auto;
  white-space: pre;
  word-wrap: normal;
  margin: 4px 4px 13px 4px; }

code {
  font-family: monospace;
  color: #444; }

.slashme {
  font-style: italic;
  color: #333; }

.citation {
  border-left: medium solid #bbb;
  padding-left: 5px;
  background: rgba(255, 255, 153, 0.3);
  min-width: 70%; }
  .citation + br {
    display: none; }

.desktop .citation {
  margin-left: 15px; }

.h1 {
  font-weight: bold;
  text-decoration: underline; }

.h2 {
  text-decoration: underline; }

.h3 {
  border-bottom: 1px dashed black; }

.h4 {
  border-bottom: 1px dotted #333; }

.h5 {
  border-bottom: 1px dotted #999; }

#input-panel {
  display: flex;
  position: relative;
  background: #e5e7eb;
  z-index: 10;
  flex-direction: row;
  align-items: stretch;
  flex: 0 0 83px;
  border-top: thin solid rgba(185, 190, 206, 0.67); }
  #input-panel #input-sizer-hoverable {
    position: absolute;
    left: 0;
    top: -5px;
    right: 0;
    height: 12px;
    overflow: hidden;
    cursor: row-resize;
    -moz-user-select: none;
    user-select: none; }
    #input-panel #input-sizer-hoverable #input-sizer-centerer {
      position: relative;
      width: 1px;
      height: 12px;
      margin-left: var(--mousex);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: visible; }
      #input-panel #input-sizer-hoverable #input-sizer-centerer #input-sizer {
        display: flex;
        opacity: 0;
        width: 2px;
        background: linear-gradient(to bottom, #7f91c3, #2c3c67);
        height: 5px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        transition: opacity .4s .6s, width .5s .4s; }
      #input-panel #input-sizer-hoverable #input-sizer-centerer .handle {
        display: flex;
        opacity: 0;
        z-index: 12;
        color: #ccc;
        background: linear-gradient(to bottom, #6f7180, #222);
        margin-top: -7px;
        padding: 0px 20px;
        font-size: 8px;
        border-radius: 3px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
    #input-panel #input-sizer-hoverable:hover #input-sizer-centerer #input-sizer {
      opacity: 1;
      width: 5000px;
      transition: opacity .3s 0.08s, width 1.5s 0.05s; }
    #input-panel #input-sizer-hoverable:hover #input-sizer-centerer .handle {
      opacity: 1;
      transition: opacity .2s 0.08s; }
  #input-panel .left {
    flex: 1 1 100px;
    display: flex;
    flex-direction: row;
    align-items: stretch; }
  #input-panel .right {
    flex: 0 0 75px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 4px 0; }
    #input-panel .right button {
      padding: 0;
      margin: 1px; }
  #input-panel.h1b #shortcuts, #input-panel.h1b #showPreview, #input-panel.h1b #uploadOpen {
    display: none; }
  #input-panel.h1b .right {
    justify-content: center; }
  #input-panel.h2b #shortcuts, #input-panel.h2b #showPreview {
    display: none; }
  #input-panel.h3b #shortcuts {
    display: none; }

#autocompleter {
  position: absolute;
  top: -12px;
  left: 0;
  z-index: 13; }
  #autocompleter span {
    background: white;
    color: #222;
    margin: 4px;
    padding: 2px;
    border: thin solid #333;
    white-space: nowrap;
    cursor: pointer; }
    #autocompleter span.selected {
      font-weight: bold; }
    #autocompleter span.special {
      font-style: italic; }

#code-controls {
  position: absolute;
  font-size: 90%;
  top: -31px;
  left: 0;
  right: 0;
  height: 29px;
  z-index: 9;
  background: white;
  box-shadow: 0 -1px 1px black;
  padding: 2px 0 0 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden; }
  #code-controls span.lang {
    margin: 4px;
    padding: 2px;
    border: thin dashed #888;
    white-space: nowrap;
    cursor: pointer; }
    #code-controls span.lang.selected {
      background: rgba(255, 255, 255, 0.4);
      border: thin solid #666; }
    #code-controls span.lang:hover {
      background: rgba(255, 255, 255, 0.4); }

#input {
  flex: 1 1 20px;
  margin: 2px;
  resize: none;
  background: white;
  color: black;
  border-color: inherit;
  border-width: 1px; }

body.mobile #input {
  height: 50px; }

#preview {
  flex: 1 1 20px;
  word-wrap: break-word;
  background: white;
  overflow-y: auto;
  padding: 0 2px; }

body.mobile #input-panel button {
  width: 74px;
  height: 52px;
  margin-left: 4px;
  margin-top: 4px;
  text-align: center;
  padding: 0; }

body.desktop #upload-panel {
  background: white;
  width: 100%;
  height: 91px;
  flex-grow: 0;
  display: none;
  padding: 10px;
  text-align: center; }

body.mobile #upload-panel {
  width: 100%;
  flex-grow: 0;
  display: none;
  padding: 10px;
  line-height: 38px;
  text-align: center; }

#upload-wait {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around; }

h1 {
  color: #333;
  font-size: 125%;
  margin-top: 5px;
  margin-bottom: 5px; }
  h1 a {
    margin: 5px;
    text-decoration: none; }

h2 {
  color: #333;
  font-size: 115%;
  margin-top: 2px;
  padding-top: 2px;
  margin-bottom: 2px;
  padding-left: 3px; }
  h2 a {
    text-decoration: none;
    color: #333; }

h3 {
  color: #333;
  font-size: 110%; }

p {
  padding: 4px;
  margin: 4px; }

pre {
  font-family: "Helvetica Neue", "Calibri Light", Roboto, sans-serif;
  font-size: 14px;
  margin-top: 2px;
  padding-left: 2px; }

.error, #messages .user.error {
  color: red; }

span.warning {
  color: orange; }

#centerer {
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center; }
  #centerer::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle; }

.centered {
  display: inline-block;
  vertical-align: middle;
  min-width: 500px; }

.closed {
  overflow: hidden; }

.opener, .closer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 13px;
  text-align: center;
  cursor: pointer;
  color: #988; }
  .opener:hover, .closer:hover {
    color: black; }

.message .opener {
  background: rgba(255, 255, 255, 0.52); }
  .message .opener:hover {
    background: rgba(255, 255, 255, 0.6); }

.opener::before {
  content: '▼'; }

.message .closer {
  background: rgba(255, 255, 255, 0.32); }
  .message .closer:hover {
    background: rgba(255, 255, 255, 0.6); }

.closer::before {
  content: '▲'; }

.reply {
  font-family: 'fontello';
  color: #222;
  cursor: pointer;
  padding: 3px;
  border-radius: 2px;
  background: #ede7d3;
  opacity: 0.75;
  border-left-width: 1px;
  border-left-style: solid;
  margin-left: 1px;
  margin-right: 4px; }
  .reply:hover {
    background: #d5cba6;
    opacity: 1; }

.message:hover .reply {
  margin-left: 0;
  border-width: 2px; }

.message.goingto, .message.me.goingto {
  background: #d5cba6;
  transition: background .2s; }

.message .content a, .message .content a:visited, .rendered a, .rendered a:visited {
  color: Sienna; }

body.home .list, .list {
  width: 100%;
  margin-bottom: 30px;
  border-spacing: 0; }
  body.home .list th, body.home .list td, .list th, .list td {
    padding: 8px;
    background: white;
    text-align: left;
    color: #222; }
    body.home .list th a, body.home .list td a, .list th a, .list td a {
      color: #222; }
      body.home .list th a:hover, body.home .list td a:hover, .list th a:hover, .list td a:hover {
        color: black; }
  body.home .list tr:nth-child(even) th, body.home .list tr:nth-child(even) td, .list tr:nth-child(even) th, .list tr:nth-child(even) td {
    background: #f1f1f6; }
  body.home .list td.role, .list td.role {
    width: 45px; }

#auths-page {
  position: relative; }

#roomButtons {
  text-align: center; }

body.mobile #changeroom, body.mobile #room-edit {
  float: inherit; }

div#logo {
  background: white;
  margin: 0;
  padding: 3px; }

div#notifs {
  color: #c2b0a8; }

#response {
  color: #555; }

.icon {
  font-family: "fontello"; }

.notification {
  padding: 5px;
  background: linear-gradient(to bottom, #fffa9e, #eacb75);
  border: thin solid #f3de7a;
  color: black;
  line-height: 27px; }
  .notification .user {
    font-style: italic;
    z-index: 8;
    padding: 4px; }
  .notification button {
    margin-left: 10px; }
  .notification .remover {
    float: right; }

.pingroom {
  display: inline-block;
  margin-left: 5px; }
  .pingroom button {
    margin: 0;
    border-radius: 2px; }
  .pingroom:hover button {
    border-color: #003; }
  .pingroom .openroom, .pingroom .nextping {
    z-index: 2;
    max-width: 250px;
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap; }
  .pingroom:hover .openroom,
  .pingroom:hover .nextping {
    border-radius: 2px 0 0 2px; }

body.desktop .pingroom .clearpings {
  visibility: hidden;
  margin-left: -1px;
  padding-left: 2px;
  padding-right: 2px; }

body.desktop .pingroom:hover .clearpings {
  visibility: visible;
  border-radius: 0 2px 2px 0; }

body.mobile .pingroom .clearpings {
  margin-left: -1px;
  padding-left: 2px;
  padding-right: 2px;
  border-radius: 0 2px 2px 0; }

.olderLoader, .newerLoader {
  cursor: pointer;
  text-align: center;
  font-style: italic;
  font-size: 95%;
  opacity: 0.7;
  padding: 12px 0;
  user-select: none;
  -moz-user-select: none; }

.newerLoader + .olderLoader {
  border-top: solid 7px #ccc; }

@media (max-height: 400px) {
  .dialog.intro {
    top: 10%; } }

@media (min-height: 400px) and (max-height: 800px) {
  .dialog.intro {
    top: 170px; }
  body.logo {
    background: #e5e7eb url(../../Miaou-300-f.png) center no-repeat;
    background-position: 50% 1px; } }

@media (min-height: 800px) {
  .dialog.intro {
    top: 35%; }
  body.logo {
    background: #e5e7eb url(../../Miaou-300-f.png) center no-repeat;
    background-position: 50% 100px; } }

.tabs {
  display: table;
  width: 100%;
  table-layout: fixed;
  font-size: 13px; }
  .tabs .tab {
    display: table-cell;
    text-align: center;
    padding: 8px;
    border-style: solid;
    border-color: #bbc;
    border-width: 0 0 1px 0;
    border-radius: 0;
    color: rgba(51, 51, 51, 0.5);
    cursor: pointer;
    font-weight: bold;
    background-image: linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.07));
    background-color: transparent; }
    .tabs .tab:hover {
      color: rgba(51, 51, 51, 0.8); }
    .tabs .tab.selected {
      color: #333;
      background-image: none;
      background-color: white;
      border-width: 1px 1px 0 1px; }
      .tabs .tab.selected:first-child {
        border-width: 1px 1px 0 0; }
      .tabs .tab.selected:last-child {
        border-width: 1px 0 0 1px; }

.page {
  width: 100%;
  display: none;
  overflow: hidden; }
  .page.selected {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto; }

.pad .page.selected {
  background: white; }

.search-input-line {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4px; }

#search-input {
  flex: 1 1; }

#search-options {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  overflow-y: hidden; }
  #search-options .search-input-line {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center; }
    #search-options .search-input-line label {
      min-width: 45px; }
    #search-options .search-input-line input:first-of-type:checked ~ .search-options-details {
      opacity: 1;
      transition: all .2s; }
    #search-options .search-input-line input.username {
      margin-left: 4px; }
    #search-options .search-input-line .search-options-details {
      opacity: .4; }
      #search-options .search-input-line .search-options-details input {
        max-width: 100px; }

#search-next-page {
  text-align: center;
  height: 50px;
  cursor: pointer;
  padding-top: 10px; }

.message .ping {
  background: rgba(100, 100, 200, 0.19);
  padding: 2px;
  border-radius: 3px;
  cursor: pointer;
  border-left-width: 2px;
  border-left-style: solid; }
  .message .ping.ping-me {
    background: #ffebba; }

.link-ed {
  display: flex;
  flex-direction: column;
  align-items: stretch; }
  .link-ed label {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    margin: 2px;
    align-items: center; }
    .link-ed label input {
      margin-left: 5px;
      width: 350px;
      flex: 1 1 auto; }

.mwincontainer {
  z-index: 20;
  position: fixed;
  display: flex;
  pointer-events: none; }
  .mwincontainer.left {
    width: 140px;
    left: 0;
    bottom: 30px;
    top: 0;
    flex-direction: column-reverse;
    align-items: flex-start; }
    .mwincontainer.left .mwintab {
      margin-top: 5px;
      margin-left: -4px; }
  .mwincontainer.top {
    height: 30px;
    left: 120px;
    right: 0;
    top: 0;
    flex-direction: row; }
    .mwincontainer.top .mwintab {
      margin-left: 5px;
      margin-top: -4px; }
  .mwincontainer.right {
    width: 140px;
    right: 0;
    bottom: 30px;
    top: 0;
    flex-direction: column-reverse;
    align-items: flex-end; }
    .mwincontainer.right .mwintab {
      margin-top: 5px;
      margin-right: -4px; }
  .mwincontainer.bottom {
    height: 25px;
    left: 20px;
    right: 0;
    bottom: 0;
    flex-direction: row; }
    .mwincontainer.bottom .mwintab {
      margin-left: 5px;
      margin-bottom: -6px; }
  .mwincontainer .mwintab {
    background: white;
    border-radius: 4px;
    border: 5px solid rgba(217, 217, 217, 0.88);
    padding: 3px;
    display: inline-block;
    font-size: 90%;
    cursor: pointer;
    box-shadow: 0 0 5px black;
    opacity: 0.8;
    overflow: hidden;
    pointer-events: auto;
    max-width: 125px; }
    .mwincontainer .mwintab:hover {
      opacity: 1; }
    .mwincontainer .mwintab.new {
      border: 5px solid yellow; }

#mwin {
  position: fixed;
  left: 50%;
  top: 8%;
  width: 900px;
  margin-left: -450px;
  z-index: 21;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 5px black;
  background: rgba(217, 217, 217, 0.88); }
  #mwin .content {
    background: white;
    padding: 2px;
    overflow-y: auto; }
  #mwin .remover {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    text-align: center;
    height: 20px;
    z-index: 22;
    cursor: pointer;
    padding: 3px;
    font-weight: bold;
    opacity: 0.7; }
    #mwin .remover:hover {
      opacity: 1; }
  #mwin .sider {
    font-family: "fontello";
    position: absolute;
    text-align: center;
    z-index: 22;
    cursor: pointer;
    opacity: 0.7; }
    #mwin .sider.left {
      top: 20px;
      left: 0;
      bottom: 20px;
      width: 20px;
      padding-top: 8px; }
      #mwin .sider.left::before {
        content: "\e820"; }
    #mwin .sider.top {
      left: 20px;
      height: 16px;
      right: 20px;
      top: 0;
      padding-top: 4px; }
      #mwin .sider.top::before {
        content: "\e822"; }
    #mwin .sider.right {
      width: 20px;
      top: 20px;
      right: 0;
      bottom: 20px;
      padding-top: 8px; }
      #mwin .sider.right::before {
        content: "\e821"; }
    #mwin .sider.bottom {
      left: 20px;
      height: 16px;
      right: 20px;
      bottom: 0;
      padding-top: 4px; }
      #mwin .sider.bottom::before {
        content: "\e81f"; }
    #mwin .sider:hover {
      background: rgba(0, 0, 0, 0.2);
      opacity: 1; }

.message-history {
  max-height: 300px;
  overflow-y: auto; }
  .message-history .mtime {
    font-style: italic;
    font-size: 95%;
    color: #333;
    margin-bottom: 2px; }
  .message-history .item {
    margin: 4px;
    border: thin solid #ccc;
    padding: 2px; }

#hist {
  flex: 0 0 0;
  transition: flex-basis .4s;
  background: #131825;
  overflow-y: scroll;
  font-size: 70%;
  color: #ddd;
  padding-bottom: 20px; }
  #hist.open {
    flex: 0 0 200px;
    transition: flex-basis .4s; }
  #hist .month {
    position: relative;
    border-bottom: thin solid #444; }
    #hist .month .label {
      position: absolute;
      height: 100%;
      left: 1px;
      top: 0;
      z-index: 2;
      opacity: 0.8;
      pointer-events: none; }
    #hist .month .day {
      position: relative;
      width: 100%;
      height: 4px;
      text-align: right;
      background: transparent;
      cursor: pointer; }
      #hist .month .day .bar {
        position: absolute;
        right: 0;
        background-color: #e5e7eb;
        opacity: 0.4;
        height: 100%; }
        #hist .month .day .bar.hit {
          opacity: 1; }
      #hist .month .day .bubble {
        position: absolute;
        top: 4px;
        left: 30px;
        text-align: left;
        z-index: 3;
        background: #51608a; }
      #hist .month .day.vis {
        background: #444; }
      #hist .month .day.vis:hover, #hist .month .day:hover {
        background: #51608a; }

#hist.zoomed .month .day {
  height: 10px; }

.mask {
  position: fixed;
  z-index: 30;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px; }
  .mask.open {
    background-color: rgba(255, 255, 255, 0.6);
    transition: background-color 2s; }
  .mask.logo {
    background: #e5e7eb url(../../Miaou.svg) center no-repeat;
    background-size: contain; }
    .mask.logo .dialog {
      background: rgba(255, 255, 255, 0.9); }

.mobile .mask.logo {
  background-size: cover; }

.dialog {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  max-width: 100%;
  max-height: 80%;
  z-index: 31;
  box-shadow: 0px 3px 6px black;
  border-radius: 5px;
  padding: 0;
  background: white;
  color: #222; }
  .dialog.small {
    min-width: 300px; }
  .dialog .rendered {
    background: white;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);
    max-height: 180px;
    overflow-y: auto; }
  .dialog[error] {
    background-color: #C33; }
  .dialog a {
    text-decoration: underline; }
  .dialog .warning {
    color: #400; }

.dialog-title {
  flex: 0 0 auto;
  color: #eee;
  margin-top: 0;
  margin-bottom: 10px;
  padding: 4px;
  background: #51608a;
  font-size: 105%;
  font-weight: normal;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  text-align: center; }
  .dialog-title[error] {
    border-color: red; }

.default-button {
  font-weight: bold; }

table.form {
  width: 100%; }
  table.form input, table.form textarea {
    width: 100%; }
  table.form input[type=radio], table.form input[type=checkbox] {
    width: initial; }
  table.form textarea {
    height: 80px; }
  table.form td.leftborder {
    border-left: 1px solid #222; }
  table.form th, table.form td {
    padding: 4px; }
  table.form th, table.form td:first-child {
    text-align: right; }
  table.form th:last-child {
    text-align: left; }

body.desktop table.form th {
  width: 160px; }

.dialog-content {
  overflow-y: auto;
  flex: 0 0 auto;
  padding: 7px; }
  .dialog-content p, .dialog-content h2, .dialog-content .form, .dialog-content .label {
    clear: both; }
  .dialog-content h2 {
    margin-left: 4px; }
  .dialog-content .label {
    display: block;
    font-weight: bold;
    text-align: right;
    width: 120px;
    float: left;
    padding: 8px 4px; }
  .dialog-content input[type=text], .dialog-content .input {
    background: white;
    color: black;
    float: left;
    padding: 4px 2px;
    width: calc( 100% - 155px);
    margin: 4px 2px 15px 10px; }
    .dialog-content input[type=text].unlabeled, .dialog-content .input.unlabeled {
      width: calc( 100% - 25px); }
  .dialog-content .small {
    color: #666666;
    display: block;
    font-size: 95%;
    font-weight: normal;
    text-align: right;
    width: 120px; }
  .dialog-content .cblabel {
    float: left;
    padding: 4px 2px;
    width: calc( 100% - 200px);
    margin: 2px 0 5px 0; }
  .dialog-content input[type=checkbox] {
    float: left;
    margin: 10px 10px; }
  .dialog-content textarea {
    float: left;
    padding: 4px 2px;
    border: solid 1px #888;
    width: calc( 100% - 155px);
    margin: 2px 0 15px 10px;
    height: 70px; }
  .dialog-content .mdpreview {
    float: left;
    padding: 4px 2px;
    width: calc( 100% - 155px);
    margin: 2px 0 20px 10px;
    height: 70px; }

.dialog-buttons {
  flex: 0 0 auto;
  padding: 11px 15px;
  text-align: center; }

.close_dialog {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 6px;
  cursor: pointer; }
  .close_dialog:hover {
    background: #333; }

.ban-dialog {
  white-space: nowrap; }
  .ban-dialog span {
    margin: 7px;
    line-height: 25px; }
  .ban-dialog input {
    margin-left: 2%; }
  .ban-dialog #ban-reason {
    width: 400px; }

div.externalProfile {
  margin: 4px;
  width: 208px;
  padding: 0; }

.externalProfiles {
  text-align: left;
  margin-left: 8px; }
  .externalProfiles section.externalProfileForm td, .externalProfiles table.form td {
    text-align: left; }
  .externalProfiles section.externalProfileForm input, .externalProfiles table.form input {
    float: none;
    width: 100px;
    margin: 0;
    padding: 0; }
    .externalProfiles section.externalProfileForm input[type=checkbox], .externalProfiles table.form input[type=checkbox] {
      width: initial;
      margin: 2px 8px 0 0; }
  .externalProfiles section.externalProfileForm div.inputs, .externalProfiles table.form div.inputs {
    padding: 10px 0; }
  .externalProfiles h2 {
    margin-left: -10px;
    margin-bottom: -5px;
    font-size: 110%; }
  .externalProfiles h3 {
    font-size: 100%; }

.desktop .externalProfiles input[type=url] {
  width: 450px; }

.profile {
  opacity: 1;
  padding: 5px;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.9); }
  .profile .avatar {
    display: block;
    margin: auto;
    max-width: 150px;
    -webkit-filter: drop-shadow(0 0 2px white);
    filter: drop-shadow(0 0 2px white); }
  .profile a {
    color: rgba(255, 255, 255, 0.9); }
  .profile h1 {
    width: 100%;
    text-align: center;
    font-size: 110%;
    color: rgba(255, 255, 255, 0.9); }
  .profile h2 {
    margin-top: 4px;
    font-size: 100%;
    color: rgba(255, 255, 255, 0.9); }
  .profile p {
    padding: 0; }

.desktop .profile {
  padding: 8px;
  width: 216px;
  min-height: 100px; }

.desktop.buttons-hovered .profile {
  opacity: 0;
  transition: opacity .3s .3s; }

.mobile .profile {
  overflow-y: scroll; }

.desktop .profile, .mobile .profile-page {
  position: fixed;
  background: rgba(9, 30, 90, 0.85);
  z-index: 31; }

.profile-page {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column; }

.profile-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 5px; }
  .profile-buttons button, .profile-buttons i {
    flex: 1 1 auto; }
  .profile-buttons i {
    text-align: center;
    color: rgba(255, 255, 255, 0.9); }

.profiled .avatar {
  -webkit-filter: drop-shadow(0 0 1px white);
  filter: drop-shadow(0 0 1px white); }

@media (max-height: 500px) {
  .profile .avatar {
    display: none; } }

@media (min-height: 500px) and (max-height: 750px) {
  .profile .avatar {
    max-height: 60px; } }

@media (min-height: 750px) {
  .profile .avatar {
    max-height: 150px; } }

body:not(.buttons-hovered) .user.profiled {
  box-shadow: none;
  background: rgba(9, 30, 90, 0.85);
  z-index: 6; }
  body:not(.buttons-hovered) .user.profiled span {
    color: rgba(255, 255, 255, 0.9);
    transition: color .3s .3s; }
  body:not(.buttons-hovered) .user.profiled span, body:not(.buttons-hovered) .user.profiled .avatar {
    opacity: 0;
    transition: opacity .3s .3s; }

#userinfo th {
  font-weight: normal;
  text-align: left;
  padding-right: 10px;
  color: #333; }

#userinfo span.def {
  margin: 3px;
  display: inline-block;
  color: rgba(255, 255, 255, 0.75); }
  #userinfo span.def::after {
    content: " :"; }

#userinfo span.val {
  margin: 3px;
  padding-left: 3px;
  display: inline-block;
  word-break: break-word; }

#userinfo .user-title {
  margin: 3px;
  padding-left: 3px;
  text-align: center; }

#Home-logo {
  height: 100px; }

#home-top, #prefs-top, #mobtop {
  color: #ccc; }
  #home-top a, #prefs-top a, #mobtop a {
    color: #ccc; }
    #home-top a:hover, #prefs-top a:hover, #mobtop a:hover {
      color: white; }

#home-top, #prefs-top {
  padding: 3px;
  background: #51608a;
  box-shadow: 0 0 10px black; }

#home-blurb, #prefs-notifs {
  color: #ccc; }
  #home-blurb h2, #prefs-notifs h2 {
    color: #ccc; }
  #home-blurb a, #prefs-notifs a {
    color: #ccc; }
    #home-blurb a:hover, #prefs-notifs a:hover {
      color: white; }

#home-blurb {
  display: flex;
  align-items: flex-start;
  justify-content: space-between; }

#home-search {
  padding-top: 20px; }

body.home.desktop .rooms-tabs {
  height: 30px; }
  body.home.desktop .rooms-tabs .tab {
    z-index: 2;
    cursor: pointer; }
    body.home.desktop .rooms-tabs .tab.selected {
      z-index: 4;
      cursor: inherit; }
    body.home.desktop .rooms-tabs .tab .watch-count {
      margin-left: 2px; }

body.home {
  overflow-y: scroll;
  background: #333; }
  body.home a {
    color: black; }
  body.home #home-main {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 3;
    background: #e5e7eb;
    box-shadow: 0 0 10px black;
    padding: 15px; }
    body.home #home-main h3 {
      margin-left: 8px;
      margin-bottom: 5px; }
  body.home #logo {
    margin-top: 6px; }
  body.home.mobile #logo {
    margin-top: 0; }
  body.home p.links {
    margin-top: 5px; }
    body.home p.links .username {
      margin: 0 5px;
      font-style: italic; }
    body.home p.links a {
      white-space: nowrap;
      margin: 0 5px; }
  body.home.desktop #home-main-content {
    width: 70%;
    max-width: 1000px;
    min-width: 800px; }
  body.home.mobile #logo {
    text-align: center; }
  body.home.mobile #home-main-content {
    line-height: 25px;
    background: white; }
  body.home.mobile p.links a {
    margin-right: 15px; }
  body.home.mobile p.links a + a {
    margin-left: 15px; }

#langfilter {
  position: absolute;
  right: 20px;
  top: 20px;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none; }
  #langfilter .lang {
    padding: 5px 5px 2px 5px;
    border-radius: 5px;
    margin: 4px;
    cursor: pointer;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
    opacity: 0.4;
    background: white;
    transition: background-color .5s; }
    #langfilter .lang.on {
      background: white;
      box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.6);
      opacity: 1;
      transition: background-color .5s; }
    #langfilter .lang img {
      max-width: 26px; }

body.mobile #home-blurb {
  background: #333;
  width: 100%;
  padding: 5px; }

body.mobile #home-main-content th, body.mobile #home-main-content td {
  max-width: 60px;
  overflow: hidden; }

#mobtop {
  position: absolute;
  z-index: 4;
  width: 100%;
  top: 0;
  overflow-x: hidden; }
  #mobtop #logo {
    background: #51608a;
    text-align: center;
    line-height: 25px;
    box-shadow: 0 0 10px black; }

body.mobile #home-notifs {
  background: #333; }

#mobstrip {
  background: #51608a;
  position: fixed;
  top: 0;
  z-index: 3;
  right: 0;
  left: 0; }

.room-title-cell {
  position: relative; }
  .room-title-cell .room-name a {
    text-decoration: none; }

#Prefs-logo {
  height: 60px; }

body.prefs {
  overflow-y: auto;
  background: #333; }
  body.prefs a {
    color: black; }
  body.prefs.mobile #prefs-tabs .tab {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 4px; }
  body.prefs #prefs-tabs {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 30px; }
    body.prefs #prefs-tabs .tab {
      background: #e5e7eb;
      text-align: center;
      padding: 8px;
      margin-right: 10px;
      z-index: 2;
      cursor: pointer;
      box-shadow: 0 0 5px black;
      position: relative; }
      body.prefs #prefs-tabs .tab.selected {
        z-index: 4;
        cursor: inherit;
        box-shadow: 0 0 10px black; }
        body.prefs #prefs-tabs .tab.selected::after {
          position: absolute;
          top: 25px;
          left: 0;
          width: 100%;
          height: 10px;
          background: #e5e7eb;
          z-index: 5;
          content: ' '; }
        body.prefs #prefs-tabs .tab.selected::before {
          position: absolute;
          top: 30px;
          left: -10px;
          width: 130%;
          height: 15px;
          background: #e5e7eb;
          z-index: 6;
          content: ' '; }
  body.prefs #prefs-main {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 3;
    background: #e5e7eb;
    box-shadow: 0 0 10px black;
    padding: 15px; }
    body.prefs #prefs-main #prefs-main-content .page {
      display: none; }
      body.prefs #prefs-main #prefs-main-content .page.selected {
        display: block; }
    body.prefs #prefs-main h3 {
      margin-left: 8px;
      margin-bottom: 5px; }
  body.prefs #logo {
    margin-top: 6px; }
  body.prefs p.links {
    margin-top: 5px; }
    body.prefs p.links .username {
      margin: 0 5px;
      font-style: italic; }
    body.prefs p.links a {
      white-space: nowrap;
      margin: 0 5px; }
  body.prefs.desktop #home-main-content {
    width: 70%;
    max-width: 1000px;
    min-width: 800px; }
  body.prefs.mobile #logo {
    margin-top: 0;
    text-align: center; }
  body.prefs.mobile #home-main-content {
    line-height: 25px; }
  body.prefs.mobile p.links a {
    margin-right: 15px; }
  body.prefs.mobile p.links a + a {
    margin-left: 15px; }

#avatar-edit {
  display: flex;
  flex-direction: row;
  align-items: stretch; }

#avatar-fields {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column; }

.avatar-fields-row {
  display: flex;
  flex-direction: row;
  align-items: center; }
  .avatar-fields-row input, .avatar-fields-row select, .avatar-fields-row label, .avatar-fields-row p {
    margin: 8px 4px; }

#avatar-preview {
  flex: 1 0 220px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 220px; }
  #avatar-preview img {
    max-height: 220px;
    max-width: 220px; }

body.mobile #avatar-preview {
  flex: 1 0 100px;
  height: 100px; }
  body.mobile #avatar-preview img {
    max-height: 100px;
    max-width: 100px; }

body.mobile {
  font-size: 12px; }
  body.mobile #users .user {
    flex: 1 0 24px;
    max-height: 36px; }
  body.mobile .message .user {
    width: 75px; }
  body.mobile #me {
    color: #ccc;
    font-size: 14px; }

.mtabs {
  background: none; }

.mtab {
  background: rgba(9, 30, 90, 0.85);
  color: #ccc;
  text-align: center;
  height: 39px;
  line-height: 39px;
  position: fixed;
  z-index: 3;
  top: 0; }
  .mtab:first-child {
    width: 39%;
    left: 0;
    border-radius: 0 0 10px 0; }
    .mtab:first-child.closed::before {
      z-index: 2;
      position: absolute;
      top: -2px;
      left: 5px;
      content: '▼';
      opacity: 0.12;
      font-size: 35px; }
    .mtab:first-child.open::before {
      z-index: 2;
      position: absolute;
      top: -2px;
      left: 5px;
      content: '▲';
      opacity: 0.12;
      font-size: 35px; }
  .mtab:last-child {
    width: 53%;
    right: 0;
    border-radius: 0 0 0 10px; }
    .mtab:last-child.closed::before {
      z-index: 2;
      position: absolute;
      top: -2px;
      right: 5px;
      content: '▼';
      opacity: 0.12;
      font-size: 35px; }
    .mtab:last-child.open::before {
      z-index: 2;
      position: absolute;
      top: -2px;
      right: 5px;
      content: '▲';
      opacity: 0.12;
      font-size: 35px; }

.mpage {
  display: none;
  width: 48%;
  position: fixed;
  z-index: 2;
  top: 0;
  bottom: 70px;
  overflow-y: auto;
  padding-top: 43px;
  background: rgba(9, 30, 90, 0.95);
  color: #ccc;
  box-shadow: 0 0 4px black; }
  .mpage h2 {
    color: #ccc; }
  .mpage:first-child {
    width: 39%;
    left: 0;
    border-radius: 0 0 10px 0; }
  .mpage:last-child {
    width: 53%;
    right: 0;
    border-radius: 0 0 0 10px; }

body.mobile .tabs .tab {
  color: #444; }
  body.mobile .tabs .tab.selected {
    background-color: #e5e7eb;
    color: black; }

body.mobile .page {
  background-color: #e5e7eb;
  color: #222; }

.wzin-conv-1 {
  background: rgba(139, 69, 19, 0.4); }

.wzin-conv-2 {
  background: rgba(42, 18, 234, 0.4); }

.wzin-conv-3 {
  background: rgba(180, 237, 228, 0.7); }

.wzin-conv-4 {
  background: rgba(192, 169, 244, 0.7); }

.wzin-edit {
  background: rgba(208, 120, 16, 0.35); }

.wzin-reply {
  background: rgba(71, 71, 249, 0.44); }

.wzin-link {
  background: rgba(222, 1, 80, 0.35); }

#stripe {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 50;
  box-shadow: 0 0 2px black;
  background: #51608b; }
  #stripe.open {
    box-shadow: 0 0 12px black; }

#stripe-top {
  display: flex;
  flex-direction: row;
  min-height: 40px; }

#non-top {
  opacity: 1; }
  #non-top.behind {
    opacity: 1;
    transition: opacity .4s; }

#M-menu {
  position: fixed;
  top: 0;
  z-index: 70;
  color: white; }
  #M-menu a.menu-item {
    color: white;
    text-decoration: none;
    display: block;
    padding: 10px;
    cursor: pointer; }
    #M-menu a.menu-item:hover {
      background: rgba(9, 30, 90, 0.95); }
  #M-menu.open {
    width: 260px;
    box-shadow: 0 0 2px black;
    background: rgba(9, 30, 90, 0.89); }

#Miaou-logo-wrapper {
  position: relative;
  display: block;
  height: 40px;
  width: 38px;
  overflow: hidden; }

#Miaou-logo-wrapper:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

#M-menu:hover #Miaou-logo-wrapper {
  width: 200px;
  transition: width .9s .2s; }

#Miaou-logo {
  height: 40px;
  padding-left: 2px; }

#menu-content {
  display: none; }

#M-menu.open #menu-content {
  display: block; }

#menu-settings::before {
  font-family: "fontello";
  content: "\e81d ";
  margin-right: 5px; }

#menu-logout::before {
  font-family: "fontello";
  content: "\e81e ";
  margin-right: 5px; }

#menu-help::before {
  font-family: "fontello";
  content: "\e80b ";
  margin-right: 5px; }

#menu-home::before {
  font-family: "fontello";
  content: "\e80d ";
  margin-right: 5px; }

#room-panel-wrapper {
  margin-left: 40px;
  position: relative;
  flex: 0 1 430px; }

#room-panel-bg, #room-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }

#room-panel-bg {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.6; }

#room-panel {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 4px; }
  #room-panel button {
    opacity: 0;
    transition: opacity 1s; }

#room-panel:hover button {
  opacity: 1;
  transition: opacity .5s;
  z-index: 2; }

#room-title {
  flex: 1 0; }
  #room-title #roomname {
    color: white;
    text-decoration: none;
    text-shadow: 0 0 2px black;
    font-size: 115%; }

#rooms-panel {
  display: flex;
  flex-direction: row;
  align-items: stretch; }
  #rooms-panel.closed {
    height: 0;
    transition: height .5s; }
  #rooms-panel.open {
    height: 71vh;
    transition: height .5s; }

#rooms {
  display: flex;
  flex-direction: row;
  align-items: stretch; }

#rooms-content {
  flex: 1 0; }

#rooms-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 5px; }

.pad .rooms-tabs {
  display: flex;
  flex-direction: row;
  flex: 0 0 34px; }
  .pad .rooms-tabs .tab, .pad .rooms-tabs .aftertabs {
    line-height: 24px;
    text-align: center;
    padding: 5px 10px;
    border-style: solid;
    border-color: #bbc;
    border-width: 0 0 1px 0;
    color: #ccc;
    background-image: linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.07)); }
  .pad .rooms-tabs .tab {
    cursor: pointer; }
    .pad .rooms-tabs .tab:hover {
      color: #eee; }
    .pad .rooms-tabs .tab.selected {
      color: #222;
      background-image: none;
      background-color: #e5e7eb;
      border-width: 1px 1px 0 1px; }
    .pad .rooms-tabs .tab .watch-count {
      margin-left: 2px;
      font-size: 95%; }
  .pad .rooms-tabs .aftertabs {
    flex: 1 0;
    display: flex;
    align-items: center;
    justify-content: space-around; }

#rooms-panel #rooms-page {
  border-style: solid;
  border-color: #bbc;
  border-width: 0 1px 1px 1px; }

body.desktop #rooms-page {
  padding: 5px 0; }

#non-top #left, #non-top #right, #non-top #center {
  top: 40px;
  overflow-x: hidden; }

#non-top #left {
  padding-top: 5px; }

#non-top #right {
  overflow-y: hidden;
  display: flex;
  flex-direction: column; }

#right #room-area {
  flex: 0 0 auto;
  position: relative;
  background-size: cover;
  background-position: center center;
  -webkit-mask-image: linear-gradient(black, black, transparent);
  mask-image: linear-gradient(black, black, transparent);
  margin-bottom: 15px;
  height: 90px;
  transition: all .5s .9s;
  display: flex;
  flex-direction: column; }
  #right #room-area > div {
    background: rgba(243, 243, 245, 0.35); }
  #right #room-area #room-controls {
    height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    transition: all .5s .9s; }
  #right #room-area #room-description {
    flex: 1 1;
    overflow: hidden;
    padding-bottom: 20px;
    transition: all .5s .9s;
    position: relative; }
    #right #room-area #room-description a {
      color: inherit; }

#right #room-area:hover {
  height: 350px;
  transition: all .5s; }
  #right #room-area:hover #room-controls {
    height: 30px;
    transition: all .5s;
    padding-bottom: 4px; }
  #right #room-area:hover #room-description {
    -webkit-mask-image: none;
    transition: all .5s;
    overflow-y: hidden; }
    #right #room-area:hover #room-description a {
      color: white; }

#right #room-area.has-background-image:hover #room-description {
  color: #222;
  text-shadow: 0 0 1px white; }

.room-control {
  font-size: 95%;
  flex: 1;
  cursor: pointer;
  text-align: center;
  line-height: 30px;
  margin: 0 5px 0 0;
  background: rgba(0, 0, 50, 0.5);
  color: rgba(255, 255, 255, 0.9); }
  .room-control:hover {
    background: rgba(0, 0, 50, 0.7);
    color: rgba(255, 255, 255, 0.9); }
  .room-control::before {
    font-size: 110%;
    margin-right: 4px; }

#room-watch, #room-unwatch {
  margin: 0 5px 0 5px; }

#room-edit::before {
  content: '\e817'; }

#auths::before {
  content: '\e832'; }

#room-watch::before {
  margin: 0 5px 0 5px;
  content: '\e811'; }

#room-unwatch::before {
  content: '\e812'; }

#room-search-reset {
  visibility: hidden; }
  #room-search-reset.visible {
    visibility: visible; }

#create-room {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis; }

#room-search-div {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; }

#room-search-input {
  flex: 1 0 50px; }

#notablemessagespage .message {
  border-top: none; }

#watches {
  flex: 1 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: null;
  flex-wrap: wrap;
  padding: 2px; }

.watch {
  padding: 1px 2px;
  min-width: 25px;
  margin: 2px 4px;
  font-size: 0.8em;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  text-decoration: none;
  color: inherit;
  position: relative;
  background: rgba(255, 255, 255, 0.8); }
  .watch:hover {
    background: white; }
  .watch.open {
    box-shadow: 0 0 5px black; }
  .watch.open::after {
    position: absolute;
    left: 0;
    top: 13px;
    right: 0;
    height: 12px;
    background: white;
    z-index: 60;
    content: ""; }
  .watch.has-requests {
    box-shadow: 0 0 10px orangered; }
    .watch.has-requests .name {
      color: #540404; }
  .watch .count:not(:empty) {
    color: #222;
    background: rgba(255, 255, 0, 0.5);
    padding: 0 5px;
    display: inline-flex;
    align-items: center; }
    .watch .count:not(:empty).ping {
      background: rgba(255, 0, 0, 0.5); }
  .watch .name {
    padding: 0 3px;
    overflow: hidden;
    max-width: 75px;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis; }
    .watch .name.dialog-room::before {
      font-family: "fontello";
      font-size: .85em;
      content: "\e82f";
      margin-right: 2px;
      margin-top: -2px; }
    .watch .name.compact {
      max-width: 40px; }
  .watch .watch-panel {
    position: absolute;
    background: white;
    min-height: 20px;
    box-shadow: 0 0 5px black;
    padding: 10px;
    z-index: 55; }
  .watch .watch-panel-top {
    height: 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px; }
    .watch .watch-panel-top span {
      flex: 1 0;
      text-align: center;
      font-weight: bold; }
  .watch .messages {
    max-height: 50vh;
    overflow-y: auto; }
    .watch .messages .opener {
      display: none; }
    .watch .messages .nminfo {
      padding-right: 2px; }
    .watch .messages .message:last-child .nminfo {
      font-weight: bold;
      opacity: 1; }
    .watch .messages .message.unseen {
      background: rgba(255, 255, 0, 0.5); }

.watch-requests {
  display: block;
  color: #540404;
  text-decoration: none;
  padding: 3px;
  margin: 5px 0;
  border: thin solid rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 0, 0.2);
  box-shadow: 0 0 10px orangered; }

body.user {
  background: #51608a; }

#user-box {
  background-color: white;
  box-shadow: 0 0 4px black;
  padding: 10px; }

#user-miaou-logo-wrapper {
  padding-top: 60px;
  max-width: 600px;
  margin: auto;
  cursor: pointer; }

#User-logo {
  width: 150px; }

#user-box {
  width: 600px;
  margin: auto; }
  #user-box section + section {
    border-top: thin dashed #ccc;
    min-height: 20px; }
  #user-box h2 {
    font-size: 105%; }
  #user-box h3 {
    font-size: 95%; }

#user-main-profile {
  display: flex;
  flex-direction: row; }

#user-fields, #user-avatar {
  flex: 1; }

#user-fields {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 10px; }

.user-field {
  display: flex;
  flex-direction: row; }

.user-field-name {
  flex: 0 0 100px; }

.user-field-val {
  flex: 1; }

#user-buttons button {
  display: inline-block; }

#user-avatar .avatar {
  max-height: 220px;
  max-width: 400px; }

.external-identity {
  display: flex;
  align-items: center; }

.externalProfileName {
  flex: 0 0 220px;
  text-align: right;
  margin-right: 10px; }

body.username {
  background: #51608b;
  color: #e5e7eb; }
  body.username #user-miaou-logo-wrapper {
    border-bottom: thin solid #e5e7eb;
    padding-bottom: 15px;
    margin-bottom: 15px;
    cursor: auto; }

#username-main {
  width: 330px;
  margin: auto;
  padding: 40px 4px; }

#buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-top: thin solid #e5e7eb;
  padding-top: 15px; }

.generated-color {
  background-color: #000000;
  color: #ffffff; }

.home-tabs {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 30px; }
  .home-tabs .home-tab, .home-tabs .tab {
    background: #e5e7eb;
    text-align: center;
    padding: 8px;
    margin: 0 5px;
    z-index: 2;
    cursor: pointer;
    box-shadow: 0 0 5px black;
    position: relative;
    color: #444; }
    .home-tabs .home-tab.selected, .home-tabs .tab.selected {
      z-index: 4;
      cursor: inherit;
      color: black;
      box-shadow: 0 0 10px black; }
      .home-tabs .home-tab.selected::after, .home-tabs .tab.selected::after {
        position: absolute;
        top: 25px;
        left: 0;
        width: 100%;
        height: 10px;
        background: #e5e7eb;
        z-index: 5;
        content: ' '; }
      .home-tabs .home-tab.selected::before, .home-tabs .tab.selected::before {
        position: absolute;
        top: 30px;
        left: -10px;
        width: 130%;
        height: 15px;
        background: #e5e7eb;
        z-index: 6;
        content: ' '; }

body.mobile .home-tabs .home-tab, body.mobile .home-tabs .tab {
  padding: 8px 4px;
  margin: 0 2px; }

.home-page {
  width: 100%;
  display: none; }
  .home-page.selected {
    display: block; }

.mobtabs {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: #51608a;
  box-shadow: 0 0 10px black;
  padding: 3px; }
  .mobtabs .home-tab, .mobtabs .tab {
    padding: 5px;
    flex-grow: 1;
    text-align: center;
    color: rgba(204, 204, 204, 0.65); }
    .mobtabs .home-tab.selected, .mobtabs .tab.selected {
      color: #ccc; }

#help-body {
  background: white;
  padding: 10px 10px 10px 210px;
  overflow-y: auto; }
  #help-body a, #help-body a:visited {
    color: #111; }

h1 {
  text-align: center;
  flex: 0 0 20px; }

#help-nav {
  background: rgba(9, 30, 90, 0.84);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  display: flex;
  flex-direction: column;
  color: #ccc;
  box-shadow: 2px 0 2px rgba(0, 0, 0, 0.15), 5px 0 5px rgba(0, 0, 0, 0.1); }
  #help-nav h1, #help-nav h2, #help-nav h3 {
    color: #ccc;
    cursor: pointer; }
    #help-nav h1:hover, #help-nav h2:hover, #help-nav h3:hover {
      color: #fb0; }

#help-miaou-logo-wrapper {
  display: block;
  flex: 0 0 110px; }
  #help-miaou-logo-wrapper .Miaou-logo {
    margin: 15px;
    cursor: pointer; }

#help-summary {
  overflow-y: auto; }
  #help-summary h2 {
    font-size: 100%; }
  #help-summary h3 {
    font-size: 85%;
    margin: 0;
    padding: 3px 0 3px 8px;
    background: #131825; }

#help-shortcuts th {
  width: 100px;
  text-align: right;
  font-weight: normal; }

#help-content {
  max-width: 900px; }
  #help-content h2, #help-content h3 {
    cursor: pointer; }
  #help-content h2 {
    margin-top: 15px;
    border-top: 5px solid #51608b;
    padding-top: 15px;
    margin-bottom: 8px; }
  #help-content h3 {
    margin-top: 8px;
    padding-top: 8px; }
  #help-content div, #help-content p, #help-content pre {
    margin-left: 20px; }
  #help-content kbd {
    margin: 0px 0.1em;
    padding: 0.1em 0.6em;
    border-radius: 3px;
    border: 1px solid #cccccc;
    color: #333333;
    line-height: 1.4;
    font-size: 10px;
    display: inline-block;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2), inset 0px 0px 0px 2px #ffffff;
    background-color: #f7f7f7;
    text-shadow: 0 1px 0 #fff; }
  #help-content pre {
    display: inline-block;
    padding: 8px; }
  #help-content code {
    font-family: monospace;
    white-space: pre; }
  #help-content .vote {
    font-family: "fontello";
    margin: 0 4px; }
  #help-content .message-content {
    display: inline-block;
    word-wrap: break-word;
    display: inline-block;
    padding: 8px;
    border: thin dashed rgba(100, 100, 100, 0.4); }
  #help-content .message-content img {
    border: none;
    max-width: 100%;
    max-height: 130px; }
  #help-content .indent {
    margin-left: 15px; }
  #help-content .citation {
    border-left: medium solid #bbb;
    padding-left: 3px;
    display: inline-block; }

body.pad #rooms-page {
  overflow-y: scroll;
  background-color: #e5e7eb; }

#rooms-page {
  flex: 1 1;
  max-width: 1205px; }

.room-list .room {
  margin: 2px; }

body.home.mobile .room-list {
  justify-content: center; }

.room-list, .room-bubble, #room-preview {
  display: flex;
  flex-wrap: wrap; }
  .room-list .room, .room-bubble .room, #room-preview .room {
    width: 194px;
    height: 194px;
    cursor: pointer;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-shadow: 1px 1px 2px #999;
    overflow: hidden;
    position: relative; }
    .room-list .room.dialog-square, .room-bubble .room.dialog-square, #room-preview .room.dialog-square {
      width: 144px;
      height: 144px; }
    .room-list .room:hover, .room-bubble .room:hover, #room-preview .room:hover {
      box-shadow: 1px 1px 4px #222;
      transition: box-shadow .2s; }
    .room-list .room .room-head, .room-bubble .room .room-head, #room-preview .room .room-head {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 40px; }
      .room-list .room .room-head a.room-title, .room-bubble .room .room-head a.room-title, #room-preview .room .room-head a.room-title {
        flex-grow: 1;
        text-align: center;
        color: #222;
        font-size: 95%;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: none; }
    .room-list .room .under-room-description, .room-bubble .room .under-room-description, #room-preview .room .under-room-description {
      background-size: cover;
      background-position: center center;
      flex-grow: 1;
      position: relative; }
    .room-list .room .room-description, .room-bubble .room .room-description, #room-preview .room .room-description {
      background: rgba(243, 243, 245, 0.35);
      color: #222;
      text-shadow: 0 0 1px white;
      overflow: hidden;
      font-size: 90%;
      text-overflow: ellipsis;
      padding: 4px;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0; }
      .room-list .room .room-description a, .room-list .room .room-description a:visited, .room-bubble .room .room-description a, .room-bubble .room .room-description a:visited, #room-preview .room .room-description a, #room-preview .room .room-description a:visited {
        color: #222; }
    .room-list .room .room-hover, .room-bubble .room .room-hover, #room-preview .room .room-hover {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 0;
      background: rgba(43, 72, 142, 0.7);
      overflow: hidden;
      transition: height .4s; }
    .room-list .room:hover .room-hover, .room-bubble .room:hover .room-hover, #room-preview .room:hover .room-hover {
      height: 54px;
      transition: height .2s .1s; }
    .room-list .room .room-last-created, .room-bubble .room .room-last-created, #room-preview .room .room-last-created {
      font-size: 80%;
      color: #eee;
      height: 20px;
      line-height: 20px;
      text-align: center;
      text-shadow: 0 0 2px black; }
    .room-list .room .room-buttons, .room-bubble .room .room-buttons, #room-preview .room .room-buttons {
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: space-around; }

.watch-count {
  background: rgba(255, 255, 255, 0.4);
  color: #222;
  opacity: .8;
  padding: 0 5px;
  display: inline-block;
  z-index: 2;
  border-radius: 4px;
  left: 100%;
  top: 5px;
  margin-right: 4px; }
  .watch-count.has-unseen {
    opacity: 1;
    background: rgba(255, 255, 0, 0.5); }
    .watch-count.has-unseen.has-ping {
      background: rgba(255, 0, 0, 0.5); }

.room-title-cell .watch-count {
  position: absolute; }

.room-bubble .no-access {
  margin-top: 5px;
  max-width: 125px;
  color: red;
  font-size: 90%; }

.room-bubble .room-contacts {
  margin-top: 5px;
  max-width: 125px;
  font-size: 90%; }

.pad #messages .content.content-rating-nsfw,
.pad #messages .has-opener .content.content-rating-nsfw.closed,
.pad #messages .has-opener .content.content-rating-nsfw.closed:hover, .pad #notable-messages .content.content-rating-nsfw,
.pad #notable-messages .has-opener .content.content-rating-nsfw.closed,
.pad #notable-messages .has-opener .content.content-rating-nsfw.closed:hover, .pad .messages .content.content-rating-nsfw,
.pad .messages .has-opener .content.content-rating-nsfw.closed,
.pad .messages .has-opener .content.content-rating-nsfw.closed:hover {
  opacity: .4; }
  .pad #messages .content.content-rating-nsfw img,
  .pad #messages .has-opener .content.content-rating-nsfw.closed img,
  .pad #messages .has-opener .content.content-rating-nsfw.closed:hover img, .pad #notable-messages .content.content-rating-nsfw img,
  .pad #notable-messages .has-opener .content.content-rating-nsfw.closed img,
  .pad #notable-messages .has-opener .content.content-rating-nsfw.closed:hover img, .pad .messages .content.content-rating-nsfw img,
  .pad .messages .has-opener .content.content-rating-nsfw.closed img,
  .pad .messages .has-opener .content.content-rating-nsfw.closed:hover img {
    -webkit-filter: grayscale(100%) contrast(40%) brightness(1.5);
    filter: grayscale(100%) contrast(40%) brightness(1.5); }

.pad #messages .content.content-rating-nsfw:hover,
.pad #messages .has-opener .content.content-rating-nsfw:hover, .pad #notable-messages .content.content-rating-nsfw:hover,
.pad #notable-messages .has-opener .content.content-rating-nsfw:hover, .pad .messages .content.content-rating-nsfw:hover,
.pad .messages .has-opener .content.content-rating-nsfw:hover {
  opacity: 1; }
  .pad #messages .content.content-rating-nsfw:hover img,
  .pad #messages .has-opener .content.content-rating-nsfw:hover img, .pad #notable-messages .content.content-rating-nsfw:hover img,
  .pad #notable-messages .has-opener .content.content-rating-nsfw:hover img, .pad .messages .content.content-rating-nsfw:hover img,
  .pad .messages .has-opener .content.content-rating-nsfw:hover img {
    -webkit-filter: none;
    filter: none; }

.autocomplete-menu {
  background: white;
  border: thin solid #777; }
  .autocomplete-menu div {
    padding: 2px;
    cursor: pointer; }
    .autocomplete-menu div.selected {
      background: #aab; }

.load-bar {
  height: 4px;
  background: #CBCAD0;
  width: 0;
  opacity: 0; }
  .load-bar.active {
    opacity: 1;
    transition: opacity .2s;
    animation: load-bar 1s ease-out;
    animation-iteration-count: infinite;
    animation-direction: alternate; }

@keyframes load-bar {
  0% {
    width: 0px;
    margin-left: 0; }
  50% {
    width: 100%;
    margin-left: 0; }
  100% {
    width: 0;
    margin-left: 100%; } }

.tag {
  flex: 0 0 auto;
  white-space: nowrap;
  display: inline-block;
  color: #eee;
  background: linear-gradient(to bottom, #5367a9, #30448c);
  margin: 2px;
  padding: 3px 5px; }

.message .content .tag {
  padding: 1px 4px; }
  .message .content .tag a {
    color: #eee; }

.message .content pre.prettyprint span.tag {
  background: transparent; }

.bubble.tag-bubble .bubble-content, .bubble.tag-bubble .bubble-content a {
  background-color: #115586;
  color: #afd3ef; }

.bubble.tag-bubble .bubble-arrow {
  color: #115586; }

.tag-set {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 2px;
  min-height: 26px; }
  .tag-set .tag {
    height: 16px; }

.room .tag-set {
  flex-wrap: nowrap; }

.tag-set.edited {
  background: white;
  border: thin solid #aab; }
  .tag-set.edited input {
    flex: 1 1 50px;
    margin-left: 5px; }
  .tag-set.edited input, .tag-set.edited input:focus {
    outline: none;
    border: none; }
  .tag-set.edited input.invalid {
    color: red; }
  .tag-set.edited .tag {
    pointer-events: none;
    padding: 3px 20px 3px 5px;
    position: relative; }
    .tag-set.edited .tag::after {
      position: absolute;
      border-radius: 6px;
      color: #eee;
      background: rgba(80, 80, 80, 0.5);
      margin-left: 4px;
      content: "x";
      font-size: 80%;
      cursor: pointer;
      pointer-events: all;
      padding: 0 4px 2px 4px;
      right: 4px;
      top: 4px; }
    .tag-set.edited .tag:hover::after {
      background: #bf7171; }

.autocomplete-tags {
  background: white;
  border: thin solid #333;
  display: flex;
  flex-wrap: wrap; }
  .autocomplete-tags .autocomplete-tag {
    cursor: pointer;
    margin: 4px;
    border: thin solid #ccc; }
    .autocomplete-tags .autocomplete-tag .tag-description {
      font-size: 90%;
      opacity: .8;
      padding: 4px; }
    .autocomplete-tags .autocomplete-tag:hover .tag-description {
      opacity: 1; }
    .autocomplete-tags .autocomplete-tag.selected {
      border: thin solid #999; }

#room-area #room-tags.tag-set {
  padding: 4px; }

.bubble {
  position: fixed;
  display: flex;
  flex-direction: row;
  z-index: 115; }
  .bubble .bubble-content {
    background: #222;
    color: #ccc;
    flex: 1 1 auto;
    padding: 8px;
    border-radius: 4px;
    min-width: 22px;
    min-height: 22px; }
    .bubble .bubble-content .bubble-title {
      font-weight: bold; }
    .bubble .bubble-content code {
      color: #ccc; }
    .bubble .bubble-content.text {
      max-width: 400px; }
  .bubble .bubble-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    color: #222; }
  .bubble ul {
    margin-before: 5px;
    margin-after: 5px;
    padding-start: 20px;
    -webkit-margin-before: 5px;
    -webkit-margin-after: 5px;
    -webkit-padding-start: 20px; }
  .bubble td:first-child {
    text-align: right;
    vertical-align: top;
    opacity: .85; }

.left-bottom-bubble {
  flex-direction: row; }
  .left-bottom-bubble .bubble-arrow {
    border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent currentColor;
    margin-top: 6px; }

.left-top-bubble {
  flex-direction: row;
  align-items: flex-end; }
  .left-top-bubble .bubble-arrow {
    border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent currentColor;
    margin-bottom: 10px; }

.right-bottom-bubble {
  flex-direction: row-reverse; }
  .right-bottom-bubble .bubble-arrow {
    border-width: 10px 17px 10px 0;
    border-color: transparent currentColor transparent transparent;
    margin-top: 7px; }

.right-top-bubble {
  flex-direction: row-reverse;
  align-items: flex-end; }
  .right-top-bubble .bubble-arrow {
    border-width: 10px 17px 10px 0;
    border-color: transparent currentColor transparent transparent;
    margin-bottom: 10px; }

.bottom-bubble {
  flex-direction: column-reverse;
  align-items: center; }
  .bottom-bubble .bubble-arrow {
    border-width: 0 10px 17px 10px;
    border-color: transparent transparent currentColor transparent; }

.bottom-left-bubble {
  flex-direction: column-reverse;
  align-items: flex-end; }
  .bottom-left-bubble .bubble-arrow {
    border-width: 0 10px 17px 10px;
    border-color: transparent transparent currentColor transparent;
    margin-right: 10px; }

.bottom-right-bubble {
  flex-direction: column-reverse;
  align-items: flex-start; }
  .bottom-right-bubble .bubble-arrow {
    border-width: 0 10px 17px 10px;
    border-color: transparent transparent currentColor transparent;
    margin-left: 8px; }

.top-bubble {
  flex-direction: column; }
  .top-bubble .bubble-arrow {
    margin-left: 60px;
    border-width: 17px 10px 0 10px;
    border-color: currentColor transparent transparent transparent; }

.top-left-bubble {
  flex-direction: column;
  align-items: flex-end; }
  .top-left-bubble .bubble-arrow {
    margin-right: 10px;
    border-width: 17px 10px 0 10px;
    border-color: currentColor transparent transparent transparent; }

.top-right-bubble {
  flex-direction: column;
  align-items: flex-start; }
  .top-right-bubble .bubble-arrow {
    margin-left: 8px;
    border-width: 17px 10px 0 10px;
    border-color: currentColor transparent transparent transparent; }

.upload-thumb {
  max-width: 190px;
  max-height: 130px; }

.upload-resize-dialog {
  display: flex;
  flex-direction: row;
  align-items: center; }
  .upload-resize-dialog select {
    margin-left: 10px; }

/* Tomorrow Theme */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
.prettyprint {
  background: white;
  font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  border: 1px solid #ccc;
  padding: 10px;
  /* Specify class=linenums on a pre to get line numbering */
  /* IE indents via margin-left */
  /* Alternate shading for lines */ }
  .prettyprint .pln {
    color: #4d4d4c; }
  @media screen {
    .prettyprint .str {
      color: #718c00; }
    .prettyprint .kwd {
      color: #8959a8; }
    .prettyprint .com {
      color: #8e908c; }
    .prettyprint .typ {
      color: #4271ae; }
    .prettyprint .lit {
      color: #f5871f; }
    .prettyprint .pun {
      color: #4d4d4c; }
    .prettyprint .opn {
      color: #4d4d4c; }
    .prettyprint .clo {
      color: #4d4d4c; }
    .prettyprint .tag {
      color: #c82829; }
    .prettyprint .atn {
      color: #f5871f; }
    .prettyprint .atv {
      color: #3e999f; }
    .prettyprint .dec {
      color: #f5871f; }
    .prettyprint .var {
      color: #c82829; }
    .prettyprint .fun {
      color: #4271ae; } }
  @media print, projection {
    .prettyprint .str {
      color: #006600; }
    .prettyprint .kwd {
      color: #006;
      font-weight: bold; }
    .prettyprint .com {
      color: #600;
      font-style: italic; }
    .prettyprint .typ {
      color: #404;
      font-weight: bold; }
    .prettyprint .lit {
      color: #004444; }
    .prettyprint .pun, .prettyprint .opn, .prettyprint .clo {
      color: #444400; }
    .prettyprint .tag {
      color: #006;
      font-weight: bold; }
    .prettyprint .atn {
      color: #440044; }
    .prettyprint .atv {
      color: #006600; } }
  .prettyprint ol.linenums {
    margin-top: 0;
    margin-bottom: 0; }
  .prettyprint li.L0,
  .prettyprint li.L1,
  .prettyprint li.L2,
  .prettyprint li.L3,
  .prettyprint li.L4,
  .prettyprint li.L5,
  .prettyprint li.L6,
  .prettyprint li.L7,
  .prettyprint li.L8,
  .prettyprint li.L9 {
    /* */ }
  .prettyprint li.L1,
  .prettyprint li.L3,
  .prettyprint li.L5,
  .prettyprint li.L7,
  .prettyprint li.L9 {
    /* */ }

.bronze-badge, .silver-badge, .gold-badge {
  border-radius: 3px;
  padding: 4px 5px 2px 4px;
  background-color: rgba(235, 243, 247, 0.93);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
  color: #222244;
  line-height: 1.9;
  white-space: nowrap; }

.badge-counts {
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center; }

.bronze-badge::before, .bronze-badge-count::before,
.silver-badge::before, .silver-badge-count::before,
.gold-badge::before, .gold-badge-count::before {
  content: "";
  display: inline-block;
  border-radius: 5px;
  height: 10px;
  width: 10px;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
  margin: 0 4px 0 0;
  background-color: #555; }

.bronze-badge::before, .bronze-badge-count::before {
  background-color: #d1a684; }

.silver-badge::before, .silver-badge-count::before {
  background-color: #b4b8bc; }

.gold-badge::before, .gold-badge-count::before {
  background-color: #fdcc02; }

.bronze-badge-count, .silver-badge-count, .gold-badge-count {
  margin: 0 4px; }

.faded-8 {
  opacity: .8; }

.badge-list {
  padding-left: 10px; }

.broadcast-editor {
  display: flex;
  flex-direction: column; }
  .broadcast-editor .broadcast-langs, .broadcast-editor .broadcast-content, .broadcast-editor .broadcast-tags {
    margin: 3px;
    flex: 0 0 auto;
    display: flex;
    align-items: center; }
    .broadcast-editor .broadcast-langs label, .broadcast-editor .broadcast-content label, .broadcast-editor .broadcast-tags label {
      margin: 0 5px 0 -2px; }
    .broadcast-editor .broadcast-langs .tag-set, .broadcast-editor .broadcast-content .tag-set, .broadcast-editor .broadcast-tags .tag-set {
      font-size: 12px; }
    .broadcast-editor .broadcast-langs textarea, .broadcast-editor .broadcast-content textarea, .broadcast-editor .broadcast-tags textarea {
      flex: 1 1 auto; }
  .broadcast-editor button {
    font-size: 12px;
    padding: 2px; }

.dice-roll-def {
  color: #002;
  cursor: pointer; }

.bubble .dice-roll-def {
  color: #eef; }

.graph-wrapper {
  overflow-x: auto; }
  .graph-wrapper > svg {
    margin: 2px; }
    .graph-wrapper > svg .xval {
      pointer-events: all; }
      .graph-wrapper > svg .xval:hover {
        fill: rgba(100, 100, 100, 0.3); }
    .graph-wrapper > svg .bar {
      pointer-events: none; }
    .graph-wrapper > svg .label {
      fill: #222; }
    .graph-wrapper > svg line.highlight {
      stroke: #44d; }
    .graph-wrapper > svg .label.highlight {
      fill: #44d; }
    .graph-wrapper > svg line, .graph-wrapper > svg path {
      pointer-events: none; }

.graph-legend {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 2px;
  vertical-align: middle; }

#localbot-menu {
  position: fixed;
  left: 100px;
  bottom: 10px;
  z-index: 25;
  display: flex;
  flex-direction: column-reverse;
  color: white;
  opacity: .8; }
  #localbot-menu .menu-opener {
    position: relative;
    width: 22px;
    height: 22px;
    background: rgba(9, 30, 90, 0.89);
    cursor: pointer;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 2px black;
    padding: 0 0 1px 1px; }
  #localbot-menu .menu-content {
    display: none;
    padding: 5px;
    background: rgba(9, 30, 90, 0.89);
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    box-shadow: 0 0 2px black;
    flex-direction: column; }
    #localbot-menu .menu-content .buttons {
      flex: 0 0 auto;
      display: flex;
      flex-direction: row; }
      #localbot-menu .menu-content .buttons button {
        flex: 1 1 auto; }
  #localbot-menu .localbot-handlers {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    max-height: 300px;
    align-items: stretch;
    width: 400px;
    overflow-y: auto; }
    #localbot-menu .localbot-handlers .localbot-handler {
      display: flex;
      align-items: center; }
      #localbot-menu .localbot-handlers .localbot-handler .on {
        font-size: 85%;
        flex: 0 0 130px;
        font-style: italic; }
        #localbot-menu .localbot-handlers .localbot-handler .on::before {
          content: "on";
          padding: 0 3px;
          opacity: .8; }
      #localbot-menu .localbot-handlers .localbot-handler .name {
        flex: 1 1 auto;
        cursor: pointer;
        text-overflow: ellipsis;
        overflow-x: hidden; }
  #localbot-menu:hover {
    opacity: 1;
    transition: opacity .2s; }
    #localbot-menu:hover .menu-opener {
      border-top-left-radius: 0;
      border-top-right-radius: 0; }
      #localbot-menu:hover .menu-opener::before {
        position: absolute;
        left: 0;
        right: 0;
        top: -3px;
        height: 6px;
        content: "";
        background: rgba(9, 30, 90, 0.89); }
    #localbot-menu:hover .menu-content {
      display: flex; }

.ludo-tribo-board-bg {
  background-color: #4d8080; }

.ludo-tribo-button, .ludo-tribo-replay-player button,
.ludo-flore-button, .ludo-flore-replay-player button {
  background: #2a4646;
  color: white; }
  .ludo-tribo-button.active, .ludo-tribo-replay-player button.active,
  .ludo-flore-button.active, .ludo-flore-replay-player button.active {
    color: #ffeb3b; }

.ludo-tribo-replay-player button,
.ludo-flore-replay-player button {
  font-family: "fontello";
  padding: 2px 1px 1px 1px;
  width: 22px;
  text-align: center; }

.message .content .box .mastodon {
  background: #282c37;
  padding: 8px;
  display: flex;
  flex-direction: column; }
  .message .content .box .mastodon a {
    color: #f5b392;
    text-decoration: none; }
    .message .content .box .mastodon a:hover {
      text-decoration: underline; }
  .message .content .box .mastodon p {
    padding: 2px; }
  .message .content .box .mastodon .mastodon-toot {
    display: flex;
    flex-direction: row;
    border-radius: 5px; }
  .message .content .box .mastodon .mastodon-left {
    flex: 0 0 60px;
    display: flex;
    justify-content: center; }
  .message .content .box .mastodon .mastodon-avatar {
    margin-top: 8px;
    max-width: 48px;
    max-height: 48px;
    border-radius: 5px; }
  .message .content .box .mastodon .mastodon-right {
    flex: 1 1 auto;
    display: flex;
    color: white;
    border-radius: 5px;
    flex-direction: column; }
  .message .content .box .mastodon .mastodon-head {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 5px; }
  .message .content .box .mastodon .mastodon-author-name {
    text-decoration: none;
    font-weight: bold; }
  .message .content .box .mastodon .mastodon-time {
    margin: 0 10px; }
  .message .content .box .mastodon .mastodon-medias {
    padding: 2px 7px; }

.roulette .dice-roll-def {
  color: #222; }

#mountyhall-view-panel {
  height: calc( 100vh - 250px);
  background: #51608b;
  padding: 0 5px 5px 5px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative; }
  #mountyhall-view-panel .button {
    padding: 2px 4px;
    border: thin solid rgba(229, 231, 235, 0.7);
    cursor: pointer; }
    #mountyhall-view-panel .button:hover {
      border: thin solid #e5e7eb;
      background: rgba(229, 231, 235, 0.7);
      color: #51608b; }
  #mountyhall-view-panel .head {
    color: #e5e7eb;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    padding: 0 5px;
    justify-content: space-between; }
    #mountyhall-view-panel .head .mountyhall-refresh-troll, #mountyhall-view-panel .head #mountyhall-team-refresh-button {
      margin: 0 5px; }

#mountyhall-view-search-panel {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 5px;
  width: 390px;
  box-sizing: border-box;
  box-shadow: 0 0 2px black;
  z-index: 100;
  background: #51608b;
  color: #e5e7eb;
  font-size: 12px;
  display: flex;
  flex-direction: column; }
  #mountyhall-view-search-panel .title {
    text-align: center;
    margin: 8px; }
  #mountyhall-view-search-panel .button {
    margin: 2px 0;
    align-self: center; }
  #mountyhall-view-search-panel .input-line {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 24px;
    margin: 2px 0; }
    #mountyhall-view-search-panel .input-line label:first-of-type {
      width: 70px; }
    #mountyhall-view-search-panel .input-line .filter-details {
      opacity: .4; }
    #mountyhall-view-search-panel .input-line input:first-of-type:checked ~ .filter-details {
      opacity: 1;
      transition: all .2s; }
    #mountyhall-view-search-panel .input-line input {
      margin: 0 4px; }

#mh-view-min-depth, #mh-view-max-depth {
  width: 40px; }

#mountyhall-view-update {
  display: flex;
  flex-direction: row; }

.mountyhall-view-wrapper {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  position: relative;
  overflow: hidden; }
  .mountyhall-view-wrapper::after {
    content: '';
    display: block;
    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; }

#mountyhall-view {
  flex: 1 1 100%;
  background: #eee;
  display: flex;
  flex-direction: column;
  overflow: hidden; }

.mh-cell {
  overflow: hidden;
  background: #fafafa;
  position: relative;
  vertical-align: middle;
  text-align: center; }
  .mh-cell .position {
    background: #444;
    font-size: 11px;
    color: white;
    height: 20px;
    line-height: 20px;
    text-align: center;
    pointer-events: none; }
  .mh-cell .nb-lieux {
    background: #444;
    color: white;
    text-align: center; }
  .mh-cell .lieu {
    display: block;
    background: #444;
    color: #eee;
    white-space: nowrap; }
    .mh-cell .lieu.trou {
      text-align: center; }
    .mh-cell .lieu:hover {
      background: #444;
      color: white; }
  .mh-cell .spot {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
    color: black;
    font-weight: bold; }
  .mh-cell .nb-monstres {
    background: brown;
    color: white;
    text-align: center; }
  .mh-cell .monstre {
    display: block;
    color: brown;
    text-decoration: none;
    white-space: nowrap; }
    .mh-cell .monstre.gowap {
      color: #c99b1f; }
    .mh-cell .monstre:hover {
      background: brown;
      color: white; }
  .mh-cell .nb-trolls {
    background: blue;
    color: white;
    text-align: center; }
  .mh-cell .troll {
    display: block;
    color: blue;
    text-decoration: none;
    white-space: nowrap; }
    .mh-cell .troll:hover {
      background: blue;
      color: white; }

.bubble.monstre {
  font-size: 11px; }
  .bubble.monstre tr:first-child th {
    text-align: center; }
  .bubble.monstre th {
    text-align: right; }
  .bubble.monstre .bubble-content {
    min-height: 40px; }
  .bubble.monstre .bubble-content, .bubble.monstre .bubble-content a {
    background-color: brown;
    color: #ddd; }
  .bubble.monstre .bubble-arrow {
    color: brown; }

.bubble .mh-cell .position {
  background: #222; }

.bubble .nb-trolls::after {
  content: ' trolls'; }

.bubble .nb-monstres::after {
  content: ' monstres'; }

.bubble .nb-lieux {
  display: none; }

.bubble .nb-trolls, .bubble .troll, .bubble .nb-monstres, .bubble .monstre, .bubble .lieu {
  font-size: 10px; }

#mountyhall-view-grid {
  font-size: 11px;
  display: table;
  border-collapse: collapse;
  cursor: crosshair;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  table-layout: fixed;
  margin: 500px; }
  #mountyhall-view-grid .filtered {
    display: none; }
  #mountyhall-view-grid .line {
    display: table-row; }
  #mountyhall-view-grid .line:nth-child(odd) .mh-cell:nth-child(odd),
  #mountyhall-view-grid .line:nth-child(even) .mh-cell:nth-child(even) {
    background: #e5e5cb; }
    #mountyhall-view-grid .line:nth-child(odd) .mh-cell:nth-child(odd).has-spot,
    #mountyhall-view-grid .line:nth-child(even) .mh-cell:nth-child(even).has-spot {
      background: rgba(253, 199, 30, 0.65); }
  #mountyhall-view-grid .mh-cell {
    display: table-cell;
    border: 1px solid #ccc; }
    #mountyhall-view-grid .mh-cell.origine {
      box-shadow: inset 0 0 25px rgba(255, 209, 0, 0.9);
      border: thick solid gold; }
    #mountyhall-view-grid .mh-cell .position {
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      display: none;
      opacity: .8; }
    #mountyhall-view-grid .mh-cell:hover .position {
      display: block; }
    #mountyhall-view-grid .mh-cell.has-spot {
      background: rgba(253, 199, 30, 0.65); }
  #mountyhall-view-grid.zoom0 .line {
    height: 12px; }
  #mountyhall-view-grid.zoom0 .mh-cell {
    border: none;
    font-size: 6px;
    line-height: 6px; }
    #mountyhall-view-grid.zoom0 .mh-cell.origine {
      border-right: thick solid gold;
      border-left: thick solid gold; }
    #mountyhall-view-grid.zoom0 .mh-cell .position {
      display: none; }
  #mountyhall-view-grid.zoom0 .age {
    display: none; }
  #mountyhall-view-grid.zoom0 .monstre, #mountyhall-view-grid.zoom0 .troll, #mountyhall-view-grid.zoom0 .lieu {
    display: none; }
  #mountyhall-view-grid.zoom0 .nb-lieux, #mountyhall-view-grid.zoom0 .nb-trolls {
    display: inline-block;
    width: 50%; }
  #mountyhall-view-grid.zoom1 .line {
    height: 19px; }
  #mountyhall-view-grid.zoom1 .mh-cell {
    font-size: 9px;
    line-height: 9px; }
    #mountyhall-view-grid.zoom1 .mh-cell .position {
      display: none; }
  #mountyhall-view-grid.zoom1 .age {
    display: none; }
  #mountyhall-view-grid.zoom1 .monstre, #mountyhall-view-grid.zoom1 .troll, #mountyhall-view-grid.zoom1 .lieu {
    display: none; }
  #mountyhall-view-grid.zoom1 .nb-lieux, #mountyhall-view-grid.zoom1 .nb-trolls {
    display: inline-block;
    width: 50%; }
  #mountyhall-view-grid.zoom2 .line {
    height: 31px; }
  #mountyhall-view-grid.zoom2 .mh-cell {
    font-size: 10px; }
    #mountyhall-view-grid.zoom2 .mh-cell .position {
      display: none; }
  #mountyhall-view-grid.zoom2 .age {
    display: none; }
  #mountyhall-view-grid.zoom2 .monstre, #mountyhall-view-grid.zoom2 .troll, #mountyhall-view-grid.zoom2 .lieu {
    display: none; }
  #mountyhall-view-grid.zoom2 .nb-monstres, #mountyhall-view-grid.zoom2 .nb-trolls, #mountyhall-view-grid.zoom2 .nb-lieux {
    padding: 2px 0; }
  #mountyhall-view-grid.zoom2 .nb-lieux, #mountyhall-view-grid.zoom2 .nb-trolls {
    display: inline-block;
    width: 50%; }
  #mountyhall-view-grid.zoom3 .line {
    height: 49px; }
  #mountyhall-view-grid.zoom3 .mh-cell {
    font-size: 11px; }
    #mountyhall-view-grid.zoom3 .mh-cell .position {
      display: none; }
  #mountyhall-view-grid.zoom3 .age {
    display: none; }
  #mountyhall-view-grid.zoom3 .monstre, #mountyhall-view-grid.zoom3 .troll, #mountyhall-view-grid.zoom3 .lieu {
    display: none; }
  #mountyhall-view-grid.zoom3 .nb-monstres, #mountyhall-view-grid.zoom3 .nb-trolls, #mountyhall-view-grid.zoom3 .nb-lieux {
    padding: 3px 0; }
  #mountyhall-view-grid.zoom3 .nb-lieux, #mountyhall-view-grid.zoom3 .nb-trolls {
    display: inline-block;
    width: 50%; }
  #mountyhall-view-grid.zoom4 .line {
    height: 78px; }
  #mountyhall-view-grid.zoom4 .mh-cell {
    font-size: 8px; }
    #mountyhall-view-grid.zoom4 .mh-cell .position {
      display: none; }
  #mountyhall-view-grid.zoom4 .age {
    display: none; }
  #mountyhall-view-grid.zoom4 .nb-monstres, #mountyhall-view-grid.zoom4 .nb-trolls, #mountyhall-view-grid.zoom4 .nb-lieux {
    display: none; }
  #mountyhall-view-grid.zoom5 .line {
    height: 126px; }
  #mountyhall-view-grid.zoom5 .mh-cell {
    font-size: 10px; }
  #mountyhall-view-grid.zoom5 .nb-monstres, #mountyhall-view-grid.zoom5 .nb-trolls, #mountyhall-view-grid.zoom5 .nb-lieux {
    display: none; }
  #mountyhall-view-grid.zoom6 .line {
    height: 201px; }
  #mountyhall-view-grid.zoom6 .nb-monstres, #mountyhall-view-grid.zoom6 .nb-trolls, #mountyhall-view-grid.zoom6 .nb-lieux {
    display: none; }

.message a.mountyhall {
  background: rgba(242, 222, 203, 0.15);
  padding: 2px;
  border-radius: 2px; }

.mh-troll-id-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: url(../../plugins/mountyhall/rsc/fond-parchemin.jpg);
  padding: 2px; }
  .mh-troll-id-card img {
    max-width: 60px;
    max-height: 60px; }
  .mh-troll-id-card p, .mh-troll-id-card a {
    color: black;
    margin: 4px;
    white-space: nowrap;
    max-width: 135px;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis; }
  .mh-troll-id-card > div {
    display: flex;
    flex-direction: column;
    justify-content: space-around; }

.mountyhall-bubble .bubble-content {
  max-height: 65vh;
  max-width: 700px;
  overflow-y: auto; }

#mountyhall-team-box > .mountyhall-team-troll {
  font-size: 80%;
  height: 20px; }

.mountyhall-team-troll {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 22px;
  line-height: 22px;
  background: linear-gradient(#EFF1F3, white);
  border-left-width: 5px;
  border-left-style: solid;
  border-left-color: transparent; }
  .mountyhall-team-troll .mountyhall-time-bar-wrapper {
    position: absolute;
    top: 0;
    bottom: 0; }
    .mountyhall-team-troll .mountyhall-time-bar-wrapper .mountyhall-time-bar {
      height: 100%;
      background: rgba(100, 100, 120, 0.24); }
  .mountyhall-team-troll div, .mountyhall-team-troll a {
    color: #222;
    white-space: nowrap;
    text-decoration: none; }
  .mountyhall-team-troll .nom {
    padding-left: 2px;
    text-overflow: ellipsis; }
  .mountyhall-team-troll .x, .mountyhall-team-troll .y, .mountyhall-team-troll .n, .mountyhall-team-troll pv, .mountyhall-team-troll .jdla-dla, .mountyhall-team-troll .dla, .mountyhall-team-troll .pv, .mountyhall-team-troll .pa, .mountyhall-team-troll .action, .mountyhall-team-troll .fat {
    text-align: center; }
  .mountyhall-team-troll .pv, .mountyhall-team-troll .jdla {
    text-align: right;
    padding-right: 2px; }
  .mountyhall-team-troll .obsolete {
    font-style: italic;
    font-size: 80%;
    margin-top: 2px; }
  .mountyhall-team-troll .pa {
    width: 15px; }
  .mountyhall-team-troll .pvMax::before {
    content: '/'; }
  .mountyhall-team-troll .dla {
    width: 37px; }
  .mountyhall-team-troll.health-red {
    border-left-color: red; }
  .mountyhall-team-troll.health-orange {
    border-left-color: orange; }
  .mountyhall-team-troll.health-yellow {
    border-left-color: #afc528; }
  .mountyhall-team-troll.health-green {
    border-left-color: green; }

#mountyhall-team-box {
  position: fixed;
  bottom: 100px;
  font-size: 90%;
  z-index: 25;
  left: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 2px black; }
  #mountyhall-team-box div, #mountyhall-team-box a {
    overflow: hidden; }
  #mountyhall-team-box .header {
    -moz-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    background: #51608b;
    line-height: 24px;
    height: 24px;
    color: #e5e7eb; }
    #mountyhall-team-box .header .buttons {
      width: 130px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 0 5px; }
  #mountyhall-team-box.minimized {
    width: 22px;
    box-shadow: none;
    overflow-y: hidden; }
    #mountyhall-team-box.minimized .mountyhall-team-troll {
      width: 0; }
    #mountyhall-team-box.minimized #mountyhall-team-trolls {
      overflow: hidden; }
    #mountyhall-team-box.minimized #mountyhall-team-refresh-button, #mountyhall-team-box.minimized #mountyhall-team-toggle-button {
      display: none; }
  #mountyhall-team-box.reduced .mountyhall-team-troll > div {
    transition: all .3s; }
  #mountyhall-team-box.reduced .nom {
    width: 42px; }
  #mountyhall-team-box.reduced .jdla-dla {
    width: 38px; }
  #mountyhall-team-box.reduced .raceNiveau, #mountyhall-team-box.reduced .x, #mountyhall-team-box.reduced .y, #mountyhall-team-box.reduced .n, #mountyhall-team-box.reduced .pv, #mountyhall-team-box.reduced .pvMax, #mountyhall-team-box.reduced .jdla, #mountyhall-team-box.reduced .action, #mountyhall-team-box.reduced .fat, #mountyhall-team-box.reduced .details {
    width: 0;
    padding: 0; }
    #mountyhall-team-box.reduced .raceNiveau::before, #mountyhall-team-box.reduced .x::before, #mountyhall-team-box.reduced .y::before, #mountyhall-team-box.reduced .n::before, #mountyhall-team-box.reduced .pv::before, #mountyhall-team-box.reduced .pvMax::before, #mountyhall-team-box.reduced .jdla::before, #mountyhall-team-box.reduced .action::before, #mountyhall-team-box.reduced .fat::before, #mountyhall-team-box.reduced .details::before {
      display: none; }
  #mountyhall-team-box.reduced #mountyhall-team-trolls .mountyhall-team-troll .dla ~ .dla {
    border-right: none; }
  #mountyhall-team-box.reduced .obsolete {
    width: 89px; }
  #mountyhall-team-box.reduced .wrapper1 {
    left: 60px;
    width: 37px; }
  #mountyhall-team-box.reduced .wrapper2 {
    left: 97px;
    width: 37px; }
  #mountyhall-team-box.full .mountyhall-team-troll > div {
    transition: all .3s; }
  #mountyhall-team-box.full .nom {
    width: 88px; }
  #mountyhall-team-box.full .x, #mountyhall-team-box.full .y, #mountyhall-team-box.full .n {
    width: 30px; }
  #mountyhall-team-box.full .pv {
    width: 30px; }
  #mountyhall-team-box.full .fat {
    width: 30px; }
  #mountyhall-team-box.full .pvMax {
    width: 30px; }
  #mountyhall-team-box.full .jdla {
    width: 32px;
    font-size: 85%; }
  #mountyhall-team-box.full .jdla-dla {
    width: 72px; }
  #mountyhall-team-box.full .obsolete {
    width: 189px; }
  #mountyhall-team-box.full .wrapper1 {
    left: 283px;
    width: 72px; }
  #mountyhall-team-box.full .wrapper2 {
    left: 355px;
    width: 72px; }
  #mountyhall-team-box.full .raceNiveau {
    width: 26px; }
  #mountyhall-team-box.full .dla {
    text-align: left; }
  #mountyhall-team-box.full .action {
    width: 30px; }
  #mountyhall-team-box.full .details {
    paddingi-right: 2px; }
    #mountyhall-team-box.full .details:empty {
      display: none; }
  #mountyhall-team-box #mountyhall-team-trolls {
    overflow-y: auto;
    max-height: 55vh; }
    #mountyhall-team-box #mountyhall-team-trolls .mountyhall-team-troll .pa, #mountyhall-team-box #mountyhall-team-trolls .mountyhall-team-troll .dla {
      border-right: thin dotted rgba(150, 150, 150, 0.7); }

.mountyhall-refresh-troll, #mountyhall-team-refresh-button {
  cursor: pointer; }
  .mountyhall-refresh-troll::before, #mountyhall-team-refresh-button::before {
    font-size: 110%;
    content: '\e834'; }
  .mountyhall-refresh-troll.disabled, .disabled#mountyhall-team-refresh-button {
    opacity: .2;
    cursor: auto; }

#mountyhall-team-open-view-button {
  cursor: pointer; }
  #mountyhall-team-open-view-button::before {
    font-size: 115%;
    content: '\e811'; }

#mountyhall-team-toggle-button, #mountyhall-team-minimize-button {
  cursor: pointer; }

.reduced #mountyhall-team-toggle-button {
  transform: rotate(0deg);
  transition: all .4s; }

.full #mountyhall-team-toggle-button {
  transform: rotate(-180deg);
  transition: all .4s; }

.minimized #mountyhall-team-minimize-button {
  transform: rotate(-180deg); }

.mountyhall-help-icon {
  width: 20px;
  height: 20px; }
  .mountyhall-help-icon::before {
    color: #e5e7eb;
    font-size: 20px;
    content: '\e80b'; }

.message .content .pragma.pragma-mhspot, .rendered .pragma.pragma-mhspot {
  color: #44d;
  cursor: pointer;
  opacity: 1; }

.spot-def {
  line-height: 24px; }
  .spot-def span {
    display: inline-block;
    width: 40px;
    text-align: right;
    margin-right: 1px;
    opacity: .8; }
  .spot-def .coord {
    width: 40px; }
  .spot-def .text {
    width: 210px; }

.spot-click-message {
  position: fixed;
  z-index: 150;
  pointer-events: none;
  bottom: 30px;
  left: 22%;
  right: 28%;
  text-align: center;
  line-height: 50px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  border-radius: 10px;
  font-weight: bold;
  font-size: 115%; }

body.sample {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 120%; }
  body.sample p a {
    color: #222; }

#snow-canvas {
  opacity: 1;
  transition: opacity .9s; }
  #snow-canvas.discreet {
    opacity: .2; }

.column-controller {
  padding: 2px; }
  .column-controller .icon-sort {
    cursor: pointer; }
    .column-controller .icon-sort.active {
      color: #44d; }

.tbl-graph-switch {
  margin-left: 0; }

.tbl-graph-col-choice {
  display: flex;
  flex-direction: row;
  align-items: center; }

.box .twitter {
  padding: 5px; }
  .box .twitter .tweet-first-line {
    display: flex;
    flex-direction: row;
    align-items: center; }
  .box .twitter a {
    text-decoration: none; }
    .box .twitter a .icon-twitter::before {
      font-size: 36px;
      color: #1da1f2;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
    .box .twitter a.twitter-timeline-link {
      display: block; }
  .box .twitter .avatar {
    margin-right: 5px;
    flex-shrink: 0;
    max-width: 50px;
    max-height: 50px;
    border-radius: 5px; }
  .box .twitter .tweet-core {
    flex-grow: 1; }
  .box .twitter .fullname {
    margin-left: 10px; }
    .box .twitter .fullname span {
      display: none; }
  .box .twitter .username, .box .twitter .box .twitter .time {
    font-size: 90%;
    opacity: .8;
    padding: 10px;
    text-decoration: none; }
  .box .twitter s {
    text-decoration: none; }
  .box .twitter .cards-media-container {
    text-align: center; }

.ufo {
  position: fixed;
  z-index: 500;
  pointer-events: none; }

@keyframes ufo-left-to-right-once {
  from {
    transform: translateX(-10vw) translateY(-300px) rotate(90deg) scale(0.2); }
  to {
    transform: translateX(130vw) translateY(-50px) rotate(90deg) scale(0.2); } }

@keyframes ufo-right-to-left-bottom {
  from {
    transform: translateX(120vw); }
  to {
    transform: translateX(-30vw); } }

@keyframes ufo-left-to-right-bottom {
  from {
    transform: translateX(-50vw); }
  to {
    transform: translateX(140vw); } }

@keyframes ufo-going-away-left {
  from {
    transform: scale(1.2) translateX(100vw) translateY(200px); }
  to {
    transform: scale(0.04) translateX(-40vw) translateY(-450px); } }

@keyframes ufo-catapulte {
  from {
    transform: translateX(0vw) translateY(200px) scale(1) rotate(0); }
  to {
    transform: translateX(20vw) translateY(-120vh) scale(0.02) rotate(500deg); } }

.attention-icon {
	right: 5px;
	top: 0px;
	z-index: 15;
	position: absolute;
	width: 28px;
	height: 28px;
	border-radius: 20px;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	opacity: 0;
	color: white;
}
.attention-icon:hover {
	border-radius: 20px 20px 0 0;
}
.attention-menu {
	position: absolute;
	right: 0px;
	top: 22px;
	z-index: 13;
	border-radius: 12px 0 12px 12px;
	font-size: 12px;
	color: white;
	font-weight: normal;
	padding: 20px 0;
}
.attention-menu p {
	font-style: italic;
}
.attention-menu-article {
	white-space: nowrap;
	padding: 4px;
}
.attention-menu-article:hover {
	background: rgba(200,200,200,.2);
}
.attention-action, .attention-action  .attention-menu {
	background: #666;
}
.attention-alert, .attention-alert .attention-menu {
	background: red;
}
.attention-alert.attention-seen, .attention-alert.attention-seen .attention-menu {
	background: green;
}
.message:hover .attention-icon.attention-action,
.message:hover .attention-icon.attention-alert.attention-seen {
	opacity: 1;
	transition: opacity .5s;
}
.attention-icon.attention-alert {
	opacity: 1;
	transition: opacity .6s;
}
.attention-icon.attention-alert:not(.attention-seen) {
	animation-name: pulse;
	animation-duration: .6s;
}
.attention-icon.attention-alert.attention-seen {
	opacity: 0;
}

@keyframes pulse {
	0% { transform: scale(.7); }
	50% { transform: scale(1.3); }
	100% { transform: scale(1); }
}

.commitStrip {
	text-align: center;
}


.box .commitStrip div.entry-content img {
	max-height: none;
	max-width: 100%;
}

.hashcolor {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 0 4px;
	vertical-align: middle;
}

.stackexchangebox {
	display: table-row;
	color: black;
	font-size: 95%;
	background: white;
}

.so-side {
	display: table-cell;
	vertical-align: top;
}
.so-main {
	display: table-cell;
	vertical-align: middle;
	max-width: 0px;
	width: 100%;
}

.so-side {
	width: 100px;
	text-align: center;
	padding-top: 5px;
}

.so-type {
	font-weight: bold;
}

.so-side img {
	max-width: 100%;
}

.so-tags span {
	background-color: #E0EAF1;
	color: #3E6D8E;
	border-color: #3E6D8E;
	border-style: solid;
	font-size: .85em;
	padding: 3px 4px;
	border-width: 0px 1px 1px 0px;
	margin-right: 5px;
}

.so-side .num {
	font-weight: bold;
	font-size: 120%;
	opacity: 0.8;
}

.so-accepted {
	color: green;
}

a.so-title {
	font-weight: bold;
	font-size: 110%;
	text-decoration: none;
}
a.so-title img {
	margin-right: 10px;
	vertical-align: middle;
	padding-bottom: 8px;
	width: 40px;
}

.so-body {
	/* border: thin dashed #aaa;*/
	padding: 5px;
	margin: 5px 0;
}
.so-comment {

}

.so-body pre {
	margin-left: 10px;
	overflow-x: auto;
}

.so-body code {
	color: #555;
	line-height: 1.1;
	font-size: 95%;
}

.so-chat-message .abstract {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.so-chat-message img.so-small-icon {
	height: 24px;
	width: 24px;
}
.so-chat-message .abstract > .username {
	flex: 0 0 auto;
	margin: 0 5px;
}
.so-chat-message .abstract > a {
	margin: 0 10px;
	flex: 0 0 auto;
}

.message .content table.survey-table td {
	border: initial;
}
.pc-votes {
	width: 120px;
	color: transparent;
	cursor: default;
}
.survey-table tr:hover .pc-votes {
	color: #222;
}
.survey-cb {
	-moz-appearance: radio;
	-webkit-appearance: radio;
}

.box .wikipedia {
	padding-top: 4px;
}
.box .wikipedia .wikipedia-icon {
	margin: 5px;
	max-height: 40px;
}
.box .wikipedia h1.firstHeading {
	text-align: left;
	margin-left: 60px;
}
.box .wikipedia .abstract {
	margin-top: -25px;
}

.xkcd {
	text-align: center;
}

.box .xkcd .abstract img {
	max-height: none;
	max-width: 100%;
}

.box .xkcd .abstract  a.xkcd-link:hover, .box .xkcd .abstract a.xkcd-link:focus {
	background-color: #FFF;
	color: #6E7B91;
	box-shadow: none;
}

.box .xkcd .abstract a.xkcd-link {
	background-color: #6E7B91;
	color: #FFF;
	border: 1px solid #333;
	font-size: 16px;
	font-weight: 600;
	padding: 1px 12px;
	margin: 0 4px;
	text-decoration: none;
	border-radius: 3px;
	box-shadow: 0 0 5px 0 grey;
}