git.squeep.com Git - akkoma/blob - priv/static/static/css/app.ab6cb01d5b0b782e7457.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   overflow: hidden;
3122 }
3123 .Status:hover {
3124   --_still-image-img-visibility: visible;
3125   --_still-image-canvas-visibility: hidden;
3126   --_still-image-label-visibility: hidden;
3127 }
3128 .Status.-focused {
3129   background-color: #151e2a;
3130   background-color: var(--selectedPost, #151e2a);
3131   color: #b9b9ba;
3132   color: var(--selectedPostText, #b9b9ba);
3133   --lightText: var(--selectedPostLightText, $fallback--light);
3134   --faint: var(--selectedPostFaintText, $fallback--faint);
3135   --faintLink: var(--selectedPostFaintLink, $fallback--faint);
3136   --postLink: var(--selectedPostPostLink, $fallback--faint);
3137   --postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint);
3138   --icon: var(--selectedPostIcon, $fallback--icon);
3139 }
3140 .Status .gravestone {
3141   padding: var(--status-margin, 0.75em);
3142   color: rgba(185, 185, 186, 0.5);
3143   color: var(--faint, rgba(185, 185, 186, 0.5));
3144   display: -ms-flexbox;
3145   display: flex;
3146 }
3147 .Status .gravestone .deleted-text {
3148   margin: 0.5em 0;
3149   -ms-flex-align: center;
3150       align-items: center;
3151 }
3152 .Status .status-container {
3153   display: -ms-flexbox;
3154   display: flex;
3155   padding: var(--status-margin, 0.75em);
3156 }
3157 .Status .status-container > * {
3158   min-width: 0;
3159 }
3160 .Status .status-container.-repeat {
3161   padding-top: 0;
3162 }
3163 .Status .pin {
3164   padding: var(--status-margin, 0.75em) var(--status-margin, 0.75em) 0;
3165   display: -ms-flexbox;
3166   display: flex;
3167   -ms-flex-align: center;
3168       align-items: center;
3169   -ms-flex-pack: end;
3170       justify-content: flex-end;
3171 }
3172 ._misclick-prevention .Status {
3173   pointer-events: none;
3174 }
3175 ._misclick-prevention .Status .attachments {
3176   pointer-events: initial;
3177   cursor: initial;
3178 }
3179 .Status .left-side {
3180   margin-right: var(--status-margin, 0.75em);
3181 }
3182 .Status .right-side {
3183   -ms-flex: 1;
3184       flex: 1;
3185   min-width: 0;
3186 }
3187 .Status .usercard {
3188   margin-bottom: var(--status-margin, 0.75em);
3189 }
3190 .Status .status-username {
3191   white-space: nowrap;
3192   overflow: hidden;
3193   max-width: 85%;
3194   font-weight: bold;
3195   -ms-flex-negative: 1;
3196       flex-shrink: 1;
3197   margin-right: 0.4em;
3198   text-overflow: ellipsis;
3199   --_still_image-label-scale: 0.25;
3200   --emoji-size: 14px;
3201 }
3202 .Status .status-favicon {
3203   height: 18px;
3204   width: 18px;
3205   margin-right: 0.4em;
3206 }
3207 .Status .status-heading {
3208   margin-bottom: 0.5em;
3209 }
3210 .Status .heading-name-row {
3211   display: -ms-flexbox;
3212   display: flex;
3213   -ms-flex-pack: justify;
3214       justify-content: space-between;
3215   line-height: 1.3;
3216 }
3217 .Status .heading-name-row a {
3218   display: inline-block;
3219   word-break: break-all;
3220 }
3221 .Status .account-name {
3222   min-width: 1.6em;
3223   margin-right: 0.4em;
3224   white-space: nowrap;
3225   overflow: hidden;
3226   text-overflow: ellipsis;
3227   -ms-flex: 1 1 0px;
3228       flex: 1 1 0;
3229 }
3230 .Status .heading-left {
3231   display: -ms-flexbox;
3232   display: flex;
3233   min-width: 0;
3234 }
3235 .Status .heading-right {
3236   display: -ms-flexbox;
3237   display: flex;
3238   -ms-flex-negative: 0;
3239       flex-shrink: 0;
3240 }
3241 .Status .heading-right .button-unstyled {
3242   padding: 5px;
3243   margin: -5px;
3244 }
3245 .Status .heading-right .button-unstyled:hover svg {
3246   color: #b9b9ba;
3247   color: var(--lightText, #b9b9ba);
3248 }
3249 .Status .heading-right .svg-inline--fa {
3250   margin-left: 0.25em;
3251 }
3252 .Status .glued-label {
3253   display: -ms-inline-flexbox;
3254   display: inline-flex;
3255   white-space: nowrap;
3256 }
3257 .Status .timeago {
3258   margin-right: 0.2em;
3259 }
3260 .Status .heading-reply-row {
3261   position: relative;
3262   -ms-flex-line-pack: baseline;
3263       align-content: baseline;
3264   font-size: 0.85em;
3265   margin-top: 0.2em;
3266   line-height: 130%;
3267   max-width: 100%;
3268   -ms-flex-align: stretch;
3269       align-items: stretch;
3270 }
3271 .Status .reply-to-popover, .Status .reply-to-no-popover, .Status .mentions {
3272   min-width: 0;
3273   margin-right: 0.4em;
3274   -ms-flex-negative: 0;
3275       flex-shrink: 0;
3276 }
3277 .Status .reply-glued-label {
3278   margin-right: 0.5em;
3279 }
3280 .Status .reply-to-popover .reply-to:hover::before {
3281   content: "";
3282   display: block;
3283   position: absolute;
3284   bottom: 0;
3285   width: 100%;
3286   border-bottom: 1px solid var(--faint);
3287   pointer-events: none;
3288 }
3289 .Status .reply-to-popover .faint-link:hover {
3290   text-decoration: none;
3291 }
3292 .Status .reply-to-popover.-strikethrough .reply-to::after {
3293   content: "";
3294   display: block;
3295   position: absolute;
3296   top: 50%;
3297   width: 100%;
3298   border-bottom: 1px solid var(--faint);
3299   pointer-events: none;
3300 }
3301 .Status .mentions, .Status .reply-to {
3302   white-space: nowrap;
3303   position: relative;
3304 }
3305 .Status .mentions-text, .Status .reply-to-text {
3306   color: var(--faint);
3307   overflow: hidden;
3308   text-overflow: ellipsis;
3309   white-space: nowrap;
3310 }
3311 .Status .mentions-line {
3312   display: inline;
3313 }
3314 .Status .replies {
3315   margin-top: 0.25em;
3316   line-height: 1.3;
3317   font-size: 0.85em;
3318   display: -ms-flexbox;
3319   display: flex;
3320   -ms-flex-wrap: wrap;
3321       flex-wrap: wrap;
3322 }
3323 .Status .replies > * {
3324   margin-right: 0.4em;
3325 }
3326 .Status .reply-link {
3327   height: 17px;
3328 }
3329 .Status .repeat-info {
3330   padding: 0.4em var(--status-margin, 0.75em);
3331 }
3332 .Status .repeat-info .repeat-icon {
3333   color: #0fa00f;
3334   color: var(--cGreen, #0fa00f);
3335 }
3336 .Status .repeater-avatar {
3337   border-radius: var(--avatarAltRadius, 10px);
3338   margin-left: 28px;
3339   width: 20px;
3340   height: 20px;
3341 }
3342 .Status .repeater-name {
3343   text-overflow: ellipsis;
3344   margin-right: 0;
3345 }
3346 .Status .repeater-name .emoji {
3347   width: 14px;
3348   height: 14px;
3349   vertical-align: middle;
3350   -o-object-fit: contain;
3351      object-fit: contain;
3352 }
3353 .Status .status-fadein {
3354   animation-duration: 0.4s;
3355   animation-name: fadein;
3356 }
3357 @keyframes fadein {
3358 from {
3359     opacity: 0;
3360 }
3361 to {
3362     opacity: 1;
3363 }
3364 }
3365 .Status .status-actions {
3366   position: relative;
3367   width: 100%;
3368   display: -ms-flexbox;
3369   display: flex;
3370   margin-top: var(--status-margin, 0.75em);
3371 }
3372 .Status .status-actions > * {
3373   max-width: 4em;
3374   -ms-flex: 1;
3375       flex: 1;
3376 }
3377 .Status .muted {
3378   padding: 0.25em 0.6em;
3379   height: 1.2em;
3380   line-height: 1.2em;
3381   text-overflow: ellipsis;
3382   overflow: hidden;
3383   display: -ms-flexbox;
3384   display: flex;
3385   -ms-flex-wrap: nowrap;
3386       flex-wrap: nowrap;
3387 }
3388 .Status .muted .status-username, .Status .muted .mute-thread, .Status .muted .mute-words {
3389   word-wrap: normal;
3390   word-break: normal;
3391   white-space: nowrap;
3392 }
3393 .Status .muted .status-username, .Status .muted .mute-words {
3394   text-overflow: ellipsis;
3395   overflow: hidden;
3396 }
3397 .Status .muted .status-username {
3398   font-weight: normal;
3399   -ms-flex: 0 1 auto;
3400       flex: 0 1 auto;
3401   margin-right: 0.2em;
3402   font-size: smaller;
3403 }
3404 .Status .muted .mute-thread {
3405   -ms-flex: 0 0 auto;
3406       flex: 0 0 auto;
3407 }
3408 .Status .muted .mute-words {
3409   -ms-flex: 1 0 5em;
3410       flex: 1 0 5em;
3411   margin-left: 0.2em;
3412 }
3413 .Status .muted .mute-words::before {
3414   content: " ";
3415 }
3416 .Status .muted .unmute {
3417   -ms-flex: 0 0 auto;
3418       flex: 0 0 auto;
3419   margin-left: auto;
3420   display: block;
3421 }
3422 .Status .reply-form {
3423   padding-top: 0;
3424   padding-bottom: 0;
3425 }
3426 .Status .reply-body {
3427   -ms-flex: 1;
3428       flex: 1;
3429 }
3430 .Status .favs-repeated-users {
3431   margin-top: var(--status-margin, 0.75em);
3432 }
3433 .Status .stats {
3434   width: 100%;
3435   display: -ms-flexbox;
3436   display: flex;
3437   line-height: 1em;
3438 }
3439 .Status .avatar-row {
3440   -ms-flex: 1;
3441       flex: 1;
3442   overflow: hidden;
3443   position: relative;
3444   display: -ms-flexbox;
3445   display: flex;
3446   -ms-flex-align: center;
3447       align-items: center;
3448 }
3449 .Status .avatar-row::before {
3450   content: "";
3451   position: absolute;
3452   height: 100%;
3453   width: 1px;
3454   left: 0;
3455   background-color: var(--faint, rgba(185, 185, 186, 0.5));
3456 }
3457 .Status .stat-count {
3458   margin-right: var(--status-margin, 0.75em);
3459   -webkit-user-select: none;
3460      -moz-user-select: none;
3461       -ms-user-select: none;
3462           user-select: none;
3463 }
3464 .Status .stat-count .stat-title {
3465   color: var(--faint, rgba(185, 185, 186, 0.5));
3466   font-size: 0.85em;
3467   text-transform: uppercase;
3468   position: relative;
3469 }
3470 .Status .stat-count .stat-number {
3471   font-weight: bolder;
3472   font-size: 1.1em;
3473   line-height: 1em;
3474 }
3475 .Status .stat-count:hover .stat-title {
3476   text-decoration: underline;
3477 }
3478 @media all and (max-width: 800px) {
3479 .Status .repeater-avatar {
3480     margin-left: 20px;
3481 }
3482 .Status .post-avatar {
3483     width: 40px;
3484     height: 40px;
3485 }
3486 .Status .post-avatar.-compact {
3487     width: 32px;
3488     height: 32px;
3489 }
3490 }
3491 .notification-reaction-emoji {
3492   width: 40px;
3493   display: -ms-flexbox;
3494   display: flex;
3495   -ms-flex-direction: column;
3496       flex-direction: column;
3497 }
3498 .Notification {
3499   border-bottom: 1px solid;
3500   border-color: #222;
3501   border-color: var(--border, #222);
3502   word-wrap: break-word;
3503   word-break: break-word;
3504   --emoji-size: 14px;
3505 }
3506 .Notification:hover {
3507   --_still-image-img-visibility: visible;
3508   --_still-image-canvas-visibility: hidden;
3509   --_still-image-label-visibility: hidden;
3510 }
3511 .Notification.-muted {
3512   padding: 0.25em 0.6em;
3513   height: 1.2em;
3514   line-height: 1.2em;
3515   text-overflow: ellipsis;
3516   overflow: hidden;
3517   display: -ms-flexbox;
3518   display: flex;
3519   -ms-flex-wrap: nowrap;
3520       flex-wrap: nowrap;
3521 }
3522 .Notification.-muted .status-username, .Notification.-muted .mute-thread, .Notification.-muted .mute-words {
3523   word-wrap: normal;
3524   word-break: normal;
3525   white-space: nowrap;
3526 }
3527 .Notification.-muted .status-username, .Notification.-muted .mute-words {
3528   text-overflow: ellipsis;
3529   overflow: hidden;
3530 }
3531 .Notification.-muted .status-username {
3532   font-weight: normal;
3533   -ms-flex: 0 1 auto;
3534       flex: 0 1 auto;
3535   margin-right: 0.2em;
3536   font-size: smaller;
3537 }
3538 .Notification.-muted .mute-thread {
3539   -ms-flex: 0 0 auto;
3540       flex: 0 0 auto;
3541 }
3542 .Notification.-muted .mute-words {
3543   -ms-flex: 1 0 5em;
3544       flex: 1 0 5em;
3545   margin-left: 0.2em;
3546 }
3547 .Notification.-muted .mute-words::before {
3548   content: " ";
3549 }
3550 .Notification.-muted .unmute {
3551   -ms-flex: 0 0 auto;
3552       flex: 0 0 auto;
3553   margin-left: auto;
3554   display: block;
3555 }
3556 .Notification .type-icon {
3557   margin: 0 0.1em;
3558 }
3559 .Notification.-type--repeat .type-icon {
3560   color: #0fa00f;
3561   color: var(--cGreen, #0fa00f);
3562 }
3563 .Notification.-type--follow .type-icon {
3564   color: #0095ff;
3565   color: var(--cBlue, #0095ff);
3566 }
3567 .Notification.-type--follow-request .type-icon {
3568   color: #0095ff;
3569   color: var(--cBlue, #0095ff);
3570 }
3571 .Notification.-type--like .type-icon {
3572   color: orange;
3573   color: orange;
3574   color: var(--cOrange, orange);
3575 }
3576 .Notification.-type--move .type-icon {
3577   color: #0095ff;
3578   color: var(--cBlue, #0095ff);
3579 }
3580 .NotificationFilters {
3581   -ms-flex-item-align: stretch;
3582       -ms-grid-row-align: stretch;
3583       align-self: stretch;
3584 }
3585 .NotificationFilters > button {
3586   line-height: 100%;
3587   height: 100%;
3588   width: var(--__panel-heading-height-inner);
3589   text-align: center;
3590 }
3591 .NotificationFilters > button svg {
3592   font-size: 1.2em;
3593 }
3594 .Notifications:not(.minimal) {
3595   padding-bottom: 15em;
3596 }
3597 .Notifications .loadmore-error {
3598   color: #b9b9ba;
3599   color: var(--text, #b9b9ba);
3600 }
3601 .Notifications .notification {
3602   position: relative;
3603 }
3604 .Notifications .notification .notification-overlay {
3605   position: absolute;
3606   top: 0;
3607   right: 0;
3608   left: 0;
3609   bottom: 0;
3610   pointer-events: none;
3611 }
3612 .Notifications .notification.unseen .notification-overlay {
3613   background-image: linear-gradient(135deg, var(--badgeNotification, #ff0000) 4px, transparent 10px);
3614 }
3615 .notification {
3616   box-sizing: border-box;
3617   /* TODO cleanup this */
3618 }
3619 .notification:hover .animated.Avatar canvas {
3620   display: none;
3621 }
3622 .notification:hover .animated.Avatar img {
3623   visibility: visible;
3624 }
3625 .notification:last-child .Notification {
3626   border-bottom: none;
3627 }
3628 .notification .non-mention {
3629   display: -ms-flexbox;
3630   display: flex;
3631   -ms-flex: 1;
3632       flex: 1;
3633   -ms-flex-wrap: nowrap;
3634       flex-wrap: nowrap;
3635   padding: 0.6em;
3636   min-width: 0;
3637   --link: var(--faintLink);
3638   --text: var(--faint);
3639 }
3640 .notification .non-mention .avatar-container {
3641   width: 32px;
3642   height: 32px;
3643 }
3644 .notification .follow-request-accept:hover {
3645   color: #b9b9ba;
3646   color: var(--text, #b9b9ba);
3647 }
3648 .notification .follow-request-reject:hover {
3649   color: #ff0000;
3650   color: var(--cRed, #ff0000);
3651 }
3652 .notification .follow-text, .notification .move-text {
3653   padding: 0.5em 0;
3654   overflow-wrap: break-word;
3655   display: -ms-flexbox;
3656   display: flex;
3657   -ms-flex-pack: justify;
3658       justify-content: space-between;
3659 }
3660 .notification .follow-text .follow-name, .notification .move-text .follow-name {
3661   display: block;
3662   max-width: 100%;
3663   overflow: hidden;
3664   text-overflow: ellipsis;
3665   white-space: nowrap;
3666 }
3667 .notification .Status {
3668   -ms-flex: 1;
3669       flex: 1;
3670 }
3671 .notification time {
3672   white-space: nowrap;
3673 }
3674 .notification .notification-right {
3675   -ms-flex: 1;
3676       flex: 1;
3677   padding-left: 0.8em;
3678   min-width: 0;
3679 }
3680 .notification .notification-right .timeago {
3681   min-width: 3em;
3682   text-align: right;
3683 }
3684 .notification .emoji-reaction-emoji {
3685   font-size: 1.3em;
3686 }
3687 .notification .notification-details {
3688   min-width: 0;
3689   word-wrap: break-word;
3690   line-height: var(--post-line-height);
3691   position: relative;
3692   overflow: hidden;
3693   width: 100%;
3694   -ms-flex: 1 1 0px;
3695       flex: 1 1 0;
3696   display: -ms-flexbox;
3697   display: flex;
3698   -ms-flex-wrap: nowrap;
3699       flex-wrap: nowrap;
3700   -ms-flex-pack: justify;
3701       justify-content: space-between;
3702 }
3703 .notification .notification-details .name-and-action {
3704   -ms-flex: 1;
3705       flex: 1;
3706   overflow: hidden;
3707   text-overflow: ellipsis;
3708 }
3709 .notification .notification-details .username {
3710   font-weight: bolder;
3711   max-width: 100%;
3712   text-overflow: ellipsis;
3713   white-space: nowrap;
3714 }
3715 .notification .notification-details .timeago {
3716   margin-right: 0.2em;
3717 }
3718 .notification .notification-details .status-content {
3719   margin: 0;
3720   max-height: 300px;
3721 }
3722 .notification .notification-details h1 {
3723   word-break: break-all;
3724   margin: 0 0 0.3em;
3725   padding: 0;
3726   font-size: 1em;
3727   line-height: 1.5;
3728 }
3729 .notification .notification-details h1 small {
3730   font-weight: lighter;
3731 }
3732 .notification .notification-details p {
3733   margin: 0;
3734   margin-top: 0;
3735   margin-bottom: 0.3em;
3736 }
3737 .MobileNav .mobile-nav {
3738   display: -ms-grid;
3739   display: grid;
3740   line-height: var(--navbar-height);
3741   -ms-grid-rows: 50px;
3742       grid-template-rows: 50px;
3743   -ms-grid-columns: 2fr auto;
3744       grid-template-columns: 2fr auto;
3745   width: 100%;
3746   box-sizing: border-box;
3747 }
3748 .MobileNav .mobile-nav a {
3749   color: var(--topBarLink, #d8a070);
3750 }
3751 .MobileNav .mobile-inner-nav {
3752   width: 100%;
3753   display: -ms-flexbox;
3754   display: flex;
3755   -ms-flex-align: center;
3756       align-items: center;
3757 }
3758 .MobileNav .mobile-nav-button {
3759   display: inline-block;
3760   text-align: center;
3761   padding: 0 1em;
3762   position: relative;
3763   cursor: pointer;
3764 }
3765 .MobileNav .site-name {
3766   padding: 0 0.3em;
3767   display: inline-block;
3768 }
3769 .MobileNav .item {
3770   /* moslty just to get rid of extra whitespaces */
3771   display: -ms-flexbox;
3772   display: flex;
3773 }
3774 .MobileNav .alert-dot {
3775   border-radius: 100%;
3776   height: 8px;
3777   width: 8px;
3778   position: absolute;
3779   left: calc(50% - 4px);
3780   top: calc(50% - 4px);
3781   margin-left: 6px;
3782   margin-top: -6px;
3783   background-color: #ff0000;
3784   background-color: var(--badgeNotification, #ff0000);
3785 }
3786 .MobileNav .mobile-notifications-drawer {
3787   width: 100%;
3788   height: 100vh;
3789   overflow-x: hidden;
3790   position: fixed;
3791   top: 0;
3792   left: 0;
3793   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
3794   box-shadow: var(--panelShadow);
3795   transition-property: transform;
3796   transition-duration: 0.25s;
3797   transform: translateX(0);
3798   z-index: 1001;
3799   -webkit-overflow-scrolling: touch;
3800 }
3801 .MobileNav .mobile-notifications-drawer.-closed {
3802   transform: translateX(100%);
3803   box-shadow: none;
3804 }
3805 .MobileNav .mobile-notifications-header {
3806   display: -ms-flexbox;
3807   display: flex;
3808   -ms-flex-align: center;
3809       align-items: center;
3810   -ms-flex-pack: justify;
3811       justify-content: space-between;
3812   z-index: 1;
3813   width: 100%;
3814   height: 50px;
3815   line-height: 50px;
3816   position: absolute;
3817   color: var(--topBarText);
3818   background-color: #182230;
3819   background-color: var(--topBar, #182230);
3820   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6);
3821   box-shadow: var(--topBarShadow);
3822 }
3823 .MobileNav .mobile-notifications-header .title {
3824   font-size: 1.3em;
3825   margin-left: 0.6em;
3826 }
3827 .MobileNav .mobile-notifications {
3828   margin-top: 50px;
3829   width: 100vw;
3830   height: calc(100vh - var(--navbar-height));
3831   overflow-x: hidden;
3832   overflow-y: scroll;
3833   color: #b9b9ba;
3834   color: var(--text, #b9b9ba);
3835   background-color: #121a24;
3836   background-color: var(--bg, #121a24);
3837 }
3838 .MobileNav .mobile-notifications .notifications {
3839   padding: 0;
3840   border-radius: 0;
3841   box-shadow: none;
3842 }
3843 .MobileNav .mobile-notifications .notifications .panel {
3844   border-radius: 0;
3845   margin: 0;
3846   box-shadow: none;
3847 }
3848 .MobileNav .mobile-notifications .notifications .panel:after {
3849   border-radius: 0;
3850 }
3851 .MobileNav .mobile-notifications .notifications .panel .panel-heading {
3852   border-radius: 0;
3853   box-shadow: none;
3854 }
3855 .SearchBar {
3856   display: -ms-inline-flexbox;
3857   display: inline-flex;
3858   -ms-flex-align: baseline;
3859       align-items: baseline;
3860   vertical-align: baseline;
3861   -ms-flex-pack: end;
3862       justify-content: flex-end;
3863 }
3864 .SearchBar.-expanded {
3865   width: 100%;
3866 }
3867 .SearchBar .search-bar-input,
3868 .SearchBar .search-button {
3869   height: 29px;
3870 }
3871 .SearchBar .search-bar-input {
3872   -ms-flex: 1 0 auto;
3873       flex: 1 0 auto;
3874 }
3875 .SearchBar .cancel-search {
3876   height: 50px;
3877 }
3878 .SearchBar .cancel-icon {
3879   color: #b9b9ba;
3880   color: var(--btnTopBarText, #b9b9ba);
3881 }
3882 .DesktopNav {
3883   width: 100%;
3884 }
3885 .DesktopNav a {
3886   color: var(--topBarLink, #d8a070);
3887 }
3888 .DesktopNav .inner-nav {
3889   display: -ms-grid;
3890   display: grid;
3891   -ms-grid-rows: var(--navbar-height);
3892       grid-template-rows: var(--navbar-height);
3893   -ms-grid-columns: 2fr auto 2fr;
3894       grid-template-columns: 2fr auto 2fr;
3895   grid-template-areas: "sitename logo actions";
3896   box-sizing: border-box;
3897   padding: 0 1.2em;
3898   margin: auto;
3899   max-width: 980px;
3900 }
3901 .DesktopNav.-logoLeft .inner-nav {
3902   -ms-grid-columns: auto 2fr 2fr;
3903       grid-template-columns: auto 2fr 2fr;
3904   grid-template-areas: "logo sitename actions";
3905 }
3906 .DesktopNav .button-default, .DesktopNav .button-default svg {
3907   color: #b9b9ba;
3908   color: var(--btnTopBarText, #b9b9ba);
3909 }
3910 .DesktopNav .button-default:active {
3911   background-color: #182230;
3912   background-color: var(--btnPressedTopBar, #182230);
3913   color: #b9b9ba;
3914   color: var(--btnPressedTopBarText, #b9b9ba);
3915 }
3916 .DesktopNav .button-default:disabled {
3917   color: #b9b9ba;
3918   color: var(--btnDisabledTopBarText, #b9b9ba);
3919 }
3920 .DesktopNav .button-default.toggled {
3921   color: #b9b9ba;
3922   color: var(--btnToggledTopBarText, #b9b9ba);
3923   background-color: #182230;
3924   background-color: var(--btnToggledTopBar, #182230);
3925 }
3926 .DesktopNav .logo {
3927   grid-area: logo;
3928   position: relative;
3929   transition: opacity;
3930   transition-timing-function: ease-out;
3931   transition-duration: 100ms;
3932 }
3933 @media all and (min-width: 800px) {
3934 .DesktopNav .logo {
3935     opacity: 1 !important;
3936 }
3937 }
3938 .DesktopNav .logo .mask {
3939   -webkit-mask-repeat: no-repeat;
3940           mask-repeat: no-repeat;
3941   -webkit-mask-position: center;
3942           mask-position: center;
3943   -webkit-mask-size: contain;
3944           mask-size: contain;
3945   background-color: #182230;
3946   background-color: var(--topBarText, #182230);
3947   position: absolute;
3948   top: 0;
3949   bottom: 0;
3950   left: 0;
3951   right: 0;
3952 }
3953 .DesktopNav .logo img {
3954   display: inline-block;
3955   height: var(--navbar-height);
3956 }
3957 .DesktopNav .nav-icon {
3958   margin-left: 0.2em;
3959   width: 2em;
3960   height: 100%;
3961   text-align: center;
3962 }
3963 .DesktopNav .nav-icon .svg-inline--fa {
3964   color: #d8a070;
3965   color: var(--topBarLink, #d8a070);
3966 }
3967 .DesktopNav .sitename {
3968   grid-area: sitename;
3969 }
3970 .DesktopNav .actions {
3971   grid-area: actions;
3972 }
3973 .DesktopNav .item {
3974   -ms-flex: 1;
3975       flex: 1;
3976   line-height: var(--navbar-height);
3977   height: var(--navbar-height);
3978   overflow: hidden;
3979   display: -ms-flexbox;
3980   display: flex;
3981   -ms-flex-wrap: wrap;
3982       flex-wrap: wrap;
3983 }
3984 .DesktopNav .item.right {
3985   -ms-flex-pack: end;
3986       justify-content: flex-end;
3987   text-align: right;
3988 }
3989 .list-item:not(:last-child) {
3990   border-bottom: 1px solid;
3991   border-bottom-color: #222;
3992   border-bottom-color: var(--border, #222);
3993 }
3994 .list-empty-content {
3995   text-align: center;
3996   padding: 10px;
3997 }
3998 .user-reporting-panel {
3999   width: 90vw;
4000   max-width: 700px;
4001   min-height: 20vh;
4002   max-height: 80vh;
4003 }
4004 .user-reporting-panel .panel-body {
4005   display: -ms-flexbox;
4006   display: flex;
4007   -ms-flex-direction: column-reverse;
4008       flex-direction: column-reverse;
4009   border-top: 1px solid;
4010   border-color: #222;
4011   border-color: var(--border, #222);
4012   overflow: hidden;
4013 }
4014 .user-reporting-panel-left {
4015   padding: 1.1em 0.7em 0.7em;
4016   line-height: var(--post-line-height);
4017   box-sizing: border-box;
4018 }
4019 .user-reporting-panel-left > div {
4020   margin-bottom: 1em;
4021 }
4022 .user-reporting-panel-left > div:last-child {
4023   margin-bottom: 0;
4024 }
4025 .user-reporting-panel-left p {
4026   margin-top: 0;
4027 }
4028 .user-reporting-panel-left textarea.form-control {
4029   line-height: 16px;
4030   resize: none;
4031   overflow: hidden;
4032   transition: min-height 200ms 100ms;
4033   min-height: 44px;
4034   width: 100%;
4035 }
4036 .user-reporting-panel-left .btn {
4037   min-width: 10em;
4038   padding: 0 2em;
4039 }
4040 .user-reporting-panel-left .alert {
4041   margin: 1em 0 0 0;
4042   line-height: 1.3em;
4043 }
4044 .user-reporting-panel-right {
4045   display: -ms-flexbox;
4046   display: flex;
4047   -ms-flex-direction: column;
4048       flex-direction: column;
4049   overflow-y: auto;
4050 }
4051 .user-reporting-panel-sitem {
4052   display: -ms-flexbox;
4053   display: flex;
4054   -ms-flex-pack: justify;
4055       justify-content: space-between;
4056   /* TODO cleanup this */
4057 }
4058 .user-reporting-panel-sitem > .Status {
4059   -ms-flex: 1;
4060       flex: 1;
4061 }
4062 .user-reporting-panel-sitem > .checkbox {
4063   margin: 0.75em;
4064 }
4065 @media all and (min-width: 801px) {
4066 .user-reporting-panel .panel-body {
4067     -ms-flex-direction: row;
4068         flex-direction: row;
4069 }
4070 .user-reporting-panel-left {
4071     width: 50%;
4072     max-width: 320px;
4073     border-right: 1px solid;
4074     border-color: #222;
4075     border-color: var(--border, #222);
4076     padding: 1.1em;
4077 }
4078 .user-reporting-panel-left > div {
4079     margin-bottom: 2em;
4080 }
4081 .user-reporting-panel-right {
4082     width: 50%;
4083     -ms-flex: 1 1 auto;
4084         flex: 1 1 auto;
4085     margin-bottom: 12px;
4086 }
4087 }
4088 .modal-view.post-form-modal-view {
4089   -ms-flex-align: start;
4090       align-items: flex-start;
4091 }
4092 .post-form-modal-panel {
4093   -ms-flex-negative: 0;
4094       flex-shrink: 0;
4095   margin-top: 25%;
4096   margin-bottom: 2em;
4097   width: 100%;
4098   max-width: 700px;
4099 }
4100 @media (orientation: landscape) {
4101 .post-form-modal-panel {
4102     margin-top: 8%;
4103 }
4104 }
4105 .global-notice-list {
4106   position: fixed;
4107   top: 50px;
4108   width: 100%;
4109   pointer-events: none;
4110   z-index: 1001;
4111   display: -ms-flexbox;
4112   display: flex;
4113   -ms-flex-direction: column;
4114       flex-direction: column;
4115   -ms-flex-align: center;
4116       align-items: center;
4117 }
4118 .global-notice-list .global-notice {
4119   pointer-events: auto;
4120   text-align: center;
4121   width: 40em;
4122   max-width: calc(100% - 3em);
4123   display: -ms-flexbox;
4124   display: flex;
4125   padding-left: 1.5em;
4126   line-height: 2;
4127   margin-bottom: 0.5em;
4128 }
4129 .global-notice-list .global-notice .notice-message {
4130   -ms-flex: 1 1 100%;
4131       flex: 1 1 100%;
4132 }
4133 .global-notice-list .global-error {
4134   background-color: var(--alertPopupError, #ff0000);
4135   color: var(--alertPopupErrorText, #b9b9ba);
4136 }
4137 .global-notice-list .global-error .svg-inline--fa {
4138   color: var(--alertPopupErrorText, #b9b9ba);
4139 }
4140 .global-notice-list .global-warning {
4141   background-color: var(--alertPopupWarning, orange);
4142   color: var(--alertPopupWarningText, #b9b9ba);
4143 }
4144 .global-notice-list .global-warning .svg-inline--fa {
4145   color: var(--alertPopupWarningText, #b9b9ba);
4146 }
4147 .global-notice-list .global-success {
4148   background-color: var(--alertPopupSuccess, #0fa00f);
4149   color: var(--alertPopupSuccessText, #b9b9ba);
4150 }
4151 .global-notice-list .global-success .svg-inline--fa {
4152   color: var(--alertPopupSuccessText, #b9b9ba);
4153 }
4154 .global-notice-list .global-info {
4155   background-color: var(--alertPopupNeutral, #182230);
4156   color: var(--alertPopupNeutralText, #b9b9ba);
4157 }
4158 .global-notice-list .global-info .svg-inline--fa {
4159   color: var(--alertPopupNeutralText, #b9b9ba);
4160 }
4161 .global-notice-list .close-notice {
4162   padding-right: 0.2em;
4163 }
4164 .global-notice-list .close-notice .svg-inline--fa:hover {
4165   opacity: 0.6;
4166 }
4167 @charset "UTF-8";
4168 :root {
4169   --navbar-height: 3.5rem;
4170   --post-line-height: 1.4;
4171 }
4172 html {
4173   font-size: 14px;
4174 }
4175 body {
4176   font-family: sans-serif;
4177   font-family: var(--interfaceFont, sans-serif);
4178   margin: 0;
4179   color: #b9b9ba;
4180   color: var(--text, #b9b9ba);
4181   -webkit-font-smoothing: antialiased;
4182   -moz-osx-font-smoothing: grayscale;
4183   overscroll-behavior-y: none;
4184   overflow-x: clip;
4185   overflow-y: scroll;
4186 }
4187 body.hidden {
4188   display: none;
4189 }
4190 @media (any-pointer: fine) {
4191 * {
4192     scrollbar-color: var(--btn) transparent;
4193 }
4194 *::-webkit-scrollbar {
4195     background: transparent;
4196 }
4197 *::-webkit-scrollbar-button, *::-webkit-scrollbar-thumb {
4198     background-color: var(--btn);
4199     box-shadow: var(--buttonShadow);
4200     border-radius: var(--btnRadius);
4201 }
4202 *::-webkit-scrollbar-button {
4203     --___bgPadding: 2px;
4204     color: var(--btnText);
4205     background-repeat: no-repeat, no-repeat;
4206 }
4207 *::-webkit-scrollbar-button:horizontal {
4208     background-size: 50% calc(50% - var(--___bgPadding)), 50% calc(50% - var(--___bgPadding));
4209 }
4210 *::-webkit-scrollbar-button:horizontal:increment {
4211     background-image: linear-gradient(45deg, var(--btnText) 50%, transparent 51%), linear-gradient(-45deg, transparent 50%, var(--btnText) 51%);
4212     background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
4213 }
4214 *::-webkit-scrollbar-button:horizontal:decrement {
4215     background-image: linear-gradient(45deg, transparent 50%, var(--btnText) 51%), linear-gradient(-45deg, var(--btnText) 50%, transparent 51%);
4216     background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
4217 }
4218 *::-webkit-scrollbar-button:vertical {
4219     background-size: calc(50% - var(--___bgPadding)) 50%, calc(50% - var(--___bgPadding)) 50%;
4220 }
4221 *::-webkit-scrollbar-button:vertical:increment {
4222     background-image: linear-gradient(-45deg, transparent 50%, var(--btnText) 51%), linear-gradient(45deg, transparent 50%, var(--btnText) 51%);
4223     background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
4224 }
4225 *::-webkit-scrollbar-button:vertical:decrement {
4226     background-image: linear-gradient(-45deg, var(--btnText) 50%, transparent 51%), linear-gradient(45deg, var(--btnText) 50%, transparent 51%);
4227     background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
4228 }
4229 html {
4230     scrollbar-color: var(--selectedMenu) var(--wallpaper);
4231     background: var(--wallpaper);
4232 }
4233 }
4234 a {
4235   text-decoration: none;
4236   color: #d8a070;
4237   color: var(--link, #d8a070);
4238 }
4239 h4 {
4240   margin: 0;
4241 }
4242 i[class*=icon-],
4243 .svg-inline--fa {
4244   color: #666;
4245   color: var(--icon, #666);
4246 }
4247 nav {
4248   z-index: 1000;
4249   color: var(--topBarText);
4250   background-color: #182230;
4251   background-color: var(--topBar, #182230);
4252   color: rgba(185, 185, 186, 0.5);
4253   color: var(--faint, rgba(185, 185, 186, 0.5));
4254   box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
4255   box-shadow: var(--topBarShadow);
4256   box-sizing: border-box;
4257   height: var(--navbar-height);
4258   position: fixed;
4259 }
4260 #sidebar {
4261   grid-area: sidebar;
4262 }
4263 .column.-scrollable {
4264   top: var(--navbar-height);
4265   position: -webkit-sticky;
4266   position: sticky;
4267 }
4268 #main-scroller {
4269   grid-area: content;
4270   position: relative;
4271 }
4272 #notifs-column {
4273   grid-area: notifs;
4274 }
4275 .app-bg-wrapper {
4276   position: fixed;
4277   height: 100%;
4278   top: var(--navbar-height);
4279   z-index: -1000;
4280   left: 0;
4281   right: -20px;
4282   background-size: cover;
4283   background-repeat: no-repeat;
4284   background-color: var(--wallpaper);
4285   background-image: var(--body-background-image);
4286   background-position: 50%;
4287 }
4288 .underlay {
4289   -ms-grid-column: 1;
4290       grid-column-start: 1;
4291   -ms-grid-column-span: 3;
4292       grid-column-end: span 3;
4293   -ms-grid-row: 1;
4294       grid-row-start: 1;
4295   grid-row-end: 1;
4296   pointer-events: none;
4297   background-color: rgba(0, 0, 0, 0.15);
4298   background-color: var(--underlay, rgba(0, 0, 0, 0.15));
4299   z-index: -1000;
4300 }
4301 .app-layout {
4302   --miniColumn: 25rem;
4303   --maxiColumn: minmax(var(--miniColumn), 45rem);
4304   --columnGap: 1em;
4305   --status-margin: 0.75em;
4306   position: relative;
4307   display: -ms-grid;
4308   display: grid;
4309   -ms-grid-columns: var(--miniColumn) var(--maxiColumn);
4310       grid-template-columns: var(--miniColumn) var(--maxiColumn);
4311   grid-template-areas: "sidebar content";
4312   -ms-grid-rows: 1fr;
4313       grid-template-rows: 1fr;
4314   box-sizing: border-box;
4315   margin: 0 auto;
4316   -ms-flex-line-pack: start;
4317       align-content: flex-start;
4318   -ms-flex-wrap: wrap;
4319       flex-wrap: wrap;
4320   -ms-flex-pack: center;
4321       justify-content: center;
4322   min-height: 100vh;
4323   overflow-x: clip;
4324 }
4325 .app-layout .column {
4326   --___columnMargin: var(--columnGap);
4327   display: -ms-grid;
4328   display: grid;
4329   -ms-grid-columns: 100%;
4330       grid-template-columns: 100%;
4331   box-sizing: border-box;
4332   -ms-grid-row: 1;
4333       grid-row-start: 1;
4334   grid-row-end: 1;
4335   margin: 0 calc(var(--___columnMargin) / 2);
4336   padding: calc(var(--___columnMargin)) 0;
4337   row-gap: var(--___columnMargin);
4338   -ms-flex-line-pack: start;
4339       align-content: start;
4340 }
4341 .app-layout .column:not(.-scrollable) {
4342   margin-top: var(--navbar-height);
4343 }
4344 .app-layout .column:hover {
4345   z-index: 2;
4346 }
4347 .app-layout .column.-full-height {
4348   margin-bottom: 0;
4349   padding-top: 0;
4350   padding-bottom: 0;
4351 }
4352 .app-layout .column.-scrollable {
4353   --___paddingIncrease: calc(var(--columnGap) / 2);
4354   position: -webkit-sticky;
4355   position: sticky;
4356   top: var(--navbar-height);
4357   max-height: calc(100vh - var(--navbar-height));
4358   overflow-y: auto;
4359   overflow-x: hidden;
4360   margin-left: calc(var(--___paddingIncrease) * -1);
4361   padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
4362 }
4363 @supports (scrollbar-width: none) or (-webkit-text-fill-color: initial) {
4364 .app-layout .column.-scrollable:not(.-show-scrollbar) {
4365     scrollbar-width: none;
4366     margin-right: calc(var(--___paddingIncrease) * -1);
4367     padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
4368 }
4369 .app-layout .column.-scrollable:not(.-show-scrollbar)::-webkit-scrollbar {
4370     display: block;
4371     width: 0;
4372 }
4373 }
4374 .app-layout .column.-scrollable .panel-heading.-sticky {
4375   top: calc(var(--columnGap) / -1);
4376 }
4377 .app-layout.-has-new-post-button .column {
4378   padding-bottom: 10rem;
4379 }
4380 .app-layout.-no-sticky-headers .column .panel-heading.-sticky {
4381   position: relative;
4382   top: 0;
4383 }
4384 .app-layout .column-inner {
4385   display: -ms-grid;
4386   display: grid;
4387   -ms-grid-columns: 100%;
4388       grid-template-columns: 100%;
4389   box-sizing: border-box;
4390   row-gap: 1em;
4391   -ms-flex-line-pack: start;
4392       align-content: start;
4393 }
4394 .app-layout.-reverse:not(.-wide):not(.-mobile) {
4395   -ms-grid-columns: var(--maxiColumn) var(--miniColumn);
4396       grid-template-columns: var(--maxiColumn) var(--miniColumn);
4397   grid-template-areas: "content sidebar";
4398 }
4399 .app-layout.-wide {
4400   -ms-grid-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn);
4401       grid-template-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn);
4402   grid-template-areas: "sidebar content notifs";
4403 }
4404 .app-layout.-wide.-reverse {
4405   grid-template-areas: "notifs content sidebar";
4406 }
4407 .app-layout.-mobile {
4408   -ms-grid-columns: 100vw;
4409       grid-template-columns: 100vw;
4410   grid-template-areas: "content";
4411   padding: 0;
4412 }
4413 .app-layout.-mobile .column {
4414   margin-left: 0;
4415   margin-right: 0;
4416   padding-top: 0;
4417   margin-top: var(--navbar-height);
4418   margin-bottom: 0;
4419 }
4420 .app-layout.-mobile .panel-heading,
4421 .app-layout.-mobile .panel-heading::after,
4422 .app-layout.-mobile .panel-heading::before,
4423 .app-layout.-mobile .panel,
4424 .app-layout.-mobile .panel::after {
4425   border-top-left-radius: 0;
4426   border-top-right-radius: 0;
4427 }
4428 .app-layout.-mobile .underlay,
4429 .app-layout.-mobile #sidebar,
4430 .app-layout.-mobile #notifs-column {
4431   display: none;
4432 }
4433 .app-layout.-normal #notifs-column {
4434   display: none;
4435 }
4436 .text-center {
4437   text-align: center;
4438 }
4439 .button-default {
4440   -webkit-user-select: none;
4441      -moz-user-select: none;
4442       -ms-user-select: none;
4443           user-select: none;
4444   color: #b9b9ba;
4445   color: var(--btnText, #b9b9ba);
4446   background-color: #182230;
4447   background-color: var(--btn, #182230);
4448   border: none;
4449   border-radius: 4px;
4450   border-radius: var(--btnRadius, 4px);
4451   cursor: pointer;
4452   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;
4453   box-shadow: var(--buttonShadow);
4454   font-size: 1em;
4455   font-family: sans-serif;
4456   font-family: var(--interfaceFont, sans-serif);
4457 }
4458 .button-default.-sublime {
4459   background: transparent;
4460 }
4461 .button-default i[class*=icon-],
4462 .button-default .svg-inline--fa {
4463   color: #b9b9ba;
4464   color: var(--btnText, #b9b9ba);
4465 }
4466 .button-default::-moz-focus-inner {
4467   border: none;
4468 }
4469 .button-default:hover {
4470   box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
4471   box-shadow: var(--buttonHoverShadow);
4472 }
4473 .button-default:active {
4474   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;
4475   box-shadow: var(--buttonPressedShadow);
4476   color: #b9b9ba;
4477   color: var(--btnPressedText, #b9b9ba);
4478   background-color: #182230;
4479   background-color: var(--btnPressed, #182230);
4480 }
4481 .button-default:active svg,
4482 .button-default:active i {
4483   color: #b9b9ba;
4484   color: var(--btnPressedText, #b9b9ba);
4485 }
4486 .button-default:disabled {
4487   cursor: not-allowed;
4488   color: #b9b9ba;
4489   color: var(--btnDisabledText, #b9b9ba);
4490   background-color: #182230;
4491   background-color: var(--btnDisabled, #182230);
4492 }
4493 .button-default:disabled svg,
4494 .button-default:disabled i {
4495   color: #b9b9ba;
4496   color: var(--btnDisabledText, #b9b9ba);
4497 }
4498 .button-default.toggled {
4499   color: #b9b9ba;
4500   color: var(--btnToggledText, #b9b9ba);
4501   background-color: #182230;
4502   background-color: var(--btnToggled, #182230);
4503   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;
4504   box-shadow: var(--buttonPressedShadow);
4505 }
4506 .button-default.toggled svg,
4507 .button-default.toggled i {
4508   color: #b9b9ba;
4509   color: var(--btnToggledText, #b9b9ba);
4510 }
4511 .button-default.danger {
4512   color: #b9b9ba;
4513   color: var(--alertErrorPanelText, #b9b9ba);
4514   background-color: rgba(211, 16, 20, 0.5);
4515   background-color: var(--alertError, rgba(211, 16, 20, 0.5));
4516 }
4517 .button-unstyled {
4518   background: none;
4519   border: none;
4520   outline: none;
4521   display: inline;
4522   text-align: initial;
4523   font-size: 100%;
4524   font-family: inherit;
4525   padding: 0;
4526   line-height: unset;
4527   cursor: pointer;
4528   box-sizing: content-box;
4529   color: inherit;
4530 }
4531 .button-unstyled.-link {
4532   color: #d8a070;
4533   color: var(--link, #d8a070);
4534 }
4535 .button-unstyled.-fullwidth {
4536   width: 100%;
4537 }
4538 .button-unstyled.-hover-highlight:hover svg {
4539   color: #b9b9ba;
4540   color: var(--lightText, #b9b9ba);
4541 }
4542 input,
4543 textarea,
4544 .input {
4545   --_padding: 0.5em;
4546   border: none;
4547   border-radius: 4px;
4548   border-radius: var(--inputRadius, 4px);
4549   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;
4550   box-shadow: var(--inputShadow);
4551   background-color: #182230;
4552   background-color: var(--input, #182230);
4553   color: #b9b9ba;
4554   color: var(--inputText, #b9b9ba);
4555   font-family: sans-serif;
4556   font-family: var(--inputFont, sans-serif);
4557   font-size: 1em;
4558   margin: 0;
4559   box-sizing: border-box;
4560   display: inline-block;
4561   position: relative;
4562   line-height: 2;
4563   -webkit-hyphens: none;
4564       -ms-hyphens: none;
4565           hyphens: none;
4566   padding: 0 var(--_padding);
4567 }
4568 input.unstyled,
4569 textarea.unstyled,
4570 .input.unstyled {
4571   border-radius: 0;
4572   background: none;
4573   box-shadow: none;
4574   height: unset;
4575 }
4576 input:disabled, input[disabled=disabled], input.disabled,
4577 textarea:disabled,
4578 textarea[disabled=disabled],
4579 textarea.disabled,
4580 .input:disabled,
4581 .input[disabled=disabled],
4582 .input.disabled {
4583   cursor: not-allowed;
4584   opacity: 0.5;
4585 }
4586 input[type=range],
4587 textarea[type=range],
4588 .input[type=range] {
4589   background: none;
4590   border: none;
4591   margin: 0;
4592   box-shadow: none;
4593   -ms-flex: 1;
4594       flex: 1;
4595 }
4596 input[type=radio],
4597 textarea[type=radio],
4598 .input[type=radio] {
4599   display: none;
4600 }
4601 input[type=radio]:checked + label::before,
4602 textarea[type=radio]:checked + label::before,
4603 .input[type=radio]:checked + label::before {
4604   box-shadow: 0 0 2px black inset, 0 0 0 4px #182230 inset;
4605   box-shadow: var(--inputShadow), 0 0 0 4px var(--fg, #182230) inset;
4606   background-color: var(--accent, #d8a070);
4607 }
4608 input[type=radio]:disabled, input[type=radio]:disabled + label, input[type=radio]:disabled + label::before,
4609 textarea[type=radio]:disabled,
4610 textarea[type=radio]:disabled + label,
4611 textarea[type=radio]:disabled + label::before,
4612 .input[type=radio]:disabled,
4613 .input[type=radio]:disabled + label,
4614 .input[type=radio]:disabled + label::before {
4615   opacity: 0.5;
4616 }
4617 input[type=radio] + label::before,
4618 textarea[type=radio] + label::before,
4619 .input[type=radio] + label::before {
4620   -ms-flex-negative: 0;
4621       flex-shrink: 0;
4622   display: inline-block;
4623   content: "";
4624   transition: box-shadow 200ms;
4625   width: 1.1em;
4626   height: 1.1em;
4627   border-radius: 100%;
4628   box-shadow: 0 0 2px black inset;
4629   box-shadow: var(--inputShadow);
4630   margin-right: 0.5em;
4631   background-color: #182230;
4632   background-color: var(--input, #182230);
4633   vertical-align: top;
4634   text-align: center;
4635   line-height: 1.1;
4636   font-size: 1.1em;
4637   box-sizing: border-box;
4638   color: transparent;
4639   overflow: hidden;
4640 }
4641 input[type=checkbox],
4642 textarea[type=checkbox],
4643 .input[type=checkbox] {
4644   display: none;
4645 }
4646 input[type=checkbox]:checked + label::before,
4647 textarea[type=checkbox]:checked + label::before,
4648 .input[type=checkbox]:checked + label::before {
4649   color: #b9b9ba;
4650   color: var(--inputText, #b9b9ba);
4651 }
4652 input[type=checkbox]:disabled, input[type=checkbox]:disabled + label, input[type=checkbox]:disabled + label::before,
4653 textarea[type=checkbox]:disabled,
4654 textarea[type=checkbox]:disabled + label,
4655 textarea[type=checkbox]:disabled + label::before,
4656 .input[type=checkbox]:disabled,
4657 .input[type=checkbox]:disabled + label,
4658 .input[type=checkbox]:disabled + label::before {
4659   opacity: 0.5;
4660 }
4661 input[type=checkbox] + label::before,
4662 textarea[type=checkbox] + label::before,
4663 .input[type=checkbox] + label::before {
4664   -ms-flex-negative: 0;
4665       flex-shrink: 0;
4666   display: inline-block;
4667   content: "\2713";
4668   transition: color 200ms;
4669   width: 1.1em;
4670   height: 1.1em;
4671   border-radius: 2px;
4672   border-radius: var(--checkboxRadius, 2px);
4673   box-shadow: 0 0 2px black inset;
4674   box-shadow: var(--inputShadow);
4675   margin-right: 0.5em;
4676   background-color: #182230;
4677   background-color: var(--input, #182230);
4678   vertical-align: top;
4679   text-align: center;
4680   line-height: 1.1;
4681   font-size: 1.1em;
4682   box-sizing: border-box;
4683   color: transparent;
4684   overflow: hidden;
4685 }
4686 input.resize-height,
4687 textarea.resize-height,
4688 .input.resize-height {
4689   resize: vertical;
4690 }
4691 textarea {
4692   padding: var(--_padding);
4693   line-height: var(--post-line-height);
4694 }
4695 option {
4696   color: #b9b9ba;
4697   color: var(--text, #b9b9ba);
4698   background-color: #121a24;
4699   background-color: var(--bg, #121a24);
4700 }
4701 .hide-number-spinner {
4702   -moz-appearance: textfield;
4703 }
4704 .hide-number-spinner[type=number]::-webkit-inner-spin-button, .hide-number-spinner[type=number]::-webkit-outer-spin-button {
4705   opacity: 0;
4706   display: none;
4707 }
4708 .btn-block {
4709   display: block;
4710   width: 100%;
4711 }
4712 .btn-group {
4713   position: relative;
4714   display: -ms-inline-flexbox;
4715   display: inline-flex;
4716   vertical-align: middle;
4717 }
4718 .btn-group button {
4719   position: relative;
4720   -ms-flex: 1 1 auto;
4721       flex: 1 1 auto;
4722 }
4723 .btn-group button:not(:last-child) {
4724   border-top-right-radius: 0;
4725   border-bottom-right-radius: 0;
4726 }
4727 .btn-group button:not(:first-child) {
4728   border-top-left-radius: 0;
4729   border-bottom-left-radius: 0;
4730 }
4731 .panel {
4732   position: relative;
4733   display: -ms-flexbox;
4734   display: flex;
4735   -ms-flex-direction: column;
4736       flex-direction: column;
4737   background-color: #121a24;
4738   background-color: var(--bg, #121a24);
4739 }
4740 .panel::after, .panel {
4741   border-radius: 10px;
4742   border-radius: var(--panelRadius, 10px);
4743 }
4744 .panel::after {
4745   content: "";
4746   position: absolute;
4747   top: 0;
4748   bottom: 0;
4749   left: 0;
4750   right: 0;
4751   z-index: 5;
4752   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
4753   box-shadow: var(--panelShadow);
4754   pointer-events: none;
4755 }
4756 .panel-body {
4757   padding: var(--panel-body-padding, 0);
4758 }
4759 .panel-body:empty::before {
4760   content: "\AF\\_(\30C4)_/\AF";
4761   display: block;
4762   margin: 1em;
4763   text-align: center;
4764 }
4765 .panel-body > p {
4766   line-height: 1.3;
4767   padding: 1em;
4768   margin: 0;
4769 }
4770 .panel-heading,
4771 .panel-footer {
4772   --panel-heading-height-padding: 0.6em;
4773   --__panel-heading-height: 3.2em;
4774   --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding));
4775   position: relative;
4776   box-sizing: border-box;
4777   display: -ms-grid;
4778   display: grid;
4779   grid-auto-flow: column;
4780   -ms-grid-columns: minmax(50%, 1fr);
4781       grid-template-columns: minmax(50%, 1fr);
4782   grid-auto-columns: auto;
4783   grid-column-gap: 0.5em;
4784   -ms-flex: none;
4785       flex: none;
4786   background-size: cover;
4787   padding: 0.6em;
4788   height: var(--__panel-heading-height);
4789   line-height: var(--__panel-heading-height-inner);
4790   z-index: 4;
4791 }
4792 .panel-heading.-flexible-height,
4793 .panel-footer.-flexible-height {
4794   --__panel-heading-height: auto;
4795 }
4796 .panel-heading.-flexible-height::after, .panel-heading.-flexible-height::before,
4797 .panel-footer.-flexible-height::after,
4798 .panel-footer.-flexible-height::before {
4799   display: none;
4800 }
4801 .panel-heading.-stub, .panel-heading.-stub::after,
4802 .panel-footer.-stub,
4803 .panel-footer.-stub::after {
4804   border-radius: 10px;
4805   border-radius: var(--panelRadius, 10px);
4806 }
4807 .panel-heading.-sticky,
4808 .panel-footer.-sticky {
4809   position: -webkit-sticky;
4810   position: sticky;
4811   top: var(--navbar-height);
4812 }
4813 .panel-heading::after, .panel-heading::before,
4814 .panel-footer::after,
4815 .panel-footer::before {
4816   content: "";
4817   position: absolute;
4818   top: 0;
4819   bottom: 0;
4820   right: 0;
4821   left: 0;
4822   pointer-events: none;
4823 }
4824 .panel-heading .title,
4825 .panel-footer .title {
4826   font-size: 1.3em;
4827 }
4828 .panel-heading .alert,
4829 .panel-footer .alert {
4830   white-space: nowrap;
4831   text-overflow: ellipsis;
4832   overflow-x: hidden;
4833 }
4834 .panel-heading:not(.-flexible-height) > .button-default,
4835 .panel-heading:not(.-flexible-height) > .alert,
4836 .panel-footer:not(.-flexible-height) > .button-default,
4837 .panel-footer:not(.-flexible-height) > .alert {
4838   height: var(--__panel-heading-height-inner);
4839   min-height: 0;
4840   box-sizing: border-box;
4841   margin: 0;
4842   min-width: 1px;
4843   padding-top: 0;
4844   padding-bottom: 0;
4845   -ms-flex-item-align: stretch;
4846       -ms-grid-row-align: stretch;
4847       align-self: stretch;
4848 }
4849 .panel-heading {
4850   border-radius: 10px 10px 0 0;
4851   border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
4852   border-width: 0 0 1px 0;
4853   -ms-flex-align: start;
4854       align-items: start;
4855   color: var(--panelText);
4856   background-color: #121a24;
4857   background-color: var(--bg, #121a24);
4858 }
4859 .panel-heading::after {
4860   background-color: #182230;
4861   background-color: var(--panel, #182230);
4862   z-index: -2;
4863   border-radius: 10px 10px 0 0;
4864   border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
4865   box-shadow: var(--panelHeaderShadow);
4866 }
4867 .panel-heading a,
4868 .panel-heading .-link {
4869   color: #d8a070;
4870   color: var(--panelLink, #d8a070);
4871 }
4872 .panel-heading .faint {
4873   background-color: transparent;
4874   color: rgba(185, 185, 186, 0.5);
4875   color: var(--panelFaint, rgba(185, 185, 186, 0.5));
4876 }
4877 .panel-heading .faint-link {
4878   color: rgba(185, 185, 186, 0.5);
4879   color: var(--faintLink, rgba(185, 185, 186, 0.5));
4880 }
4881 .panel-heading:not(.-flexible-height) > .button-default {
4882   -ms-flex-negative: 0;
4883       flex-shrink: 0;
4884 }
4885 .panel-heading:not(.-flexible-height) > .button-default,
4886 .panel-heading:not(.-flexible-height) > .button-default i[class*=icon-] {
4887   color: #b9b9ba;
4888   color: var(--btnPanelText, #b9b9ba);
4889 }
4890 .panel-heading:not(.-flexible-height) > .button-default:active {
4891   background-color: #182230;
4892   background-color: var(--btnPressedPanel, #182230);
4893   color: #b9b9ba;
4894   color: var(--btnPressedPanelText, #b9b9ba);
4895 }
4896 .panel-heading:not(.-flexible-height) > .button-default:disabled {
4897   color: #b9b9ba;
4898   color: var(--btnDisabledPanelText, #b9b9ba);
4899 }
4900 .panel-heading:not(.-flexible-height) > .button-default.toggled {
4901   color: #b9b9ba;
4902   color: var(--btnToggledPanelText, #b9b9ba);
4903 }
4904 .panel-footer {
4905   border-radius: 0 0 10px 10px;
4906   border-radius: 0 0 var(--panelRadius, 10px) var(--panelRadius, 10px);
4907   -ms-flex-align: center;
4908       align-items: center;
4909   border-width: 1px 0 0 0;
4910   border-style: solid;
4911   border-color: var(--border, #222);
4912 }
4913 .fa {
4914   color: grey;
4915 }
4916 .mobile-shown {
4917   display: none;
4918 }
4919 .badge {
4920   box-sizing: border-box;
4921   display: inline-block;
4922   border-radius: 99px;
4923   max-width: 10em;
4924   min-width: 1.7em;
4925   height: 1.3em;
4926   padding: 0.15em 0.15em;
4927   vertical-align: middle;
4928   font-weight: normal;
4929   font-style: normal;
4930   font-size: 0.9em;
4931   line-height: 1;
4932   text-align: center;
4933   white-space: nowrap;
4934   overflow: hidden;
4935   text-overflow: ellipsis;
4936 }
4937 .badge.badge-notification {
4938   background-color: #ff0000;
4939   background-color: var(--badgeNotification, #ff0000);
4940   color: white;
4941   color: var(--badgeNotificationText, white);
4942 }
4943 .alert {
4944   margin: 0 0.35em;
4945   padding: 0 0.25em;
4946   border-radius: 5px;
4947   border-radius: var(--tooltipRadius, 5px);
4948 }
4949 .alert.error {
4950   background-color: rgba(211, 16, 20, 0.5);
4951   background-color: var(--alertError, rgba(211, 16, 20, 0.5));
4952   color: #b9b9ba;
4953   color: var(--alertErrorText, #b9b9ba);
4954 }
4955 .panel-heading .alert.error {
4956   color: #b9b9ba;
4957   color: var(--alertErrorPanelText, #b9b9ba);
4958 }
4959 .alert.warning {
4960   background-color: rgba(111, 111, 20, 0.5);
4961   background-color: var(--alertWarning, rgba(111, 111, 20, 0.5));
4962   color: #b9b9ba;
4963   color: var(--alertWarningText, #b9b9ba);
4964 }
4965 .panel-heading .alert.warning {
4966   color: #b9b9ba;
4967   color: var(--alertWarningPanelText, #b9b9ba);
4968 }
4969 .alert.success {
4970   background-color: var(--alertSuccess, rgba(111, 111, 20, 0.5));
4971   color: var(--alertSuccessText, #b9b9ba);
4972 }
4973 .panel-heading .alert.success {
4974   color: var(--alertSuccessPanelText, #b9b9ba);
4975 }
4976 .faint {
4977   color: rgba(185, 185, 186, 0.5);
4978   color: var(--faint, rgba(185, 185, 186, 0.5));
4979 }
4980 .faint-link {
4981   color: rgba(185, 185, 186, 0.5);
4982   color: var(--faint, rgba(185, 185, 186, 0.5));
4983 }
4984 .faint-link:hover {
4985   text-decoration: underline;
4986 }
4987 .visibility-notice {
4988   padding: 0.5em;
4989   border: 1px solid rgba(185, 185, 186, 0.5);
4990   border: 1px solid var(--faint, rgba(185, 185, 186, 0.5));
4991   border-radius: 4px;
4992   border-radius: var(--inputRadius, 4px);
4993 }
4994 .notice-dismissible {
4995   padding-right: 4rem;
4996   position: relative;
4997 }
4998 .notice-dismissible .dismiss {
4999   position: absolute;
5000   top: 0;
5001   right: 0;
5002   padding: 0.5em;
5003   color: inherit;
5004 }
5005 .fa-scale-110.svg-inline--fa {
5006   font-size: 1.1em;
5007 }
5008 .fa-old-padding.svg-inline--fa {
5009   padding: 0 0.3em;
5010 }
5011 .login-hint {
5012   text-align: center;
5013 }
5014 @media all and (min-width: 801px) {
5015 .login-hint {
5016     display: none;
5017 }
5018 }
5019 .login-hint a {
5020   display: inline-block;
5021   padding: 1em 0;
5022   width: 100%;
5023 }
5024 .btn.button-default {
5025   min-height: 2em;
5026 }
5027 .new-status-notification {
5028   position: relative;
5029   font-size: 1.1em;
5030   z-index: 1;
5031   -ms-flex: 1;
5032       flex: 1;
5033 }
5034 @media all and (max-width: 800px) {
5035 .mobile-hidden {
5036     display: none;
5037 }
5038 }
5039 @keyframes spin {
5040 0% {
5041     transform: rotate(0deg);
5042 }
5043 100% {
5044     transform: rotate(359deg);
5045 }
5046 }
5047 @keyframes shakeError {
5048 0% {
5049     transform: translateX(0);
5050 }
5051 15% {
5052     transform: translateX(0.375rem);
5053 }
5054 30% {
5055     transform: translateX(-0.375rem);
5056 }
5057 45% {
5058     transform: translateX(0.375rem);
5059 }
5060 60% {
5061     transform: translateX(-0.375rem);
5062 }
5063 75% {
5064     transform: translateX(0.375rem);
5065 }
5066 90% {
5067     transform: translateX(-0.375rem);
5068 }
5069 100% {
5070     transform: translateX(0);
5071 }
5072 }
5073 .fade-enter-active,
5074 .fade-leave-active {
5075   transition: opacity 0.2s;
5076 }
5077 .fade-enter-from,
5078 .fade-leave-active {
5079   opacity: 0;
5080 }
5081 .thread-tree-replies {
5082   margin-left: var(--status-margin, 0.75em);
5083   border-left: 2px solid var(--border, #222);
5084 }
5085 .thread-tree-replies-hidden {
5086   padding: var(--status-margin, 0.75em);
5087   /* Make the button stretch along the whole row */
5088   display: -ms-flexbox;
5089   display: flex;
5090   -ms-flex-align: stretch;
5091       align-items: stretch;
5092   -ms-flex-direction: column;
5093       flex-direction: column;
5094 }
5095 .Conversation {
5096   z-index: 1;
5097   /* expanded conversation in timeline */
5098 }
5099 .Conversation .conversation-dive-to-top-level-box {
5100   padding: var(--status-margin, 0.75em);
5101   border-bottom-width: 1px;
5102   border-bottom-style: solid;
5103   border-bottom-color: var(--border, #222);
5104   border-radius: 0;
5105   /* Make the button stretch along the whole row */
5106   display: -ms-flexbox;
5107   display: flex;
5108   -ms-flex-align: stretch;
5109       align-items: stretch;
5110   -ms-flex-direction: column;
5111       flex-direction: column;
5112 }
5113 .Conversation .thread-ancestors {
5114   margin-left: var(--status-margin, 0.75em);
5115   border-left: 2px solid var(--border, #222);
5116 }
5117 .Conversation .thread-ancestor.-faded .StatusContent {
5118   --link: var(--faintLink);
5119   --text: var(--faint);
5120   color: var(--text);
5121 }
5122 .Conversation .thread-ancestor-dive-box {
5123   padding-left: var(--status-margin, 0.75em);
5124   border-bottom-width: 1px;
5125   border-bottom-style: solid;
5126   border-bottom-color: var(--border, #222);
5127   border-radius: 0;
5128   /* Make the button stretch along the whole row */
5129 }
5130 .Conversation .thread-ancestor-dive-box, .Conversation .thread-ancestor-dive-box-inner {
5131   display: -ms-flexbox;
5132   display: flex;
5133   -ms-flex-align: stretch;
5134       align-items: stretch;
5135   -ms-flex-direction: column;
5136       flex-direction: column;
5137 }
5138 .Conversation .thread-ancestor-dive-box-inner {
5139   padding: var(--status-margin, 0.75em);
5140 }
5141 .Conversation .conversation-status {
5142   border-bottom-width: 1px;
5143   border-bottom-style: solid;
5144   border-bottom-color: var(--border, #222);
5145   border-radius: 0;
5146 }
5147 .Conversation .thread-ancestor-has-other-replies .conversation-status,
5148 .Conversation .thread-ancestor:last-child .conversation-status,
5149 .Conversation .thread-ancestor:last-child .thread-ancestor-dive-box, .Conversation:last-child .conversation-status, .Conversation.-expanded .thread-tree .conversation-status {
5150   border-bottom: none;
5151 }
5152 .Conversation .thread-ancestors + .thread-tree > .conversation-status {
5153   border-top-width: 1px;
5154   border-top-style: solid;
5155   border-top-color: var(--border, #222);
5156 }
5157 .Conversation.status-fadein.-expanded .thread-body {
5158   border-left-width: 4px;
5159   border-left-style: solid;
5160   border-left-color: #ff0000;
5161   border-left-color: var(--cRed, #ff0000);
5162   border-radius: 0 0 10px 10px;
5163   border-radius: 0 0 var(--panelRadius, 10px) var(--panelRadius, 10px);
5164   border-bottom: 1px solid var(--border, #222);
5165 }
5166 .Conversation.-expanded.status-fadein {
5167   margin: calc(var(--status-margin, $status-margin) / 2);
5168 }
5169 .TimelineMenu {
5170   -ms-flex-negative: 1;
5171       flex-shrink: 1;
5172   margin-right: auto;
5173   min-width: 0;
5174   width: 24rem;
5175 }
5176 .TimelineMenu .popover-trigger-button {
5177   vertical-align: bottom;
5178 }
5179 .TimelineMenu .timeline-menu-popover-wrap {
5180   overflow: hidden;
5181   margin-top: 0.6rem;
5182   padding: 0 15px 15px 15px;
5183 }
5184 .TimelineMenu .timeline-menu-popover {
5185   width: 24rem;
5186   max-width: 100vw;
5187   margin: 0;
5188   font-size: 1rem;
5189   border-top-right-radius: 0;
5190   border-top-left-radius: 0;
5191   transform: translateY(-100%);
5192   transition: transform 100ms;
5193 }
5194 .TimelineMenu .panel::after {
5195   border-top-right-radius: 0;
5196   border-top-left-radius: 0;
5197 }
5198 .TimelineMenu.open .timeline-menu-popover {
5199   transform: translateY(0);
5200 }
5201 .TimelineMenu .timeline-menu-title {
5202   margin: 0;
5203   cursor: pointer;
5204   -webkit-user-select: none;
5205      -moz-user-select: none;
5206       -ms-user-select: none;
5207           user-select: none;
5208   width: 100%;
5209   display: -ms-flexbox;
5210   display: flex;
5211 }
5212 .TimelineMenu .timeline-menu-title .timeline-menu-name {
5213   overflow: hidden;
5214   text-overflow: ellipsis;
5215   white-space: nowrap;
5216 }
5217 .TimelineMenu .timeline-menu-title svg {
5218   margin-left: 0.6em;
5219   transition: transform 100ms;
5220 }
5221 .TimelineMenu .timeline-menu-title .click-blocker {
5222   cursor: default;
5223   -ms-flex-positive: 1;
5224       flex-grow: 1;
5225 }
5226 .TimelineMenu.open .timeline-menu-title svg {
5227   color: #b9b9ba;
5228   color: var(--panelText, #b9b9ba);
5229   transform: rotate(180deg);
5230 }
5231 .TimelineMenu .panel {
5232   box-shadow: var(--popoverShadow);
5233 }
5234 .TimelineMenu ul {
5235   list-style: none;
5236   margin: 0;
5237   padding: 0;
5238 }
5239 .TimelineMenu li {
5240   border-bottom: 1px solid;
5241   border-color: #222;
5242   border-color: var(--border, #222);
5243   padding: 0;
5244 }
5245 .TimelineMenu li:last-child a {
5246   border-bottom-right-radius: 10px;
5247   border-bottom-right-radius: var(--panelRadius, 10px);
5248   border-bottom-left-radius: 10px;
5249   border-bottom-left-radius: var(--panelRadius, 10px);
5250 }
5251 .TimelineMenu li:last-child {
5252   border: none;
5253 }
5254 .TimelineMenu a {
5255   display: block;
5256   padding: 0.6em 0.65em;
5257 }
5258 .TimelineMenu a:hover {
5259   background-color: #151e2a;
5260   background-color: var(--selectedMenu, #151e2a);
5261   color: #d8a070;
5262   color: var(--selectedMenuText, #d8a070);
5263   --faint: var(--selectedMenuFaintText, $fallback--faint);
5264   --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
5265   --lightText: var(--selectedMenuLightText, $fallback--lightText);
5266   --icon: var(--selectedMenuIcon, $fallback--icon);
5267 }
5268 .TimelineMenu a.router-link-active {
5269   font-weight: bolder;
5270   background-color: #151e2a;
5271   background-color: var(--selectedMenu, #151e2a);
5272   color: #b9b9ba;
5273   color: var(--selectedMenuText, #b9b9ba);
5274   --faint: var(--selectedMenuFaintText, $fallback--faint);
5275   --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
5276   --lightText: var(--selectedMenuLightText, $fallback--lightText);
5277   --icon: var(--selectedMenuIcon, $fallback--icon);
5278 }
5279 .TimelineMenu a.router-link-active:hover {
5280   text-decoration: underline;
5281 }
5282 .TimelineMenu a svg {
5283   margin-right: 0.4em;
5284   margin-left: -0.2em;
5285 }
5286 .TimelineQuickSettings > button {
5287   line-height: 100%;
5288   height: 100%;
5289   width: var(--__panel-heading-height-inner);
5290   text-align: center;
5291 }
5292 .TimelineQuickSettings > button svg {
5293   font-size: 1.2em;
5294 }
5295 .Timeline .loadmore-text {
5296   opacity: 1;
5297 }
5298 .Timeline.-blocked {
5299   cursor: progress;
5300 }
5301 .Timeline .conversation-heading {
5302   top: calc(var(--__panel-heading-height) * var(--currentPanelStack, 2));
5303   z-index: 2;
5304 }
5305 .Timeline.-nonpanel .timeline-heading {
5306   text-align: center;
5307   line-height: 2.75em;
5308   padding: 0 0.5em;
5309 }
5310 .Timeline.-nonpanel .timeline-heading .button-default, .Timeline.-nonpanel .timeline-heading .alert {
5311   line-height: 2em;
5312   width: 100%;
5313 }
5314 .tab-switcher {
5315   display: -ms-flexbox;
5316   display: flex;
5317 }
5318 .tab-switcher .tab-icon {
5319   margin: 0.2em auto;
5320   display: block;
5321 }
5322 .tab-switcher.top-tabs {
5323   -ms-flex-direction: column;
5324       flex-direction: column;
5325 }
5326 .tab-switcher.top-tabs > .tabs {
5327   width: 100%;
5328   overflow-y: hidden;
5329   overflow-x: auto;
5330   padding-top: 5px;
5331   -ms-flex-direction: row;
5332       flex-direction: row;
5333 }
5334 .tab-switcher.top-tabs > .tabs::after, .tab-switcher.top-tabs > .tabs::before {
5335   content: "";
5336   -ms-flex: 1 1 auto;
5337       flex: 1 1 auto;
5338   border-bottom: 1px solid;
5339   border-bottom-color: #222;
5340   border-bottom-color: var(--border, #222);
5341 }
5342 .tab-switcher.top-tabs > .tabs .tab-wrapper {
5343   height: 2em;
5344 }
5345 .tab-switcher.top-tabs > .tabs .tab-wrapper:not(.active)::after {
5346   left: 0;
5347   right: 0;
5348   bottom: 0;
5349   border-bottom: 1px solid;
5350   border-bottom-color: #222;
5351   border-bottom-color: var(--border, #222);
5352 }
5353 .tab-switcher.top-tabs > .tabs .tab {
5354   width: 100%;
5355   min-width: 1px;
5356   border-bottom-left-radius: 0;
5357   border-bottom-right-radius: 0;
5358   padding-bottom: 99px;
5359   margin-bottom: -93px;
5360 }
5361 .tab-switcher.top-tabs .contents.scrollable-tabs {
5362   -ms-flex-preferred-size: 0;
5363       flex-basis: 0;
5364 }
5365 .tab-switcher.side-tabs {
5366   -ms-flex-direction: row;
5367       flex-direction: row;
5368 }
5369 @media all and (max-width: 800px) {
5370   .tab-switcher.side-tabs {
5371     overflow-x: auto;
5372   }
5373 }
5374 .tab-switcher.side-tabs > .contents {
5375   -ms-flex: 1 1 auto;
5376       flex: 1 1 auto;
5377 }
5378 .tab-switcher.side-tabs > .tabs {
5379   -ms-flex: 0 0 auto;
5380       flex: 0 0 auto;
5381   overflow-y: auto;
5382   overflow-x: hidden;
5383   -ms-flex-direction: column;
5384       flex-direction: column;
5385 }
5386 .tab-switcher.side-tabs > .tabs::after, .tab-switcher.side-tabs > .tabs::before {
5387   -ms-flex-negative: 0;
5388       flex-shrink: 0;
5389   -ms-flex-preferred-size: 0.5em;
5390       flex-basis: 0.5em;
5391   content: "";
5392   border-right: 1px solid;
5393   border-right-color: #222;
5394   border-right-color: var(--border, #222);
5395 }
5396 .tab-switcher.side-tabs > .tabs::after {
5397   -ms-flex-positive: 1;
5398       flex-grow: 1;
5399 }
5400 .tab-switcher.side-tabs > .tabs::before {
5401   -ms-flex-positive: 0;
5402       flex-grow: 0;
5403 }
5404 .tab-switcher.side-tabs > .tabs .tab-wrapper {
5405   min-width: 10em;
5406   display: -ms-flexbox;
5407   display: flex;
5408   -ms-flex-direction: column;
5409       flex-direction: column;
5410 }
5411 @media all and (max-width: 800px) {
5412   .tab-switcher.side-tabs > .tabs .tab-wrapper {
5413     min-width: 4em;
5414   }
5415 }
5416 .tab-switcher.side-tabs > .tabs .tab-wrapper:not(.active)::after {
5417   top: 0;
5418   right: 0;
5419   bottom: 0;
5420   border-right: 1px solid;
5421   border-right-color: #222;
5422   border-right-color: var(--border, #222);
5423 }
5424 .tab-switcher.side-tabs > .tabs .tab-wrapper::before {
5425   -ms-flex: 0 0 6px;
5426       flex: 0 0 6px;
5427   content: "";
5428   border-right: 1px solid;
5429   border-right-color: #222;
5430   border-right-color: var(--border, #222);
5431 }
5432 .tab-switcher.side-tabs > .tabs .tab-wrapper:last-child .tab {
5433   margin-bottom: 0;
5434 }
5435 .tab-switcher.side-tabs > .tabs .tab {
5436   -ms-flex: 1;
5437       flex: 1;
5438   box-sizing: content-box;
5439   min-width: 10em;
5440   min-width: 1px;
5441   border-top-right-radius: 0;
5442   border-bottom-right-radius: 0;
5443   padding-left: 1em;
5444   padding-right: calc(1em + 200px);
5445   margin-right: -200px;
5446   margin-left: 1em;
5447 }
5448 @media all and (max-width: 800px) {
5449   .tab-switcher.side-tabs > .tabs .tab {
5450     padding-left: 0.25em;
5451     padding-right: calc(.25em + 200px);
5452     margin-right: calc(.25em - 200px);
5453     margin-left: 0.25em;
5454   }
5455   .tab-switcher.side-tabs > .tabs .tab .text {
5456     display: none;
5457   }
5458 }
5459 .tab-switcher .contents {
5460   -ms-flex: 1 0 auto;
5461       flex: 1 0 auto;
5462   min-height: 0px;
5463 }
5464 .tab-switcher .contents .hidden {
5465   display: none;
5466 }
5467 .tab-switcher .contents .full-height:not(.hidden) {
5468   height: 100%;
5469   display: -ms-flexbox;
5470   display: flex;
5471   -ms-flex-direction: column;
5472       flex-direction: column;
5473 }
5474 .tab-switcher .contents .full-height:not(.hidden) > *:not(.mobile-label) {
5475   -ms-flex: 1;
5476       flex: 1;
5477 }
5478 .tab-switcher .contents.scrollable-tabs {
5479   overflow-y: auto;
5480 }
5481 .tab-switcher .tab {
5482   position: relative;
5483   white-space: nowrap;
5484   padding: 6px 1em;
5485 }
5486 .tab-switcher .tab:not(.active) {
5487   z-index: 4;
5488 }
5489 .tab-switcher .tab:not(.active):hover {
5490   z-index: 6;
5491 }
5492 .tab-switcher .tab.active {
5493   background: transparent;
5494   z-index: 5;
5495   color: #b9b9ba;
5496   color: var(--tabActiveText, #b9b9ba);
5497 }
5498 .tab-switcher .tab img {
5499   max-height: 26px;
5500   vertical-align: top;
5501   margin-top: -5px;
5502 }
5503 .tab-switcher .tabs {
5504   display: -ms-flexbox;
5505   display: flex;
5506   position: relative;
5507   box-sizing: border-box;
5508 }
5509 .tab-switcher .tabs::after, .tab-switcher .tabs::before {
5510   display: block;
5511   -ms-flex: 1 1 auto;
5512       flex: 1 1 auto;
5513 }
5514 .tab-switcher .tab-wrapper {
5515   position: relative;
5516   display: -ms-flexbox;
5517   display: flex;
5518   -ms-flex: 0 0 auto;
5519       flex: 0 0 auto;
5520 }
5521 .tab-switcher .tab-wrapper:not(.active)::after {
5522   content: "";
5523   position: absolute;
5524   z-index: 7;
5525 }
5526 .tab-switcher .mobile-label {
5527   padding-left: 0.3em;
5528   padding-bottom: 0.25em;
5529   margin-top: 0.5em;
5530   margin-left: 0.2em;
5531   margin-bottom: 0.25em;
5532   border-bottom: 1px solid var(--border, #222);
5533 }
5534 @media all and (min-width: 800px) {
5535   .tab-switcher .mobile-label {
5536     display: none;
5537   }
5538 }
5539 .chat-title {
5540   display: -ms-flexbox;
5541   display: flex;
5542   overflow: hidden;
5543   text-overflow: ellipsis;
5544   white-space: nowrap;
5545   --emoji-size: 14px;
5546 }
5547 .chat-title .username {
5548   max-width: 100%;
5549   text-overflow: ellipsis;
5550   white-space: nowrap;
5551   display: inline;
5552   word-wrap: break-word;
5553   overflow: hidden;
5554 }
5555 .chat-title .avatar-container {
5556   -ms-flex-item-align: center;
5557       -ms-grid-row-align: center;
5558       align-self: center;
5559   line-height: 1;
5560 }
5561 .chat-title .titlebar-avatar {
5562   margin-right: 0.5em;
5563   height: 1.5em;
5564   width: 1.5em;
5565   border-radius: 10px;
5566   border-radius: var(--avatarAltRadius, 10px);
5567 }
5568 .chat-title .titlebar-avatar.animated::before {
5569   display: none;
5570 }
5571 .chat-list-item {
5572   display: -ms-flexbox;
5573   display: flex;
5574   -ms-flex-direction: row;
5575       flex-direction: row;
5576   padding: 0.75em;
5577   height: 5em;
5578   overflow: hidden;
5579   box-sizing: border-box;
5580   cursor: pointer;
5581 }
5582 .chat-list-item :focus {
5583   outline: none;
5584 }
5585 .chat-list-item:hover {
5586   background-color: var(--selectedPost, #151e2a);
5587   box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
5588 }
5589 .chat-list-item .chat-list-item-left {
5590   margin-right: 1em;
5591 }
5592 .chat-list-item .chat-list-item-center {
5593   width: 100%;
5594   box-sizing: border-box;
5595   overflow: hidden;
5596   word-wrap: break-word;
5597 }
5598 .chat-list-item .heading {
5599   width: 100%;
5600   display: -ms-inline-flexbox;
5601   display: inline-flex;
5602   -ms-flex-pack: justify;
5603       justify-content: space-between;
5604   line-height: 1em;
5605 }
5606 .chat-list-item .heading-right {
5607   white-space: nowrap;
5608 }
5609 .chat-list-item .name-and-account-name {
5610   text-overflow: ellipsis;
5611   white-space: nowrap;
5612   overflow: hidden;
5613   -ms-flex-negative: 1;
5614       flex-shrink: 1;
5615   line-height: var(--post-line-height);
5616 }
5617 .chat-list-item .chat-preview {
5618   display: -ms-inline-flexbox;
5619   display: inline-flex;
5620   overflow: hidden;
5621   white-space: nowrap;
5622   text-overflow: ellipsis;
5623   margin: 0.35em 0;
5624   color: #b9b9ba;
5625   color: var(--faint, #b9b9ba);
5626   width: 100%;
5627 }
5628 .chat-list-item a {
5629   color: var(--faintLink, #d8a070);
5630   text-decoration: none;
5631   pointer-events: none;
5632 }
5633 .chat-list-item:hover .animated.avatar canvas {
5634   display: none;
5635 }
5636 .chat-list-item:hover .animated.avatar img {
5637   visibility: visible;
5638 }
5639 .chat-list-item .Avatar {
5640   border-radius: 10px;
5641   border-radius: var(--avatarAltRadius, 10px);
5642 }
5643 .chat-list-item .chat-preview-body {
5644   --emoji-size: 1.4em;
5645 }
5646 .chat-list-item .time-wrapper {
5647   line-height: var(--post-line-height);
5648 }
5649 .chat-list-item .chat-preview-body {
5650   padding-right: 1em;
5651 }
5652 .basic-user-card {
5653   display: -ms-flexbox;
5654   display: flex;
5655   -ms-flex: 1 0;
5656       flex: 1 0;
5657   margin: 0;
5658   padding: 0.6em 1em;
5659 }
5660 .basic-user-card-collapsed-content {
5661   margin-left: 0.7em;
5662   text-align: left;
5663   -ms-flex: 1;
5664       flex: 1;
5665   min-width: 0;
5666 }
5667 .basic-user-card-user-name img {
5668   -o-object-fit: contain;
5669      object-fit: contain;
5670   height: 16px;
5671   width: 16px;
5672   vertical-align: middle;
5673 }
5674 .basic-user-card-user-name-value, .basic-user-card-screen-name {
5675   display: inline-block;
5676   max-width: 100%;
5677   overflow: hidden;
5678   white-space: nowrap;
5679   text-overflow: ellipsis;
5680 }
5681 .basic-user-card-expanded-content {
5682   -ms-flex: 1;
5683       flex: 1;
5684   margin-left: 0.7em;
5685   min-width: 0;
5686 }
5687 .chat-new .input-wrap {
5688   display: -ms-flexbox;
5689   display: flex;
5690   margin: 0.7em 0.5em 0.7em 0.5em;
5691 }
5692 .chat-new .input-wrap input {
5693   width: 100%;
5694 }
5695 .chat-new .search-icon {
5696   margin-right: 0.3em;
5697 }
5698 .chat-new .member-list {
5699   padding-bottom: 0.7rem;
5700 }
5701 .chat-new .basic-user-card:hover {
5702   cursor: pointer;
5703   background-color: var(--selectedPost, #151e2a);
5704 }
5705 .chat-new .go-back-button {
5706   text-align: center;
5707   line-height: 1;
5708   height: 100%;
5709   -ms-flex-item-align: start;
5710       -ms-grid-row-align: start;
5711       align-self: start;
5712   width: var(--__panel-heading-height-inner);
5713 }
5714 .chat-list {
5715   min-height: 25em;
5716   margin-bottom: 0;
5717 }
5718 .emtpy-chat-list-alert {
5719   padding: 3em;
5720   font-size: 1.2em;
5721   display: -ms-flexbox;
5722   display: flex;
5723   -ms-flex-pack: center;
5724       justify-content: center;
5725   color: #b9b9ba;
5726   color: var(--faint, #b9b9ba);
5727 }
5728 .chat-message-wrapper.hovered-message-chain .animated.Avatar canvas {
5729   display: none;
5730 }
5731 .chat-message-wrapper.hovered-message-chain .animated.Avatar img {
5732   visibility: visible;
5733 }
5734 .chat-message-wrapper .chat-message-menu {
5735   transition: opacity 0.1s;
5736   opacity: 0;
5737   position: absolute;
5738   top: -0.8em;
5739 }
5740 .chat-message-wrapper .chat-message-menu button {
5741   padding-top: 0.2em;
5742   padding-bottom: 0.2em;
5743 }
5744 .chat-message-wrapper .menu-icon {
5745   cursor: pointer;
5746 }
5747 .chat-message-wrapper .menu-icon:hover, .extra-button-popover.open .chat-message-wrapper .menu-icon {
5748   color: #b9b9ba;
5749   color: var(--text, #b9b9ba);
5750 }
5751 .chat-message-wrapper .popover {
5752   width: 12em;
5753 }
5754 .chat-message-wrapper .chat-message {
5755   display: -ms-flexbox;
5756   display: flex;
5757   padding-bottom: 0.5em;
5758 }
5759 .chat-message-wrapper .chat-message .status-body:hover {
5760   --_still-image-img-visibility: visible;
5761   --_still-image-canvas-visibility: hidden;
5762   --_still-image-label-visibility: hidden;
5763 }
5764 .chat-message-wrapper .avatar-wrapper {
5765   margin-right: 0.72em;
5766   width: 32px;
5767 }
5768 .chat-message-wrapper .link-preview, .chat-message-wrapper .attachments {
5769   margin-bottom: 1em;
5770 }
5771 .chat-message-wrapper .chat-message-inner {
5772   display: -ms-flexbox;
5773   display: flex;
5774   -ms-flex-direction: column;
5775       flex-direction: column;
5776   -ms-flex-align: start;
5777       align-items: flex-start;
5778   max-width: 80%;
5779   min-width: 10em;
5780   width: 100%;
5781 }
5782 .chat-message-wrapper .chat-message-inner.with-media {
5783   width: 100%;
5784 }
5785 .chat-message-wrapper .chat-message-inner.with-media .status {
5786   width: 100%;
5787 }
5788 .chat-message-wrapper .status {
5789   border-radius: 10px;
5790   border-radius: var(--chatMessageRadius, 10px);
5791   display: -ms-flexbox;
5792   display: flex;
5793   padding: 0.75em;
5794 }
5795 .chat-message-wrapper .created-at {
5796   position: relative;
5797   float: right;
5798   font-size: 0.8em;
5799   margin: -1em 0 -0.5em 0;
5800   font-style: italic;
5801   opacity: 0.8;
5802 }
5803 .chat-message-wrapper .without-attachment .message-content .RichContent::after {
5804   margin-right: 5.4em;
5805   content: " ";
5806   display: inline-block;
5807 }
5808 .chat-message-wrapper .pending .status-content.media-body, .chat-message-wrapper .pending .created-at {
5809   color: var(--faint);
5810 }
5811 .chat-message-wrapper .error .status-content.media-body, .chat-message-wrapper .error .created-at {
5812   color: #ff0000;
5813   color: var(--badgeNotification, #ff0000);
5814 }
5815 .chat-message-wrapper .incoming a {
5816   color: var(--chatMessageIncomingLink, #d8a070);
5817 }
5818 .chat-message-wrapper .incoming .status {
5819   color: var(--chatMessageIncomingText, #b9b9ba);
5820   background-color: var(--chatMessageIncomingBg, #121a24);
5821   border: 1px solid var(--chatMessageIncomingBorder, --border);
5822 }
5823 .chat-message-wrapper .incoming .created-at a {
5824   color: var(--chatMessageIncomingText, #b9b9ba);
5825 }
5826 .chat-message-wrapper .incoming .chat-message-menu {
5827   left: 0.4rem;
5828 }
5829 .chat-message-wrapper .outgoing {
5830   display: -ms-flexbox;
5831   display: flex;
5832   -ms-flex-direction: row;
5833       flex-direction: row;
5834   -ms-flex-wrap: wrap;
5835       flex-wrap: wrap;
5836   -ms-flex-line-pack: end;
5837       align-content: end;
5838   -ms-flex-pack: end;
5839       justify-content: flex-end;
5840 }
5841 .chat-message-wrapper .outgoing a {
5842   color: var(--chatMessageOutgoingLink, #d8a070);
5843 }
5844 .chat-message-wrapper .outgoing .status {
5845   color: var(--chatMessageOutgoingText, #b9b9ba);
5846   background-color: var(--chatMessageOutgoingBg, #151e2a);
5847   border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
5848 }
5849 .chat-message-wrapper .outgoing .chat-message-inner {
5850   -ms-flex-align: end;
5851       align-items: flex-end;
5852 }
5853 .chat-message-wrapper .outgoing .chat-message-menu {
5854   right: 0.4rem;
5855 }
5856 .chat-message-wrapper .visible {
5857   opacity: 1;
5858 }
5859 .chat-message-date-separator {
5860   text-align: center;
5861   margin: 1.4em 0;
5862   font-size: 0.9em;
5863   -webkit-user-select: none;
5864      -moz-user-select: none;
5865       -ms-user-select: none;
5866           user-select: none;
5867   color: #b9b9ba;
5868   color: var(--faintedText, #b9b9ba);
5869 }
5870 .chat-view {
5871   display: -ms-flexbox;
5872   display: flex;
5873   height: 100%;
5874 }
5875 .chat-view .chat-view-inner {
5876   height: auto;
5877   width: 100%;
5878   overflow: visible;
5879   display: -ms-flexbox;
5880   display: flex;
5881 }
5882 .chat-view .chat-view-body {
5883   box-sizing: border-box;
5884   background-color: var(--chatBg, #121a24);
5885   display: -ms-flexbox;
5886   display: flex;
5887   -ms-flex-direction: column;
5888       flex-direction: column;
5889   width: 100%;
5890   overflow: visible;
5891   min-height: calc(100vh - var(--navbar-height));
5892   margin: 0 0 0 0;
5893   border-radius: 10px 10px 0 0;
5894   border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
5895 }
5896 .chat-view .chat-view-body::after {
5897   border-radius: 0;
5898 }
5899 .chat-view .message-list {
5900   padding: 0 0.8em;
5901   height: 100%;
5902   display: -ms-flexbox;
5903   display: flex;
5904   -ms-flex-direction: column;
5905       flex-direction: column;
5906   -ms-flex-pack: end;
5907       justify-content: end;
5908 }
5909 .chat-view .footer {
5910   position: -webkit-sticky;
5911   position: sticky;
5912   bottom: 0;
5913   background-color: #121a24;
5914   background-color: var(--bg, #121a24);
5915   z-index: 1;
5916 }
5917 .chat-view .chat-view-heading {
5918   -ms-grid-columns: auto minmax(50%, 1fr);
5919       grid-template-columns: auto minmax(50%, 1fr);
5920 }
5921 .chat-view .go-back-button {
5922   text-align: center;
5923   line-height: 1;
5924   height: 100%;
5925   -ms-flex-item-align: start;
5926       -ms-grid-row-align: start;
5927       align-self: start;
5928   width: var(--__panel-heading-height-inner);
5929 }
5930 .chat-view .jump-to-bottom-button {
5931   width: 2.5em;
5932   height: 2.5em;
5933   border-radius: 100%;
5934   position: absolute;
5935   right: 1.3em;
5936   top: -3.2em;
5937   background-color: #182230;
5938   background-color: var(--btn, #182230);
5939   display: -ms-flexbox;
5940   display: flex;
5941   -ms-flex-pack: center;
5942       justify-content: center;
5943   -ms-flex-align: center;
5944       align-items: center;
5945   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
5946   z-index: 10;
5947   transition: 0.35s all;
5948   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
5949   opacity: 0;
5950   visibility: hidden;
5951   cursor: pointer;
5952 }
5953 .chat-view .jump-to-bottom-button.visible {
5954   opacity: 1;
5955   visibility: visible;
5956 }
5957 .chat-view .jump-to-bottom-button i {
5958   font-size: 1em;
5959   color: #b9b9ba;
5960   color: var(--text, #b9b9ba);
5961 }
5962 .chat-view .jump-to-bottom-button .unread-message-count {
5963   font-size: 0.8em;
5964   left: 50%;
5965   margin-top: -1rem;
5966   padding: 0.1em;
5967   border-radius: 50px;
5968   position: absolute;
5969 }
5970 .chat-view .jump-to-bottom-button .chat-loading-error {
5971   width: 100%;
5972   display: -ms-flexbox;
5973   display: flex;
5974   -ms-flex-align: end;
5975       align-items: flex-end;
5976   height: 100%;
5977 }
5978 .chat-view .jump-to-bottom-button .chat-loading-error .error {
5979   width: 100%;
5980 }
5981 .follow-card-content-container {
5982   -ms-flex-negative: 0;
5983       flex-shrink: 0;
5984   display: -ms-flexbox;
5985   display: flex;
5986   -ms-flex-direction: row;
5987       flex-direction: row;
5988   -ms-flex-pack: justify;
5989       justify-content: space-between;
5990   -ms-flex-wrap: wrap;
5991       flex-wrap: wrap;
5992   line-height: 1.5em;
5993 }
5994 .follow-card-follow-button {
5995   margin-top: 0.5em;
5996   margin-left: auto;
5997   width: 10em;
5998 }
5999 .with-load-more-footer {
6000   padding: 10px;
6001   text-align: center;
6002   border-top: 1px solid;
6003   border-top-color: #222;
6004   border-top-color: var(--border, #222);
6005 }
6006 .with-load-more-footer .error {
6007   font-size: 1rem;
6008 }
6009 .with-load-more-footer a {
6010   cursor: pointer;
6011 }
6012 .user-profile {
6013   -ms-flex: 2;
6014       flex: 2;
6015   -ms-flex-preferred-size: 500px;
6016       flex-basis: 500px;
6017   --currentPanelStack: 1;
6018 }
6019 .user-profile .user-profile-fields {
6020   margin: 0 0.5em;
6021 }
6022 .user-profile .user-profile-fields img {
6023   -o-object-fit: contain;
6024      object-fit: contain;
6025   vertical-align: middle;
6026   max-width: 100%;
6027   max-height: 400px;
6028 }
6029 .user-profile .user-profile-fields img.emoji {
6030   width: 18px;
6031   height: 18px;
6032 }
6033 .user-profile .user-profile-fields .user-profile-field {
6034   display: -ms-flexbox;
6035   display: flex;
6036   margin: 0.25em;
6037   border: 1px solid var(--border, #222);
6038   border-radius: 4px;
6039   border-radius: var(--inputRadius, 4px);
6040 }
6041 .user-profile .user-profile-fields .user-profile-field .user-profile-field-name {
6042   -ms-flex: 0 1 30%;
6043       flex: 0 1 30%;
6044   font-weight: 500;
6045   text-align: right;
6046   color: var(--lightText);
6047   min-width: 120px;
6048   border-right: 1px solid var(--border, #222);
6049 }
6050 .user-profile .user-profile-fields .user-profile-field .user-profile-field-value {
6051   -ms-flex: 1 1 70%;
6052       flex: 1 1 70%;
6053   color: var(--text);
6054   margin: 0 0 0 0.25em;
6055 }
6056 .user-profile .user-profile-fields .user-profile-field .user-profile-field-name, .user-profile .user-profile-fields .user-profile-field .user-profile-field-value {
6057   line-height: 1.3;
6058   text-overflow: ellipsis;
6059   white-space: nowrap;
6060   overflow: hidden;
6061   padding: 0.5em 1.5em;
6062   box-sizing: border-box;
6063 }
6064 .user-profile .userlist-placeholder {
6065   display: -ms-flexbox;
6066   display: flex;
6067   -ms-flex-pack: center;
6068       justify-content: center;
6069   -ms-flex-align: middle;
6070       align-items: middle;
6071   padding: 2em;
6072 }
6073 .user-profile-placeholder .panel-body {
6074   display: -ms-flexbox;
6075   display: flex;
6076   -ms-flex-pack: center;
6077       justify-content: center;
6078   -ms-flex-align: middle;
6079       align-items: middle;
6080   padding: 7em;
6081 }
6082 .search-result-heading {
6083   color: rgba(185, 185, 186, 0.5);
6084   color: var(--faint, rgba(185, 185, 186, 0.5));
6085   padding: 0.75rem;
6086   text-align: center;
6087 }
6088 @media all and (max-width: 800px) {
6089 .search-nav-heading .tab-switcher .tabs .tab-wrapper {
6090     display: block;
6091     -ms-flex-pack: center;
6092         justify-content: center;
6093     -ms-flex: 1 1 auto;
6094         flex: 1 1 auto;
6095     text-align: center;
6096 }
6097 }
6098 .search-result {
6099   box-sizing: border-box;
6100   border-bottom: 1px solid;
6101   border-color: #222;
6102   border-color: var(--border, #222);
6103 }
6104 .search-result-footer {
6105   border-width: 1px 0 0 0;
6106   border-style: solid;
6107   border-color: var(--border, #222);
6108   padding: 10px;
6109   background-color: #182230;
6110   background-color: var(--panel, #182230);
6111 }
6112 .search-input-container {
6113   padding: 0.8rem;
6114   display: -ms-flexbox;
6115   display: flex;
6116   -ms-flex-pack: center;
6117       justify-content: center;
6118 }
6119 .search-input-container .search-input {
6120   width: 100%;
6121   line-height: 1.125rem;
6122   font-size: 1rem;
6123   padding: 0.5rem;
6124   box-sizing: border-box;
6125 }
6126 .search-input-container .search-button {
6127   margin-left: 0.5em;
6128 }
6129 .loading-icon {
6130   padding: 1em;
6131 }
6132 .trend {
6133   display: -ms-flexbox;
6134   display: flex;
6135   -ms-flex-align: center;
6136       align-items: center;
6137 }
6138 .trend .hashtag {
6139   -ms-flex: 1 1 auto;
6140       flex: 1 1 auto;
6141   color: #b9b9ba;
6142   color: var(--text, #b9b9ba);
6143   overflow: hidden;
6144   text-overflow: ellipsis;
6145   white-space: nowrap;
6146 }
6147 .trend .count {
6148   -ms-flex: 0 0 auto;
6149       flex: 0 0 auto;
6150   width: 2rem;
6151   font-size: 1.5rem;
6152   line-height: 2.25rem;
6153   font-weight: 500;
6154   text-align: center;
6155   color: #b9b9ba;
6156   color: var(--text, #b9b9ba);
6157 }
6158 @charset "UTF-8";
6159 .registration-form {
6160   display: -ms-flexbox;
6161   display: flex;
6162   -ms-flex-direction: column;
6163       flex-direction: column;
6164   margin: 0.6em;
6165 }
6166 .registration-form .container {
6167   display: -ms-flexbox;
6168   display: flex;
6169   -ms-flex-direction: row;
6170       flex-direction: row;
6171 }
6172 .registration-form .container > * {
6173   min-width: 0;
6174 }
6175 .registration-form .terms-of-service {
6176   -ms-flex: 0 1 50%;
6177       flex: 0 1 50%;
6178   margin: 0.8em;
6179 }
6180 .registration-form .text-fields {
6181   margin-top: 0.6em;
6182   -ms-flex: 1 0;
6183       flex: 1 0;
6184   display: -ms-flexbox;
6185   display: flex;
6186   -ms-flex-direction: column;
6187       flex-direction: column;
6188 }
6189 .registration-form textarea {
6190   min-height: 100px;
6191   resize: vertical;
6192 }
6193 .registration-form .form-group {
6194   display: -ms-flexbox;
6195   display: flex;
6196   -ms-flex-direction: column;
6197       flex-direction: column;
6198   padding: 0.3em 0;
6199   line-height: 2;
6200   margin-bottom: 1em;
6201 }
6202 .registration-form .form-group--error {
6203   animation-name: shakeError;
6204   animation-duration: 0.6s;
6205   animation-timing-function: ease-in-out;
6206 }
6207 .registration-form .form-group--error .form--label {
6208   color: #f04124;
6209   color: var(--cRed, #f04124);
6210 }
6211 .registration-form .form-error {
6212   margin-top: -0.7em;
6213   text-align: left;
6214 }
6215 .registration-form .form-error span {
6216   font-size: 0.85em;
6217 }
6218 .registration-form .form-error ul {
6219   list-style: none;
6220   padding: 0 0 0 5px;
6221   margin-top: 0;
6222 }
6223 .registration-form .form-error ul li::before {
6224   content: "\2022   ";
6225 }
6226 .registration-form form textarea {
6227   line-height: 16px;
6228   resize: vertical;
6229 }
6230 .registration-form .captcha {
6231   max-width: 350px;
6232   margin-bottom: 0.4em;
6233 }
6234 .registration-form .btn {
6235   margin-top: 0.6em;
6236   height: 2em;
6237 }
6238 .registration-form .error {
6239   text-align: center;
6240 }
6241 @media all and (max-width: 800px) {
6242 .registration-form .container {
6243     -ms-flex-direction: column-reverse;
6244         flex-direction: column-reverse;
6245 }
6246 }
6247 .password-reset-form {
6248   display: -ms-flexbox;
6249   display: flex;
6250   -ms-flex-direction: column;
6251       flex-direction: column;
6252   -ms-flex-align: center;
6253       align-items: center;
6254   margin: 0.6em;
6255 }
6256 .password-reset-form .container {
6257   display: -ms-flexbox;
6258   display: flex;
6259   -ms-flex: 1 0;
6260       flex: 1 0;
6261   -ms-flex-direction: column;
6262       flex-direction: column;
6263   margin-top: 0.6em;
6264   max-width: 18rem;
6265 }
6266 .password-reset-form .container > * {
6267   min-width: 0;
6268 }
6269 .password-reset-form .form-group {
6270   display: -ms-flexbox;
6271   display: flex;
6272   -ms-flex-direction: column;
6273       flex-direction: column;
6274   margin-bottom: 1em;
6275   padding: 0.3em 0;
6276   line-height: 1.85em;
6277 }
6278 .password-reset-form .error {
6279   text-align: center;
6280   animation-name: shakeError;
6281   animation-duration: 0.4s;
6282   animation-timing-function: ease-in-out;
6283 }
6284 .password-reset-form .alert {
6285   padding: 0.5em;
6286   margin: 0.3em 0 1em;
6287 }
6288 .password-reset-form .password-reset-required {
6289   background-color: var(--alertError, rgba(211, 16, 20, 0.5));
6290   padding: 10px 0;
6291 }
6292 .password-reset-form .notice-dismissible {
6293   padding-right: 2rem;
6294 }
6295 .password-reset-form .dismiss {
6296   cursor: pointer;
6297 }
6298 .follow-request-card-content-container {
6299   display: -ms-flexbox;
6300   display: flex;
6301   -ms-flex-direction: row;
6302       flex-direction: row;
6303   -ms-flex-wrap: wrap;
6304       flex-wrap: wrap;
6305 }
6306 .follow-request-card-content-container button {
6307   margin-top: 0.5em;
6308   margin-right: 0.5em;
6309   -ms-flex: 1 1;
6310       flex: 1 1;
6311   max-width: 12em;
6312   min-width: 8em;
6313 }
6314 .follow-request-card-content-container button:last-child {
6315   margin-right: 0;
6316 }
6317 .tos-content {
6318   margin: 1em;
6319 }
6320 .staff-group {
6321   padding-left: 1em;
6322   padding-top: 1em;
6323 }
6324 .staff-group .basic-user-card {
6325   padding-left: 0;
6326 }
6327 .mrf-section {
6328   margin: 1em;
6329 }
6330 .mrf-section table {
6331   width: 100%;
6332   text-align: left;
6333   padding-left: 10px;
6334   padding-bottom: 20px;
6335 }
6336 .mrf-section table th, .mrf-section table td {
6337   width: 180px;
6338   max-width: 360px;
6339   overflow: hidden;
6340   vertical-align: text-top;
6341 }
6342 .mrf-section table th + th, .mrf-section table td + td {
6343   width: auto;
6344 }
6345
6346 /*# sourceMappingURL=app.ab6cb01d5b0b782e7457.css.map*/