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

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