git.squeep.com Git - akkoma/blob - priv/static/static/css/app.ea8ec0bbcc083797019b.css

   1 .login-form {
   2   display: -ms-flexbox;
   3   display: flex;
   4   -ms-flex-direction: column;
   5       flex-direction: column;
   6   padding: 0.6em;
   7 }
   8 .login-form .btn {
   9   min-height: 2em;
  10   width: 10em;
  11 }
  12 .login-form .register {
  13   -ms-flex: 1 1;
  14       flex: 1 1;
  15 }
  16 .login-form .login-bottom {
  17   margin-top: 1em;
  18   display: -ms-flexbox;
  19   display: flex;
  20   -ms-flex-direction: row;
  21       flex-direction: row;
  22   -ms-flex-align: center;
  23       align-items: center;
  24   -ms-flex-pack: justify;
  25       justify-content: space-between;
  26 }
  27 .login-form .form-group {
  28   display: -ms-flexbox;
  29   display: flex;
  30   -ms-flex-direction: column;
  31       flex-direction: column;
  32   padding: 0.3em 0.5em 0.6em;
  33   line-height: 24px;
  34 }
  35 .login-form .form-bottom {
  36   display: -ms-flexbox;
  37   display: flex;
  38   padding: 0.5em;
  39   height: 32px;
  40 }
  41 .login-form .form-bottom button {
  42   width: 10em;
  43 }
  44 .login-form .form-bottom p {
  45   margin: 0.35em;
  46   padding: 0.35em;
  47   display: -ms-flexbox;
  48   display: flex;
  49 }
  50 .login-form .error {
  51   text-align: center;
  52   animation-name: shakeError;
  53   animation-duration: 0.4s;
  54   animation-timing-function: ease-in-out;
  55 }
  56 .media-upload {
  57   cursor: pointer;
  58 }
  59 .media-upload .hidden-input-file {
  60   display: none;
  61 }
  62 .ScopeSelector .scope {
  63   display: inline-block;
  64   cursor: pointer;
  65   min-width: 1.3em;
  66   min-height: 1.3em;
  67   text-align: center;
  68 }
  69 .ScopeSelector .scope.selected svg {
  70   color: #b9b9ba;
  71   color: var(--lightText, #b9b9ba);
  72 }
  73 @charset "UTF-8";
  74 .checkbox {
  75   position: relative;
  76   display: inline-block;
  77   min-height: 1.2em;
  78 }
  79 .checkbox-indicator {
  80   position: relative;
  81   padding-left: 1.2em;
  82 }
  83 .checkbox-indicator::before {
  84   position: absolute;
  85   right: 0;
  86   top: 0;
  87   display: block;
  88   content: "\2713";
  89   transition: color 200ms;
  90   width: 1.1em;
  91   height: 1.1em;
  92   border-radius: 2px;
  93   border-radius: var(--checkboxRadius, 2px);
  94   box-shadow: 0px 0px 2px black inset;
  95   box-shadow: var(--inputShadow);
  96   background-color: #182230;
  97   background-color: var(--input, #182230);
  98   vertical-align: top;
  99   text-align: center;
 100   line-height: 1.1em;
 101   font-size: 1.1em;
 102   color: transparent;
 103   overflow: hidden;
 104   box-sizing: border-box;
 105 }
 106 .checkbox.disabled .checkbox-indicator::before,
 107 .checkbox.disabled .label {
 108   opacity: 0.5;
 109 }
 110 .checkbox.disabled .label {
 111   color: rgba(185, 185, 186, 0.5);
 112   color: var(--faint, rgba(185, 185, 186, 0.5));
 113 }
 114 .checkbox input[type=checkbox] {
 115   display: none;
 116 }
 117 .checkbox input[type=checkbox]:checked + .checkbox-indicator::before {
 118   color: #b9b9ba;
 119   color: var(--inputText, #b9b9ba);
 120 }
 121 .checkbox input[type=checkbox]:indeterminate + .checkbox-indicator::before {
 122   content: "\2013";
 123   color: #b9b9ba;
 124   color: var(--inputText, #b9b9ba);
 125 }
 126 .checkbox > span {
 127   margin-left: 0.5em;
 128 }
 129 .emoji-picker {
 130   display: -ms-flexbox;
 131   display: flex;
 132   -ms-flex-direction: column;
 133       flex-direction: column;
 134   position: absolute;
 135   right: 0;
 136   left: 0;
 137   margin: 0 !important;
 138   z-index: 100;
 139   background-color: #121a24;
 140   background-color: var(--popover, #121a24);
 141   color: #d8a070;
 142   color: var(--popoverText, #d8a070);
 143   --lightText: var(--popoverLightText, $fallback--faint);
 144   --faint: var(--popoverFaintText, $fallback--faint);
 145   --faintLink: var(--popoverFaintLink, $fallback--faint);
 146   --lightText: var(--popoverLightText, $fallback--lightText);
 147   --icon: var(--popoverIcon, $fallback--icon);
 148 }
 149 .emoji-picker .keep-open,
 150 .emoji-picker .too-many-emoji {
 151   padding: 7px;
 152   line-height: normal;
 153 }
 154 .emoji-picker .too-many-emoji {
 155   display: -ms-flexbox;
 156   display: flex;
 157   -ms-flex-direction: column;
 158       flex-direction: column;
 159 }
 160 .emoji-picker .keep-open-label {
 161   padding: 0 7px;
 162   display: -ms-flexbox;
 163   display: flex;
 164 }
 165 .emoji-picker .heading {
 166   display: -ms-flexbox;
 167   display: flex;
 168   height: 32px;
 169   padding: 10px 7px 5px;
 170 }
 171 .emoji-picker .content {
 172   display: -ms-flexbox;
 173   display: flex;
 174   -ms-flex-direction: column;
 175       flex-direction: column;
 176   -ms-flex: 1 1 auto;
 177       flex: 1 1 auto;
 178   min-height: 0px;
 179 }
 180 .emoji-picker .emoji-tabs {
 181   -ms-flex-positive: 1;
 182       flex-grow: 1;
 183 }
 184 .emoji-picker .emoji-groups {
 185   min-height: 200px;
 186 }
 187 .emoji-picker .additional-tabs {
 188   border-left: 1px solid;
 189   border-left-color: #666;
 190   border-left-color: var(--icon, #666);
 191   padding-left: 7px;
 192   -ms-flex: 0 0 auto;
 193       flex: 0 0 auto;
 194 }
 195 .emoji-picker .additional-tabs,
 196 .emoji-picker .emoji-tabs {
 197   display: block;
 198   min-width: 0;
 199   -ms-flex-preferred-size: auto;
 200       flex-basis: auto;
 201   -ms-flex-negative: 1;
 202       flex-shrink: 1;
 203 }
 204 .emoji-picker .additional-tabs-item,
 205 .emoji-picker .emoji-tabs-item {
 206   padding: 0 7px;
 207   cursor: pointer;
 208   font-size: 1.85em;
 209 }
 210 .emoji-picker .additional-tabs-item.disabled,
 211 .emoji-picker .emoji-tabs-item.disabled {
 212   opacity: 0.5;
 213   pointer-events: none;
 214 }
 215 .emoji-picker .additional-tabs-item.active,
 216 .emoji-picker .emoji-tabs-item.active {
 217   border-bottom: 4px solid;
 218 }
 219 .emoji-picker .additional-tabs-item.active svg,
 220 .emoji-picker .emoji-tabs-item.active svg {
 221   color: #b9b9ba;
 222   color: var(--lightText, #b9b9ba);
 223 }
 224 .emoji-picker .sticker-picker {
 225   -ms-flex: 1 1 auto;
 226       flex: 1 1 auto;
 227 }
 228 .emoji-picker .stickers-content,
 229 .emoji-picker .emoji-content {
 230   display: -ms-flexbox;
 231   display: flex;
 232   -ms-flex-direction: column;
 233       flex-direction: column;
 234   -ms-flex: 1 1 auto;
 235       flex: 1 1 auto;
 236   min-height: 0;
 237 }
 238 .emoji-picker .stickers-content.hidden,
 239 .emoji-picker .emoji-content.hidden {
 240   opacity: 0;
 241   pointer-events: none;
 242   position: absolute;
 243 }
 244 .emoji-picker .emoji-search {
 245   padding: 5px;
 246   -ms-flex: 0 0 auto;
 247       flex: 0 0 auto;
 248 }
 249 .emoji-picker .emoji-search input {
 250   width: 100%;
 251 }
 252 .emoji-picker .emoji-groups {
 253   -ms-flex: 1 1 1px;
 254       flex: 1 1 1px;
 255   position: relative;
 256   overflow: auto;
 257   -webkit-user-select: none;
 258      -moz-user-select: none;
 259       -ms-user-select: none;
 260           user-select: none;
 261   -webkit-mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat, linear-gradient(to bottom, white 0, transparent 100%) top no-repeat, linear-gradient(to top, white, white);
 262           mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat, linear-gradient(to bottom, white 0, transparent 100%) top no-repeat, linear-gradient(to top, white, white);
 263   transition: -webkit-mask-size 150ms;
 264   transition: mask-size 150ms;
 265   transition: mask-size 150ms, -webkit-mask-size 150ms;
 266   -webkit-mask-size: 100% 20px, 100% 20px, auto;
 267           mask-size: 100% 20px, 100% 20px, auto;
 268   -webkit-mask-composite: xor;
 269   mask-composite: exclude;
 270 }
 271 .emoji-picker .emoji-groups.scrolled-top {
 272   -webkit-mask-size: 100% 20px, 100% 0, auto;
 273           mask-size: 100% 20px, 100% 0, auto;
 274 }
 275 .emoji-picker .emoji-groups.scrolled-bottom {
 276   -webkit-mask-size: 100% 0, 100% 20px, auto;
 277           mask-size: 100% 0, 100% 20px, auto;
 278 }
 279 .emoji-picker .emoji-group {
 280   display: -ms-flexbox;
 281   display: flex;
 282   -ms-flex-align: center;
 283       align-items: center;
 284   -ms-flex-wrap: wrap;
 285       flex-wrap: wrap;
 286   padding-left: 5px;
 287   -ms-flex-pack: left;
 288       justify-content: left;
 289 }
 290 .emoji-picker .emoji-group-title {
 291   font-size: 0.85em;
 292   width: 100%;
 293   margin: 0;
 294 }
 295 .emoji-picker .emoji-group-title.disabled {
 296   display: none;
 297 }
 298 .emoji-picker .emoji-item {
 299   width: 32px;
 300   height: 32px;
 301   box-sizing: border-box;
 302   display: -ms-flexbox;
 303   display: flex;
 304   font-size: 32px;
 305   -ms-flex-align: center;
 306       align-items: center;
 307   -ms-flex-pack: center;
 308       justify-content: center;
 309   margin: 4px;
 310   cursor: pointer;
 311 }
 312 .emoji-picker .emoji-item img {
 313   -o-object-fit: contain;
 314      object-fit: contain;
 315   max-width: 100%;
 316   max-height: 100%;
 317 }
 318 .emoji-input {
 319   display: -ms-flexbox;
 320   display: flex;
 321   -ms-flex-direction: column;
 322       flex-direction: column;
 323   position: relative;
 324 }
 325 .emoji-input.with-picker input {
 326   padding-right: 30px;
 327 }
 328 .emoji-input .emoji-picker-icon {
 329   position: absolute;
 330   top: 0;
 331   right: 0;
 332   margin: 0.2em 0.25em;
 333   font-size: 1.3em;
 334   cursor: pointer;
 335   line-height: 24px;
 336 }
 337 .emoji-input .emoji-picker-icon:hover i {
 338   color: #b9b9ba;
 339   color: var(--text, #b9b9ba);
 340 }
 341 .emoji-input .emoji-picker-panel {
 342   position: absolute;
 343   z-index: 20;
 344   margin-top: 2px;
 345 }
 346 .emoji-input .emoji-picker-panel.hide {
 347   display: none;
 348 }
 349 .emoji-input .autocomplete-panel {
 350   position: absolute;
 351   z-index: 20;
 352   margin-top: 2px;
 353 }
 354 .emoji-input .autocomplete-panel.hide {
 355   display: none;
 356 }
 357 .emoji-input .autocomplete-panel-body {
 358   margin: 0 0.5em 0 0.5em;
 359   border-radius: 5px;
 360   border-radius: var(--tooltipRadius, 5px);
 361   box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
 362   box-shadow: var(--popupShadow);
 363   min-width: 75%;
 364   background-color: #121a24;
 365   background-color: var(--popover, #121a24);
 366   color: #d8a070;
 367   color: var(--popoverText, #d8a070);
 368   --faint: var(--popoverFaintText, $fallback--faint);
 369   --faintLink: var(--popoverFaintLink, $fallback--faint);
 370   --lightText: var(--popoverLightText, $fallback--lightText);
 371   --postLink: var(--popoverPostLink, $fallback--link);
 372   --postFaintLink: var(--popoverPostFaintLink, $fallback--link);
 373   --icon: var(--popoverIcon, $fallback--icon);
 374 }
 375 .emoji-input .autocomplete-item {
 376   display: -ms-flexbox;
 377   display: flex;
 378   cursor: pointer;
 379   padding: 0.2em 0.4em;
 380   border-bottom: 1px solid rgba(0, 0, 0, 0.4);
 381   height: 32px;
 382 }
 383 .emoji-input .autocomplete-item .image {
 384   width: 32px;
 385   height: 32px;
 386   line-height: 32px;
 387   text-align: center;
 388   font-size: 32px;
 389   margin-right: 4px;
 390 }
 391 .emoji-input .autocomplete-item .image img {
 392   width: 32px;
 393   height: 32px;
 394   -o-object-fit: contain;
 395      object-fit: contain;
 396 }
 397 .emoji-input .autocomplete-item .label {
 398   display: -ms-flexbox;
 399   display: flex;
 400   -ms-flex-direction: column;
 401       flex-direction: column;
 402   -ms-flex-pack: center;
 403       justify-content: center;
 404   margin: 0 0.1em 0 0.2em;
 405 }
 406 .emoji-input .autocomplete-item .label .displayText {
 407   line-height: 1.5;
 408 }
 409 .emoji-input .autocomplete-item .label .detailText {
 410   font-size: 9px;
 411   line-height: 9px;
 412 }
 413 .emoji-input .autocomplete-item.highlighted {
 414   background-color: #182230;
 415   background-color: var(--selectedMenuPopover, #182230);
 416   color: var(--selectedMenuPopoverText, #b9b9ba);
 417   --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
 418   --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
 419   --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
 420   --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
 421 }
 422 .emoji-input input, .emoji-input textarea {
 423   -ms-flex: 1 0 auto;
 424       flex: 1 0 auto;
 425 }
 426 /* TODO fix order of styles */
 427 label.Select {
 428   padding: 0;
 429 }
 430 label.Select select {
 431   -webkit-appearance: none;
 432   -moz-appearance: none;
 433   appearance: none;
 434   background: transparent;
 435   border: none;
 436   color: #b9b9ba;
 437   color: var(--inputText, --text, #b9b9ba);
 438   margin: 0;
 439   padding: 0 2em 0 0.2em;
 440   font-family: sans-serif;
 441   font-family: var(--inputFont, sans-serif);
 442   font-size: 1em;
 443   width: 100%;
 444   z-index: 1;
 445   height: 2em;
 446   line-height: 16px;
 447 }
 448 label.Select .select-down-icon {
 449   position: absolute;
 450   top: 0;
 451   bottom: 0;
 452   right: 5px;
 453   height: 100%;
 454   width: 0.875em;
 455   color: #b9b9ba;
 456   color: var(--inputText, #b9b9ba);
 457   line-height: 2;
 458   z-index: 0;
 459   pointer-events: none;
 460 }
 461 .poll-form {
 462   display: -ms-flexbox;
 463   display: flex;
 464   -ms-flex-direction: column;
 465       flex-direction: column;
 466   padding: 0 0.5em 0.5em;
 467 }
 468 .poll-form .add-option {
 469   -ms-flex-item-align: start;
 470       align-self: flex-start;
 471   padding-top: 0.25em;
 472   padding-left: 0.1em;
 473 }
 474 .poll-form .poll-option {
 475   display: -ms-flexbox;
 476   display: flex;
 477   -ms-flex-align: baseline;
 478       align-items: baseline;
 479   -ms-flex-pack: justify;
 480       justify-content: space-between;
 481   margin-bottom: 0.25em;
 482 }
 483 .poll-form .input-container {
 484   width: 100%;
 485 }
 486 .poll-form .input-container input {
 487   padding-right: 2.5em;
 488   width: 100%;
 489 }
 490 .poll-form .delete-option {
 491   width: 1.5em;
 492   margin-left: -1.5em;
 493   z-index: 1;
 494 }
 495 .poll-form .poll-type-expiry {
 496   margin-top: 0.5em;
 497   display: -ms-flexbox;
 498   display: flex;
 499   width: 100%;
 500 }
 501 .poll-form .poll-type {
 502   margin-right: 0.75em;
 503   -ms-flex: 1 1 60%;
 504       flex: 1 1 60%;
 505 }
 506 .poll-form .poll-type .poll-type-select {
 507   padding-right: 0.75em;
 508 }
 509 .poll-form .poll-expiry {
 510   display: -ms-flexbox;
 511   display: flex;
 512 }
 513 .poll-form .poll-expiry .expiry-amount {
 514   width: 3em;
 515   text-align: right;
 516 }
 517 .still-image {
 518   position: relative;
 519   line-height: 0;
 520   overflow: hidden;
 521   display: -ms-inline-flexbox;
 522   display: inline-flex;
 523   -ms-flex-align: center;
 524       align-items: center;
 525 }
 526 .still-image canvas {
 527   position: absolute;
 528   top: 0;
 529   bottom: 0;
 530   left: 0;
 531   right: 0;
 532   width: 100%;
 533   height: 100%;
 534   -o-object-fit: contain;
 535      object-fit: contain;
 536   visibility: var(--_still-image-canvas-visibility, visible);
 537 }
 538 .still-image img {
 539   width: 100%;
 540   height: 100%;
 541   -o-object-fit: contain;
 542      object-fit: contain;
 543 }
 544 .still-image.animated::before {
 545   zoom: var(--_still_image-label-scale, 1);
 546   content: "gif";
 547   position: absolute;
 548   line-height: 1;
 549   font-size: 0.7em;
 550   top: 0.5em;
 551   left: 0.5em;
 552   background: rgba(127, 127, 127, 0.5);
 553   color: #fff;
 554   display: block;
 555   padding: 2px 4px;
 556   border-radius: 5px;
 557   border-radius: var(--tooltipRadius, 5px);
 558   z-index: 2;
 559   visibility: var(--_still-image-label-visibility, visible);
 560 }
 561 .still-image.animated:hover canvas {
 562   display: none;
 563 }
 564 .still-image.animated:hover::before {
 565   visibility: var(--_still-image-label-visibility, hidden);
 566 }
 567 .still-image.animated img {
 568   visibility: var(--_still-image-img-visibility, hidden);
 569 }
 570 .still-image.animated:hover img {
 571   visibility: visible;
 572 }
 573 .Flash {
 574   display: inline-block;
 575   width: 100%;
 576   height: 100%;
 577   position: relative;
 578 }
 579 .Flash .player {
 580   height: 100%;
 581   width: 100%;
 582 }
 583 .Flash .placeholder {
 584   height: 100%;
 585   width: 100%;
 586   display: -ms-flexbox;
 587   display: flex;
 588   -ms-flex-align: center;
 589       align-items: center;
 590   -ms-flex-pack: center;
 591       justify-content: center;
 592   background: var(--bg);
 593   color: var(--link);
 594 }
 595 .Flash .hider {
 596   top: 0;
 597 }
 598 .Flash .label {
 599   text-align: center;
 600   -ms-flex: 1 1 0px;
 601       flex: 1 1 0;
 602   line-height: 1.2;
 603   white-space: normal;
 604   word-wrap: normal;
 605 }
 606 .Flash .hidden {
 607   display: none;
 608   visibility: "hidden";
 609 }
 610 .Attachment {
 611   display: -ms-inline-flexbox;
 612   display: inline-flex;
 613   -ms-flex-direction: column;
 614       flex-direction: column;
 615   position: relative;
 616   -ms-flex-item-align: start;
 617       align-self: flex-start;
 618   line-height: 0;
 619   height: 100%;
 620   border-style: solid;
 621   border-width: 1px;
 622   border-radius: 10px;
 623   border-radius: var(--attachmentRadius, 10px);
 624   border-color: #222;
 625   border-color: var(--border, #222);
 626 }
 627 .Attachment .attachment-wrapper {
 628   -ms-flex: 1 1 auto;
 629       flex: 1 1 auto;
 630   height: 100%;
 631   position: relative;
 632   overflow: hidden;
 633 }
 634 .Attachment .description-container {
 635   -ms-flex: 0 1 0px;
 636       flex: 0 1 0;
 637   display: -ms-flexbox;
 638   display: flex;
 639   padding-top: 0.5em;
 640   z-index: 1;
 641 }
 642 .Attachment .description-container p {
 643   -ms-flex: 1;
 644       flex: 1;
 645   text-align: center;
 646   line-height: 1.5;
 647   padding: 0.5em;
 648   margin: 0;
 649   white-space: nowrap;
 650   text-overflow: ellipsis;
 651   overflow: hidden;
 652 }
 653 .Attachment .description-container.-static {
 654   position: absolute;
 655   left: 0;
 656   right: 0;
 657   bottom: 0;
 658   padding-top: 0;
 659   background: var(--popover);
 660   box-shadow: var(--popupShadow);
 661 }
 662 .Attachment .description-field {
 663   -ms-flex: 1;
 664       flex: 1;
 665   min-width: 0;
 666 }
 667 .Attachment .placeholder-container, .Attachment .image-container, .Attachment .audio-container, .Attachment .video-container, .Attachment .flash-container, .Attachment .oembed-container {
 668   display: -ms-flexbox;
 669   display: flex;
 670   -ms-flex-pack: center;
 671       justify-content: center;
 672   width: 100%;
 673   height: 100%;
 674 }
 675 .Attachment .image-container .image {
 676   width: 100%;
 677   height: 100%;
 678 }
 679 .Attachment .flash-container .flash, .Attachment .flash-container video, .Attachment .video-container .flash, .Attachment .video-container video {
 680   width: 100%;
 681   height: 100%;
 682   -o-object-fit: contain;
 683      object-fit: contain;
 684   -ms-flex-item-align: center;
 685       -ms-grid-row-align: center;
 686       align-self: center;
 687 }
 688 .Attachment .audio-container {
 689   display: -ms-flexbox;
 690   display: flex;
 691   -ms-flex-align: end;
 692       align-items: flex-end;
 693 }
 694 .Attachment .audio-container audio {
 695   width: 100%;
 696   height: 100%;
 697 }
 698 .Attachment .placeholder-container {
 699   display: -ms-flexbox;
 700   display: flex;
 701   -ms-flex-direction: column;
 702       flex-direction: column;
 703   -ms-flex-align: center;
 704       align-items: center;
 705   -ms-flex-pack: center;
 706       justify-content: center;
 707   padding-top: 0.5em;
 708 }
 709 .Attachment .play-icon {
 710   position: absolute;
 711   font-size: 64px;
 712   top: calc(50% - 32px);
 713   left: calc(50% - 32px);
 714   color: rgba(255, 255, 255, 0.75);
 715   text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
 716 }
 717 .Attachment .play-icon::before {
 718   margin: 0;
 719 }
 720 .Attachment .attachment-buttons {
 721   display: -ms-flexbox;
 722   display: flex;
 723   position: absolute;
 724   right: 0;
 725   top: 0;
 726   margin-top: 0.5em;
 727   margin-right: 0.5em;
 728   z-index: 1;
 729 }
 730 .Attachment .attachment-buttons .attachment-button {
 731   padding: 0;
 732   border-radius: 5px;
 733   border-radius: var(--tooltipRadius, 5px);
 734   text-align: center;
 735   width: 2em;
 736   height: 2em;
 737   margin-left: 0.5em;
 738   font-size: 1.25em;
 739   background: rgba(230, 230, 230, 0.7);
 740 }
 741 .Attachment .attachment-buttons .attachment-button .svg-inline--fa {
 742   color: rgba(0, 0, 0, 0.6);
 743 }
 744 .Attachment .attachment-buttons .attachment-button:hover .svg-inline--fa {
 745   color: rgba(0, 0, 0, 0.9);
 746 }
 747 .Attachment .oembed-container {
 748   line-height: 1.2em;
 749   -ms-flex: 1 0 100%;
 750       flex: 1 0 100%;
 751   width: 100%;
 752   margin-right: 15px;
 753   display: -ms-flexbox;
 754   display: flex;
 755 }
 756 .Attachment .oembed-container img {
 757   width: 100%;
 758 }
 759 .Attachment .oembed-container .image {
 760   -ms-flex: 1;
 761       flex: 1;
 762 }
 763 .Attachment .oembed-container .image img {
 764   border: 0px;
 765   border-radius: 5px;
 766   height: 100%;
 767   -o-object-fit: cover;
 768      object-fit: cover;
 769 }
 770 .Attachment .oembed-container .text {
 771   -ms-flex: 2;
 772       flex: 2;
 773   margin: 8px;
 774   word-break: break-all;
 775 }
 776 .Attachment .oembed-container .text h1 {
 777   font-size: 1rem;
 778   margin: 0px;
 779 }
 780 .Attachment.-size-small .play-icon {
 781   zoom: 0.5;
 782   opacity: 0.7;
 783 }
 784 .Attachment.-size-small .attachment-buttons {
 785   zoom: 0.7;
 786   opacity: 0.5;
 787 }
 788 .Attachment.-editable {
 789   padding: 0.5em;
 790 }
 791 .Attachment.-editable .description-container, .Attachment.-editable .attachment-buttons {
 792   margin: 0;
 793 }
 794 .Attachment.-placeholder {
 795   display: inline-block;
 796   color: #d8a070;
 797   color: var(--postLink, #d8a070);
 798   overflow: hidden;
 799   white-space: nowrap;
 800   height: auto;
 801   line-height: 1.5;
 802 }
 803 .Attachment.-placeholder:not(.-editable) {
 804   border: none;
 805 }
 806 .Attachment.-placeholder.-editable {
 807   display: -ms-flexbox;
 808   display: flex;
 809   -ms-flex-direction: row;
 810       flex-direction: row;
 811   -ms-flex-align: baseline;
 812       align-items: baseline;
 813 }
 814 .Attachment.-placeholder.-editable .description-container, .Attachment.-placeholder.-editable .attachment-buttons {
 815   margin: 0;
 816   padding: 0;
 817   position: relative;
 818 }
 819 .Attachment.-placeholder.-editable .description-container {
 820   -ms-flex: 1;
 821       flex: 1;
 822   padding-left: 0.5em;
 823 }
 824 .Attachment.-placeholder.-editable .attachment-buttons {
 825   -ms-flex-order: 99;
 826       order: 99;
 827   -ms-flex-item-align: center;
 828       -ms-grid-row-align: center;
 829       align-self: center;
 830 }
 831 .Attachment.-placeholder a {
 832   display: inline-block;
 833   max-width: 100%;
 834   overflow: hidden;
 835   text-overflow: ellipsis;
 836 }
 837 .Attachment.-placeholder svg {
 838   color: inherit;
 839 }
 840 .Attachment.-loading {
 841   cursor: progress;
 842 }
 843 .Attachment.-contain-fit img,
 844 .Attachment.-contain-fit canvas {
 845   -o-object-fit: contain;
 846      object-fit: contain;
 847 }
 848 .Attachment.-cover-fit img,
 849 .Attachment.-cover-fit canvas {
 850   -o-object-fit: cover;
 851      object-fit: cover;
 852 }
 853 .Gallery .gallery-rows {
 854   display: -ms-flexbox;
 855   display: flex;
 856   -ms-flex-direction: column;
 857       flex-direction: column;
 858 }
 859 .Gallery .gallery-row {
 860   position: relative;
 861   height: 0;
 862   width: 100%;
 863   -ms-flex-positive: 1;
 864       flex-grow: 1;
 865 }
 866 .Gallery .gallery-row:not(:first-child) {
 867   margin-top: 0.5em;
 868 }
 869 .Gallery.-long .gallery-rows {
 870   max-height: 25em;
 871   overflow: hidden;
 872   -webkit-mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat, linear-gradient(to top, white, white);
 873           mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat, linear-gradient(to top, white, white);
 874   /* Autoprefixed seem to ignore this one, and also syntax is different */
 875   -webkit-mask-composite: xor;
 876   mask-composite: exclude;
 877 }
 878 .Gallery .many-attachments-text {
 879   text-align: center;
 880   line-height: 2;
 881 }
 882 .Gallery .many-attachments-buttons {
 883   display: -ms-flexbox;
 884   display: flex;
 885 }
 886 .Gallery .many-attachments-button {
 887   display: -ms-flexbox;
 888   display: flex;
 889   -ms-flex: 1;
 890       flex: 1;
 891   -ms-flex-pack: center;
 892       justify-content: center;
 893   line-height: 2;
 894 }
 895 .Gallery .many-attachments-button button {
 896   padding: 0 2em;
 897 }
 898 .Gallery .gallery-row.-grid, .Gallery .gallery-row.-minimal {
 899   height: auto;
 900 }
 901 .Gallery .gallery-row.-grid .gallery-row-inner, .Gallery .gallery-row.-minimal .gallery-row-inner {
 902   position: relative;
 903 }
 904 .Gallery .gallery-row-inner {
 905   position: absolute;
 906   top: 0;
 907   left: 0;
 908   right: 0;
 909   bottom: 0;
 910   display: -ms-flexbox;
 911   display: flex;
 912   -ms-flex-direction: row;
 913       flex-direction: row;
 914   -ms-flex-wrap: nowrap;
 915       flex-wrap: nowrap;
 916   -ms-flex-line-pack: stretch;
 917       align-content: stretch;
 918 }
 919 .Gallery .gallery-row-inner.-grid {
 920   width: 100%;
 921   height: auto;
 922   position: relative;
 923   display: -ms-grid;
 924   display: grid;
 925   grid-column-gap: 0.5em;
 926   grid-row-gap: 0.5em;
 927   -ms-grid-columns: (minmax(15em, 1fr))[auto-fill];
 928       grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
 929 }
 930 .Gallery .gallery-row-inner.-grid .gallery-item {
 931   margin: 0;
 932   height: 200px;
 933 }
 934 .Gallery .gallery-item {
 935   margin: 0 0.5em 0 0;
 936   -ms-flex-positive: 1;
 937       flex-grow: 1;
 938   height: 100%;
 939   box-sizing: border-box;
 940   min-width: 2em;
 941 }
 942 .Gallery .gallery-item:last-child {
 943   margin: 0;
 944 }
 945 .Avatar {
 946   --_avatarShadowBox: var(--avatarStatusShadow);
 947   --_avatarShadowFilter: var(--avatarStatusShadowFilter);
 948   --_avatarShadowInset: var(--avatarStatusShadowInset);
 949   --_still-image-label-visibility: hidden;
 950   display: inline-block;
 951   position: relative;
 952   width: 48px;
 953   height: 48px;
 954 }
 955 .Avatar.-compact {
 956   width: 32px;
 957   height: 32px;
 958   border-radius: 10px;
 959   border-radius: var(--avatarAltRadius, 10px);
 960 }
 961 .Avatar .avatar {
 962   width: 100%;
 963   height: 100%;
 964   box-shadow: var(--_avatarShadowBox);
 965   border-radius: 4px;
 966   border-radius: var(--avatarRadius, 4px);
 967 }
 968 .Avatar .avatar.-better-shadow {
 969   box-shadow: var(--_avatarShadowInset);
 970   filter: var(--_avatarShadowFilter);
 971 }
 972 .Avatar .avatar.-animated::before {
 973   display: none;
 974 }
 975 .Avatar .avatar.-compact {
 976   border-radius: 10px;
 977   border-radius: var(--avatarAltRadius, 10px);
 978 }
 979 .Avatar .avatar.-placeholder {
 980   background-color: #182230;
 981   background-color: var(--fg, #182230);
 982 }
 983 .Avatar img {
 984   width: 100%;
 985   height: 100%;
 986 }
 987 .Avatar .bot-indicator {
 988   position: absolute;
 989   bottom: 0;
 990   right: 0;
 991   margin: -0.2em;
 992   padding: 0.2em;
 993   background: rgba(127, 127, 127, 0.5);
 994   color: #fff;
 995   border-radius: var(--tooltipRadius);
 996 }
 997 .MentionLink {
 998   position: relative;
 999   white-space: normal;
1000   display: inline;
1001   color: var(--link);
1002   word-break: normal;
1003 }
1004 .MentionLink .new, .MentionLink .original {
1005   display: inline;
1006   border-radius: 2px;
1007 }
1008 .MentionLink .mention-avatar {
1009   border-radius: var(--avatarAltRadius, 10px);
1010   width: 1.5em;
1011   height: 1.5em;
1012   vertical-align: middle;
1013   -webkit-user-select: none;
1014      -moz-user-select: none;
1015       -ms-user-select: none;
1016           user-select: none;
1017   margin-right: 0.2em;
1018 }
1019 .MentionLink .full {
1020   position: absolute;
1021   display: inline-block;
1022   pointer-events: none;
1023   opacity: 0;
1024   top: 100%;
1025   left: 0;
1026   height: 100%;
1027   word-wrap: normal;
1028   white-space: nowrap;
1029   transition: opacity 0.2s ease;
1030   z-index: 1;
1031   margin-top: 0.25em;
1032   padding: 0.5em;
1033   -webkit-user-select: all;
1034      -moz-user-select: all;
1035       -ms-user-select: all;
1036           user-select: all;
1037 }
1038 .MentionLink .short.-with-tooltip, .MentionLink .you {
1039   -webkit-user-select: none;
1040      -moz-user-select: none;
1041       -ms-user-select: none;
1042           user-select: none;
1043 }
1044 .MentionLink .short, .MentionLink .full {
1045   white-space: nowrap;
1046 }
1047 .MentionLink .shortName {
1048   white-space: normal;
1049 }
1050 .MentionLink .new .at {
1051   color: var(--link);
1052   opacity: 0.8;
1053   display: inline-block;
1054   line-height: 1;
1055   padding: 0 0.1em;
1056   vertical-align: -25%;
1057   margin: 0;
1058 }
1059 .MentionLink .new.-striped .shortName, .MentionLink .new.-striped .full {
1060   background-image: repeating-linear-gradient(135deg, var(--____highlight-tintColor), var(--____highlight-tintColor) 5px, var(--____highlight-tintColor2) 5px, var(--____highlight-tintColor2) 10px);
1061 }
1062 .MentionLink .new.-solid .shortName, .MentionLink .new.-solid .full {
1063   background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
1064 }
1065 .MentionLink .new.-side .shortName, .MentionLink .new.-side .userNameFull {
1066   box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
1067 }
1068 .MentionLink:hover .new .full {
1069   opacity: 1;
1070   pointer-events: initial;
1071 }
1072 .MentionLink .serverName.-faded {
1073   color: var(--faintLink, #d8a070);
1074 }
1075 .MentionLink .full .-faded {
1076   color: var(--faint, rgba(185, 185, 186, 0.5));
1077 }
1078 .MentionsLine {
1079   word-break: break-all;
1080 }
1081 .MentionsLine .mention-link:not(:first-child)::before {
1082   content: " ";
1083 }
1084 .MentionsLine .showMoreLess {
1085   margin-left: 0.5em;
1086   white-space: normal;
1087   color: var(--link);
1088 }
1089 .HashtagLink {
1090   position: relative;
1091   white-space: normal;
1092   display: inline-block;
1093   color: var(--link);
1094 }
1095 .RichContent blockquote {
1096   margin: 0.2em 0 0.2em 2em;
1097   font-style: italic;
1098 }
1099 .RichContent pre {
1100   overflow: auto;
1101 }
1102 .RichContent code,
1103 .RichContent samp,
1104 .RichContent kbd,
1105 .RichContent var,
1106 .RichContent pre {
1107   font-family: var(--postCodeFont, monospace);
1108 }
1109 .RichContent p {
1110   margin: 0 0 1em 0;
1111 }
1112 .RichContent p:last-child {
1113   margin: 0 0 0 0;
1114 }
1115 .RichContent h1 {
1116   font-size: 1.1em;
1117   line-height: 1.2em;
1118   margin: 1.4em 0;
1119 }
1120 .RichContent h2 {
1121   font-size: 1.1em;
1122   margin: 1em 0;
1123 }
1124 .RichContent h3 {
1125   font-size: 1em;
1126   margin: 1.2em 0;
1127 }
1128 .RichContent h4 {
1129   margin: 1.1em 0;
1130 }
1131 .RichContent .img {
1132   display: inline-block;
1133 }
1134 .RichContent .emoji {
1135   display: inline-block;
1136   width: var(--emoji-size, 32px);
1137   height: var(--emoji-size, 32px);
1138 }
1139 .RichContent .img,
1140 .RichContent video {
1141   max-width: 100%;
1142   max-height: 400px;
1143   vertical-align: middle;
1144   -o-object-fit: contain;
1145      object-fit: contain;
1146 }
1147 .poll .votes {
1148   display: -ms-flexbox;
1149   display: flex;
1150   -ms-flex-direction: column;
1151       flex-direction: column;
1152   margin: 0 0 0.5em;
1153 }
1154 .poll .poll-option {
1155   margin: 0.75em 0.5em;
1156 }
1157 .poll .option-result {
1158   height: 100%;
1159   display: -ms-flexbox;
1160   display: flex;
1161   -ms-flex-direction: row;
1162       flex-direction: row;
1163   position: relative;
1164   color: #b9b9ba;
1165   color: var(--lightText, #b9b9ba);
1166 }
1167 .poll .option-result-label {
1168   display: -ms-flexbox;
1169   display: flex;
1170   -ms-flex-align: center;
1171       align-items: center;
1172   padding: 0.1em 0.25em;
1173   z-index: 1;
1174   word-break: break-word;
1175 }
1176 .poll .result-percentage {
1177   width: 3.5em;
1178   -ms-flex-negative: 0;
1179       flex-shrink: 0;
1180 }
1181 .poll .result-fill {
1182   height: 100%;
1183   position: absolute;
1184   color: #b9b9ba;
1185   color: var(--pollText, #b9b9ba);
1186   background-color: #151e2a;
1187   background-color: var(--poll, #151e2a);
1188   border-radius: 10px;
1189   border-radius: var(--panelRadius, 10px);
1190   top: 0;
1191   left: 0;
1192   transition: width 0.5s;
1193 }
1194 .poll .option-vote {
1195   display: -ms-flexbox;
1196   display: flex;
1197   -ms-flex-align: center;
1198       align-items: center;
1199 }
1200 .poll input {
1201   width: 3.5em;
1202 }
1203 .poll .footer {
1204   display: -ms-flexbox;
1205   display: flex;
1206   -ms-flex-align: center;
1207       align-items: center;
1208 }
1209 .poll.loading * {
1210   cursor: progress;
1211 }
1212 .poll .poll-vote-button {
1213   padding: 0 0.5em;
1214   margin-right: 0.5em;
1215 }
1216 .StatusBody {
1217   display: -ms-flexbox;
1218   display: flex;
1219   -ms-flex-direction: column;
1220       flex-direction: column;
1221 }
1222 .StatusBody .emoji {
1223   --_still_image-label-scale: 0.5;
1224   width: 50px;
1225   height: 50px;
1226 }
1227 .StatusBody .attachments {
1228   margin-top: 0.5em;
1229 }
1230 .StatusBody .text, .StatusBody .summary {
1231   font-family: var(--postFont, sans-serif);
1232   white-space: pre-wrap;
1233   overflow-wrap: break-word;
1234   word-wrap: break-word;
1235   word-break: break-word;
1236   line-height: var(--post-line-height);
1237 }
1238 .StatusBody .summary {
1239   display: block;
1240   font-style: italic;
1241   padding-bottom: 0.5em;
1242 }
1243 .StatusBody .text.-single-line {
1244   white-space: nowrap;
1245   text-overflow: ellipsis;
1246   overflow: hidden;
1247   height: 1.4em;
1248 }
1249 .StatusBody .summary-wrapper {
1250   margin-bottom: 0.5em;
1251   border-style: solid;
1252   border-width: 0 0 1px 0;
1253   border-color: var(--border, #222);
1254   -ms-flex-positive: 0;
1255       flex-grow: 0;
1256 }
1257 .StatusBody .summary-wrapper.-tall {
1258   position: relative;
1259 }
1260 .StatusBody .summary-wrapper.-tall .summary {
1261   max-height: 2em;
1262   overflow: hidden;
1263   white-space: nowrap;
1264   text-overflow: ellipsis;
1265 }
1266 .StatusBody .text-wrapper {
1267   display: -ms-flexbox;
1268   display: flex;
1269   -ms-flex-direction: column;
1270       flex-direction: column;
1271   -ms-flex-wrap: nowrap;
1272       flex-wrap: nowrap;
1273 }
1274 .StatusBody .text-wrapper.-tall-status {
1275   position: relative;
1276   height: 220px;
1277   overflow-x: hidden;
1278   overflow-y: hidden;
1279   z-index: 1;
1280 }
1281 .StatusBody .text-wrapper.-tall-status .media-body {
1282   min-height: 0;
1283   -webkit-mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat, linear-gradient(to top, white, white);
1284           mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat, linear-gradient(to top, white, white);
1285   /* Autoprefixed seem to ignore this one, and also syntax is different */
1286   -webkit-mask-composite: xor;
1287   mask-composite: exclude;
1288 }
1289 .StatusBody .tall-status-hider, .StatusBody .tall-subject-hider, .StatusBody .status-unhider, .StatusBody .cw-status-hider {
1290   display: inline-block;
1291   word-break: break-all;
1292   width: 100%;
1293   text-align: center;
1294 }
1295 .StatusBody .tall-status-hider {
1296   position: absolute;
1297   height: 70px;
1298   margin-top: 150px;
1299   line-height: 110px;
1300   z-index: 2;
1301 }
1302 .StatusBody .tall-subject-hider {
1303   padding-bottom: 0.5em;
1304 }
1305 .StatusBody .status-unhider, .StatusBody .cw-status-hider {
1306   word-break: break-all;
1307 }
1308 .StatusBody .status-unhider svg, .StatusBody .cw-status-hider svg {
1309   color: inherit;
1310 }
1311 .StatusBody .greentext {
1312   color: #0fa00f;
1313   color: var(--postGreentext, #0fa00f);
1314 }
1315 .StatusBody .cyantext {
1316   color: var(--postCyantext, #0095ff);
1317 }
1318 .StatusBody.-compact {
1319   -ms-flex-align: top;
1320       align-items: top;
1321   -ms-flex-direction: row;
1322       flex-direction: row;
1323   --emoji-size: 16px;
1324 }
1325 .StatusBody.-compact .body, .StatusBody.-compact .attachments {
1326   max-height: 3.25em;
1327 }
1328 .StatusBody.-compact .body {
1329   overflow: hidden;
1330   white-space: normal;
1331   min-width: 5em;
1332   -ms-flex: 5 1 auto;
1333       flex: 5 1 auto;
1334   -webkit-mask-size: auto 3.5em, auto auto;
1335           mask-size: auto 3.5em, auto auto;
1336   -webkit-mask-position: 0 0, 0 0;
1337           mask-position: 0 0, 0 0;
1338   -webkit-mask-repeat: repeat-x, repeat;
1339           mask-repeat: repeat-x, repeat;
1340   -webkit-mask-image: linear-gradient(to bottom, white 2em, transparent 3em);
1341           mask-image: linear-gradient(to bottom, white 2em, transparent 3em);
1342   /* Autoprefixed seem to ignore this one, and also syntax is different */
1343   -webkit-mask-composite: xor;
1344   mask-composite: exclude;
1345 }
1346 .StatusBody.-compact .attachments {
1347   margin-top: 0;
1348   -ms-flex: 1 1 0px;
1349       flex: 1 1 0;
1350   min-width: 5em;
1351   height: 100%;
1352   margin-left: 0.5em;
1353 }
1354 .StatusBody.-compact .summary-wrapper {
1355   line-height: inherit;
1356   margin: 0;
1357   border: none;
1358   display: inline-block;
1359 }
1360 .StatusBody.-compact .summary-wrapper .summary::after {
1361   content: ": ";
1362 }
1363 .StatusBody.-compact .text-wrapper {
1364   display: inline-block;
1365 }
1366 .link-preview-card {
1367   display: -ms-flexbox;
1368   display: flex;
1369   -ms-flex-direction: row;
1370       flex-direction: row;
1371   cursor: pointer;
1372   overflow: hidden;
1373   margin-top: 0.5em;
1374   color: #b9b9ba;
1375   color: var(--text, #b9b9ba);
1376   border-style: solid;
1377   border-width: 1px;
1378   border-radius: 10px;
1379   border-radius: var(--attachmentRadius, 10px);
1380   border-color: #222;
1381   border-color: var(--border, #222);
1382 }
1383 .link-preview-card .card-image {
1384   -ms-flex-negative: 0;
1385       flex-shrink: 0;
1386   width: 120px;
1387   max-width: 25%;
1388 }
1389 .link-preview-card .card-image img {
1390   width: 100%;
1391   height: 100%;
1392   -o-object-fit: cover;
1393      object-fit: cover;
1394   border-radius: 10px;
1395   border-radius: var(--attachmentRadius, 10px);
1396 }
1397 .link-preview-card .card-content {
1398   max-height: 100%;
1399   margin: 0.5em;
1400   display: -ms-flexbox;
1401   display: flex;
1402   -ms-flex-direction: column;
1403       flex-direction: column;
1404 }
1405 .link-preview-card .card-host {
1406   font-size: 0.85em;
1407 }
1408 .link-preview-card .card-description {
1409   margin: 0.5em 0 0 0;
1410   overflow: hidden;
1411   text-overflow: ellipsis;
1412   word-break: break-word;
1413   line-height: 1.2em;
1414   max-height: calc(1.2em * 3 - 1px);
1415 }
1416 .link-preview-card .nsfw-alert {
1417   margin: 2em 0;
1418 }
1419 .StatusContent {
1420   -ms-flex: 1;
1421       flex: 1;
1422   min-width: 0;
1423 }
1424 .StatusContent img.emoji, .StatusContent video.emoji {
1425   width: 50px;
1426   height: 50px;
1427 }
1428 .post-status-form {
1429   position: relative;
1430 }
1431 .post-status-form .attachments {
1432   margin-bottom: 0.5em;
1433 }
1434 .post-status-form .form-bottom {
1435   display: -ms-flexbox;
1436   display: flex;
1437   -ms-flex-pack: justify;
1438       justify-content: space-between;
1439   padding: 0.5em;
1440   height: 2.5em;
1441 }
1442 .post-status-form .form-bottom button {
1443   width: 10em;
1444 }
1445 .post-status-form .form-bottom p {
1446   margin: 0.35em;
1447   padding: 0.35em;
1448   display: -ms-flexbox;
1449   display: flex;
1450 }
1451 .post-status-form .form-bottom-left {
1452   display: -ms-flexbox;
1453   display: flex;
1454   -ms-flex: 1;
1455       flex: 1;
1456   padding-right: 7px;
1457   margin-right: 7px;
1458   max-width: 10em;
1459 }
1460 .post-status-form .preview-heading {
1461   display: -ms-flexbox;
1462   display: flex;
1463   padding-left: 0.5em;
1464 }
1465 .post-status-form .preview-toggle {
1466   -ms-flex: 1;
1467       flex: 1;
1468   cursor: pointer;
1469   -webkit-user-select: none;
1470      -moz-user-select: none;
1471       -ms-user-select: none;
1472           user-select: none;
1473 }
1474 .post-status-form .preview-toggle:hover {
1475   text-decoration: underline;
1476 }
1477 .post-status-form .preview-toggle svg, .post-status-form .preview-toggle i {
1478   margin-left: 0.2em;
1479   font-size: 0.8em;
1480   transform: rotate(90deg);
1481 }
1482 .post-status-form .preview-container {
1483   margin-bottom: 1em;
1484 }
1485 .post-status-form .preview-error {
1486   font-style: italic;
1487   color: rgba(185, 185, 186, 0.5);
1488   color: var(--faint, rgba(185, 185, 186, 0.5));
1489 }
1490 .post-status-form .preview-status {
1491   border: 1px solid #222;
1492   border: 1px solid var(--border, #222);
1493   border-radius: 5px;
1494   border-radius: var(--tooltipRadius, 5px);
1495   padding: 0.5em;
1496   margin: 0;
1497 }
1498 .post-status-form .text-format .only-format {
1499   color: rgba(185, 185, 186, 0.5);
1500   color: var(--faint, rgba(185, 185, 186, 0.5));
1501 }
1502 .post-status-form .visibility-tray {
1503   display: -ms-flexbox;
1504   display: flex;
1505   -ms-flex-pack: justify;
1506       justify-content: space-between;
1507   padding-top: 5px;
1508   -ms-flex-align: baseline;
1509       align-items: baseline;
1510 }
1511 .post-status-form .media-upload-icon, .post-status-form .poll-icon, .post-status-form .emoji-icon {
1512   font-size: 1.85em;
1513   line-height: 1.1;
1514   -ms-flex: 1;
1515       flex: 1;
1516   padding: 0 0.1em;
1517   display: -ms-flexbox;
1518   display: flex;
1519   -ms-flex-align: center;
1520       align-items: center;
1521 }
1522 .post-status-form .media-upload-icon.selected svg, .post-status-form .media-upload-icon.selected i, .post-status-form .media-upload-icon.selected label, .post-status-form .media-upload-icon:hover svg, .post-status-form .media-upload-icon:hover i, .post-status-form .media-upload-icon:hover label, .post-status-form .poll-icon.selected svg, .post-status-form .poll-icon.selected i, .post-status-form .poll-icon.selected label, .post-status-form .poll-icon:hover svg, .post-status-form .poll-icon:hover i, .post-status-form .poll-icon:hover label, .post-status-form .emoji-icon.selected svg, .post-status-form .emoji-icon.selected i, .post-status-form .emoji-icon.selected label, .post-status-form .emoji-icon:hover svg, .post-status-form .emoji-icon:hover i, .post-status-form .emoji-icon:hover label {
1523   color: #b9b9ba;
1524   color: var(--lightText, #b9b9ba);
1525 }
1526 .post-status-form .media-upload-icon.disabled svg, .post-status-form .media-upload-icon.disabled i, .post-status-form .poll-icon.disabled svg, .post-status-form .poll-icon.disabled i, .post-status-form .emoji-icon.disabled svg, .post-status-form .emoji-icon.disabled i {
1527   cursor: not-allowed;
1528   color: #666;
1529   color: var(--btnDisabledText, #666);
1530 }
1531 .post-status-form .media-upload-icon.disabled svg:hover, .post-status-form .media-upload-icon.disabled i:hover, .post-status-form .poll-icon.disabled svg:hover, .post-status-form .poll-icon.disabled i:hover, .post-status-form .emoji-icon.disabled svg:hover, .post-status-form .emoji-icon.disabled i:hover {
1532   color: #666;
1533   color: var(--btnDisabledText, #666);
1534 }
1535 .post-status-form .media-upload-icon {
1536   -ms-flex-order: 1;
1537       order: 1;
1538   -ms-flex-pack: left;
1539       justify-content: left;
1540 }
1541 .post-status-form .emoji-icon {
1542   -ms-flex-order: 2;
1543       order: 2;
1544   -ms-flex-pack: center;
1545       justify-content: center;
1546 }
1547 .post-status-form .poll-icon {
1548   -ms-flex-order: 3;
1549       order: 3;
1550   -ms-flex-pack: right;
1551       justify-content: right;
1552 }
1553 .post-status-form .error {
1554   text-align: center;
1555 }
1556 .post-status-form .media-upload-wrapper {
1557   margin-right: 0.2em;
1558   margin-bottom: 0.5em;
1559   width: 18em;
1560 }
1561 .post-status-form .media-upload-wrapper img, .post-status-form .media-upload-wrapper video {
1562   -o-object-fit: contain;
1563      object-fit: contain;
1564   max-height: 10em;
1565 }
1566 .post-status-form .media-upload-wrapper .video {
1567   max-height: 10em;
1568 }
1569 .post-status-form .media-upload-wrapper input {
1570   -ms-flex: 1;
1571       flex: 1;
1572   width: 100%;
1573 }
1574 .post-status-form .status-input-wrapper {
1575   display: -ms-flexbox;
1576   display: flex;
1577   position: relative;
1578   width: 100%;
1579   -ms-flex-direction: column;
1580       flex-direction: column;
1581 }
1582 .post-status-form .btn[disabled] {
1583   cursor: not-allowed;
1584 }
1585 .post-status-form form {
1586   display: -ms-flexbox;
1587   display: flex;
1588   -ms-flex-direction: column;
1589       flex-direction: column;
1590   margin: 0.6em;
1591   position: relative;
1592 }
1593 .post-status-form .form-group {
1594   display: -ms-flexbox;
1595   display: flex;
1596   -ms-flex-direction: column;
1597       flex-direction: column;
1598   padding: 0.25em 0.5em 0.5em;
1599   line-height: 1.85;
1600 }
1601 .post-status-form .form-post-body {
1602   box-sizing: content-box;
1603   overflow: hidden;
1604   transition: min-height 200ms 100ms;
1605   padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em);
1606   height: calc(var(--post-line-height) * 1em);
1607   min-height: calc(var(--post-line-height) * 1em);
1608   resize: none;
1609 }
1610 .post-status-form .form-post-body.scrollable-form {
1611   overflow-y: auto;
1612 }
1613 .post-status-form .main-input {
1614   position: relative;
1615 }
1616 .post-status-form .character-counter {
1617   position: absolute;
1618   bottom: 0;
1619   right: 0;
1620   padding: 0;
1621   margin: 0 0.5em;
1622 }
1623 .post-status-form .character-counter.error {
1624   color: #ff0000;
1625   color: var(--cRed, #ff0000);
1626 }
1627 .post-status-form .btn[disabled] {
1628   cursor: not-allowed;
1629 }
1630 @keyframes fade-in {
1631 from {
1632     opacity: 0;
1633 }
1634 to {
1635     opacity: 0.6;
1636 }
1637 }
1638 @keyframes fade-out {
1639 from {
1640     opacity: 0.6;
1641 }
1642 to {
1643     opacity: 0;
1644 }
1645 }
1646 .post-status-form .drop-indicator {
1647   position: absolute;
1648   width: 100%;
1649   height: 100%;
1650   font-size: 5em;
1651   display: -ms-flexbox;
1652   display: flex;
1653   -ms-flex-align: center;
1654       align-items: center;
1655   -ms-flex-pack: center;
1656       justify-content: center;
1657   opacity: 0.6;
1658   color: #b9b9ba;
1659   color: var(--text, #b9b9ba);
1660   background-color: #121a24;
1661   background-color: var(--bg, #121a24);
1662   border-radius: 5px;
1663   border-radius: var(--tooltipRadius, 5px);
1664   border: 2px dashed #b9b9ba;
1665   border: 2px dashed var(--text, #b9b9ba);
1666 }
1667 .remote-follow {
1668   max-width: 220px;
1669 }
1670 .remote-follow .remote-button {
1671   width: 100%;
1672   min-height: 2em;
1673 }
1674 .dark-overlay::before {
1675   bottom: 0;
1676   content: " ";
1677   display: block;
1678   cursor: default;
1679   left: 0;
1680   position: fixed;
1681   right: 0;
1682   top: 0;
1683   background: rgba(27, 31, 35, 0.5);
1684   z-index: 99;
1685 }
1686 .dialog-modal.panel {
1687   top: 0;
1688   left: 50%;
1689   max-height: 80vh;
1690   max-width: 90vw;
1691   margin: 15vh auto;
1692   position: fixed;
1693   transform: translateX(-50%);
1694   z-index: 999;
1695   cursor: default;
1696   display: block;
1697   background-color: #121a24;
1698   background-color: var(--bg, #121a24);
1699 }
1700 .dialog-modal.panel .dialog-modal-heading .title {
1701   text-align: center;
1702 }
1703 .dialog-modal.panel .dialog-modal-content {
1704   margin: 0;
1705   padding: 1rem 1rem;
1706   background-color: #121a24;
1707   background-color: var(--bg, #121a24);
1708   white-space: normal;
1709 }
1710 .dialog-modal.panel .dialog-modal-footer {
1711   margin: 0;
1712   padding: 0.5em 0.5em;
1713   background-color: #121a24;
1714   background-color: var(--bg, #121a24);
1715   border-top: 1px solid #222;
1716   border-top: 1px solid var(--border, #222);
1717   display: -ms-flexbox;
1718   display: flex;
1719   -ms-flex-pack: end;
1720       justify-content: flex-end;
1721 }
1722 .dialog-modal.panel .dialog-modal-footer button {
1723   width: auto;
1724   margin-left: 0.5rem;
1725 }
1726 @charset "UTF-8";
1727 .popover-trigger-button {
1728   display: inline-block;
1729 }
1730 .popover {
1731   z-index: 500;
1732   position: absolute;
1733   min-width: 0;
1734 }
1735 .popover-default {
1736   transition: opacity 0.3s;
1737   border-radius: 4px;
1738   border-radius: var(--btnRadius, 4px);
1739   background-color: #121a24;
1740   background-color: var(--popover, #121a24);
1741   color: #b9b9ba;
1742   color: var(--popoverText, #b9b9ba);
1743   --faint: var(--popoverFaintText, $fallback--faint);
1744   --faintLink: var(--popoverFaintLink, $fallback--faint);
1745   --lightText: var(--popoverLightText, $fallback--lightText);
1746   --postLink: var(--popoverPostLink, $fallback--link);
1747   --postFaintLink: var(--popoverPostFaintLink, $fallback--link);
1748   --icon: var(--popoverIcon, $fallback--icon);
1749 }
1750 .popover-default:after {
1751   content: "";
1752   position: absolute;
1753   top: 0;
1754   bottom: 0;
1755   left: 0;
1756   right: 0;
1757   z-index: 3;
1758   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
1759   box-shadow: var(--panelShadow);
1760   pointer-events: none;
1761 }
1762 .dropdown-menu {
1763   display: block;
1764   padding: 0.5rem 0;
1765   font-size: 1em;
1766   text-align: left;
1767   list-style: none;
1768   max-width: 100vw;
1769   z-index: 200;
1770   white-space: nowrap;
1771 }
1772 .dropdown-menu .dropdown-divider {
1773   height: 0;
1774   margin: 0.5rem 0;
1775   overflow: hidden;
1776   border-top: 1px solid #222;
1777   border-top: 1px solid var(--border, #222);
1778 }
1779 .dropdown-menu .dropdown-item {
1780   line-height: 21px;
1781   overflow: hidden;
1782   display: block;
1783   padding: 0.5em 0.75em;
1784   clear: both;
1785   font-weight: 400;
1786   text-align: inherit;
1787   white-space: nowrap;
1788   border: none;
1789   border-radius: 0px;
1790   background-color: transparent;
1791   box-shadow: none;
1792   width: 100%;
1793   height: 100%;
1794   box-sizing: border-box;
1795   --btnText: var(--popoverText, $fallback--text);
1796 }
1797 .dropdown-menu .dropdown-item-icon svg {
1798   width: 22px;
1799   margin-right: 0.75rem;
1800   color: var(--menuPopoverIcon, #666);
1801 }
1802 .dropdown-menu .dropdown-item:active, .dropdown-menu .dropdown-item:hover {
1803   background-color: #151e2a;
1804   background-color: var(--selectedMenuPopover, #151e2a);
1805   box-shadow: none;
1806   --btnText: var(--selectedMenuPopoverText, $fallback--link);
1807   --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
1808   --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
1809   --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
1810   --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
1811 }
1812 .dropdown-menu .dropdown-item:active svg, .dropdown-menu .dropdown-item:hover svg {
1813   color: var(--selectedMenuPopoverIcon, #666);
1814   --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
1815 }
1816 .dropdown-menu .dropdown-item .menu-checkbox {
1817   display: inline-block;
1818   vertical-align: middle;
1819   min-width: 22px;
1820   max-width: 22px;
1821   min-height: 22px;
1822   max-height: 22px;
1823   line-height: 22px;
1824   text-align: center;
1825   border-radius: 0px;
1826   background-color: #182230;
1827   background-color: var(--input, #182230);
1828   box-shadow: 0px 0px 2px black inset;
1829   box-shadow: var(--inputShadow);
1830   margin-right: 0.75em;
1831 }
1832 .dropdown-menu .dropdown-item .menu-checkbox.menu-checkbox-checked::after {
1833   font-size: 1.25em;
1834   content: "\2713";
1835 }
1836 .dropdown-menu .dropdown-item .menu-checkbox.-radio {
1837   border-radius: 9999px;
1838 }
1839 .dropdown-menu .dropdown-item .menu-checkbox.-radio.menu-checkbox-checked::after {
1840   font-size: 2em;
1841   content: "\2022";
1842 }
1843 .dropdown-menu .button-default.dropdown-item,
1844 .dropdown-menu .button-default.dropdown-item i[class*=icon-] {
1845   color: #b9b9ba;
1846   color: var(--btnText, #b9b9ba);
1847 }
1848 .dropdown-menu .button-default.dropdown-item:active {
1849   background-color: #151e2a;
1850   background-color: var(--selectedMenuPopover, #151e2a);
1851   color: #d8a070;
1852   color: var(--selectedMenuPopoverText, #d8a070);
1853 }
1854 .dropdown-menu .button-default.dropdown-item:disabled {
1855   color: #b9b9ba;
1856   color: var(--btnDisabledText, #b9b9ba);
1857 }
1858 .dropdown-menu .button-default.dropdown-item.toggled {
1859   color: #b9b9ba;
1860   color: var(--btnToggledText, #b9b9ba);
1861 }
1862 .moderation-tools-popover {
1863   height: 100%;
1864 }
1865 .moderation-tools-popover .trigger {
1866   display: -ms-flexbox !important;
1867   display: flex !important;
1868   height: 100%;
1869 }
1870 .moderation-tools-button svg, .moderation-tools-button i {
1871   font-size: 0.8em;
1872 }
1873 .AccountActions .ellipsis-button {
1874   width: 2.5em;
1875   margin: -0.5em 0;
1876   padding: 0.5em 0;
1877   text-align: center;
1878 }
1879 .AccountActions .ellipsis-button:not(:hover) .icon {
1880   color: #b9b9ba;
1881   color: var(--lightText, #b9b9ba);
1882 }
1883 .user-card {
1884   position: relative;
1885   z-index: 1;
1886 }
1887 .user-card:hover {
1888   --_still-image-img-visibility: visible;
1889   --_still-image-canvas-visibility: hidden;
1890   --_still-image-label-visibility: hidden;
1891 }
1892 .user-card .panel-heading {
1893   padding: 0.5em 0;
1894   text-align: center;
1895   box-shadow: none;
1896   background: transparent;
1897   -ms-flex-direction: column;
1898       flex-direction: column;
1899   -ms-flex-align: stretch;
1900       align-items: stretch;
1901   position: relative;
1902 }
1903 .user-card .panel-body {
1904   word-wrap: break-word;
1905   border-bottom-right-radius: inherit;
1906   border-bottom-left-radius: inherit;
1907   position: relative;
1908 }
1909 .user-card .background-image {
1910   position: absolute;
1911   top: 0;
1912   left: 0;
1913   right: 0;
1914   bottom: 0;
1915   -webkit-mask: linear-gradient(to top, white, transparent) bottom no-repeat, linear-gradient(to top, white, white);
1916           mask: linear-gradient(to top, white, transparent) bottom no-repeat, linear-gradient(to top, white, white);
1917   -webkit-mask-composite: xor;
1918   mask-composite: exclude;
1919   background-size: cover;
1920   -webkit-mask-size: 100% 60%;
1921           mask-size: 100% 60%;
1922   border-top-left-radius: calc(var(--panelRadius) - 1px);
1923   border-top-right-radius: calc(var(--panelRadius) - 1px);
1924   background-color: var(--profileBg);
1925   z-index: -2;
1926 }
1927 .user-card .background-image.hide-bio {
1928   -webkit-mask-size: 100% 40px;
1929           mask-size: 100% 40px;
1930 }
1931 .user-card-bio {
1932   text-align: center;
1933   display: block;
1934   line-height: 1.3;
1935   padding: 1em;
1936   margin: 0;
1937 }
1938 .user-card-bio a {
1939   color: #d8a070;
1940   color: var(--postLink, #d8a070);
1941 }
1942 .user-card-bio img {
1943   -o-object-fit: contain;
1944      object-fit: contain;
1945   vertical-align: middle;
1946   max-width: 100%;
1947   max-height: 400px;
1948 }
1949 .user-card-rounded-t {
1950   border-top-left-radius: 10px;
1951   border-top-left-radius: var(--panelRadius, 10px);
1952   border-top-right-radius: 10px;
1953   border-top-right-radius: var(--panelRadius, 10px);
1954 }
1955 .user-card-rounded {
1956   border-radius: 10px;
1957   border-radius: var(--panelRadius, 10px);
1958 }
1959 .user-card-bordered {
1960   border-width: 1px;
1961   border-style: solid;
1962   border-color: #222;
1963   border-color: var(--border, #222);
1964 }
1965 .user-info {
1966   color: #b9b9ba;
1967   color: var(--lightText, #b9b9ba);
1968   padding: 0 26px;
1969 }
1970 .user-info .container {
1971   min-width: 0;
1972   padding: 16px 0 6px;
1973   display: -ms-flexbox;
1974   display: flex;
1975   -ms-flex-align: start;
1976       align-items: flex-start;
1977   max-height: 56px;
1978 }
1979 .user-info .container > * {
1980   min-width: 0;
1981 }
1982 .user-info .container .Avatar {
1983   --_avatarShadowBox: var(--avatarShadow);
1984   --_avatarShadowFilter: var(--avatarShadowFilter);
1985   --_avatarShadowInset: var(--avatarShadowInset);
1986   -ms-flex: 1 0 100%;
1987       flex: 1 0 100%;
1988   width: 56px;
1989   height: 56px;
1990   -o-object-fit: cover;
1991      object-fit: cover;
1992 }
1993 .user-info-avatar-link {
1994   position: relative;
1995   cursor: pointer;
1996 }
1997 .user-info-avatar-link-overlay {
1998   position: absolute;
1999   left: 0;
2000   top: 0;
2001   right: 0;
2002   bottom: 0;
2003   background-color: rgba(0, 0, 0, 0.3);
2004   display: -ms-flexbox;
2005   display: flex;
2006   -ms-flex-pack: center;
2007       justify-content: center;
2008   -ms-flex-align: center;
2009       align-items: center;
2010   border-radius: 4px;
2011   border-radius: var(--avatarRadius, 4px);
2012   opacity: 0;
2013   transition: opacity 0.2s ease;
2014 }
2015 .user-info-avatar-link-overlay svg {
2016   color: #FFF;
2017 }
2018 .user-info-avatar-link:hover .user-info-avatar-link-overlay {
2019   opacity: 1;
2020 }
2021 .user-info .external-link-button, .user-info .edit-profile-button {
2022   cursor: pointer;
2023   width: 2.5em;
2024   text-align: center;
2025   margin: -0.5em 0;
2026   padding: 0.5em 0;
2027 }
2028 .user-info .external-link-button:not(:hover) .icon, .user-info .edit-profile-button:not(:hover) .icon {
2029   color: #b9b9ba;
2030   color: var(--lightText, #b9b9ba);
2031 }
2032 .user-info .user-summary {
2033   display: block;
2034   margin-left: 0.6em;
2035   text-align: left;
2036   text-overflow: ellipsis;
2037   white-space: nowrap;
2038   -ms-flex: 1 1 0px;
2039       flex: 1 1 0;
2040   z-index: 1;
2041   line-height: 2em;
2042   --emoji-size: 1.7em;
2043 }
2044 .user-info .user-summary .top-line,
2045 .user-info .user-summary .bottom-line {
2046   display: -ms-flexbox;
2047   display: flex;
2048 }
2049 .user-info .user-name {
2050   text-overflow: ellipsis;
2051   overflow: hidden;
2052   -ms-flex: 1 1 auto;
2053       flex: 1 1 auto;
2054   margin-right: 1em;
2055   font-size: 1.1em;
2056 }
2057 .user-info .bottom-line {
2058   font-weight: light;
2059   font-size: 1.1em;
2060   -ms-flex-align: baseline;
2061       align-items: baseline;
2062 }
2063 .user-info .bottom-line .lock-icon {
2064   margin-left: 0.5em;
2065 }
2066 .user-info .bottom-line .user-screen-name {
2067   min-width: 1px;
2068   -ms-flex: 0 1 auto;
2069       flex: 0 1 auto;
2070   text-overflow: ellipsis;
2071   overflow: hidden;
2072   color: #b9b9ba;
2073   color: var(--lightText, #b9b9ba);
2074 }
2075 .user-info .bottom-line .dailyAvg {
2076   min-width: 1px;
2077   -ms-flex: 0 0 auto;
2078       flex: 0 0 auto;
2079   margin-left: 1em;
2080   font-size: 0.7em;
2081   color: #b9b9ba;
2082   color: var(--text, #b9b9ba);
2083 }
2084 .user-info .bottom-line .user-role {
2085   -ms-flex: none;
2086       flex: none;
2087   color: #b9b9ba;
2088   color: var(--alertNeutralText, #b9b9ba);
2089   background-color: #182230;
2090   background-color: var(--alertNeutral, #182230);
2091 }
2092 .user-info .user-meta {
2093   margin-bottom: 0.15em;
2094   display: -ms-flexbox;
2095   display: flex;
2096   -ms-flex-align: baseline;
2097       align-items: baseline;
2098   line-height: 22px;
2099   -ms-flex-wrap: wrap;
2100       flex-wrap: wrap;
2101 }
2102 .user-info .user-meta .following {
2103   -ms-flex: 1 0 auto;
2104       flex: 1 0 auto;
2105   margin: 0;
2106   margin-bottom: 0.25em;
2107   text-align: left;
2108 }
2109 .user-info .user-meta .highlighter {
2110   -ms-flex: 0 1 auto;
2111       flex: 0 1 auto;
2112   display: -ms-flexbox;
2113   display: flex;
2114   -ms-flex-wrap: wrap;
2115       flex-wrap: wrap;
2116   margin-right: -0.5em;
2117   -ms-flex-item-align: start;
2118       align-self: start;
2119 }
2120 .user-info .user-meta .highlighter .userHighlightCl {
2121   padding: 2px 10px;
2122   -ms-flex: 1 0 auto;
2123       flex: 1 0 auto;
2124 }
2125 .user-info .user-meta .highlighter .userHighlightSel {
2126   padding-top: 0;
2127   padding-bottom: 0;
2128   -ms-flex: 1 0 auto;
2129       flex: 1 0 auto;
2130 }
2131 .user-info .user-meta .highlighter .userHighlightText {
2132   width: 70px;
2133   -ms-flex: 1 0 auto;
2134       flex: 1 0 auto;
2135 }
2136 .user-info .user-meta .highlighter .userHighlightCl,
2137 .user-info .user-meta .highlighter .userHighlightText,
2138 .user-info .user-meta .highlighter .userHighlightSel {
2139   vertical-align: top;
2140   margin-right: 0.5em;
2141   margin-bottom: 0.25em;
2142 }
2143 .user-info .user-interactions {
2144   position: relative;
2145   display: -ms-flexbox;
2146   display: flex;
2147   -ms-flex-flow: row wrap;
2148       flex-flow: row wrap;
2149   margin-right: -0.75em;
2150 }
2151 .user-info .user-interactions > * {
2152   margin: 0 0.75em 0.6em 0;
2153   white-space: nowrap;
2154   min-width: 95px;
2155 }
2156 .user-info .user-interactions button {
2157   margin: 0;
2158 }
2159 .sidebar .edit-profile-button {
2160   display: none;
2161 }
2162 .user-counts {
2163   display: -ms-flexbox;
2164   display: flex;
2165   line-height: 16px;
2166   padding: 0.5em 1.5em 0em 1.5em;
2167   text-align: center;
2168   -ms-flex-pack: justify;
2169       justify-content: space-between;
2170   color: #b9b9ba;
2171   color: var(--lightText, #b9b9ba);
2172   -ms-flex-wrap: wrap;
2173       flex-wrap: wrap;
2174 }
2175 .user-count {
2176   -ms-flex: 1 0 auto;
2177       flex: 1 0 auto;
2178   padding: 0.5em 0 0.5em 0;
2179   margin: 0 0.5em;
2180 }
2181 .user-count h5 {
2182   font-size: 1em;
2183   font-weight: bolder;
2184   margin: 0 0 0.25em;
2185 }
2186 .user-count a {
2187   text-decoration: none;
2188 }
2189 .user-panel .signed-in {
2190   overflow: visible;
2191   z-index: 10;
2192 }
2193 .NavPanel .panel {
2194   overflow: hidden;
2195   box-shadow: var(--panelShadow);
2196 }
2197 .NavPanel ul {
2198   list-style: none;
2199   margin: 0;
2200   padding: 0;
2201 }
2202 .NavPanel li {
2203   position: relative;
2204   border-bottom: 1px solid;
2205   border-color: #222;
2206   border-color: var(--border, #222);
2207   padding: 0;
2208 }
2209 .NavPanel li:first-child .menu-item {
2210   border-top-right-radius: 10px;
2211   border-top-right-radius: var(--panelRadius, 10px);
2212   border-top-left-radius: 10px;
2213   border-top-left-radius: var(--panelRadius, 10px);
2214 }
2215 .NavPanel li:last-child .menu-item {
2216   border-bottom-right-radius: 10px;
2217   border-bottom-right-radius: var(--panelRadius, 10px);
2218   border-bottom-left-radius: 10px;
2219   border-bottom-left-radius: var(--panelRadius, 10px);
2220 }
2221 .NavPanel li:last-child {
2222   border: none;
2223 }
2224 .NavPanel .menu-item {
2225   display: block;
2226   box-sizing: border-box;
2227   height: 3.5em;
2228   line-height: 3.5em;
2229   padding: 0 1em;
2230   width: 100%;
2231   color: #d8a070;
2232   color: var(--link, #d8a070);
2233 }
2234 .NavPanel .menu-item:hover {
2235   background-color: #151e2a;
2236   background-color: var(--selectedMenu, #151e2a);
2237   color: #d8a070;
2238   color: var(--selectedMenuText, #d8a070);
2239   --faint: var(--selectedMenuFaintText, $fallback--faint);
2240   --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
2241   --lightText: var(--selectedMenuLightText, $fallback--lightText);
2242   --icon: var(--selectedMenuIcon, $fallback--icon);
2243 }
2244 .NavPanel .menu-item.router-link-active {
2245   font-weight: bolder;
2246   background-color: #151e2a;
2247   background-color: var(--selectedMenu, #151e2a);
2248   color: #b9b9ba;
2249   color: var(--selectedMenuText, #b9b9ba);
2250   --faint: var(--selectedMenuFaintText, $fallback--faint);
2251   --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
2252   --lightText: var(--selectedMenuLightText, $fallback--lightText);
2253   --icon: var(--selectedMenuIcon, $fallback--icon);
2254 }
2255 .NavPanel .menu-item.router-link-active:hover {
2256   text-decoration: underline;
2257 }
2258 .NavPanel .timelines-chevron {
2259   margin-left: 0.8em;
2260   font-size: 1.1em;
2261 }
2262 .NavPanel .timelines-background {
2263   padding: 0 0 0 0.6em;
2264   background-color: #151e2a;
2265   background-color: var(--selectedMenu, #151e2a);
2266   border-top: 1px solid;
2267   border-color: #222;
2268   border-color: var(--border, #222);
2269 }
2270 .NavPanel .timelines {
2271   background-color: #121a24;
2272   background-color: var(--bg, #121a24);
2273 }
2274 .NavPanel .fa-scale-110 {
2275   margin-right: 0.8em;
2276 }
2277 .NavPanel .badge {
2278   position: absolute;
2279   right: 0.6rem;
2280   top: 1.25em;
2281 }
2282 .features-panel li {
2283   line-height: 24px;
2284 }
2285 .who-to-follow * {
2286   vertical-align: middle;
2287 }
2288 .who-to-follow img {
2289   width: 32px;
2290   height: 32px;
2291 }
2292 .who-to-follow {
2293   padding: 0em 1em;
2294   margin: 0px;
2295 }
2296 .who-to-follow-items {
2297   white-space: nowrap;
2298   overflow: hidden;
2299   text-overflow: ellipsis;
2300   padding: 0px;
2301   margin: 1em 0em;
2302 }
2303 .who-to-follow-more {
2304   padding: 0px;
2305   margin: 1em 0em;
2306   text-align: center;
2307 }
2308 .floating-shout {
2309   position: fixed;
2310   bottom: 0.5em;
2311   z-index: 1000;
2312   max-width: 25em;
2313 }
2314 .floating-shout.-left {
2315   left: 0.5em;
2316 }
2317 .floating-shout:not(.-left) {
2318   right: 0.5em;
2319 }
2320 .shout-panel .shout-heading {
2321   cursor: pointer;
2322 }
2323 .shout-panel .shout-heading .icon {
2324   color: #b9b9ba;
2325   color: var(--panelText, #b9b9ba);
2326   margin-right: 0.5em;
2327 }
2328 .shout-panel .shout-heading .title {
2329   display: -ms-flexbox;
2330   display: flex;
2331   -ms-flex-pack: justify;
2332       justify-content: space-between;
2333   -ms-flex-align: center;
2334       align-items: center;
2335 }
2336 .shout-panel .shout-window {
2337   overflow-y: auto;
2338   overflow-x: hidden;
2339   max-height: 20em;
2340 }
2341 .shout-panel .shout-window-container {
2342   height: 100%;
2343 }
2344 .shout-panel .shout-message {
2345   display: -ms-flexbox;
2346   display: flex;
2347   padding: 0.2em 0.5em;
2348 }
2349 .shout-panel .shout-avatar img {
2350   height: 24px;
2351   width: 24px;
2352   border-radius: 4px;
2353   border-radius: var(--avatarRadius, 4px);
2354   margin-right: 0.5em;
2355   margin-top: 0.25em;
2356 }
2357 .shout-panel .shout-input {
2358   display: -ms-flexbox;
2359   display: flex;
2360 }
2361 .shout-panel .shout-input textarea {
2362   -ms-flex: 1;
2363       flex: 1;
2364   margin: 0.6em;
2365   min-height: 3.5em;
2366   resize: none;
2367 }
2368 .shout-panel .shout-panel .title {
2369   display: -ms-flexbox;
2370   display: flex;
2371   -ms-flex-pack: justify;
2372       justify-content: space-between;
2373 }
2374 .modal-view {
2375   z-index: 2000;
2376   position: fixed;
2377   top: 0;
2378   left: 0;
2379   right: 0;
2380   bottom: 0;
2381   display: -ms-flexbox;
2382   display: flex;
2383   -ms-flex-pack: center;
2384       justify-content: center;
2385   -ms-flex-align: center;
2386       align-items: center;
2387   overflow: auto;
2388   pointer-events: none;
2389   animation-duration: 0.2s;
2390   animation-name: modal-background-fadein;
2391   opacity: 0;
2392 }
2393 .modal-view > * {
2394   pointer-events: initial;
2395 }
2396 .modal-view.modal-background {
2397   pointer-events: initial;
2398   background-color: rgba(0, 0, 0, 0.5);
2399 }
2400 .modal-view.open {
2401   opacity: 1;
2402 }
2403 @keyframes modal-background-fadein {
2404 from {
2405     background-color: rgba(0, 0, 0, 0);
2406 }
2407 to {
2408     background-color: rgba(0, 0, 0, 0.5);
2409 }
2410 }
2411 .panel-loading {
2412   display: -ms-flexbox;
2413   display: flex;
2414   height: 100%;
2415   -ms-flex-align: center;
2416       align-items: center;
2417   -ms-flex-pack: center;
2418       justify-content: center;
2419   font-size: 2em;
2420   color: #b9b9ba;
2421   color: var(--text, #b9b9ba);
2422 }
2423 .panel-loading .loading-text svg {
2424   line-height: 0;
2425   vertical-align: middle;
2426   color: #b9b9ba;
2427   color: var(--text, #b9b9ba);
2428 }
2429 .async-component-error {
2430   display: -ms-flexbox;
2431   display: flex;
2432   height: 100%;
2433   -ms-flex-align: center;
2434       align-items: center;
2435   -ms-flex-pack: center;
2436       justify-content: center;
2437 }
2438 .async-component-error .btn {
2439   margin: 0.5em;
2440   padding: 0.5em 2em;
2441 }
2442 .settings-modal {
2443   overflow: hidden;
2444 }
2445 .settings-modal .setting-list,
2446 .settings-modal .option-list {
2447   list-style-type: none;
2448   padding-left: 2em;
2449 }
2450 .settings-modal .setting-list li,
2451 .settings-modal .option-list li {
2452   margin-bottom: 0.5em;
2453 }
2454 .settings-modal .setting-list .suboptions,
2455 .settings-modal .option-list .suboptions {
2456   margin-top: 0.3em;
2457 }
2458 .settings-modal.peek .settings-modal-panel {
2459   /* Explanation:
2460    * Modal is positioned vertically centered.
2461    * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
2462    * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
2463    * + 100% - we move modal completely off-screen, it's top boundary touches
2464    *   bottom of the screen
2465    * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
2466    */
2467   transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
2468 }
2469 @media all and (max-width: 800px) {
2470 .settings-modal.peek .settings-modal-panel {
2471     /* For mobile, the modal takes 100% of the available screen.
2472        This ensures the minimized modal is always 50px above the browser bottom bar regardless of whether or not it is visible.
2473     */
2474     transform: translateY(calc(100% - 50px));
2475 }
2476 }
2477 .settings-modal .settings-modal-panel {
2478   overflow: hidden;
2479   transition: transform;
2480   transition-timing-function: ease-in-out;
2481   transition-duration: 300ms;
2482   width: 1000px;
2483   max-width: 90vw;
2484   height: 90vh;
2485 }
2486 @media all and (max-width: 800px) {
2487 .settings-modal .settings-modal-panel {
2488     max-width: 100vw;
2489     height: 100%;
2490 }
2491 }
2492 .settings-modal .settings-modal-panel > .panel-body {
2493   height: 100%;
2494   overflow-y: hidden;
2495 }
2496 .settings-modal .settings-modal-panel > .panel-body .btn {
2497   min-height: 2em;
2498   min-width: 10em;
2499   padding: 0 2em;
2500 }
2501 .settings-modal .settings-footer {
2502   display: -ms-flexbox;
2503   display: flex;
2504 }
2505 .settings-modal .settings-footer > * {
2506   margin-right: 0.5em;
2507 }
2508 .settings-modal .settings-footer .extra-content {
2509   display: -ms-flexbox;
2510   display: flex;
2511   -ms-flex-positive: 1;
2512       flex-grow: 1;
2513 }
2514 .modal-view.media-modal-view {
2515   z-index: 9000;
2516   -ms-flex-direction: column;
2517       flex-direction: column;
2518   overflow: hidden;
2519 }
2520 .modal-view.media-modal-view .modal-view-button-arrow,
2521 .modal-view.media-modal-view .modal-view-button-hide {
2522   opacity: 0.75;
2523 }
2524 .modal-view.media-modal-view .modal-view-button-arrow:focus, .modal-view.media-modal-view .modal-view-button-arrow:hover,
2525 .modal-view.media-modal-view .modal-view-button-hide:focus,
2526 .modal-view.media-modal-view .modal-view-button-hide:hover {
2527   outline: none;
2528   box-shadow: none;
2529 }
2530 .modal-view.media-modal-view .modal-view-button-arrow:hover,
2531 .modal-view.media-modal-view .modal-view-button-hide:hover {
2532   opacity: 1;
2533 }
2534 @keyframes media-fadein {
2535 from {
2536     opacity: 0;
2537 }
2538 to {
2539     opacity: 1;
2540 }
2541 }
2542 .media-modal-view .modal-image-container {
2543   display: -ms-flexbox;
2544   display: flex;
2545   overflow: hidden;
2546   -ms-flex-align: center;
2547       align-items: center;
2548   -ms-flex-direction: column;
2549       flex-direction: column;
2550   max-width: 100%;
2551   max-height: 100%;
2552   width: 100%;
2553   height: 100%;
2554   -ms-flex-positive: 1;
2555       flex-grow: 1;
2556   -ms-flex-pack: center;
2557       justify-content: center;
2558 }
2559 .media-modal-view .modal-image-container-inner {
2560   width: 100%;
2561   height: 100%;
2562   -ms-flex-positive: 1;
2563       flex-grow: 1;
2564   display: -ms-flexbox;
2565   display: flex;
2566   -ms-flex-direction: column;
2567       flex-direction: column;
2568   -ms-flex-align: center;
2569       align-items: center;
2570   -ms-flex-pack: center;
2571       justify-content: center;
2572 }
2573 .media-modal-view .description,
2574 .media-modal-view .counter {
2575   /* Hardcoded since background is also hardcoded */
2576   color: white;
2577   margin-top: 1em;
2578   text-shadow: 0 0 10px black, 0 0 10px black;
2579   padding: 0.2em 2em;
2580 }
2581 .media-modal-view .description {
2582   -ms-flex: 0 0 auto;
2583       flex: 0 0 auto;
2584   overflow-y: auto;
2585   min-height: 1em;
2586   max-width: 500px;
2587   max-height: 9.5em;
2588   word-break: break-all;
2589 }
2590 .media-modal-view .modal-image {
2591   max-width: 100%;
2592   max-height: 100%;
2593   image-orientation: from-image;
2594   animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
2595 }
2596 .media-modal-view .modal-image.loading {
2597   opacity: 0.5;
2598 }
2599 .media-modal-view .loading-spinner {
2600   width: 100%;
2601   height: 100%;
2602   position: absolute;
2603   pointer-events: none;
2604   display: -ms-flexbox;
2605   display: flex;
2606   -ms-flex-pack: center;
2607       justify-content: center;
2608   -ms-flex-align: center;
2609       align-items: center;
2610 }
2611 .media-modal-view .loading-spinner svg {
2612   color: white;
2613 }
2614 .media-modal-view .modal-view-button {
2615   border: 0;
2616   padding: 0;
2617   opacity: 0;
2618   box-shadow: none;
2619   background: none;
2620   -webkit-appearance: none;
2621      -moz-appearance: none;
2622           appearance: none;
2623   overflow: visible;
2624   cursor: pointer;
2625   transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
2626   height: 3em;
2627   width: 3em;
2628 }
2629 .media-modal-view .modal-view-button .button-icon {
2630   position: absolute;
2631   height: 3em;
2632   width: 3em;
2633   font-size: 1rem;
2634   line-height: 3em;
2635   color: #FFF;
2636   text-align: center;
2637   background-color: rgba(0, 0, 0, 0.3);
2638 }
2639 .media-modal-view .modal-view-button-arrow {
2640   position: absolute;
2641   display: block;
2642   top: 50%;
2643   margin-top: calc(3em / 2);
2644   width: 3em;
2645   height: 3em;
2646 }
2647 .media-modal-view .modal-view-button-arrow .arrow-icon {
2648   position: absolute;
2649   top: 0;
2650   line-height: 3em;
2651   color: #FFF;
2652   text-align: center;
2653   background-color: rgba(0, 0, 0, 0.3);
2654 }
2655 .media-modal-view .modal-view-button-arrow--prev {
2656   left: 0;
2657 }
2658 .media-modal-view .modal-view-button-arrow--prev .arrow-icon {
2659   left: 0.5em;
2660 }
2661 .media-modal-view .modal-view-button-arrow--next {
2662   right: 0;
2663 }
2664 .media-modal-view .modal-view-button-arrow--next .arrow-icon {
2665   right: 0.5em;
2666 }
2667 .media-modal-view .modal-view-button-hide {
2668   position: absolute;
2669   top: 0;
2670   right: 0;
2671 }
2672 .media-modal-view .modal-view-button-hide .button-icon {
2673   top: 0.5em;
2674   right: 0.5em;
2675 }
2676 .side-drawer-container {
2677   position: fixed;
2678   z-index: 1000;
2679   top: 0;
2680   left: 0;
2681   width: 100%;
2682   height: 100%;
2683   display: -ms-flexbox;
2684   display: flex;
2685   -ms-flex-align: stretch;
2686       align-items: stretch;
2687   transition-duration: 0s;
2688   transition-property: transform;
2689 }
2690 .side-drawer-container-open {
2691   transform: translate(0%);
2692 }
2693 .side-drawer-container-closed {
2694   transition-delay: 0.35s;
2695   transform: translate(-100%);
2696 }
2697 .side-drawer-darken {
2698   top: 0;
2699   left: 0;
2700   width: 100vw;
2701   height: 100vh;
2702   position: fixed;
2703   z-index: -1;
2704   transition: 0.35s;
2705   transition-property: background-color;
2706   background-color: rgba(0, 0, 0, 0.5);
2707 }
2708 .side-drawer-darken-closed {
2709   background-color: rgba(0, 0, 0, 0);
2710 }
2711 .side-drawer-click-outside {
2712   -ms-flex: 1 1 100%;
2713       flex: 1 1 100%;
2714 }
2715 .side-drawer {
2716   overflow-x: hidden;
2717   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
2718   transition: 0.35s;
2719   transition-property: transform;
2720   margin: 0 0 0 -100px;
2721   padding: 0 0 1em 100px;
2722   width: 80%;
2723   max-width: 20em;
2724   -ms-flex: 0 0 80%;
2725       flex: 0 0 80%;
2726   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
2727   box-shadow: var(--panelShadow);
2728   background-color: #121a24;
2729   background-color: var(--popover, #121a24);
2730   color: #d8a070;
2731   color: var(--popoverText, #d8a070);
2732   --faint: var(--popoverFaintText, $fallback--faint);
2733   --faintLink: var(--popoverFaintLink, $fallback--faint);
2734   --lightText: var(--popoverLightText, $fallback--lightText);
2735   --icon: var(--popoverIcon, $fallback--icon);
2736 }
2737 .side-drawer .badge {
2738   margin-left: 10px;
2739 }
2740 .side-drawer-logo-wrapper {
2741   display: -ms-flexbox;
2742   display: flex;
2743   -ms-flex-align: center;
2744       align-items: center;
2745   padding: 0.85em;
2746 }
2747 .side-drawer-logo-wrapper img {
2748   -ms-flex: none;
2749       flex: none;
2750   height: 50px;
2751   margin-right: 0.85em;
2752 }
2753 .side-drawer-logo-wrapper span {
2754   overflow: hidden;
2755   text-overflow: ellipsis;
2756   white-space: nowrap;
2757 }
2758 .side-drawer-click-outside-closed {
2759   -ms-flex: 0 0 0px;
2760       flex: 0 0 0;
2761 }
2762 .side-drawer-closed {
2763   transform: translate(-100%);
2764 }
2765 .side-drawer-heading {
2766   background: transparent;
2767   -ms-flex-direction: column;
2768       flex-direction: column;
2769   -ms-flex-align: stretch;
2770       align-items: stretch;
2771   display: -ms-flexbox;
2772   display: flex;
2773   padding: 0;
2774   margin: 0;
2775 }
2776 .side-drawer ul {
2777   list-style: none;
2778   margin: 0;
2779   padding: 0;
2780   border-bottom: 1px solid;
2781   border-color: #222;
2782   border-color: var(--border, #222);
2783 }
2784 .side-drawer ul:last-child {
2785   border: 0;
2786 }
2787 .side-drawer li {
2788   padding: 0;
2789 }
2790 .side-drawer li a, .side-drawer li button {
2791   box-sizing: border-box;
2792   display: block;
2793   height: 3em;
2794   line-height: 3em;
2795   padding: 0 0.7em;
2796 }
2797 .side-drawer li a:hover, .side-drawer li button:hover {
2798   background-color: #151e2a;
2799   background-color: var(--selectedMenuPopover, #151e2a);
2800   color: #b9b9ba;
2801   color: var(--selectedMenuPopoverText, #b9b9ba);
2802   --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
2803   --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
2804   --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
2805   --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
2806 }
2807 .MobilePostButton.button-default {
2808   width: 5em;
2809   height: 5em;
2810   border-radius: 100%;
2811   position: fixed;
2812   bottom: 1.5em;
2813   right: 1.5em;
2814   background-color: #182230;
2815   background-color: var(--btn, #182230);
2816   display: -ms-flexbox;
2817   display: flex;
2818   -ms-flex-pack: center;
2819       justify-content: center;
2820   -ms-flex-align: center;
2821       align-items: center;
2822   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3);
2823   z-index: 10;
2824   transition: 0.35s transform;
2825   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
2826 }
2827 .MobilePostButton.hidden {
2828   transform: translateY(150%);
2829 }
2830 .MobilePostButton svg {
2831   font-size: 1.5em;
2832   color: #b9b9ba;
2833   color: var(--text, #b9b9ba);
2834 }
2835 @media all and (min-width: 801px) {
2836 .new-status-button:not(.always-show) {
2837     display: none;
2838 }
2839 }
2840 .ReplyButton {
2841   display: -ms-flexbox;
2842   display: flex;
2843 }
2844 .ReplyButton > :first-child {
2845   padding: 10px;
2846   margin: -10px -8px -10px -10px;
2847 }
2848 .ReplyButton .action-counter {
2849   pointer-events: none;
2850   -webkit-user-select: none;
2851      -moz-user-select: none;
2852       -ms-user-select: none;
2853           user-select: none;
2854 }
2855 .ReplyButton .interactive:hover .svg-inline--fa, .ReplyButton .interactive.-active .svg-inline--fa {
2856   color: #0095ff;
2857   color: var(--cBlue, #0095ff);
2858 }
2859 .FavoriteButton {
2860   display: -ms-flexbox;
2861   display: flex;
2862 }
2863 .FavoriteButton > :first-child {
2864   padding: 10px;
2865   margin: -10px -8px -10px -10px;
2866 }
2867 .FavoriteButton .action-counter {
2868   pointer-events: none;
2869   -webkit-user-select: none;
2870      -moz-user-select: none;
2871       -ms-user-select: none;
2872           user-select: none;
2873 }
2874 .FavoriteButton .interactive .svg-inline--fa {
2875   animation-duration: 0.6s;
2876 }
2877 .FavoriteButton .interactive:hover .svg-inline--fa, .FavoriteButton .interactive.-favorited .svg-inline--fa {
2878   color: orange;
2879   color: var(--cOrange, orange);
2880 }
2881 .custom-reaction {
2882   width: 30px !important;
2883 }
2884 .ReactButton {
2885   /* override of popover internal stuff */
2886 }
2887 .ReactButton .reaction-picker-filter {
2888   padding: 0.5em;
2889   display: -ms-flexbox;
2890   display: flex;
2891 }
2892 .ReactButton .reaction-picker-filter input {
2893   -ms-flex: 1;
2894       flex: 1;
2895 }
2896 .ReactButton .reaction-picker-divider {
2897   height: 1px;
2898   width: 100%;
2899   margin: 0.5em;
2900   background-color: var(--border, #222);
2901 }
2902 .ReactButton .reaction-picker {
2903   width: 10em;
2904   height: 9em;
2905   font-size: 1.5em;
2906   overflow-y: scroll;
2907   display: -ms-flexbox;
2908   display: flex;
2909   -ms-flex-wrap: wrap;
2910       flex-wrap: wrap;
2911   padding: 0.5em;
2912   text-align: center;
2913   -ms-flex-line-pack: start;
2914       align-content: flex-start;
2915   -webkit-user-select: none;
2916      -moz-user-select: none;
2917       -ms-user-select: none;
2918           user-select: none;
2919   -webkit-mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat, linear-gradient(to bottom, white 0, transparent 100%) top no-repeat, linear-gradient(to top, white, white);
2920           mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat, linear-gradient(to bottom, white 0, transparent 100%) top no-repeat, linear-gradient(to top, white, white);
2921   transition: -webkit-mask-size 150ms;
2922   transition: mask-size 150ms;
2923   transition: mask-size 150ms, -webkit-mask-size 150ms;
2924   -webkit-mask-size: 100% 20px, 100% 20px, auto;
2925           mask-size: 100% 20px, 100% 20px, auto;
2926   /* Autoprefixed seem to ignore this one, and also syntax is different */
2927   -webkit-mask-composite: xor;
2928   mask-composite: exclude;
2929 }
2930 .ReactButton .reaction-picker .emoji-button {
2931   cursor: pointer;
2932   -ms-flex-preferred-size: 20%;
2933       flex-basis: 20%;
2934   line-height: 1.5;
2935   -ms-flex-line-pack: center;
2936       align-content: center;
2937 }
2938 .ReactButton .reaction-picker .emoji-button:hover {
2939   transform: scale(1.25);
2940 }
2941 .ReactButton .popover-trigger-button {
2942   width: auto;
2943 }
2944 .ReactButton .popover-trigger {
2945   padding: 10px;
2946   margin: -10px;
2947 }
2948 .ReactButton .popover-trigger:hover .svg-inline--fa {
2949   color: #b9b9ba;
2950   color: var(--text, #b9b9ba);
2951 }
2952 .RetweetButton {
2953   display: -ms-flexbox;
2954   display: flex;
2955 }
2956 .RetweetButton > :first-child {
2957   padding: 10px;
2958   margin: -10px -8px -10px -10px;
2959 }
2960 .RetweetButton .action-counter {
2961   pointer-events: none;
2962   -webkit-user-select: none;
2963      -moz-user-select: none;
2964       -ms-user-select: none;
2965           user-select: none;
2966 }
2967 .RetweetButton .interactive .svg-inline--fa {
2968   animation-duration: 0.6s;
2969 }
2970 .RetweetButton .interactive:hover .svg-inline--fa, .RetweetButton .interactive.-repeated .svg-inline--fa {
2971   color: #0fa00f;
2972   color: var(--cGreen, #0fa00f);
2973 }
2974 .ExtraButtons {
2975   /* override of popover internal stuff */
2976 }
2977 .ExtraButtons .popover-trigger-button {
2978   width: auto;
2979 }
2980 .ExtraButtons .popover-trigger {
2981   position: static;
2982   padding: 10px;
2983   margin: -10px;
2984 }
2985 .ExtraButtons .popover-trigger:hover .svg-inline--fa {
2986   color: #b9b9ba;
2987   color: var(--text, #b9b9ba);
2988 }
2989 .avatars {
2990   display: -ms-flexbox;
2991   display: flex;
2992   margin: 0;
2993   padding: 0;
2994   -ms-flex-wrap: wrap;
2995       flex-wrap: wrap;
2996   height: 24px;
2997 }
2998 .avatars .avatars-item {
2999   margin: 0 0 5px 5px;
3000 }
3001 .avatars .avatars-item:first-child {
3002   padding-left: 5px;
3003 }
3004 .avatars .avatars-item .avatar-small {
3005   border-radius: 10px;
3006   border-radius: var(--avatarAltRadius, 10px);
3007   height: 24px;
3008   width: 24px;
3009 }
3010 /* popover styles load on-demand, so we need to override */
3011 .status-popover.popover {
3012   font-size: 1rem;
3013   min-width: 15em;
3014   max-width: 95%;
3015   border-color: #222;
3016   border-color: var(--border, #222);
3017   border-style: solid;
3018   border-width: 1px;
3019   border-radius: 5px;
3020   border-radius: var(--tooltipRadius, 5px);
3021   box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
3022   box-shadow: var(--popupShadow);
3023   /* TODO cleanup this */
3024 }
3025 .status-popover.popover .Status.Status {
3026   border: none;
3027 }
3028 .status-popover.popover .status-preview-no-content {
3029   padding: 1em;
3030   text-align: center;
3031 }
3032 .status-popover.popover .status-preview-no-content i {
3033   font-size: 2em;
3034 }
3035 .user-list-popover {
3036   padding: 0.5em;
3037   --emoji-size: 16px;
3038 }
3039 .user-list-popover .user-list-row {
3040   padding: 0.25em;
3041   display: -ms-flexbox;
3042   display: flex;
3043   -ms-flex-direction: row;
3044       flex-direction: row;
3045 }
3046 .user-list-popover .user-list-row .user-list-names {
3047   display: -ms-flexbox;
3048   display: flex;
3049   -ms-flex-direction: column;
3050       flex-direction: column;
3051   margin-left: 0.5em;
3052   min-width: 5em;
3053 }
3054 .user-list-popover .user-list-row .user-list-names img {
3055   width: 1em;
3056   height: 1em;
3057 }
3058 .user-list-popover .user-list-row .user-list-screen-name {
3059   font-size: 0.65em;
3060 }
3061 .emoji-reactions {
3062   display: -ms-flexbox;
3063   display: flex;
3064   margin-top: 0.25em;
3065   -ms-flex-wrap: wrap;
3066       flex-wrap: wrap;
3067 }
3068 .unicode-emoji {
3069   font-size: 210%;
3070 }
3071 .emoji-reaction {
3072   padding: 0 0.5em;
3073   margin-right: 0.5em;
3074   margin-top: 0.5em;
3075   display: -ms-flexbox;
3076   display: flex;
3077   -ms-flex-align: center;
3078       align-items: center;
3079   -ms-flex-pack: center;
3080       justify-content: center;
3081   box-sizing: border-box;
3082 }
3083 .emoji-reaction .reaction-emoji {
3084   width: 2.55em !important;
3085   margin-right: 0.25em;
3086 }
3087 .emoji-reaction:focus {
3088   outline: none;
3089 }
3090 .emoji-reaction.not-clickable {
3091   cursor: default;
3092 }
3093 .emoji-reaction.not-clickable:hover {
3094   box-shadow: 0px 0px 2px 0px black, 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
3095   box-shadow: var(--buttonShadow);
3096 }
3097 .emoji-reaction-expand {
3098   padding: 0 0.5em;
3099   margin-right: 0.5em;
3100   margin-top: 0.5em;
3101   display: -ms-flexbox;
3102   display: flex;
3103   -ms-flex-align: center;
3104       align-items: center;
3105   -ms-flex-pack: center;
3106       justify-content: center;
3107 }
3108 .emoji-reaction-expand:hover {
3109   text-decoration: underline;
3110 }
3111 .picked-reaction {
3112   border: 1px solid var(--accent, #d8a070);
3113   margin-left: -1px;
3114   margin-right: calc(0.5em - 1px);
3115 }
3116 .Status {
3117   min-width: 0;
3118   white-space: normal;
3119   word-wrap: break-word;
3120   word-break: break-word;
3121 }
3122 .Status:hover {
3123   --_still-image-img-visibility: visible;
3124   --_still-image-canvas-visibility: hidden;
3125   --_still-image-label-visibility: hidden;
3126 }
3127 .Status.-focused {
3128   background-color: #151e2a;
3129   background-color: var(--selectedPost, #151e2a);
3130   color: #b9b9ba;
3131   color: var(--selectedPostText, #b9b9ba);
3132   --lightText: var(--selectedPostLightText, $fallback--light);
3133   --faint: var(--selectedPostFaintText, $fallback--faint);
3134   --faintLink: var(--selectedPostFaintLink, $fallback--faint);
3135   --postLink: var(--selectedPostPostLink, $fallback--faint);
3136   --postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint);
3137   --icon: var(--selectedPostIcon, $fallback--icon);
3138 }
3139 .Status .gravestone {
3140   padding: var(--status-margin, 0.75em);
3141   color: rgba(185, 185, 186, 0.5);
3142   color: var(--faint, rgba(185, 185, 186, 0.5));
3143   display: -ms-flexbox;
3144   display: flex;
3145 }
3146 .Status .gravestone .deleted-text {
3147   margin: 0.5em 0;
3148   -ms-flex-align: center;
3149       align-items: center;
3150 }
3151 .Status .status-container {
3152   display: -ms-flexbox;
3153   display: flex;
3154   padding: var(--status-margin, 0.75em);
3155 }
3156 .Status .status-container > * {
3157   min-width: 0;
3158 }
3159 .Status .status-container.-repeat {
3160   padding-top: 0;
3161 }
3162 .Status .pin {
3163   padding: var(--status-margin, 0.75em) var(--status-margin, 0.75em) 0;
3164   display: -ms-flexbox;
3165   display: flex;
3166   -ms-flex-align: center;
3167       align-items: center;
3168   -ms-flex-pack: end;
3169       justify-content: flex-end;
3170 }
3171 ._misclick-prevention .Status {
3172   pointer-events: none;
3173 }
3174 ._misclick-prevention .Status .attachments {
3175   pointer-events: initial;
3176   cursor: initial;
3177 }
3178 .Status .left-side {
3179   margin-right: var(--status-margin, 0.75em);
3180 }
3181 .Status .right-side {
3182   -ms-flex: 1;
3183       flex: 1;
3184   min-width: 0;
3185 }
3186 .Status .usercard {
3187   margin-bottom: var(--status-margin, 0.75em);
3188 }
3189 .Status .status-username {
3190   white-space: nowrap;
3191   overflow: hidden;
3192   max-width: 85%;
3193   font-weight: bold;
3194   -ms-flex-negative: 1;
3195       flex-shrink: 1;
3196   margin-right: 0.4em;
3197   text-overflow: ellipsis;
3198   --_still_image-label-scale: 0.25;
3199   --emoji-size: 14px;
3200 }
3201 .Status .status-favicon {
3202   height: 18px;
3203   width: 18px;
3204   margin-right: 0.4em;
3205 }
3206 .Status .status-heading {
3207   margin-bottom: 0.5em;
3208 }
3209 .Status .heading-name-row {
3210   display: -ms-flexbox;
3211   display: flex;
3212   -ms-flex-pack: justify;
3213       justify-content: space-between;
3214   line-height: 1.3;
3215 }
3216 .Status .heading-name-row a {
3217   display: inline-block;
3218   word-break: break-all;
3219 }
3220 .Status .account-name {
3221   min-width: 1.6em;
3222   margin-right: 0.4em;
3223   white-space: nowrap;
3224   overflow: hidden;
3225   text-overflow: ellipsis;
3226   -ms-flex: 1 1 0px;
3227       flex: 1 1 0;
3228 }
3229 .Status .heading-left {
3230   display: -ms-flexbox;
3231   display: flex;
3232   min-width: 0;
3233 }
3234 .Status .heading-right {
3235   display: -ms-flexbox;
3236   display: flex;
3237   -ms-flex-negative: 0;
3238       flex-shrink: 0;
3239 }
3240 .Status .heading-right .button-unstyled {
3241   padding: 5px;
3242   margin: -5px;
3243 }
3244 .Status .heading-right .button-unstyled:hover svg {
3245   color: #b9b9ba;
3246   color: var(--lightText, #b9b9ba);
3247 }
3248 .Status .heading-right .svg-inline--fa {
3249   margin-left: 0.25em;
3250 }
3251 .Status .glued-label {
3252   display: -ms-inline-flexbox;
3253   display: inline-flex;
3254   white-space: nowrap;
3255 }
3256 .Status .timeago {
3257   margin-right: 0.2em;
3258 }
3259 .Status .heading-reply-row {
3260   position: relative;
3261   -ms-flex-line-pack: baseline;
3262       align-content: baseline;
3263   font-size: 0.85em;
3264   margin-top: 0.2em;
3265   line-height: 130%;
3266   max-width: 100%;
3267   -ms-flex-align: stretch;
3268       align-items: stretch;
3269 }
3270 .Status .reply-to-popover, .Status .reply-to-no-popover, .Status .mentions {
3271   min-width: 0;
3272   margin-right: 0.4em;
3273   -ms-flex-negative: 0;
3274       flex-shrink: 0;
3275 }
3276 .Status .reply-glued-label {
3277   margin-right: 0.5em;
3278 }
3279 .Status .reply-to-popover .reply-to:hover::before {
3280   content: "";
3281   display: block;
3282   position: absolute;
3283   bottom: 0;
3284   width: 100%;
3285   border-bottom: 1px solid var(--faint);
3286   pointer-events: none;
3287 }
3288 .Status .reply-to-popover .faint-link:hover {
3289   text-decoration: none;
3290 }
3291 .Status .reply-to-popover.-strikethrough .reply-to::after {
3292   content: "";
3293   display: block;
3294   position: absolute;
3295   top: 50%;
3296   width: 100%;
3297   border-bottom: 1px solid var(--faint);
3298   pointer-events: none;
3299 }
3300 .Status .mentions, .Status .reply-to {
3301   white-space: nowrap;
3302   position: relative;
3303 }
3304 .Status .mentions-text, .Status .reply-to-text {
3305   color: var(--faint);
3306   overflow: hidden;
3307   text-overflow: ellipsis;
3308   white-space: nowrap;
3309 }
3310 .Status .mentions-line {
3311   display: inline;
3312 }
3313 .Status .replies {
3314   margin-top: 0.25em;
3315   line-height: 1.3;
3316   font-size: 0.85em;
3317   display: -ms-flexbox;
3318   display: flex;
3319   -ms-flex-wrap: wrap;
3320       flex-wrap: wrap;
3321 }
3322 .Status .replies > * {
3323   margin-right: 0.4em;
3324 }
3325 .Status .reply-link {
3326   height: 17px;
3327 }
3328 .Status .repeat-info {
3329   padding: 0.4em var(--status-margin, 0.75em);
3330 }
3331 .Status .repeat-info .repeat-icon {
3332   color: #0fa00f;
3333   color: var(--cGreen, #0fa00f);
3334 }
3335 .Status .repeater-avatar {
3336   border-radius: var(--avatarAltRadius, 10px);
3337   margin-left: 28px;
3338   width: 20px;
3339   height: 20px;
3340 }
3341 .Status .repeater-name {
3342   text-overflow: ellipsis;
3343   margin-right: 0;
3344 }
3345 .Status .repeater-name .emoji {
3346   width: 14px;
3347   height: 14px;
3348   vertical-align: middle;
3349   -o-object-fit: contain;
3350      object-fit: contain;
3351 }
3352 .Status .status-fadein {
3353   animation-duration: 0.4s;
3354   animation-name: fadein;
3355 }
3356 @keyframes fadein {
3357 from {
3358     opacity: 0;
3359 }
3360 to {
3361     opacity: 1;
3362 }
3363 }
3364 .Status .status-actions {
3365   position: relative;
3366   width: 100%;
3367   display: -ms-flexbox;
3368   display: flex;
3369   margin-top: var(--status-margin, 0.75em);
3370 }
3371 .Status .status-actions > * {
3372   max-width: 4em;
3373   -ms-flex: 1;
3374       flex: 1;
3375 }
3376 .Status .muted {
3377   padding: 0.25em 0.6em;
3378   height: 1.2em;
3379   line-height: 1.2em;
3380   text-overflow: ellipsis;
3381   overflow: hidden;
3382   display: -ms-flexbox;
3383   display: flex;
3384   -ms-flex-wrap: nowrap;
3385       flex-wrap: nowrap;
3386 }
3387 .Status .muted .status-username, .Status .muted .mute-thread, .Status .muted .mute-words {
3388   word-wrap: normal;
3389   word-break: normal;
3390   white-space: nowrap;
3391 }
3392 .Status .muted .status-username, .Status .muted .mute-words {
3393   text-overflow: ellipsis;
3394   overflow: hidden;
3395 }
3396 .Status .muted .status-username {
3397   font-weight: normal;
3398   -ms-flex: 0 1 auto;
3399       flex: 0 1 auto;
3400   margin-right: 0.2em;
3401   font-size: smaller;
3402 }
3403 .Status .muted .mute-thread {
3404   -ms-flex: 0 0 auto;
3405       flex: 0 0 auto;
3406 }
3407 .Status .muted .mute-words {
3408   -ms-flex: 1 0 5em;
3409       flex: 1 0 5em;
3410   margin-left: 0.2em;
3411 }
3412 .Status .muted .mute-words::before {
3413   content: " ";
3414 }
3415 .Status .muted .unmute {
3416   -ms-flex: 0 0 auto;
3417       flex: 0 0 auto;
3418   margin-left: auto;
3419   display: block;
3420 }
3421 .Status .reply-form {
3422   padding-top: 0;
3423   padding-bottom: 0;
3424 }
3425 .Status .reply-body {
3426   -ms-flex: 1;
3427       flex: 1;
3428 }
3429 .Status .favs-repeated-users {
3430   margin-top: var(--status-margin, 0.75em);
3431 }
3432 .Status .stats {
3433   width: 100%;
3434   display: -ms-flexbox;
3435   display: flex;
3436   line-height: 1em;
3437 }
3438 .Status .avatar-row {
3439   -ms-flex: 1;
3440       flex: 1;
3441   overflow: hidden;
3442   position: relative;
3443   display: -ms-flexbox;
3444   display: flex;
3445   -ms-flex-align: center;
3446       align-items: center;
3447 }
3448 .Status .avatar-row::before {
3449   content: "";
3450   position: absolute;
3451   height: 100%;
3452   width: 1px;
3453   left: 0;
3454   background-color: var(--faint, rgba(185, 185, 186, 0.5));
3455 }
3456 .Status .stat-count {
3457   margin-right: var(--status-margin, 0.75em);
3458   -webkit-user-select: none;
3459      -moz-user-select: none;
3460       -ms-user-select: none;
3461           user-select: none;
3462 }
3463 .Status .stat-count .stat-title {
3464   color: var(--faint, rgba(185, 185, 186, 0.5));
3465   font-size: 0.85em;
3466   text-transform: uppercase;
3467   position: relative;
3468 }
3469 .Status .stat-count .stat-number {
3470   font-weight: bolder;
3471   font-size: 1.1em;
3472   line-height: 1em;
3473 }
3474 .Status .stat-count:hover .stat-title {
3475   text-decoration: underline;
3476 }
3477 @media all and (max-width: 800px) {
3478 .Status .repeater-avatar {
3479     margin-left: 20px;
3480 }
3481 .Status .post-avatar {
3482     width: 40px;
3483     height: 40px;
3484 }
3485 .Status .post-avatar.-compact {
3486     width: 32px;
3487     height: 32px;
3488 }
3489 }
3490 .reaction-emoji {
3491   width: 40px;
3492   display: -ms-flexbox;
3493   display: flex;
3494   -ms-flex-direction: column;
3495       flex-direction: column;
3496 }
3497 .Notification {
3498   border-bottom: 1px solid;
3499   border-color: #222;
3500   border-color: var(--border, #222);
3501   word-wrap: break-word;
3502   word-break: break-word;
3503   --emoji-size: 14px;
3504 }
3505 .Notification:hover {
3506   --_still-image-img-visibility: visible;
3507   --_still-image-canvas-visibility: hidden;
3508   --_still-image-label-visibility: hidden;
3509 }
3510 .Notification.-muted {
3511   padding: 0.25em 0.6em;
3512   height: 1.2em;
3513   line-height: 1.2em;
3514   text-overflow: ellipsis;
3515   overflow: hidden;
3516   display: -ms-flexbox;
3517   display: flex;
3518   -ms-flex-wrap: nowrap;
3519       flex-wrap: nowrap;
3520 }
3521 .Notification.-muted .status-username, .Notification.-muted .mute-thread, .Notification.-muted .mute-words {
3522   word-wrap: normal;
3523   word-break: normal;
3524   white-space: nowrap;
3525 }
3526 .Notification.-muted .status-username, .Notification.-muted .mute-words {
3527   text-overflow: ellipsis;
3528   overflow: hidden;
3529 }
3530 .Notification.-muted .status-username {
3531   font-weight: normal;
3532   -ms-flex: 0 1 auto;
3533       flex: 0 1 auto;
3534   margin-right: 0.2em;
3535   font-size: smaller;
3536 }
3537 .Notification.-muted .mute-thread {
3538   -ms-flex: 0 0 auto;
3539       flex: 0 0 auto;
3540 }
3541 .Notification.-muted .mute-words {
3542   -ms-flex: 1 0 5em;
3543       flex: 1 0 5em;
3544   margin-left: 0.2em;
3545 }
3546 .Notification.-muted .mute-words::before {
3547   content: " ";
3548 }
3549 .Notification.-muted .unmute {
3550   -ms-flex: 0 0 auto;
3551       flex: 0 0 auto;
3552   margin-left: auto;
3553   display: block;
3554 }
3555 .Notification .type-icon {
3556   margin: 0 0.1em;
3557 }
3558 .Notification.-type--repeat .type-icon {
3559   color: #0fa00f;
3560   color: var(--cGreen, #0fa00f);
3561 }
3562 .Notification.-type--follow .type-icon {
3563   color: #0095ff;
3564   color: var(--cBlue, #0095ff);
3565 }
3566 .Notification.-type--follow-request .type-icon {
3567   color: #0095ff;
3568   color: var(--cBlue, #0095ff);
3569 }
3570 .Notification.-type--like .type-icon {
3571   color: orange;
3572   color: orange;
3573   color: var(--cOrange, orange);
3574 }
3575 .Notification.-type--move .type-icon {
3576   color: #0095ff;
3577   color: var(--cBlue, #0095ff);
3578 }
3579 .NotificationFilters {
3580   -ms-flex-item-align: stretch;
3581       -ms-grid-row-align: stretch;
3582       align-self: stretch;
3583 }
3584 .NotificationFilters > button {
3585   line-height: 100%;
3586   height: 100%;
3587   width: var(--__panel-heading-height-inner);
3588   text-align: center;
3589 }
3590 .NotificationFilters > button svg {
3591   font-size: 1.2em;
3592 }
3593 .Notifications:not(.minimal) {
3594   padding-bottom: 15em;
3595 }
3596 .Notifications .loadmore-error {
3597   color: #b9b9ba;
3598   color: var(--text, #b9b9ba);
3599 }
3600 .Notifications .notification {
3601   position: relative;
3602 }
3603 .Notifications .notification .notification-overlay {
3604   position: absolute;
3605   top: 0;
3606   right: 0;
3607   left: 0;
3608   bottom: 0;
3609   pointer-events: none;
3610 }
3611 .Notifications .notification.unseen .notification-overlay {
3612   background-image: linear-gradient(135deg, var(--badgeNotification, #ff0000) 4px, transparent 10px);
3613 }
3614 .notification {
3615   box-sizing: border-box;
3616   /* TODO cleanup this */
3617 }
3618 .notification:hover .animated.Avatar canvas {
3619   display: none;
3620 }
3621 .notification:hover .animated.Avatar img {
3622   visibility: visible;
3623 }
3624 .notification:last-child .Notification {
3625   border-bottom: none;
3626 }
3627 .notification .non-mention {
3628   display: -ms-flexbox;
3629   display: flex;
3630   -ms-flex: 1;
3631       flex: 1;
3632   -ms-flex-wrap: nowrap;
3633       flex-wrap: nowrap;
3634   padding: 0.6em;
3635   min-width: 0;
3636   --link: var(--faintLink);
3637   --text: var(--faint);
3638 }
3639 .notification .non-mention .avatar-container {
3640   width: 32px;
3641   height: 32px;
3642 }
3643 .notification .follow-request-accept:hover {
3644   color: #b9b9ba;
3645   color: var(--text, #b9b9ba);
3646 }
3647 .notification .follow-request-reject:hover {
3648   color: #ff0000;
3649   color: var(--cRed, #ff0000);
3650 }
3651 .notification .follow-text, .notification .move-text {
3652   padding: 0.5em 0;
3653   overflow-wrap: break-word;
3654   display: -ms-flexbox;
3655   display: flex;
3656   -ms-flex-pack: justify;
3657       justify-content: space-between;
3658 }
3659 .notification .follow-text .follow-name, .notification .move-text .follow-name {
3660   display: block;
3661   max-width: 100%;
3662   overflow: hidden;
3663   text-overflow: ellipsis;
3664   white-space: nowrap;
3665 }
3666 .notification .Status {
3667   -ms-flex: 1;
3668       flex: 1;
3669 }
3670 .notification time {
3671   white-space: nowrap;
3672 }
3673 .notification .notification-right {
3674   -ms-flex: 1;
3675       flex: 1;
3676   padding-left: 0.8em;
3677   min-width: 0;
3678 }
3679 .notification .notification-right .timeago {
3680   min-width: 3em;
3681   text-align: right;
3682 }
3683 .notification .emoji-reaction-emoji {
3684   font-size: 1.3em;
3685 }
3686 .notification .notification-details {
3687   min-width: 0;
3688   word-wrap: break-word;
3689   line-height: var(--post-line-height);
3690   position: relative;
3691   overflow: hidden;
3692   width: 100%;
3693   -ms-flex: 1 1 0px;
3694       flex: 1 1 0;
3695   display: -ms-flexbox;
3696   display: flex;
3697   -ms-flex-wrap: nowrap;
3698       flex-wrap: nowrap;
3699   -ms-flex-pack: justify;
3700       justify-content: space-between;
3701 }
3702 .notification .notification-details .name-and-action {
3703   -ms-flex: 1;
3704       flex: 1;
3705   overflow: hidden;
3706   text-overflow: ellipsis;
3707 }
3708 .notification .notification-details .username {
3709   font-weight: bolder;
3710   max-width: 100%;
3711   text-overflow: ellipsis;
3712   white-space: nowrap;
3713 }
3714 .notification .notification-details .timeago {
3715   margin-right: 0.2em;
3716 }
3717 .notification .notification-details .status-content {
3718   margin: 0;
3719   max-height: 300px;
3720 }
3721 .notification .notification-details h1 {
3722   word-break: break-all;
3723   margin: 0 0 0.3em;
3724   padding: 0;
3725   font-size: 1em;
3726   line-height: 1.5;
3727 }
3728 .notification .notification-details h1 small {
3729   font-weight: lighter;
3730 }
3731 .notification .notification-details p {
3732   margin: 0;
3733   margin-top: 0;
3734   margin-bottom: 0.3em;
3735 }
3736 .MobileNav .mobile-nav {
3737   display: -ms-grid;
3738   display: grid;
3739   line-height: var(--navbar-height);
3740   -ms-grid-rows: 50px;
3741       grid-template-rows: 50px;
3742   -ms-grid-columns: 2fr auto;
3743       grid-template-columns: 2fr auto;
3744   width: 100%;
3745   box-sizing: border-box;
3746 }
3747 .MobileNav .mobile-nav a {
3748   color: var(--topBarLink, #d8a070);
3749 }
3750 .MobileNav .mobile-inner-nav {
3751   width: 100%;
3752   display: -ms-flexbox;
3753   display: flex;
3754   -ms-flex-align: center;
3755       align-items: center;
3756 }
3757 .MobileNav .mobile-nav-button {
3758   display: inline-block;
3759   text-align: center;
3760   padding: 0 1em;
3761   position: relative;
3762   cursor: pointer;
3763 }
3764 .MobileNav .site-name {
3765   padding: 0 0.3em;
3766   display: inline-block;
3767 }
3768 .MobileNav .item {
3769   /* moslty just to get rid of extra whitespaces */
3770   display: -ms-flexbox;
3771   display: flex;
3772 }
3773 .MobileNav .alert-dot {
3774   border-radius: 100%;
3775   height: 8px;
3776   width: 8px;
3777   position: absolute;
3778   left: calc(50% - 4px);
3779   top: calc(50% - 4px);
3780   margin-left: 6px;
3781   margin-top: -6px;
3782   background-color: #ff0000;
3783   background-color: var(--badgeNotification, #ff0000);
3784 }
3785 .MobileNav .mobile-notifications-drawer {
3786   width: 100%;
3787   height: 100vh;
3788   overflow-x: hidden;
3789   position: fixed;
3790   top: 0;
3791   left: 0;
3792   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
3793   box-shadow: var(--panelShadow);
3794   transition-property: transform;
3795   transition-duration: 0.25s;
3796   transform: translateX(0);
3797   z-index: 1001;
3798   -webkit-overflow-scrolling: touch;
3799 }
3800 .MobileNav .mobile-notifications-drawer.-closed {
3801   transform: translateX(100%);
3802   box-shadow: none;
3803 }
3804 .MobileNav .mobile-notifications-header {
3805   display: -ms-flexbox;
3806   display: flex;
3807   -ms-flex-align: center;
3808       align-items: center;
3809   -ms-flex-pack: justify;
3810       justify-content: space-between;
3811   z-index: 1;
3812   width: 100%;
3813   height: 50px;
3814   line-height: 50px;
3815   position: absolute;
3816   color: var(--topBarText);
3817   background-color: #182230;
3818   background-color: var(--topBar, #182230);
3819   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6);
3820   box-shadow: var(--topBarShadow);
3821 }
3822 .MobileNav .mobile-notifications-header .title {
3823   font-size: 1.3em;
3824   margin-left: 0.6em;
3825 }
3826 .MobileNav .mobile-notifications {
3827   margin-top: 50px;
3828   width: 100vw;
3829   height: calc(100vh - var(--navbar-height));
3830   overflow-x: hidden;
3831   overflow-y: scroll;
3832   color: #b9b9ba;
3833   color: var(--text, #b9b9ba);
3834   background-color: #121a24;
3835   background-color: var(--bg, #121a24);
3836 }
3837 .MobileNav .mobile-notifications .notifications {
3838   padding: 0;
3839   border-radius: 0;
3840   box-shadow: none;
3841 }
3842 .MobileNav .mobile-notifications .notifications .panel {
3843   border-radius: 0;
3844   margin: 0;
3845   box-shadow: none;
3846 }
3847 .MobileNav .mobile-notifications .notifications .panel:after {
3848   border-radius: 0;
3849 }
3850 .MobileNav .mobile-notifications .notifications .panel .panel-heading {
3851   border-radius: 0;
3852   box-shadow: none;
3853 }
3854 .SearchBar {
3855   display: -ms-inline-flexbox;
3856   display: inline-flex;
3857   -ms-flex-align: baseline;
3858       align-items: baseline;
3859   vertical-align: baseline;
3860   -ms-flex-pack: end;
3861       justify-content: flex-end;
3862 }
3863 .SearchBar.-expanded {
3864   width: 100%;
3865 }
3866 .SearchBar .search-bar-input,
3867 .SearchBar .search-button {
3868   height: 29px;
3869 }
3870 .SearchBar .search-bar-input {
3871   -ms-flex: 1 0 auto;
3872       flex: 1 0 auto;
3873 }
3874 .SearchBar .cancel-search {
3875   height: 50px;
3876 }
3877 .SearchBar .cancel-icon {
3878   color: #b9b9ba;
3879   color: var(--btnTopBarText, #b9b9ba);
3880 }
3881 .DesktopNav {
3882   width: 100%;
3883 }
3884 .DesktopNav a {
3885   color: var(--topBarLink, #d8a070);
3886 }
3887 .DesktopNav .inner-nav {
3888   display: -ms-grid;
3889   display: grid;
3890   -ms-grid-rows: var(--navbar-height);
3891       grid-template-rows: var(--navbar-height);
3892   -ms-grid-columns: 2fr auto 2fr;
3893       grid-template-columns: 2fr auto 2fr;
3894   grid-template-areas: "sitename logo actions";
3895   box-sizing: border-box;
3896   padding: 0 1.2em;
3897   margin: auto;
3898   max-width: 980px;
3899 }
3900 .DesktopNav.-logoLeft .inner-nav {
3901   -ms-grid-columns: auto 2fr 2fr;
3902       grid-template-columns: auto 2fr 2fr;
3903   grid-template-areas: "logo sitename actions";
3904 }
3905 .DesktopNav .button-default, .DesktopNav .button-default svg {
3906   color: #b9b9ba;
3907   color: var(--btnTopBarText, #b9b9ba);
3908 }
3909 .DesktopNav .button-default:active {
3910   background-color: #182230;
3911   background-color: var(--btnPressedTopBar, #182230);
3912   color: #b9b9ba;
3913   color: var(--btnPressedTopBarText, #b9b9ba);
3914 }
3915 .DesktopNav .button-default:disabled {
3916   color: #b9b9ba;
3917   color: var(--btnDisabledTopBarText, #b9b9ba);
3918 }
3919 .DesktopNav .button-default.toggled {
3920   color: #b9b9ba;
3921   color: var(--btnToggledTopBarText, #b9b9ba);
3922   background-color: #182230;
3923   background-color: var(--btnToggledTopBar, #182230);
3924 }
3925 .DesktopNav .logo {
3926   grid-area: logo;
3927   position: relative;
3928   transition: opacity;
3929   transition-timing-function: ease-out;
3930   transition-duration: 100ms;
3931 }
3932 @media all and (min-width: 800px) {
3933 .DesktopNav .logo {
3934     opacity: 1 !important;
3935 }
3936 }
3937 .DesktopNav .logo .mask {
3938   -webkit-mask-repeat: no-repeat;
3939           mask-repeat: no-repeat;
3940   -webkit-mask-position: center;
3941           mask-position: center;
3942   -webkit-mask-size: contain;
3943           mask-size: contain;
3944   background-color: #182230;
3945   background-color: var(--topBarText, #182230);
3946   position: absolute;
3947   top: 0;
3948   bottom: 0;
3949   left: 0;
3950   right: 0;
3951 }
3952 .DesktopNav .logo img {
3953   display: inline-block;
3954   height: var(--navbar-height);
3955 }
3956 .DesktopNav .nav-icon {
3957   margin-left: 0.2em;
3958   width: 2em;
3959   height: 100%;
3960   text-align: center;
3961 }
3962 .DesktopNav .nav-icon .svg-inline--fa {
3963   color: #d8a070;
3964   color: var(--topBarLink, #d8a070);
3965 }
3966 .DesktopNav .sitename {
3967   grid-area: sitename;
3968 }
3969 .DesktopNav .actions {
3970   grid-area: actions;
3971 }
3972 .DesktopNav .item {
3973   -ms-flex: 1;
3974       flex: 1;
3975   line-height: var(--navbar-height);
3976   height: var(--navbar-height);
3977   overflow: hidden;
3978   display: -ms-flexbox;
3979   display: flex;
3980   -ms-flex-wrap: wrap;
3981       flex-wrap: wrap;
3982 }
3983 .DesktopNav .item.right {
3984   -ms-flex-pack: end;
3985       justify-content: flex-end;
3986   text-align: right;
3987 }
3988 .list-item:not(:last-child) {
3989   border-bottom: 1px solid;
3990   border-bottom-color: #222;
3991   border-bottom-color: var(--border, #222);
3992 }
3993 .list-empty-content {
3994   text-align: center;
3995   padding: 10px;
3996 }
3997 .user-reporting-panel {
3998   width: 90vw;
3999   max-width: 700px;
4000   min-height: 20vh;
4001   max-height: 80vh;
4002 }
4003 .user-reporting-panel .panel-body {
4004   display: -ms-flexbox;
4005   display: flex;
4006   -ms-flex-direction: column-reverse;
4007       flex-direction: column-reverse;
4008   border-top: 1px solid;
4009   border-color: #222;
4010   border-color: var(--border, #222);
4011   overflow: hidden;
4012 }
4013 .user-reporting-panel-left {
4014   padding: 1.1em 0.7em 0.7em;
4015   line-height: var(--post-line-height);
4016   box-sizing: border-box;
4017 }
4018 .user-reporting-panel-left > div {
4019   margin-bottom: 1em;
4020 }
4021 .user-reporting-panel-left > div:last-child {
4022   margin-bottom: 0;
4023 }
4024 .user-reporting-panel-left p {
4025   margin-top: 0;
4026 }
4027 .user-reporting-panel-left textarea.form-control {
4028   line-height: 16px;
4029   resize: none;
4030   overflow: hidden;
4031   transition: min-height 200ms 100ms;
4032   min-height: 44px;
4033   width: 100%;
4034 }
4035 .user-reporting-panel-left .btn {
4036   min-width: 10em;
4037   padding: 0 2em;
4038 }
4039 .user-reporting-panel-left .alert {
4040   margin: 1em 0 0 0;
4041   line-height: 1.3em;
4042 }
4043 .user-reporting-panel-right {
4044   display: -ms-flexbox;
4045   display: flex;
4046   -ms-flex-direction: column;
4047       flex-direction: column;
4048   overflow-y: auto;
4049 }
4050 .user-reporting-panel-sitem {
4051   display: -ms-flexbox;
4052   display: flex;
4053   -ms-flex-pack: justify;
4054       justify-content: space-between;
4055   /* TODO cleanup this */
4056 }
4057 .user-reporting-panel-sitem > .Status {
4058   -ms-flex: 1;
4059       flex: 1;
4060 }
4061 .user-reporting-panel-sitem > .checkbox {
4062   margin: 0.75em;
4063 }
4064 @media all and (min-width: 801px) {
4065 .user-reporting-panel .panel-body {
4066     -ms-flex-direction: row;
4067         flex-direction: row;
4068 }
4069 .user-reporting-panel-left {
4070     width: 50%;
4071     max-width: 320px;
4072     border-right: 1px solid;
4073     border-color: #222;
4074     border-color: var(--border, #222);
4075     padding: 1.1em;
4076 }
4077 .user-reporting-panel-left > div {
4078     margin-bottom: 2em;
4079 }
4080 .user-reporting-panel-right {
4081     width: 50%;
4082     -ms-flex: 1 1 auto;
4083         flex: 1 1 auto;
4084     margin-bottom: 12px;
4085 }
4086 }
4087 .modal-view.post-form-modal-view {
4088   -ms-flex-align: start;
4089       align-items: flex-start;
4090 }
4091 .post-form-modal-panel {
4092   -ms-flex-negative: 0;
4093       flex-shrink: 0;
4094   margin-top: 25%;
4095   margin-bottom: 2em;
4096   width: 100%;
4097   max-width: 700px;
4098 }
4099 @media (orientation: landscape) {
4100 .post-form-modal-panel {
4101     margin-top: 8%;
4102 }
4103 }
4104 .global-notice-list {
4105   position: fixed;
4106   top: 50px;
4107   width: 100%;
4108   pointer-events: none;
4109   z-index: 1001;
4110   display: -ms-flexbox;
4111   display: flex;
4112   -ms-flex-direction: column;
4113       flex-direction: column;
4114   -ms-flex-align: center;
4115       align-items: center;
4116 }
4117 .global-notice-list .global-notice {
4118   pointer-events: auto;
4119   text-align: center;
4120   width: 40em;
4121   max-width: calc(100% - 3em);
4122   display: -ms-flexbox;
4123   display: flex;
4124   padding-left: 1.5em;
4125   line-height: 2;
4126   margin-bottom: 0.5em;
4127 }
4128 .global-notice-list .global-notice .notice-message {
4129   -ms-flex: 1 1 100%;
4130       flex: 1 1 100%;
4131 }
4132 .global-notice-list .global-error {
4133   background-color: var(--alertPopupError, #ff0000);
4134   color: var(--alertPopupErrorText, #b9b9ba);
4135 }
4136 .global-notice-list .global-error .svg-inline--fa {
4137   color: var(--alertPopupErrorText, #b9b9ba);
4138 }
4139 .global-notice-list .global-warning {
4140   background-color: var(--alertPopupWarning, orange);
4141   color: var(--alertPopupWarningText, #b9b9ba);
4142 }
4143 .global-notice-list .global-warning .svg-inline--fa {
4144   color: var(--alertPopupWarningText, #b9b9ba);
4145 }
4146 .global-notice-list .global-success {
4147   background-color: var(--alertPopupSuccess, #0fa00f);
4148   color: var(--alertPopupSuccessText, #b9b9ba);
4149 }
4150 .global-notice-list .global-success .svg-inline--fa {
4151   color: var(--alertPopupSuccessText, #b9b9ba);
4152 }
4153 .global-notice-list .global-info {
4154   background-color: var(--alertPopupNeutral, #182230);
4155   color: var(--alertPopupNeutralText, #b9b9ba);
4156 }
4157 .global-notice-list .global-info .svg-inline--fa {
4158   color: var(--alertPopupNeutralText, #b9b9ba);
4159 }
4160 .global-notice-list .close-notice {
4161   padding-right: 0.2em;
4162 }
4163 .global-notice-list .close-notice .svg-inline--fa:hover {
4164   opacity: 0.6;
4165 }
4166 @charset "UTF-8";
4167 :root {
4168   --navbar-height: 3.5rem;
4169   --post-line-height: 1.4;
4170 }
4171 html {
4172   font-size: 14px;
4173 }
4174 body {
4175   font-family: sans-serif;
4176   font-family: var(--interfaceFont, sans-serif);
4177   margin: 0;
4178   color: #b9b9ba;
4179   color: var(--text, #b9b9ba);
4180   -webkit-font-smoothing: antialiased;
4181   -moz-osx-font-smoothing: grayscale;
4182   overscroll-behavior-y: none;
4183   overflow-x: clip;
4184   overflow-y: scroll;
4185 }
4186 body.hidden {
4187   display: none;
4188 }
4189 @media (any-pointer: fine) {
4190 * {
4191     scrollbar-color: var(--btn) transparent;
4192 }
4193 *::-webkit-scrollbar {
4194     background: transparent;
4195 }
4196 *::-webkit-scrollbar-button, *::-webkit-scrollbar-thumb {
4197     background-color: var(--btn);
4198     box-shadow: var(--buttonShadow);
4199     border-radius: var(--btnRadius);
4200 }
4201 *::-webkit-scrollbar-button {
4202     --___bgPadding: 2px;
4203     color: var(--btnText);
4204     background-repeat: no-repeat, no-repeat;
4205 }
4206 *::-webkit-scrollbar-button:horizontal {
4207     background-size: 50% calc(50% - var(--___bgPadding)), 50% calc(50% - var(--___bgPadding));
4208 }
4209 *::-webkit-scrollbar-button:horizontal:increment {
4210     background-image: linear-gradient(45deg, var(--btnText) 50%, transparent 51%), linear-gradient(-45deg, transparent 50%, var(--btnText) 51%);
4211     background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
4212 }
4213 *::-webkit-scrollbar-button:horizontal:decrement {
4214     background-image: linear-gradient(45deg, transparent 50%, var(--btnText) 51%), linear-gradient(-45deg, var(--btnText) 50%, transparent 51%);
4215     background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
4216 }
4217 *::-webkit-scrollbar-button:vertical {
4218     background-size: calc(50% - var(--___bgPadding)) 50%, calc(50% - var(--___bgPadding)) 50%;
4219 }
4220 *::-webkit-scrollbar-button:vertical:increment {
4221     background-image: linear-gradient(-45deg, transparent 50%, var(--btnText) 51%), linear-gradient(45deg, transparent 50%, var(--btnText) 51%);
4222     background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
4223 }
4224 *::-webkit-scrollbar-button:vertical:decrement {
4225     background-image: linear-gradient(-45deg, var(--btnText) 50%, transparent 51%), linear-gradient(45deg, var(--btnText) 50%, transparent 51%);
4226     background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
4227 }
4228 html {
4229     scrollbar-color: var(--selectedMenu) var(--wallpaper);
4230     background: var(--wallpaper);
4231 }
4232 }
4233 a {
4234   text-decoration: none;
4235   color: #d8a070;
4236   color: var(--link, #d8a070);
4237 }
4238 h4 {
4239   margin: 0;
4240 }
4241 i[class*=icon-],
4242 .svg-inline--fa {
4243   color: #666;
4244   color: var(--icon, #666);
4245 }
4246 nav {
4247   z-index: 1000;
4248   color: var(--topBarText);
4249   background-color: #182230;
4250   background-color: var(--topBar, #182230);
4251   color: rgba(185, 185, 186, 0.5);
4252   color: var(--faint, rgba(185, 185, 186, 0.5));
4253   box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
4254   box-shadow: var(--topBarShadow);
4255   box-sizing: border-box;
4256   height: var(--navbar-height);
4257   position: fixed;
4258 }
4259 #sidebar {
4260   grid-area: sidebar;
4261 }
4262 .column.-scrollable {
4263   top: var(--navbar-height);
4264   position: -webkit-sticky;
4265   position: sticky;
4266 }
4267 #main-scroller {
4268   grid-area: content;
4269   position: relative;
4270 }
4271 #notifs-column {
4272   grid-area: notifs;
4273 }
4274 .app-bg-wrapper {
4275   position: fixed;
4276   height: 100%;
4277   top: var(--navbar-height);
4278   z-index: -1000;
4279   left: 0;
4280   right: -20px;
4281   background-size: cover;
4282   background-repeat: no-repeat;
4283   background-color: var(--wallpaper);
4284   background-image: var(--body-background-image);
4285   background-position: 50%;
4286 }
4287 .underlay {
4288   -ms-grid-column: 1;
4289       grid-column-start: 1;
4290   -ms-grid-column-span: 3;
4291       grid-column-end: span 3;
4292   -ms-grid-row: 1;
4293       grid-row-start: 1;
4294   grid-row-end: 1;
4295   pointer-events: none;
4296   background-color: rgba(0, 0, 0, 0.15);
4297   background-color: var(--underlay, rgba(0, 0, 0, 0.15));
4298   z-index: -1000;
4299 }
4300 .app-layout {
4301   --miniColumn: 25rem;
4302   --maxiColumn: minmax(var(--miniColumn), 45rem);
4303   --columnGap: 1em;
4304   --status-margin: 0.75em;
4305   position: relative;
4306   display: -ms-grid;
4307   display: grid;
4308   -ms-grid-columns: var(--miniColumn) var(--maxiColumn);
4309       grid-template-columns: var(--miniColumn) var(--maxiColumn);
4310   grid-template-areas: "sidebar content";
4311   -ms-grid-rows: 1fr;
4312       grid-template-rows: 1fr;
4313   box-sizing: border-box;
4314   margin: 0 auto;
4315   -ms-flex-line-pack: start;
4316       align-content: flex-start;
4317   -ms-flex-wrap: wrap;
4318       flex-wrap: wrap;
4319   -ms-flex-pack: center;
4320       justify-content: center;
4321   min-height: 100vh;
4322   overflow-x: clip;
4323 }
4324 .app-layout .column {
4325   --___columnMargin: var(--columnGap);
4326   display: -ms-grid;
4327   display: grid;
4328   -ms-grid-columns: 100%;
4329       grid-template-columns: 100%;
4330   box-sizing: border-box;
4331   -ms-grid-row: 1;
4332       grid-row-start: 1;
4333   grid-row-end: 1;
4334   margin: 0 calc(var(--___columnMargin) / 2);
4335   padding: calc(var(--___columnMargin)) 0;
4336   row-gap: var(--___columnMargin);
4337   -ms-flex-line-pack: start;
4338       align-content: start;
4339 }
4340 .app-layout .column:not(.-scrollable) {
4341   margin-top: var(--navbar-height);
4342 }
4343 .app-layout .column:hover {
4344   z-index: 2;
4345 }
4346 .app-layout .column.-full-height {
4347   margin-bottom: 0;
4348   padding-top: 0;
4349   padding-bottom: 0;
4350 }
4351 .app-layout .column.-scrollable {
4352   --___paddingIncrease: calc(var(--columnGap) / 2);
4353   position: -webkit-sticky;
4354   position: sticky;
4355   top: var(--navbar-height);
4356   max-height: calc(100vh - var(--navbar-height));
4357   overflow-y: auto;
4358   overflow-x: hidden;
4359   margin-left: calc(var(--___paddingIncrease) * -1);
4360   padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
4361 }
4362 @supports (scrollbar-width: none) or (-webkit-text-fill-color: initial) {
4363 .app-layout .column.-scrollable:not(.-show-scrollbar) {
4364     scrollbar-width: none;
4365     margin-right: calc(var(--___paddingIncrease) * -1);
4366     padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
4367 }
4368 .app-layout .column.-scrollable:not(.-show-scrollbar)::-webkit-scrollbar {
4369     display: block;
4370     width: 0;
4371 }
4372 }
4373 .app-layout .column.-scrollable .panel-heading.-sticky {
4374   top: calc(var(--columnGap) / -1);
4375 }
4376 .app-layout.-has-new-post-button .column {
4377   padding-bottom: 10rem;
4378 }
4379 .app-layout.-no-sticky-headers .column .panel-heading.-sticky {
4380   position: relative;
4381   top: 0;
4382 }
4383 .app-layout .column-inner {
4384   display: -ms-grid;
4385   display: grid;
4386   -ms-grid-columns: 100%;
4387       grid-template-columns: 100%;
4388   box-sizing: border-box;
4389   row-gap: 1em;
4390   -ms-flex-line-pack: start;
4391       align-content: start;
4392 }
4393 .app-layout.-reverse:not(.-wide):not(.-mobile) {
4394   -ms-grid-columns: var(--maxiColumn) var(--miniColumn);
4395       grid-template-columns: var(--maxiColumn) var(--miniColumn);
4396   grid-template-areas: "content sidebar";
4397 }
4398 .app-layout.-wide {
4399   -ms-grid-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn);
4400       grid-template-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn);
4401   grid-template-areas: "sidebar content notifs";
4402 }
4403 .app-layout.-wide.-reverse {
4404   grid-template-areas: "notifs content sidebar";
4405 }
4406 .app-layout.-mobile {
4407   -ms-grid-columns: 100vw;
4408       grid-template-columns: 100vw;
4409   grid-template-areas: "content";
4410   padding: 0;
4411 }
4412 .app-layout.-mobile .column {
4413   margin-left: 0;
4414   margin-right: 0;
4415   padding-top: 0;
4416   margin-top: var(--navbar-height);
4417   margin-bottom: 0;
4418 }
4419 .app-layout.-mobile .panel-heading,
4420 .app-layout.-mobile .panel-heading::after,
4421 .app-layout.-mobile .panel-heading::before,
4422 .app-layout.-mobile .panel,
4423 .app-layout.-mobile .panel::after {
4424   border-top-left-radius: 0;
4425   border-top-right-radius: 0;
4426 }
4427 .app-layout.-mobile .underlay,
4428 .app-layout.-mobile #sidebar,
4429 .app-layout.-mobile #notifs-column {
4430   display: none;
4431 }
4432 .app-layout.-normal #notifs-column {
4433   display: none;
4434 }
4435 .text-center {
4436   text-align: center;
4437 }
4438 .button-default {
4439   -webkit-user-select: none;
4440      -moz-user-select: none;
4441       -ms-user-select: none;
4442           user-select: none;
4443   color: #b9b9ba;
4444   color: var(--btnText, #b9b9ba);
4445   background-color: #182230;
4446   background-color: var(--btn, #182230);
4447   border: none;
4448   border-radius: 4px;
4449   border-radius: var(--btnRadius, 4px);
4450   cursor: pointer;
4451   box-shadow: 0px 0px 2px 0px black, 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
4452   box-shadow: var(--buttonShadow);
4453   font-size: 1em;
4454   font-family: sans-serif;
4455   font-family: var(--interfaceFont, sans-serif);
4456 }
4457 .button-default.-sublime {
4458   background: transparent;
4459 }
4460 .button-default i[class*=icon-],
4461 .button-default .svg-inline--fa {
4462   color: #b9b9ba;
4463   color: var(--btnText, #b9b9ba);
4464 }
4465 .button-default::-moz-focus-inner {
4466   border: none;
4467 }
4468 .button-default:hover {
4469   box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
4470   box-shadow: var(--buttonHoverShadow);
4471 }
4472 .button-default:active {
4473   box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
4474   box-shadow: var(--buttonPressedShadow);
4475   color: #b9b9ba;
4476   color: var(--btnPressedText, #b9b9ba);
4477   background-color: #182230;
4478   background-color: var(--btnPressed, #182230);
4479 }
4480 .button-default:active svg,
4481 .button-default:active i {
4482   color: #b9b9ba;
4483   color: var(--btnPressedText, #b9b9ba);
4484 }
4485 .button-default:disabled {
4486   cursor: not-allowed;
4487   color: #b9b9ba;
4488   color: var(--btnDisabledText, #b9b9ba);
4489   background-color: #182230;
4490   background-color: var(--btnDisabled, #182230);
4491 }
4492 .button-default:disabled svg,
4493 .button-default:disabled i {
4494   color: #b9b9ba;
4495   color: var(--btnDisabledText, #b9b9ba);
4496 }
4497 .button-default.toggled {
4498   color: #b9b9ba;
4499   color: var(--btnToggledText, #b9b9ba);
4500   background-color: #182230;
4501   background-color: var(--btnToggled, #182230);
4502   box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
4503   box-shadow: var(--buttonPressedShadow);
4504 }
4505 .button-default.toggled svg,
4506 .button-default.toggled i {
4507   color: #b9b9ba;
4508   color: var(--btnToggledText, #b9b9ba);
4509 }
4510 .button-default.danger {
4511   color: #b9b9ba;
4512   color: var(--alertErrorPanelText, #b9b9ba);
4513   background-color: rgba(211, 16, 20, 0.5);
4514   background-color: var(--alertError, rgba(211, 16, 20, 0.5));
4515 }
4516 .button-unstyled {
4517   background: none;
4518   border: none;
4519   outline: none;
4520   display: inline;
4521   text-align: initial;
4522   font-size: 100%;
4523   font-family: inherit;
4524   padding: 0;
4525   line-height: unset;
4526   cursor: pointer;
4527   box-sizing: content-box;
4528   color: inherit;
4529 }
4530 .button-unstyled.-link {
4531   color: #d8a070;
4532   color: var(--link, #d8a070);
4533 }
4534 .button-unstyled.-fullwidth {
4535   width: 100%;
4536 }
4537 .button-unstyled.-hover-highlight:hover svg {
4538   color: #b9b9ba;
4539   color: var(--lightText, #b9b9ba);
4540 }
4541 input,
4542 textarea,
4543 .input {
4544   --_padding: 0.5em;
4545   border: none;
4546   border-radius: 4px;
4547   border-radius: var(--inputRadius, 4px);
4548   box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 0 2px 0 black inset;
4549   box-shadow: var(--inputShadow);
4550   background-color: #182230;
4551   background-color: var(--input, #182230);
4552   color: #b9b9ba;
4553   color: var(--inputText, #b9b9ba);
4554   font-family: sans-serif;
4555   font-family: var(--inputFont, sans-serif);
4556   font-size: 1em;
4557   margin: 0;
4558   box-sizing: border-box;
4559   display: inline-block;
4560   position: relative;
4561   line-height: 2;
4562   -webkit-hyphens: none;
4563       -ms-hyphens: none;
4564           hyphens: none;
4565   padding: 0 var(--_padding);
4566 }
4567 input.unstyled,
4568 textarea.unstyled,
4569 .input.unstyled {
4570   border-radius: 0;
4571   background: none;
4572   box-shadow: none;
4573   height: unset;
4574 }
4575 input:disabled, input[disabled=disabled], input.disabled,
4576 textarea:disabled,
4577 textarea[disabled=disabled],
4578 textarea.disabled,
4579 .input:disabled,
4580 .input[disabled=disabled],
4581 .input.disabled {
4582   cursor: not-allowed;
4583   opacity: 0.5;
4584 }
4585 input[type=range],
4586 textarea[type=range],
4587 .input[type=range] {
4588   background: none;
4589   border: none;
4590   margin: 0;
4591   box-shadow: none;
4592   -ms-flex: 1;
4593       flex: 1;
4594 }
4595 input[type=radio],
4596 textarea[type=radio],
4597 .input[type=radio] {
4598   display: none;
4599 }
4600 input[type=radio]:checked + label::before,
4601 textarea[type=radio]:checked + label::before,
4602 .input[type=radio]:checked + label::before {
4603   box-shadow: 0 0 2px black inset, 0 0 0 4px #182230 inset;
4604   box-shadow: var(--inputShadow), 0 0 0 4px var(--fg, #182230) inset;
4605   background-color: var(--accent, #d8a070);
4606 }
4607 input[type=radio]:disabled, input[type=radio]:disabled + label, input[type=radio]:disabled + label::before,
4608 textarea[type=radio]:disabled,
4609 textarea[type=radio]:disabled + label,
4610 textarea[type=radio]:disabled + label::before,
4611 .input[type=radio]:disabled,
4612 .input[type=radio]:disabled + label,
4613 .input[type=radio]:disabled + label::before {
4614   opacity: 0.5;
4615 }
4616 input[type=radio] + label::before,
4617 textarea[type=radio] + label::before,
4618 .input[type=radio] + label::before {
4619   -ms-flex-negative: 0;
4620       flex-shrink: 0;
4621   display: inline-block;
4622   content: "";
4623   transition: box-shadow 200ms;
4624   width: 1.1em;
4625   height: 1.1em;
4626   border-radius: 100%;
4627   box-shadow: 0 0 2px black inset;
4628   box-shadow: var(--inputShadow);
4629   margin-right: 0.5em;
4630   background-color: #182230;
4631   background-color: var(--input, #182230);
4632   vertical-align: top;
4633   text-align: center;
4634   line-height: 1.1;
4635   font-size: 1.1em;
4636   box-sizing: border-box;
4637   color: transparent;
4638   overflow: hidden;
4639 }
4640 input[type=checkbox],
4641 textarea[type=checkbox],
4642 .input[type=checkbox] {
4643   display: none;
4644 }
4645 input[type=checkbox]:checked + label::before,
4646 textarea[type=checkbox]:checked + label::before,
4647 .input[type=checkbox]:checked + label::before {
4648   color: #b9b9ba;
4649   color: var(--inputText, #b9b9ba);
4650 }
4651 input[type=checkbox]:disabled, input[type=checkbox]:disabled + label, input[type=checkbox]:disabled + label::before,
4652 textarea[type=checkbox]:disabled,
4653 textarea[type=checkbox]:disabled + label,
4654 textarea[type=checkbox]:disabled + label::before,
4655 .input[type=checkbox]:disabled,
4656 .input[type=checkbox]:disabled + label,
4657 .input[type=checkbox]:disabled + label::before {
4658   opacity: 0.5;
4659 }
4660 input[type=checkbox] + label::before,
4661 textarea[type=checkbox] + label::before,
4662 .input[type=checkbox] + label::before {
4663   -ms-flex-negative: 0;
4664       flex-shrink: 0;
4665   display: inline-block;
4666   content: "\2713";
4667   transition: color 200ms;
4668   width: 1.1em;
4669   height: 1.1em;
4670   border-radius: 2px;
4671   border-radius: var(--checkboxRadius, 2px);
4672   box-shadow: 0 0 2px black inset;
4673   box-shadow: var(--inputShadow);
4674   margin-right: 0.5em;
4675   background-color: #182230;
4676   background-color: var(--input, #182230);
4677   vertical-align: top;
4678   text-align: center;
4679   line-height: 1.1;
4680   font-size: 1.1em;
4681   box-sizing: border-box;
4682   color: transparent;
4683   overflow: hidden;
4684 }
4685 input.resize-height,
4686 textarea.resize-height,
4687 .input.resize-height {
4688   resize: vertical;
4689 }
4690 textarea {
4691   padding: var(--_padding);
4692   line-height: var(--post-line-height);
4693 }
4694 option {
4695   color: #b9b9ba;
4696   color: var(--text, #b9b9ba);
4697   background-color: #121a24;
4698   background-color: var(--bg, #121a24);
4699 }
4700 .hide-number-spinner {
4701   -moz-appearance: textfield;
4702 }
4703 .hide-number-spinner[type=number]::-webkit-inner-spin-button, .hide-number-spinner[type=number]::-webkit-outer-spin-button {
4704   opacity: 0;
4705   display: none;
4706 }
4707 .btn-block {
4708   display: block;
4709   width: 100%;
4710 }
4711 .btn-group {
4712   position: relative;
4713   display: -ms-inline-flexbox;
4714   display: inline-flex;
4715   vertical-align: middle;
4716 }
4717 .btn-group button {
4718   position: relative;
4719   -ms-flex: 1 1 auto;
4720       flex: 1 1 auto;
4721 }
4722 .btn-group button:not(:last-child) {
4723   border-top-right-radius: 0;
4724   border-bottom-right-radius: 0;
4725 }
4726 .btn-group button:not(:first-child) {
4727   border-top-left-radius: 0;
4728   border-bottom-left-radius: 0;
4729 }
4730 .panel {
4731   position: relative;
4732   display: -ms-flexbox;
4733   display: flex;
4734   -ms-flex-direction: column;
4735       flex-direction: column;
4736   background-color: #121a24;
4737   background-color: var(--bg, #121a24);
4738 }
4739 .panel::after, .panel {
4740   border-radius: 10px;
4741   border-radius: var(--panelRadius, 10px);
4742 }
4743 .panel::after {
4744   content: "";
4745   position: absolute;
4746   top: 0;
4747   bottom: 0;
4748   left: 0;
4749   right: 0;
4750   z-index: 5;
4751   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
4752   box-shadow: var(--panelShadow);
4753   pointer-events: none;
4754 }
4755 .panel-body {
4756   padding: var(--panel-body-padding, 0);
4757 }
4758 .panel-body:empty::before {
4759   content: "\AF\\_(\30C4)_/\AF";
4760   display: block;
4761   margin: 1em;
4762   text-align: center;
4763 }
4764 .panel-body > p {
4765   line-height: 1.3;
4766   padding: 1em;
4767   margin: 0;
4768 }
4769 .panel-heading,
4770 .panel-footer {
4771   --panel-heading-height-padding: 0.6em;
4772   --__panel-heading-height: 3.2em;
4773   --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding));
4774   position: relative;
4775   box-sizing: border-box;
4776   display: -ms-grid;
4777   display: grid;
4778   grid-auto-flow: column;
4779   -ms-grid-columns: minmax(50%, 1fr);
4780       grid-template-columns: minmax(50%, 1fr);
4781   grid-auto-columns: auto;
4782   grid-column-gap: 0.5em;
4783   -ms-flex: none;
4784       flex: none;
4785   background-size: cover;
4786   padding: 0.6em;
4787   height: var(--__panel-heading-height);
4788   line-height: var(--__panel-heading-height-inner);
4789   z-index: 4;
4790 }
4791 .panel-heading.-flexible-height,
4792 .panel-footer.-flexible-height {
4793   --__panel-heading-height: auto;
4794 }
4795 .panel-heading.-flexible-height::after, .panel-heading.-flexible-height::before,
4796 .panel-footer.-flexible-height::after,
4797 .panel-footer.-flexible-height::before {
4798   display: none;
4799 }
4800 .panel-heading.-stub, .panel-heading.-stub::after,
4801 .panel-footer.-stub,
4802 .panel-footer.-stub::after {
4803   border-radius: 10px;
4804   border-radius: var(--panelRadius, 10px);
4805 }
4806 .panel-heading.-sticky,
4807 .panel-footer.-sticky {
4808   position: -webkit-sticky;
4809   position: sticky;
4810   top: var(--navbar-height);
4811 }
4812 .panel-heading::after, .panel-heading::before,
4813 .panel-footer::after,
4814 .panel-footer::before {
4815   content: "";
4816   position: absolute;
4817   top: 0;
4818   bottom: 0;
4819   right: 0;
4820   left: 0;
4821   pointer-events: none;
4822 }
4823 .panel-heading .title,
4824 .panel-footer .title {
4825   font-size: 1.3em;
4826 }
4827 .panel-heading .alert,
4828 .panel-footer .alert {
4829   white-space: nowrap;
4830   text-overflow: ellipsis;
4831   overflow-x: hidden;
4832 }
4833 .panel-heading:not(.-flexible-height) > .button-default,
4834 .panel-heading:not(.-flexible-height) > .alert,
4835 .panel-footer:not(.-flexible-height) > .button-default,
4836 .panel-footer:not(.-flexible-height) > .alert {
4837   height: var(--__panel-heading-height-inner);
4838   min-height: 0;
4839   box-sizing: border-box;
4840   margin: 0;
4841   min-width: 1px;
4842   padding-top: 0;
4843   padding-bottom: 0;
4844   -ms-flex-item-align: stretch;
4845       -ms-grid-row-align: stretch;
4846       align-self: stretch;
4847 }
4848 .panel-heading {
4849   border-radius: 10px 10px 0 0;
4850   border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
4851   border-width: 0 0 1px 0;
4852   -ms-flex-align: start;
4853       align-items: start;
4854   color: var(--panelText);
4855   background-color: #121a24;
4856   background-color: var(--bg, #121a24);
4857 }
4858 .panel-heading::after {
4859   background-color: #182230;
4860   background-color: var(--panel, #182230);
4861   z-index: -2;
4862   border-radius: 10px 10px 0 0;
4863   border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
4864   box-shadow: var(--panelHeaderShadow);
4865 }
4866 .panel-heading a,
4867 .panel-heading .-link {
4868   color: #d8a070;
4869   color: var(--panelLink, #d8a070);
4870 }
4871 .panel-heading .faint {
4872   background-color: transparent;
4873   color: rgba(185, 185, 186, 0.5);
4874   color: var(--panelFaint, rgba(185, 185, 186, 0.5));
4875 }
4876 .panel-heading .faint-link {
4877   color: rgba(185, 185, 186, 0.5);
4878   color: var(--faintLink, rgba(185, 185, 186, 0.5));
4879 }
4880 .panel-heading:not(.-flexible-height) > .button-default {
4881   -ms-flex-negative: 0;
4882       flex-shrink: 0;
4883 }
4884 .panel-heading:not(.-flexible-height) > .button-default,
4885 .panel-heading:not(.-flexible-height) > .button-default i[class*=icon-] {
4886   color: #b9b9ba;
4887   color: var(--btnPanelText, #b9b9ba);
4888 }
4889 .panel-heading:not(.-flexible-height) > .button-default:active {
4890   background-color: #182230;
4891   background-color: var(--btnPressedPanel, #182230);
4892   color: #b9b9ba;
4893   color: var(--btnPressedPanelText, #b9b9ba);
4894 }
4895 .panel-heading:not(.-flexible-height) > .button-default:disabled {
4896   color: #b9b9ba;
4897   color: var(--btnDisabledPanelText, #b9b9ba);
4898 }
4899 .panel-heading:not(.-flexible-height) > .button-default.toggled {
4900   color: #b9b9ba;
4901   color: var(--btnToggledPanelText, #b9b9ba);
4902 }
4903 .panel-footer {
4904   border-radius: 0 0 10px 10px;
4905   border-radius: 0 0 var(--panelRadius, 10px) var(--panelRadius, 10px);
4906   -ms-flex-align: center;
4907       align-items: center;
4908   border-width: 1px 0 0 0;
4909   border-style: solid;
4910   border-color: var(--border, #222);
4911 }
4912 .fa {
4913   color: grey;
4914 }
4915 .mobile-shown {
4916   display: none;
4917 }
4918 .badge {
4919   box-sizing: border-box;
4920   display: inline-block;
4921   border-radius: 99px;
4922   max-width: 10em;
4923   min-width: 1.7em;
4924   height: 1.3em;
4925   padding: 0.15em 0.15em;
4926   vertical-align: middle;
4927   font-weight: normal;
4928   font-style: normal;
4929   font-size: 0.9em;
4930   line-height: 1;
4931   text-align: center;
4932   white-space: nowrap;
4933   overflow: hidden;
4934   text-overflow: ellipsis;
4935 }
4936 .badge.badge-notification {
4937   background-color: #ff0000;
4938   background-color: var(--badgeNotification, #ff0000);
4939   color: white;
4940   color: var(--badgeNotificationText, white);
4941 }
4942 .alert {
4943   margin: 0 0.35em;
4944   padding: 0 0.25em;
4945   border-radius: 5px;
4946   border-radius: var(--tooltipRadius, 5px);
4947 }
4948 .alert.error {
4949   background-color: rgba(211, 16, 20, 0.5);
4950   background-color: var(--alertError, rgba(211, 16, 20, 0.5));
4951   color: #b9b9ba;
4952   color: var(--alertErrorText, #b9b9ba);
4953 }
4954 .panel-heading .alert.error {
4955   color: #b9b9ba;
4956   color: var(--alertErrorPanelText, #b9b9ba);
4957 }
4958 .alert.warning {
4959   background-color: rgba(111, 111, 20, 0.5);
4960   background-color: var(--alertWarning, rgba(111, 111, 20, 0.5));
4961   color: #b9b9ba;
4962   color: var(--alertWarningText, #b9b9ba);
4963 }
4964 .panel-heading .alert.warning {
4965   color: #b9b9ba;
4966   color: var(--alertWarningPanelText, #b9b9ba);
4967 }
4968 .alert.success {
4969   background-color: var(--alertSuccess, rgba(111, 111, 20, 0.5));
4970   color: var(--alertSuccessText, #b9b9ba);
4971 }
4972 .panel-heading .alert.success {
4973   color: var(--alertSuccessPanelText, #b9b9ba);
4974 }
4975 .faint {
4976   color: rgba(185, 185, 186, 0.5);
4977   color: var(--faint, rgba(185, 185, 186, 0.5));
4978 }
4979 .faint-link {
4980   color: rgba(185, 185, 186, 0.5);
4981   color: var(--faint, rgba(185, 185, 186, 0.5));
4982 }
4983 .faint-link:hover {
4984   text-decoration: underline;
4985 }
4986 .visibility-notice {
4987   padding: 0.5em;
4988   border: 1px solid rgba(185, 185, 186, 0.5);
4989   border: 1px solid var(--faint, rgba(185, 185, 186, 0.5));
4990   border-radius: 4px;
4991   border-radius: var(--inputRadius, 4px);
4992 }
4993 .notice-dismissible {
4994   padding-right: 4rem;
4995   position: relative;
4996 }
4997 .notice-dismissible .dismiss {
4998   position: absolute;
4999   top: 0;
5000   right: 0;
5001   padding: 0.5em;
5002   color: inherit;
5003 }
5004 .fa-scale-110.svg-inline--fa {
5005   font-size: 1.1em;
5006 }
5007 .fa-old-padding.svg-inline--fa {
5008   padding: 0 0.3em;
5009 }
5010 .login-hint {
5011   text-align: center;
5012 }
5013 @media all and (min-width: 801px) {
5014 .login-hint {
5015     display: none;
5016 }
5017 }
5018 .login-hint a {
5019   display: inline-block;
5020   padding: 1em 0;
5021   width: 100%;
5022 }
5023 .btn.button-default {
5024   min-height: 2em;
5025 }
5026 .new-status-notification {
5027   position: relative;
5028   font-size: 1.1em;
5029   z-index: 1;
5030   -ms-flex: 1;
5031       flex: 1;
5032 }
5033 @media all and (max-width: 800px) {
5034 .mobile-hidden {
5035     display: none;
5036 }
5037 }
5038 @keyframes spin {
5039 0% {
5040     transform: rotate(0deg);
5041 }
5042 100% {
5043     transform: rotate(359deg);
5044 }
5045 }
5046 @keyframes shakeError {
5047 0% {
5048     transform: translateX(0);
5049 }
5050 15% {
5051     transform: translateX(0.375rem);
5052 }
5053 30% {
5054     transform: translateX(-0.375rem);
5055 }
5056 45% {
5057     transform: translateX(0.375rem);
5058 }
5059 60% {
5060     transform: translateX(-0.375rem);
5061 }
5062 75% {
5063     transform: translateX(0.375rem);
5064 }
5065 90% {
5066     transform: translateX(-0.375rem);
5067 }
5068 100% {
5069     transform: translateX(0);
5070 }
5071 }
5072 .fade-enter-active,
5073 .fade-leave-active {
5074   transition: opacity 0.2s;
5075 }
5076 .fade-enter-from,
5077 .fade-leave-active {
5078   opacity: 0;
5079 }
5080 .thread-tree-replies {
5081   margin-left: var(--status-margin, 0.75em);
5082   border-left: 2px solid var(--border, #222);
5083 }
5084 .thread-tree-replies-hidden {
5085   padding: var(--status-margin, 0.75em);
5086   /* Make the button stretch along the whole row */
5087   display: -ms-flexbox;
5088   display: flex;
5089   -ms-flex-align: stretch;
5090       align-items: stretch;
5091   -ms-flex-direction: column;
5092       flex-direction: column;
5093 }
5094 .Conversation {
5095   z-index: 1;
5096   /* expanded conversation in timeline */
5097 }
5098 .Conversation .conversation-dive-to-top-level-box {
5099   padding: var(--status-margin, 0.75em);
5100   border-bottom-width: 1px;
5101   border-bottom-style: solid;
5102   border-bottom-color: var(--border, #222);
5103   border-radius: 0;
5104   /* Make the button stretch along the whole row */
5105   display: -ms-flexbox;
5106   display: flex;
5107   -ms-flex-align: stretch;
5108       align-items: stretch;
5109   -ms-flex-direction: column;
5110       flex-direction: column;
5111 }
5112 .Conversation .thread-ancestors {
5113   margin-left: var(--status-margin, 0.75em);
5114   border-left: 2px solid var(--border, #222);
5115 }
5116 .Conversation .thread-ancestor.-faded .StatusContent {
5117   --link: var(--faintLink);
5118   --text: var(--faint);
5119   color: var(--text);
5120 }
5121 .Conversation .thread-ancestor-dive-box {
5122   padding-left: var(--status-margin, 0.75em);
5123   border-bottom-width: 1px;
5124   border-bottom-style: solid;
5125   border-bottom-color: var(--border, #222);
5126   border-radius: 0;
5127   /* Make the button stretch along the whole row */
5128 }
5129 .Conversation .thread-ancestor-dive-box, .Conversation .thread-ancestor-dive-box-inner {
5130   display: -ms-flexbox;
5131   display: flex;
5132   -ms-flex-align: stretch;
5133       align-items: stretch;
5134   -ms-flex-direction: column;
5135       flex-direction: column;
5136 }
5137 .Conversation .thread-ancestor-dive-box-inner {
5138   padding: var(--status-margin, 0.75em);
5139 }
5140 .Conversation .conversation-status {
5141   border-bottom-width: 1px;
5142   border-bottom-style: solid;
5143   border-bottom-color: var(--border, #222);
5144   border-radius: 0;
5145 }
5146 .Conversation .thread-ancestor-has-other-replies .conversation-status,
5147 .Conversation .thread-ancestor:last-child .conversation-status,
5148 .Conversation .thread-ancestor:last-child .thread-ancestor-dive-box, .Conversation:last-child .conversation-status, .Conversation.-expanded .thread-tree .conversation-status {
5149   border-bottom: none;
5150 }
5151 .Conversation .thread-ancestors + .thread-tree > .conversation-status {
5152   border-top-width: 1px;
5153   border-top-style: solid;
5154   border-top-color: var(--border, #222);
5155 }
5156 .Conversation.status-fadein.-expanded .thread-body {
5157   border-left-width: 4px;
5158   border-left-style: solid;
5159   border-left-color: #ff0000;
5160   border-left-color: var(--cRed, #ff0000);
5161   border-radius: 0 0 10px 10px;
5162   border-radius: 0 0 var(--panelRadius, 10px) var(--panelRadius, 10px);
5163   border-bottom: 1px solid var(--border, #222);
5164 }
5165 .Conversation.-expanded.status-fadein {
5166   margin: calc(var(--status-margin, $status-margin) / 2);
5167 }
5168 .TimelineMenu {
5169   -ms-flex-negative: 1;
5170       flex-shrink: 1;
5171   margin-right: auto;
5172   min-width: 0;
5173   width: 24rem;
5174 }
5175 .TimelineMenu .popover-trigger-button {
5176   vertical-align: bottom;
5177 }
5178 .TimelineMenu .timeline-menu-popover-wrap {
5179   overflow: hidden;
5180   margin-top: 0.6rem;
5181   padding: 0 15px 15px 15px;
5182 }
5183 .TimelineMenu .timeline-menu-popover {
5184   width: 24rem;
5185   max-width: 100vw;
5186   margin: 0;
5187   font-size: 1rem;
5188   border-top-right-radius: 0;
5189   border-top-left-radius: 0;
5190   transform: translateY(-100%);
5191   transition: transform 100ms;
5192 }
5193 .TimelineMenu .panel::after {
5194   border-top-right-radius: 0;
5195   border-top-left-radius: 0;
5196 }
5197 .TimelineMenu.open .timeline-menu-popover {
5198   transform: translateY(0);
5199 }
5200 .TimelineMenu .timeline-menu-title {
5201   margin: 0;
5202   cursor: pointer;
5203   -webkit-user-select: none;
5204      -moz-user-select: none;
5205       -ms-user-select: none;
5206           user-select: none;
5207   width: 100%;
5208   display: -ms-flexbox;
5209   display: flex;
5210 }
5211 .TimelineMenu .timeline-menu-title .timeline-menu-name {
5212   overflow: hidden;
5213   text-overflow: ellipsis;
5214   white-space: nowrap;
5215 }
5216 .TimelineMenu .timeline-menu-title svg {
5217   margin-left: 0.6em;
5218   transition: transform 100ms;
5219 }
5220 .TimelineMenu .timeline-menu-title .click-blocker {
5221   cursor: default;
5222   -ms-flex-positive: 1;
5223       flex-grow: 1;
5224 }
5225 .TimelineMenu.open .timeline-menu-title svg {
5226   color: #b9b9ba;
5227   color: var(--panelText, #b9b9ba);
5228   transform: rotate(180deg);
5229 }
5230 .TimelineMenu .panel {
5231   box-shadow: var(--popoverShadow);
5232 }
5233 .TimelineMenu ul {
5234   list-style: none;
5235   margin: 0;
5236   padding: 0;
5237 }
5238 .TimelineMenu li {
5239   border-bottom: 1px solid;
5240   border-color: #222;
5241   border-color: var(--border, #222);
5242   padding: 0;
5243 }
5244 .TimelineMenu li:last-child a {
5245   border-bottom-right-radius: 10px;
5246   border-bottom-right-radius: var(--panelRadius, 10px);
5247   border-bottom-left-radius: 10px;
5248   border-bottom-left-radius: var(--panelRadius, 10px);
5249 }
5250 .TimelineMenu li:last-child {
5251   border: none;
5252 }
5253 .TimelineMenu a {
5254   display: block;
5255   padding: 0.6em 0.65em;
5256 }
5257 .TimelineMenu a:hover {
5258   background-color: #151e2a;
5259   background-color: var(--selectedMenu, #151e2a);
5260   color: #d8a070;
5261   color: var(--selectedMenuText, #d8a070);
5262   --faint: var(--selectedMenuFaintText, $fallback--faint);
5263   --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
5264   --lightText: var(--selectedMenuLightText, $fallback--lightText);
5265   --icon: var(--selectedMenuIcon, $fallback--icon);
5266 }
5267 .TimelineMenu a.router-link-active {
5268   font-weight: bolder;
5269   background-color: #151e2a;
5270   background-color: var(--selectedMenu, #151e2a);
5271   color: #b9b9ba;
5272   color: var(--selectedMenuText, #b9b9ba);
5273   --faint: var(--selectedMenuFaintText, $fallback--faint);
5274   --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
5275   --lightText: var(--selectedMenuLightText, $fallback--lightText);
5276   --icon: var(--selectedMenuIcon, $fallback--icon);
5277 }
5278 .TimelineMenu a.router-link-active:hover {
5279   text-decoration: underline;
5280 }
5281 .TimelineMenu a svg {
5282   margin-right: 0.4em;
5283   margin-left: -0.2em;
5284 }
5285 .TimelineQuickSettings > button {
5286   line-height: 100%;
5287   height: 100%;
5288   width: var(--__panel-heading-height-inner);
5289   text-align: center;
5290 }
5291 .TimelineQuickSettings > button svg {
5292   font-size: 1.2em;
5293 }
5294 .Timeline .loadmore-text {
5295   opacity: 1;
5296 }
5297 .Timeline.-blocked {
5298   cursor: progress;
5299 }
5300 .Timeline .conversation-heading {
5301   top: calc(var(--__panel-heading-height) * var(--currentPanelStack, 2));
5302   z-index: 2;
5303 }
5304 .Timeline.-nonpanel .timeline-heading {
5305   text-align: center;
5306   line-height: 2.75em;
5307   padding: 0 0.5em;
5308 }
5309 .Timeline.-nonpanel .timeline-heading .button-default, .Timeline.-nonpanel .timeline-heading .alert {
5310   line-height: 2em;
5311   width: 100%;
5312 }
5313 .tab-switcher {
5314   display: -ms-flexbox;
5315   display: flex;
5316 }
5317 .tab-switcher .tab-icon {
5318   margin: 0.2em auto;
5319   display: block;
5320 }
5321 .tab-switcher.top-tabs {
5322   -ms-flex-direction: column;
5323       flex-direction: column;
5324 }
5325 .tab-switcher.top-tabs > .tabs {
5326   width: 100%;
5327   overflow-y: hidden;
5328   overflow-x: auto;
5329   padding-top: 5px;
5330   -ms-flex-direction: row;
5331       flex-direction: row;
5332 }
5333 .tab-switcher.top-tabs > .tabs::after, .tab-switcher.top-tabs > .tabs::before {
5334   content: "";
5335   -ms-flex: 1 1 auto;
5336       flex: 1 1 auto;
5337   border-bottom: 1px solid;
5338   border-bottom-color: #222;
5339   border-bottom-color: var(--border, #222);
5340 }
5341 .tab-switcher.top-tabs > .tabs .tab-wrapper {
5342   height: 2em;
5343 }
5344 .tab-switcher.top-tabs > .tabs .tab-wrapper:not(.active)::after {
5345   left: 0;
5346   right: 0;
5347   bottom: 0;
5348   border-bottom: 1px solid;
5349   border-bottom-color: #222;
5350   border-bottom-color: var(--border, #222);
5351 }
5352 .tab-switcher.top-tabs > .tabs .tab {
5353   width: 100%;
5354   min-width: 1px;
5355   border-bottom-left-radius: 0;
5356   border-bottom-right-radius: 0;
5357   padding-bottom: 99px;
5358   margin-bottom: -93px;
5359 }
5360 .tab-switcher.top-tabs .contents.scrollable-tabs {
5361   -ms-flex-preferred-size: 0;
5362       flex-basis: 0;
5363 }
5364 .tab-switcher.side-tabs {
5365   -ms-flex-direction: row;
5366       flex-direction: row;
5367 }
5368 @media all and (max-width: 800px) {
5369   .tab-switcher.side-tabs {
5370     overflow-x: auto;
5371   }
5372 }
5373 .tab-switcher.side-tabs > .contents {
5374   -ms-flex: 1 1 auto;
5375       flex: 1 1 auto;
5376 }
5377 .tab-switcher.side-tabs > .tabs {
5378   -ms-flex: 0 0 auto;
5379       flex: 0 0 auto;
5380   overflow-y: auto;
5381   overflow-x: hidden;
5382   -ms-flex-direction: column;
5383       flex-direction: column;
5384 }
5385 .tab-switcher.side-tabs > .tabs::after, .tab-switcher.side-tabs > .tabs::before {
5386   -ms-flex-negative: 0;
5387       flex-shrink: 0;
5388   -ms-flex-preferred-size: 0.5em;
5389       flex-basis: 0.5em;
5390   content: "";
5391   border-right: 1px solid;
5392   border-right-color: #222;
5393   border-right-color: var(--border, #222);
5394 }
5395 .tab-switcher.side-tabs > .tabs::after {
5396   -ms-flex-positive: 1;
5397       flex-grow: 1;
5398 }
5399 .tab-switcher.side-tabs > .tabs::before {
5400   -ms-flex-positive: 0;
5401       flex-grow: 0;
5402 }
5403 .tab-switcher.side-tabs > .tabs .tab-wrapper {
5404   min-width: 10em;
5405   display: -ms-flexbox;
5406   display: flex;
5407   -ms-flex-direction: column;
5408       flex-direction: column;
5409 }
5410 @media all and (max-width: 800px) {
5411   .tab-switcher.side-tabs > .tabs .tab-wrapper {
5412     min-width: 4em;
5413   }
5414 }
5415 .tab-switcher.side-tabs > .tabs .tab-wrapper:not(.active)::after {
5416   top: 0;
5417   right: 0;
5418   bottom: 0;
5419   border-right: 1px solid;
5420   border-right-color: #222;
5421   border-right-color: var(--border, #222);
5422 }
5423 .tab-switcher.side-tabs > .tabs .tab-wrapper::before {
5424   -ms-flex: 0 0 6px;
5425       flex: 0 0 6px;
5426   content: "";
5427   border-right: 1px solid;
5428   border-right-color: #222;
5429   border-right-color: var(--border, #222);
5430 }
5431 .tab-switcher.side-tabs > .tabs .tab-wrapper:last-child .tab {
5432   margin-bottom: 0;
5433 }
5434 .tab-switcher.side-tabs > .tabs .tab {
5435   -ms-flex: 1;
5436       flex: 1;
5437   box-sizing: content-box;
5438   min-width: 10em;
5439   min-width: 1px;
5440   border-top-right-radius: 0;
5441   border-bottom-right-radius: 0;
5442   padding-left: 1em;
5443   padding-right: calc(1em + 200px);
5444   margin-right: -200px;
5445   margin-left: 1em;
5446 }
5447 @media all and (max-width: 800px) {
5448   .tab-switcher.side-tabs > .tabs .tab {
5449     padding-left: 0.25em;
5450     padding-right: calc(.25em + 200px);
5451     margin-right: calc(.25em - 200px);
5452     margin-left: 0.25em;
5453   }
5454   .tab-switcher.side-tabs > .tabs .tab .text {
5455     display: none;
5456   }
5457 }
5458 .tab-switcher .contents {
5459   -ms-flex: 1 0 auto;
5460       flex: 1 0 auto;
5461   min-height: 0px;
5462 }
5463 .tab-switcher .contents .hidden {
5464   display: none;
5465 }
5466 .tab-switcher .contents .full-height:not(.hidden) {
5467   height: 100%;
5468   display: -ms-flexbox;
5469   display: flex;
5470   -ms-flex-direction: column;
5471       flex-direction: column;
5472 }
5473 .tab-switcher .contents .full-height:not(.hidden) > *:not(.mobile-label) {
5474   -ms-flex: 1;
5475       flex: 1;
5476 }
5477 .tab-switcher .contents.scrollable-tabs {
5478   overflow-y: auto;
5479 }
5480 .tab-switcher .tab {
5481   position: relative;
5482   white-space: nowrap;
5483   padding: 6px 1em;
5484 }
5485 .tab-switcher .tab:not(.active) {
5486   z-index: 4;
5487 }
5488 .tab-switcher .tab:not(.active):hover {
5489   z-index: 6;
5490 }
5491 .tab-switcher .tab.active {
5492   background: transparent;
5493   z-index: 5;
5494   color: #b9b9ba;
5495   color: var(--tabActiveText, #b9b9ba);
5496 }
5497 .tab-switcher .tab img {
5498   max-height: 26px;
5499   vertical-align: top;
5500   margin-top: -5px;
5501 }
5502 .tab-switcher .tabs {
5503   display: -ms-flexbox;
5504   display: flex;
5505   position: relative;
5506   box-sizing: border-box;
5507 }
5508 .tab-switcher .tabs::after, .tab-switcher .tabs::before {
5509   display: block;
5510   -ms-flex: 1 1 auto;
5511       flex: 1 1 auto;
5512 }
5513 .tab-switcher .tab-wrapper {
5514   position: relative;
5515   display: -ms-flexbox;
5516   display: flex;
5517   -ms-flex: 0 0 auto;
5518       flex: 0 0 auto;
5519 }
5520 .tab-switcher .tab-wrapper:not(.active)::after {
5521   content: "";
5522   position: absolute;
5523   z-index: 7;
5524 }
5525 .tab-switcher .mobile-label {
5526   padding-left: 0.3em;
5527   padding-bottom: 0.25em;
5528   margin-top: 0.5em;
5529   margin-left: 0.2em;
5530   margin-bottom: 0.25em;
5531   border-bottom: 1px solid var(--border, #222);
5532 }
5533 @media all and (min-width: 800px) {
5534   .tab-switcher .mobile-label {
5535     display: none;
5536   }
5537 }
5538 .chat-title {
5539   display: -ms-flexbox;
5540   display: flex;
5541   overflow: hidden;
5542   text-overflow: ellipsis;
5543   white-space: nowrap;
5544   --emoji-size: 14px;
5545 }
5546 .chat-title .username {
5547   max-width: 100%;
5548   text-overflow: ellipsis;
5549   white-space: nowrap;
5550   display: inline;
5551   word-wrap: break-word;
5552   overflow: hidden;
5553 }
5554 .chat-title .avatar-container {
5555   -ms-flex-item-align: center;
5556       -ms-grid-row-align: center;
5557       align-self: center;
5558   line-height: 1;
5559 }
5560 .chat-title .titlebar-avatar {
5561   margin-right: 0.5em;
5562   height: 1.5em;
5563   width: 1.5em;
5564   border-radius: 10px;
5565   border-radius: var(--avatarAltRadius, 10px);
5566 }
5567 .chat-title .titlebar-avatar.animated::before {
5568   display: none;
5569 }
5570 .chat-list-item {
5571   display: -ms-flexbox;
5572   display: flex;
5573   -ms-flex-direction: row;
5574       flex-direction: row;
5575   padding: 0.75em;
5576   height: 5em;
5577   overflow: hidden;
5578   box-sizing: border-box;
5579   cursor: pointer;
5580 }
5581 .chat-list-item :focus {
5582   outline: none;
5583 }
5584 .chat-list-item:hover {
5585   background-color: var(--selectedPost, #151e2a);
5586   box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
5587 }
5588 .chat-list-item .chat-list-item-left {
5589   margin-right: 1em;
5590 }
5591 .chat-list-item .chat-list-item-center {
5592   width: 100%;
5593   box-sizing: border-box;
5594   overflow: hidden;
5595   word-wrap: break-word;
5596 }
5597 .chat-list-item .heading {
5598   width: 100%;
5599   display: -ms-inline-flexbox;
5600   display: inline-flex;
5601   -ms-flex-pack: justify;
5602       justify-content: space-between;
5603   line-height: 1em;
5604 }
5605 .chat-list-item .heading-right {
5606   white-space: nowrap;
5607 }
5608 .chat-list-item .name-and-account-name {
5609   text-overflow: ellipsis;
5610   white-space: nowrap;
5611   overflow: hidden;
5612   -ms-flex-negative: 1;
5613       flex-shrink: 1;
5614   line-height: var(--post-line-height);
5615 }
5616 .chat-list-item .chat-preview {
5617   display: -ms-inline-flexbox;
5618   display: inline-flex;
5619   overflow: hidden;
5620   white-space: nowrap;
5621   text-overflow: ellipsis;
5622   margin: 0.35em 0;
5623   color: #b9b9ba;
5624   color: var(--faint, #b9b9ba);
5625   width: 100%;
5626 }
5627 .chat-list-item a {
5628   color: var(--faintLink, #d8a070);
5629   text-decoration: none;
5630   pointer-events: none;
5631 }
5632 .chat-list-item:hover .animated.avatar canvas {
5633   display: none;
5634 }
5635 .chat-list-item:hover .animated.avatar img {
5636   visibility: visible;
5637 }
5638 .chat-list-item .Avatar {
5639   border-radius: 10px;
5640   border-radius: var(--avatarAltRadius, 10px);
5641 }
5642 .chat-list-item .chat-preview-body {
5643   --emoji-size: 1.4em;
5644 }
5645 .chat-list-item .time-wrapper {
5646   line-height: var(--post-line-height);
5647 }
5648 .chat-list-item .chat-preview-body {
5649   padding-right: 1em;
5650 }
5651 .basic-user-card {
5652   display: -ms-flexbox;
5653   display: flex;
5654   -ms-flex: 1 0;
5655       flex: 1 0;
5656   margin: 0;
5657   padding: 0.6em 1em;
5658 }
5659 .basic-user-card-collapsed-content {
5660   margin-left: 0.7em;
5661   text-align: left;
5662   -ms-flex: 1;
5663       flex: 1;
5664   min-width: 0;
5665 }
5666 .basic-user-card-user-name img {
5667   -o-object-fit: contain;
5668      object-fit: contain;
5669   height: 16px;
5670   width: 16px;
5671   vertical-align: middle;
5672 }
5673 .basic-user-card-user-name-value, .basic-user-card-screen-name {
5674   display: inline-block;
5675   max-width: 100%;
5676   overflow: hidden;
5677   white-space: nowrap;
5678   text-overflow: ellipsis;
5679 }
5680 .basic-user-card-expanded-content {
5681   -ms-flex: 1;
5682       flex: 1;
5683   margin-left: 0.7em;
5684   min-width: 0;
5685 }
5686 .chat-new .input-wrap {
5687   display: -ms-flexbox;
5688   display: flex;
5689   margin: 0.7em 0.5em 0.7em 0.5em;
5690 }
5691 .chat-new .input-wrap input {
5692   width: 100%;
5693 }
5694 .chat-new .search-icon {
5695   margin-right: 0.3em;
5696 }
5697 .chat-new .member-list {
5698   padding-bottom: 0.7rem;
5699 }
5700 .chat-new .basic-user-card:hover {
5701   cursor: pointer;
5702   background-color: var(--selectedPost, #151e2a);
5703 }
5704 .chat-new .go-back-button {
5705   text-align: center;
5706   line-height: 1;
5707   height: 100%;
5708   -ms-flex-item-align: start;
5709       -ms-grid-row-align: start;
5710       align-self: start;
5711   width: var(--__panel-heading-height-inner);
5712 }
5713 .chat-list {
5714   min-height: 25em;
5715   margin-bottom: 0;
5716 }
5717 .emtpy-chat-list-alert {
5718   padding: 3em;
5719   font-size: 1.2em;
5720   display: -ms-flexbox;
5721   display: flex;
5722   -ms-flex-pack: center;
5723       justify-content: center;
5724   color: #b9b9ba;
5725   color: var(--faint, #b9b9ba);
5726 }
5727 .chat-message-wrapper.hovered-message-chain .animated.Avatar canvas {
5728   display: none;
5729 }
5730 .chat-message-wrapper.hovered-message-chain .animated.Avatar img {
5731   visibility: visible;
5732 }
5733 .chat-message-wrapper .chat-message-menu {
5734   transition: opacity 0.1s;
5735   opacity: 0;
5736   position: absolute;
5737   top: -0.8em;
5738 }
5739 .chat-message-wrapper .chat-message-menu button {
5740   padding-top: 0.2em;
5741   padding-bottom: 0.2em;
5742 }
5743 .chat-message-wrapper .menu-icon {
5744   cursor: pointer;
5745 }
5746 .chat-message-wrapper .menu-icon:hover, .extra-button-popover.open .chat-message-wrapper .menu-icon {
5747   color: #b9b9ba;
5748   color: var(--text, #b9b9ba);
5749 }
5750 .chat-message-wrapper .popover {
5751   width: 12em;
5752 }
5753 .chat-message-wrapper .chat-message {
5754   display: -ms-flexbox;
5755   display: flex;
5756   padding-bottom: 0.5em;
5757 }
5758 .chat-message-wrapper .chat-message .status-body:hover {
5759   --_still-image-img-visibility: visible;
5760   --_still-image-canvas-visibility: hidden;
5761   --_still-image-label-visibility: hidden;
5762 }
5763 .chat-message-wrapper .avatar-wrapper {
5764   margin-right: 0.72em;
5765   width: 32px;
5766 }
5767 .chat-message-wrapper .link-preview, .chat-message-wrapper .attachments {
5768   margin-bottom: 1em;
5769 }
5770 .chat-message-wrapper .chat-message-inner {
5771   display: -ms-flexbox;
5772   display: flex;
5773   -ms-flex-direction: column;
5774       flex-direction: column;
5775   -ms-flex-align: start;
5776       align-items: flex-start;
5777   max-width: 80%;
5778   min-width: 10em;
5779   width: 100%;
5780 }
5781 .chat-message-wrapper .chat-message-inner.with-media {
5782   width: 100%;
5783 }
5784 .chat-message-wrapper .chat-message-inner.with-media .status {
5785   width: 100%;
5786 }
5787 .chat-message-wrapper .status {
5788   border-radius: 10px;
5789   border-radius: var(--chatMessageRadius, 10px);
5790   display: -ms-flexbox;
5791   display: flex;
5792   padding: 0.75em;
5793 }
5794 .chat-message-wrapper .created-at {
5795   position: relative;
5796   float: right;
5797   font-size: 0.8em;
5798   margin: -1em 0 -0.5em 0;
5799   font-style: italic;
5800   opacity: 0.8;
5801 }
5802 .chat-message-wrapper .without-attachment .message-content .RichContent::after {
5803   margin-right: 5.4em;
5804   content: " ";
5805   display: inline-block;
5806 }
5807 .chat-message-wrapper .pending .status-content.media-body, .chat-message-wrapper .pending .created-at {
5808   color: var(--faint);
5809 }
5810 .chat-message-wrapper .error .status-content.media-body, .chat-message-wrapper .error .created-at {
5811   color: #ff0000;
5812   color: var(--badgeNotification, #ff0000);
5813 }
5814 .chat-message-wrapper .incoming a {
5815   color: var(--chatMessageIncomingLink, #d8a070);
5816 }
5817 .chat-message-wrapper .incoming .status {
5818   color: var(--chatMessageIncomingText, #b9b9ba);
5819   background-color: var(--chatMessageIncomingBg, #121a24);
5820   border: 1px solid var(--chatMessageIncomingBorder, --border);
5821 }
5822 .chat-message-wrapper .incoming .created-at a {
5823   color: var(--chatMessageIncomingText, #b9b9ba);
5824 }
5825 .chat-message-wrapper .incoming .chat-message-menu {
5826   left: 0.4rem;
5827 }
5828 .chat-message-wrapper .outgoing {
5829   display: -ms-flexbox;
5830   display: flex;
5831   -ms-flex-direction: row;
5832       flex-direction: row;
5833   -ms-flex-wrap: wrap;
5834       flex-wrap: wrap;
5835   -ms-flex-line-pack: end;
5836       align-content: end;
5837   -ms-flex-pack: end;
5838       justify-content: flex-end;
5839 }
5840 .chat-message-wrapper .outgoing a {
5841   color: var(--chatMessageOutgoingLink, #d8a070);
5842 }
5843 .chat-message-wrapper .outgoing .status {
5844   color: var(--chatMessageOutgoingText, #b9b9ba);
5845   background-color: var(--chatMessageOutgoingBg, #151e2a);
5846   border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
5847 }
5848 .chat-message-wrapper .outgoing .chat-message-inner {
5849   -ms-flex-align: end;
5850       align-items: flex-end;
5851 }
5852 .chat-message-wrapper .outgoing .chat-message-menu {
5853   right: 0.4rem;
5854 }
5855 .chat-message-wrapper .visible {
5856   opacity: 1;
5857 }
5858 .chat-message-date-separator {
5859   text-align: center;
5860   margin: 1.4em 0;
5861   font-size: 0.9em;
5862   -webkit-user-select: none;
5863      -moz-user-select: none;
5864       -ms-user-select: none;
5865           user-select: none;
5866   color: #b9b9ba;
5867   color: var(--faintedText, #b9b9ba);
5868 }
5869 .chat-view {
5870   display: -ms-flexbox;
5871   display: flex;
5872   height: 100%;
5873 }
5874 .chat-view .chat-view-inner {
5875   height: auto;
5876   width: 100%;
5877   overflow: visible;
5878   display: -ms-flexbox;
5879   display: flex;
5880 }
5881 .chat-view .chat-view-body {
5882   box-sizing: border-box;
5883   background-color: var(--chatBg, #121a24);
5884   display: -ms-flexbox;
5885   display: flex;
5886   -ms-flex-direction: column;
5887       flex-direction: column;
5888   width: 100%;
5889   overflow: visible;
5890   min-height: calc(100vh - var(--navbar-height));
5891   margin: 0 0 0 0;
5892   border-radius: 10px 10px 0 0;
5893   border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
5894 }
5895 .chat-view .chat-view-body::after {
5896   border-radius: 0;
5897 }
5898 .chat-view .message-list {
5899   padding: 0 0.8em;
5900   height: 100%;
5901   display: -ms-flexbox;
5902   display: flex;
5903   -ms-flex-direction: column;
5904       flex-direction: column;
5905   -ms-flex-pack: end;
5906       justify-content: end;
5907 }
5908 .chat-view .footer {
5909   position: -webkit-sticky;
5910   position: sticky;
5911   bottom: 0;
5912   background-color: #121a24;
5913   background-color: var(--bg, #121a24);
5914   z-index: 1;
5915 }
5916 .chat-view .chat-view-heading {
5917   -ms-grid-columns: auto minmax(50%, 1fr);
5918       grid-template-columns: auto minmax(50%, 1fr);
5919 }
5920 .chat-view .go-back-button {
5921   text-align: center;
5922   line-height: 1;
5923   height: 100%;
5924   -ms-flex-item-align: start;
5925       -ms-grid-row-align: start;
5926       align-self: start;
5927   width: var(--__panel-heading-height-inner);
5928 }
5929 .chat-view .jump-to-bottom-button {
5930   width: 2.5em;
5931   height: 2.5em;
5932   border-radius: 100%;
5933   position: absolute;
5934   right: 1.3em;
5935   top: -3.2em;
5936   background-color: #182230;
5937   background-color: var(--btn, #182230);
5938   display: -ms-flexbox;
5939   display: flex;
5940   -ms-flex-pack: center;
5941       justify-content: center;
5942   -ms-flex-align: center;
5943       align-items: center;
5944   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
5945   z-index: 10;
5946   transition: 0.35s all;
5947   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
5948   opacity: 0;
5949   visibility: hidden;
5950   cursor: pointer;
5951 }
5952 .chat-view .jump-to-bottom-button.visible {
5953   opacity: 1;
5954   visibility: visible;
5955 }
5956 .chat-view .jump-to-bottom-button i {
5957   font-size: 1em;
5958   color: #b9b9ba;
5959   color: var(--text, #b9b9ba);
5960 }
5961 .chat-view .jump-to-bottom-button .unread-message-count {
5962   font-size: 0.8em;
5963   left: 50%;
5964   margin-top: -1rem;
5965   padding: 0.1em;
5966   border-radius: 50px;
5967   position: absolute;
5968 }
5969 .chat-view .jump-to-bottom-button .chat-loading-error {
5970   width: 100%;
5971   display: -ms-flexbox;
5972   display: flex;
5973   -ms-flex-align: end;
5974       align-items: flex-end;
5975   height: 100%;
5976 }
5977 .chat-view .jump-to-bottom-button .chat-loading-error .error {
5978   width: 100%;
5979 }
5980 .follow-card-content-container {
5981   -ms-flex-negative: 0;
5982       flex-shrink: 0;
5983   display: -ms-flexbox;
5984   display: flex;
5985   -ms-flex-direction: row;
5986       flex-direction: row;
5987   -ms-flex-pack: justify;
5988       justify-content: space-between;
5989   -ms-flex-wrap: wrap;
5990       flex-wrap: wrap;
5991   line-height: 1.5em;
5992 }
5993 .follow-card-follow-button {
5994   margin-top: 0.5em;
5995   margin-left: auto;
5996   width: 10em;
5997 }
5998 .with-load-more-footer {
5999   padding: 10px;
6000   text-align: center;
6001   border-top: 1px solid;
6002   border-top-color: #222;
6003   border-top-color: var(--border, #222);
6004 }
6005 .with-load-more-footer .error {
6006   font-size: 1rem;
6007 }
6008 .with-load-more-footer a {
6009   cursor: pointer;
6010 }
6011 .user-profile {
6012   -ms-flex: 2;
6013       flex: 2;
6014   -ms-flex-preferred-size: 500px;
6015       flex-basis: 500px;
6016   --currentPanelStack: 1;
6017 }
6018 .user-profile .user-profile-fields {
6019   margin: 0 0.5em;
6020 }
6021 .user-profile .user-profile-fields img {
6022   -o-object-fit: contain;
6023      object-fit: contain;
6024   vertical-align: middle;
6025   max-width: 100%;
6026   max-height: 400px;
6027 }
6028 .user-profile .user-profile-fields img.emoji {
6029   width: 18px;
6030   height: 18px;
6031 }
6032 .user-profile .user-profile-fields .user-profile-field {
6033   display: -ms-flexbox;
6034   display: flex;
6035   margin: 0.25em;
6036   border: 1px solid var(--border, #222);
6037   border-radius: 4px;
6038   border-radius: var(--inputRadius, 4px);
6039 }
6040 .user-profile .user-profile-fields .user-profile-field .user-profile-field-name {
6041   -ms-flex: 0 1 30%;
6042       flex: 0 1 30%;
6043   font-weight: 500;
6044   text-align: right;
6045   color: var(--lightText);
6046   min-width: 120px;
6047   border-right: 1px solid var(--border, #222);
6048 }
6049 .user-profile .user-profile-fields .user-profile-field .user-profile-field-value {
6050   -ms-flex: 1 1 70%;
6051       flex: 1 1 70%;
6052   color: var(--text);
6053   margin: 0 0 0 0.25em;
6054 }
6055 .user-profile .user-profile-fields .user-profile-field .user-profile-field-name, .user-profile .user-profile-fields .user-profile-field .user-profile-field-value {
6056   line-height: 1.3;
6057   text-overflow: ellipsis;
6058   white-space: nowrap;
6059   overflow: hidden;
6060   padding: 0.5em 1.5em;
6061   box-sizing: border-box;
6062 }
6063 .user-profile .userlist-placeholder {
6064   display: -ms-flexbox;
6065   display: flex;
6066   -ms-flex-pack: center;
6067       justify-content: center;
6068   -ms-flex-align: middle;
6069       align-items: middle;
6070   padding: 2em;
6071 }
6072 .user-profile-placeholder .panel-body {
6073   display: -ms-flexbox;
6074   display: flex;
6075   -ms-flex-pack: center;
6076       justify-content: center;
6077   -ms-flex-align: middle;
6078       align-items: middle;
6079   padding: 7em;
6080 }
6081 .search-result-heading {
6082   color: rgba(185, 185, 186, 0.5);
6083   color: var(--faint, rgba(185, 185, 186, 0.5));
6084   padding: 0.75rem;
6085   text-align: center;
6086 }
6087 @media all and (max-width: 800px) {
6088 .search-nav-heading .tab-switcher .tabs .tab-wrapper {
6089     display: block;
6090     -ms-flex-pack: center;
6091         justify-content: center;
6092     -ms-flex: 1 1 auto;
6093         flex: 1 1 auto;
6094     text-align: center;
6095 }
6096 }
6097 .search-result {
6098   box-sizing: border-box;
6099   border-bottom: 1px solid;
6100   border-color: #222;
6101   border-color: var(--border, #222);
6102 }
6103 .search-result-footer {
6104   border-width: 1px 0 0 0;
6105   border-style: solid;
6106   border-color: var(--border, #222);
6107   padding: 10px;
6108   background-color: #182230;
6109   background-color: var(--panel, #182230);
6110 }
6111 .search-input-container {
6112   padding: 0.8rem;
6113   display: -ms-flexbox;
6114   display: flex;
6115   -ms-flex-pack: center;
6116       justify-content: center;
6117 }
6118 .search-input-container .search-input {
6119   width: 100%;
6120   line-height: 1.125rem;
6121   font-size: 1rem;
6122   padding: 0.5rem;
6123   box-sizing: border-box;
6124 }
6125 .search-input-container .search-button {
6126   margin-left: 0.5em;
6127 }
6128 .loading-icon {
6129   padding: 1em;
6130 }
6131 .trend {
6132   display: -ms-flexbox;
6133   display: flex;
6134   -ms-flex-align: center;
6135       align-items: center;
6136 }
6137 .trend .hashtag {
6138   -ms-flex: 1 1 auto;
6139       flex: 1 1 auto;
6140   color: #b9b9ba;
6141   color: var(--text, #b9b9ba);
6142   overflow: hidden;
6143   text-overflow: ellipsis;
6144   white-space: nowrap;
6145 }
6146 .trend .count {
6147   -ms-flex: 0 0 auto;
6148       flex: 0 0 auto;
6149   width: 2rem;
6150   font-size: 1.5rem;
6151   line-height: 2.25rem;
6152   font-weight: 500;
6153   text-align: center;
6154   color: #b9b9ba;
6155   color: var(--text, #b9b9ba);
6156 }
6157 @charset "UTF-8";
6158 .registration-form {
6159   display: -ms-flexbox;
6160   display: flex;
6161   -ms-flex-direction: column;
6162       flex-direction: column;
6163   margin: 0.6em;
6164 }
6165 .registration-form .container {
6166   display: -ms-flexbox;
6167   display: flex;
6168   -ms-flex-direction: row;
6169       flex-direction: row;
6170 }
6171 .registration-form .container > * {
6172   min-width: 0;
6173 }
6174 .registration-form .terms-of-service {
6175   -ms-flex: 0 1 50%;
6176       flex: 0 1 50%;
6177   margin: 0.8em;
6178 }
6179 .registration-form .text-fields {
6180   margin-top: 0.6em;
6181   -ms-flex: 1 0;
6182       flex: 1 0;
6183   display: -ms-flexbox;
6184   display: flex;
6185   -ms-flex-direction: column;
6186       flex-direction: column;
6187 }
6188 .registration-form textarea {
6189   min-height: 100px;
6190   resize: vertical;
6191 }
6192 .registration-form .form-group {
6193   display: -ms-flexbox;
6194   display: flex;
6195   -ms-flex-direction: column;
6196       flex-direction: column;
6197   padding: 0.3em 0;
6198   line-height: 2;
6199   margin-bottom: 1em;
6200 }
6201 .registration-form .form-group--error {
6202   animation-name: shakeError;
6203   animation-duration: 0.6s;
6204   animation-timing-function: ease-in-out;
6205 }
6206 .registration-form .form-group--error .form--label {
6207   color: #f04124;
6208   color: var(--cRed, #f04124);
6209 }
6210 .registration-form .form-error {
6211   margin-top: -0.7em;
6212   text-align: left;
6213 }
6214 .registration-form .form-error span {
6215   font-size: 0.85em;
6216 }
6217 .registration-form .form-error ul {
6218   list-style: none;
6219   padding: 0 0 0 5px;
6220   margin-top: 0;
6221 }
6222 .registration-form .form-error ul li::before {
6223   content: "\2022   ";
6224 }
6225 .registration-form form textarea {
6226   line-height: 16px;
6227   resize: vertical;
6228 }
6229 .registration-form .captcha {
6230   max-width: 350px;
6231   margin-bottom: 0.4em;
6232 }
6233 .registration-form .btn {
6234   margin-top: 0.6em;
6235   height: 2em;
6236 }
6237 .registration-form .error {
6238   text-align: center;
6239 }
6240 @media all and (max-width: 800px) {
6241 .registration-form .container {
6242     -ms-flex-direction: column-reverse;
6243         flex-direction: column-reverse;
6244 }
6245 }
6246 .password-reset-form {
6247   display: -ms-flexbox;
6248   display: flex;
6249   -ms-flex-direction: column;
6250       flex-direction: column;
6251   -ms-flex-align: center;
6252       align-items: center;
6253   margin: 0.6em;
6254 }
6255 .password-reset-form .container {
6256   display: -ms-flexbox;
6257   display: flex;
6258   -ms-flex: 1 0;
6259       flex: 1 0;
6260   -ms-flex-direction: column;
6261       flex-direction: column;
6262   margin-top: 0.6em;
6263   max-width: 18rem;
6264 }
6265 .password-reset-form .container > * {
6266   min-width: 0;
6267 }
6268 .password-reset-form .form-group {
6269   display: -ms-flexbox;
6270   display: flex;
6271   -ms-flex-direction: column;
6272       flex-direction: column;
6273   margin-bottom: 1em;
6274   padding: 0.3em 0;
6275   line-height: 1.85em;
6276 }
6277 .password-reset-form .error {
6278   text-align: center;
6279   animation-name: shakeError;
6280   animation-duration: 0.4s;
6281   animation-timing-function: ease-in-out;
6282 }
6283 .password-reset-form .alert {
6284   padding: 0.5em;
6285   margin: 0.3em 0 1em;
6286 }
6287 .password-reset-form .password-reset-required {
6288   background-color: var(--alertError, rgba(211, 16, 20, 0.5));
6289   padding: 10px 0;
6290 }
6291 .password-reset-form .notice-dismissible {
6292   padding-right: 2rem;
6293 }
6294 .password-reset-form .dismiss {
6295   cursor: pointer;
6296 }
6297 .follow-request-card-content-container {
6298   display: -ms-flexbox;
6299   display: flex;
6300   -ms-flex-direction: row;
6301       flex-direction: row;
6302   -ms-flex-wrap: wrap;
6303       flex-wrap: wrap;
6304 }
6305 .follow-request-card-content-container button {
6306   margin-top: 0.5em;
6307   margin-right: 0.5em;
6308   -ms-flex: 1 1;
6309       flex: 1 1;
6310   max-width: 12em;
6311   min-width: 8em;
6312 }
6313 .follow-request-card-content-container button:last-child {
6314   margin-right: 0;
6315 }
6316 .tos-content {
6317   margin: 1em;
6318 }
6319 .staff-group {
6320   padding-left: 1em;
6321   padding-top: 1em;
6322 }
6323 .staff-group .basic-user-card {
6324   padding-left: 0;
6325 }
6326 .mrf-section {
6327   margin: 1em;
6328 }
6329 .mrf-section table {
6330   width: 100%;
6331   text-align: left;
6332   padding-left: 10px;
6333   padding-bottom: 20px;
6334 }
6335 .mrf-section table th, .mrf-section table td {
6336   width: 180px;
6337   max-width: 360px;
6338   overflow: hidden;
6339   vertical-align: text-top;
6340 }
6341 .mrf-section table th + th, .mrf-section table td + td {
6342   width: auto;
6343 }
6344
6345 /*# sourceMappingURL=app.ea8ec0bbcc083797019b.css.map*/