:root {
  --box-gap: 16px;
}

/* media breakpoints

X-Small: <576px
Small: >= 576px
Medium: >= 768px
Large: >= 992px
Extra large: >= 1200px
*/
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

*,
::before,
::after {
  box-sizing: border-box;
}

html {
  /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.15; /* 1. Correct the line height in all browsers. */
  -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
  tab-size: 4; /* 3 */
}

/*
Sections
========
*/

body {
  margin: 0; /* Remove the margin in all browsers. */
}

/*
Grouping content
================
*/

/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-color: var(--secondary-block-border-color);
}

/*
Text-level semantics
====================
*/

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr[title] {
  text-decoration: underline dotted;
}

/**
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
Tabular data
============
*/

/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/

:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}
h1,
p,
ol,
ul,
menu {
  margin: 0;
  padding: 0;
}

/* TODO: undo reset once we've migrated all menu uls to <menu>. */
ul,
menu {
  list-style: none;
}

.bulleted {
  list-style-type: disc;
  margin-left: 16px;
  margin-top: 4px;
  margin-bottom: 16px;
}
html.t-dark {
  color-scheme: dark;

  --body-bg-color-triplet: 0, 0, 0;
  --body-bg-color: #000;
  --body-bg: var(--body-bg-color) url(/skins/default/images/layout/bricks-dark.jpg) left 0 repeat;
  --body-color: #dadada;
  --heading-color: #fff;

  --username-link-color: #ff4c4c;
  --link-color: #ff4444;
  --link-active-color: #ff8b8b;
  --link-visited-color: #b43838;
  --link-hover-color: #ff8b8b;
  --unread-item-bg: #c12d2d;
  --unread-item-color: #fff;

  --table-border-color: #393939;

  --content-separator-border-color: #393939;

  --submenu-mobile-border-color: var(--subheader-border-color);
  --submenu-mobile-bg: var(--secondary-block-bg);
  --submenu-desktop-current-color: #ff1111;
  --submenu-desktop-current-bg: #000;

  --page-level-content-bg: #0d0d0d;
  --page-level-content-color: #c2c2c2;
  --table-header-bg: #2e2e2e;

  --good-block-bg: #19391e;
  --good-block-color: #82c282;
  --good-block-border-color: #2d562d;

  --bad-block-bg: #7b3232;
  --bad-block-border-color: #a06066;
  --bad-block-color: #d1c8c9;

  --subheader-color: #ccc;
  --subheader-border-color: #393939;
  --picture-border-color: #393939;
  --code-block-bg: #2e2e2e;

  --mdeditor-btn-color: #777;
  --topnav--bar-bg: #260101;
  --topnav--bar-publish-bg: #fff;
  --topnav--bar-publish-hover-bg: #fff;

  --avatar-editor-slot-bg: var(--secondary-block-bg);
  --avatar-editor-slot-hover-bg: var(--alt1-bg);

  --secondary-link-hover-color: #fff;
  --secondary-block-bg: #252323;
  --secondary-block-border-color: var(--subtle-alt1-border-color);

  --comment-rating-state-bg: #000;
  --button-cancel-bg: var(--blockquote-bg);
  --blockquote-color: #7d7d7d;
  --blockquote-border-color: #484b4e;
  --blockquote-bg: #282727;

  --blockquote-importante-border-color: rgb(0, 148, 128);
  --blockquote-importante-bg: #00201c;
  --blockquote-atencion-border-color: rgb(208, 118, 0);
  --blockquote-atencion-bg: #211300;
  --blockquote-peligro-border-color: rgb(212, 17, 55);
  --blockquote-peligro-bg: #2d040c;

  --secondary-dense-icon-color: #878686;

  --mdeditor-btn-hover-bg: #000;
  --mdeditor-btn-hover-border-color: #2e2e2e;

  --chip-bg: var(--alt1-bg);
  --alt1-bg: #282727;
  --subtle-alt1-bg: #1a1919;
  --subtle-alt1-border-color: #000;

  --subheader-stronger-contrast-bg: var(--alt1-bg);
  --subheader-stronger-contrast-color: var(--blockquote-color);
  --subheader-bg: var(--subtle-alt1-bg);
  --mdeditor-preview-bg: var(--input-bg);

  --input-bg: #000;
  --input-border-color: #393939;
  --input-color: var(--page-level-content-color);
  --switch-slider-color: #d5d5d5;
  --popup-bg: var(--alt1-bg);
  --popup-color: #aaa;
  --popup-border-color: var(--subtle-alt1-border-color);
  --popup-shadow-color: var(--subtle-alt1-border-color);

  --page-level-content-border-color: #2e2e2e; /* var(--popup-border-color); */
  --dropdown-border-color: var(--popup-border-color);

  --hamburger-menu-bg: var(--popup-bg);
  --hamburger-menu-border-color: var(--popup-border-color);
  --hamburger-menu-hover-bg: #000;

  --site-header-desktop-bg: #000;
  --site-header-desktop-link-color: #f7f7f7;
  --site-header-desktop-link-hover-color: #000;
  --site-header-faction-name-bg: #3c3c3c;

  --big-elements-drop-shadow-color: #2d2c2c;
}
:root,
html.t-light {
  /* Essential colors */

  /* Semantic colors */
  --input-border-color: #bbbbbb;
  --dropdown-border-color: #cbcbcb;

  --site-header-desktop-bg: #fff;
  --site-header-desktop-link-color: #333;
  --site-header-desktop-link-hover-color: #000;
  --site-header-mobile-bg: #000;
  --site-header-mobile-color: #fff;
  --site-header-faction-name-bg: #e9e8e8;

  --topnav--bar-bg: #fff;
  --topnav--bar-publish-bg: #000;
  --topnav--bar-publish-hover-bg: #c00;

  --big-elements-drop-shadow-color: #dadada;
  --alt1-bg: #f2f2f2;
  --subtle-alt1-bg: #f9f9fb;
  --subtle-alt1-border-color: hsl(210, 8%, 90%);
  --selected-bg: #c00;

  --bad-block-bg: #faefef;
  --bad-block-border-color: #ad0011;
  --bad-block-color: #ad0011;
  --bad-color: #a90014;
  --bad-link-color: #a60000;
  --dark-bg-chip-text-color: #fff;

  --blockquote-color: hsl(210, 8%, 35%);
  --blockquote-bg: #fafafa;
  --blockquote-border-color: hsl(210, 8%, 80%);
  --blockquote-importante-border-color: rgb(0, 191, 165);
  --blockquote-importante-bg: #f2f3f5;
  --blockquote-atencion-border-color: rgb(255, 145, 0);
  --blockquote-atencion-bg: rgba(255, 145, 0, 0.1);
  --blockquote-peligro-border-color: rgb(255, 23, 68);
  --blockquote-peligro-bg: rgba(255, 23, 68, 0.1);

  --chip-bg: #f5f5f5;
  --chip-border-color: #000;
  --chip-unconfirmed-bg: rgb(224, 233, 241);
  --chip-unconfirmed-border-color: rgb(124, 166, 203);
  --chip-banned-bg: #fbd3b5;
  --chip-banned-border-color: rgb(216, 132, 5);

  --mdeditor-btn-color: var(--page-level-content-color);
  --body-bg-color-triplet: 255, 255, 255;
  --body-bg-color: #fff;
  --body-bg: var(--body-bg-color) url(/skins/default/images/layout/bricks.jpg) left 0 repeat;
  --body-color: #222;
  --button-border-color: #700;
  --button-border-shadow-color: #f00;
  --button-color: #fff;
  --button-bg: #c00;
  --button-cancel-bg: var(--blockquote-bg);
  --dropdown-header-color: #555;
  --good-block-bg: #e8f6ea;
  --good-block-color: green;
  --good-block-border-color: green;
  --good-color: #00790b;
  --content-separator-border-color: #dbdbdb;
  --picture-border-color: #dadada;
  --good-link-color: #228b29;
  --heading-color: #000;
  --link-color: #0049a3;
  --link-active-color: #0d79fd;
  --link-visited-color: #012654;
  --link-hover-color: #0049a3;
  --secondary-link-color: var(--secondary-color);
  --overlay-bg: #000;

  --avatar-editor-slot-bg: #eee;
  --avatar-editor-slot-hover-bg: #fafafa;
  --important-block-border-color: orange;
  --important-block-color: #fff5d4;
  --table-header-bg: #f3f3f3;

  /* TODO: rm this coloring, use body */
  --page-level-content-bg: var(--body-bg-color);
  --page-level-content-color: var(--body-color);
  --page-level-content-border-color: #ddd;

  --comment-rating-state-bg: #fff;

  --submenu-mobile-border-color: #aaa;
  --submenu-mobile-bg: transparent;
  --submenu-desktop-current-color: rgb(69, 69, 69);
  --submenu-desktop-current-bg: #fff;

  --mdeditor-btn-hover-bg: #fafafa;
  --mdeditor-btn-hover-border-color: #95a5a6;
  /* TODO: standardize on new percent bar component */
  --percent-bar-fg: #ddd;
  --percent-bar-bg: #fafafa;
  --percent-bar-bg-border-color: #ddd;

  --input-bg: var(--body-bg-color);
  --input-color: var(--body-color);
  --switch-slider-color: var(--input-bg);

  --popup-bg: #fff;
  --popup-color: #aaa;
  --popup-border-color: #eaeaea;
  --popup-shadow-color: #ccc;

  --table-border-color: rgb(194, 194, 194);
  --code-block-bg: hsl(210, 8%, 90%);

  /* TODO: unify topnav--menu w/ hamburguer-menu. */
  --hamburger-menu-bg: #fff;
  --hamburger-menu-color: var(--body-color);
  --hamburger-menu-border-color: #ccc;
  --hamburger-menu-hover-bg: #eaeaea;

  --username-link-color: hsl(205, 36%, 53%);
  --secondary-color: #8b8b8b;
  --secondary-disabled-color: #ddd;
  --secondary-dense-icon-color: #cfcfcf;
  --secondary-block-bg: #f7f7f7;
  --secondary-block-border-color: #e4e5e4;

  --mdeditor-preview-bg: var(--subheader-bg);
  --secondary-link-hover-color: #000;
  --subheader-stronger-contrast-bg: #eee;
  --subheader-stronger-contrast-color: #666;
  --subheader-bg: #fafafa;
  --subheader-color: #000;
  --subheader-border-color: #e0e0e0;
  --unread-item-bg: #0044a2;
  --unread-item-color: #dadada;

  --good-tick-color: green;

  /* TODO: unify with button styles. */
  --cookies-eu-button-background-color: #4d90fe;
  --cookies-eu-button-color: #ffffff;
}

/* media breakpoints

X-Small: <576px
Small: >= 576px
Medium: >= 768px
Large: >= 992px
Extra large: >= 1200px
*/
html {
  /* We set this default size so that rem sizing is easy:
   * For 17px we have 1.7rem, for 15px -> 1.5rem;
   */
  font-size: 62.5%;
}

body,
body td,
input,
textarea {
  font-family: Roboto, Tahoma, Arial, "sans-serif";
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 2.1rem;
}

input,
select {
  background: var(--input-bg);
  color: var(--input-color);
  border: 1px solid var(--input-border-color);
}

@media (max-width: 800px) {
  body,
  input,
  textarea {
    font-family: "Roboto", sans-serif;
    font-size: 1.5rem;
  }
}

body {
  background: var(--body-bg);
  color: var(--body-color);
}

dt {
  font-weight: bold;
}

p {
  margin-bottom: 2.1rem;
}

li {
  margin-bottom: 0.4rem;
}

th {
  text-align: left;
}

label {
  font-weight: bold;
}

/* table {
  border-color: var(--table-border-color);
} */

.ccontent table label {
  font-weight: normal;
}

code {
  white-space: pre-wrap;
  word-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:hover img {
  opacity: 0.85;
}

a.nav:visited {
  color: var(--link-color);
}

blockquote {
  background: var(--blockquote-bg);
  color: var(--blockquote-color);
  padding: 12px 12px 12px 15px;
  margin: 0 1em 1.1em 1em;
  position: relative;
}

blockquote:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  border-radius: 4px;
  background: var(--blockquote-border-color);
}
.ccontent {
  margin-bottom: 60px;
}

@media screen and (max-width: 800px) {
  .ccontent {
    margin-bottom: 0;
  }
}

.module {
  margin-bottom: 2.27em;
}

@media screen and (max-width: 800px) {
  .cmain > .mftext {
    margin: 16px;
  }
}

.ccontent .module .mcontent {
  padding-top: 8px;
  overflow: hidden;
}

.ccontent,
.topnav--bg {
  filter: drop-shadow(0 0.45rem 0.25rem var(--big-elements-drop-shadow-color));
}

.site-founded {
  color: var(--secondary-color);
  padding-bottom: 16px;
  font-style: italic;
}
.threecols-sidemenu li {
  font-size: 14px;
  font-weight: normal;
  margin: 0;
}

.threecols-sidemenu a {
  display: block;
  text-decoration: none;
  box-sizing: border-box;
  padding: 6px 16px 4px 8px;
}

.threecols-sidemenu a,
.threecols-sidemenu a:visited {
  font-size: 14px;
  font-weight: normal;
  color: var(--body-color);
}

.threecols-sidemenu a:hover {
  background: rgba(208, 215, 222, 0.24);
  text-decoration: none;
}

.threecols-sidemenu .selected a {
  background: rgba(208, 215, 222, 0.24);
}

.threecols-sidemenu .selected a:after {
  background: #cf2222;
  border-radius: 6px;
  content: "";
  display: block;
  height: 31px;
  position: absolute;
  left: 28px;
  width: 4px;
  margin-top: -27px;
}

@media screen and (max-width: 800px) {
  .threecols-sidemenu .selected a:after {
    left: 12px;
  }
}
.threecols-wrapper {
  column-gap: 16px;
  display: grid;
  grid-template-columns: 110px 1fr 230px;
  margin: 16px;
}
.twocols-ms-wrapper {
  column-gap: 16px;
  display: grid;
  grid-template-columns: 1fr 230px;
}

@media screen and (max-width: 800px) {
  .twocols-ms-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    margin: 16px;
  }
}
.twocols-sm-wrapper {
  column-gap: 16px;
  display: grid;
  grid-template-columns: 160px 1fr;
  margin: 16px;
}

@media screen and (max-width: 800px) {
  .twocols-sm-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-gap: 16px;
  }
}
.subscriber-icon {
  display: inline-block;
  margin-right: 2px;
}

.country-flag {
  font-size: 16px;
}

.country-flag--windows {
  font-family: "Noto Color Emoji", sans-serif;
}

input[type="text"]::placeholder {
  color: hsl(210, 8%, 75%);
}

.ccontent table {
  width: 100%;
}

.user-info-holder .avatar {
  margin-left: 4px;
}

.other-login-actions {
  margin-top: 16px;
}

.anonymous-account-flows-form {
  width: 310px;
  margin-top: 16px;
}

.anonymous-account-flows-form input[type="submit"] {
  margin: 15px 0;
  width: 100%;
}

.anonymous-account-flows-form input[type="text"],
.anonymous-account-flows-form input[type="email"],
.anonymous-account-flows-form input[type="password"] {
  box-sizing: border-box;
  width: 100%;
  font-size: 1.4rem;
  /* TODO: stop redefining the border of inputs everywhere, just style
  the base inputs and be done. */
  border: 1px solid var(--input-border-color);
  padding: 4px 8px;
  margin-bottom: 5px;
  border-radius: 4px;
}

#create-account-form input[type="email"],
#login-form input[type="password"] {
  margin-bottom: 12px;
}

.questions-best-answer {
  text-align: right;
}

.question-best-answer-comment {
  margin: 20px 0;
}

.question-best-answer-comment .user-info {
  margin-right: 20px;
}

.question-prize .amount {
  font-weight: bold;
}

.delprofilesignature {
  float: right;
}

.more {
  margin-right: 0;
}

.module .mtitle {
  margin-left: 0;
  margin-top: 0;
  font-weight: bold;
}

.ccontent .module.sub-modules .mcontent {
  padding-top: 0;
}

.ccontent .module.sub-modules .mcontent .mcontent {
  padding-top: 0.54em;
}

.ccontent .module.sub-modules .blast {
  margin-bottom: 0;
}

.ccontent .module.sub-modules .mcontent .mtitle {
  text-transform: uppercase;
}

.ccontent .module.sub-modules .mcontent .mtitle span {
  margin-left: 0;
  padding: 0 0 0 5px;
  font-size: 12px;
}

.ccontent table {
  border-collapse: collapse;
}

.ccontent td {
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}

.ccontent table img {
  border-collapse: separate;
}

.mcontent ul.content-hid {
  margin-top: 0;
}

.contents-titles .mcontent ul,
.contents-list .mcontent ul {
  margin-left: 0;
}

.ccontent td.match-won {
  padding-right: 4px;
}

.ccontent .module .mtitle span img.factionfavicon {
  margin: 6px 4px 0 4px;
  float: left;
}

.notification-header {
  padding-left: 15px;
  font-weight: bold;
}

.minicolumns {
  padding: 3px;
  max-width: 100%;
}

.title-input {
  width: 100%;
  box-sizing: border-box;
}

th.checkbox,
td.checkbox {
  width: 25px;
  text-align: center;
}

.ccontent table.compact {
  border-collapse: collapse;
}

.titleavatar {
  width: 61px;
  height: 62px;
  float: left;
}

.titleavatar img {
  border: 1px solid;
  margin: 5px 0 0 5px;
}

.message-body {
  padding: 10px 10px 10px 66px;
}

.avatar img {
  width: 50px;
  height: 50px;
}

.subheader.first {
  margin: 1px 1px 7px 1px;
}

.subheader div {
  padding-left: 12px;
}

.ccontent td.content-hid {
  padding-left: 12px;
}

.csupport ul.content-hid,
.cmain ul.content-hid,
.csupport ul.sidelist {
  margin: 0 0 20px 0;
}

.ccontent ul.content-hid ul.content-hid {
  margin-bottom: 0;
}

h2 {
  margin: 0 0 5px 0;
}

.content-category {
  float: left;
  width: 24px;
  margin-right: 2px;
  margin-top: -1px;
}

.content-category img {
  margin: 2px 0 0 3px;
}

.more {
  margin: 5px 4px 0 0;
}

.day-separator {
  margin-bottom: 5px;
  margin-top: 10px;
  padding: 5px 15px;
  font-weight: bold;
}

.summary {
  padding: 10px 5px;
}

.summary p {
  margin: 0 0 1.5em 0;
}

textarea {
  border: 1px solid;
  padding: 3px;
}

.ccontent ul.skeletal li {
  padding-bottom: 20px;
  padding-left: 5px;
}

.ccontent ul.tutorialscategories {
  margin: 2px 0 5px 0;
}

.ccontent .tutorialscategories li {
  margin-left: 0;
  display: inline;
  margin-right: 10px;
}

.ccontent td {
  padding: 3px 3px 3px 6px;
}

.warning {
  padding: 20px;
  border: 1px solid;
  margin-top: 3px;
  margin-bottom: 10px;
}

#error {
  padding: 10px;
  border: 1px solid;
  margin-top: 3px;
  margin-bottom: 3px;
}

.ccontent img.example {
  border: 1px solid;
}

.ccontent .message-body blockquote {
  margin-left: 0;
}

th.timestamp,
td.timestamp {
  width: 120px;
}

th.timestamp-short,
td.timestamp-short {
  width: 50px;
  text-align: center;
}

.ccontent a img {
  /* HACK: we should remove this style. */
  border-style: solid;
  border-width: 1px;
}

.ccontent img.factionfavicon,
img.factionfavicon {
  border: 0;
  width: 16px;
  height: 16px;
}

img.factionfavicon {
  /* background-image set on application.html.erb (needs env-dep cache dir). */
  background-repeat: no-repeat;
  background-position: 25px 0;
  /* por defecto que no se vean los iconos de facción nuevos */
}

th.sm-icon,
td.sm-icon {
  text-align: center;
  width: 18px;
}

img.icon,
.ccontent a img.icon {
  border: 0;
}

.sidelist.images li {
  text-align: center;
  margin-bottom: 10px;
}

/* section specific */
.choose-avatar img {
  border-radius: 3px;
}

.choose-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
}

.matchmap-tourney td,
.ccontent .matchmap-tourney th {
  text-align: center;
}

.matchmap-tourney td.match {
  height: 50px;
}

input.sm-text {
  width: 50px;
}

.ccontent .right {
  text-align: right;
}

.centered-link {
  padding: 15px;
  text-align: center;
}

.sidething-spaced {
  padding: 10px;
  text-align: center;
}

.match-won,
.match-lost,
.match-tie {
  text-align: center;
  width: 20px;
}

.ccontent dd {
  padding: 5px 0 20px 15px;
}

.ccontent .competitions-match-maps {
  text-align: center;
}

.available-smileys {
  width: 98%;
  height: 11rem;
  padding: 3px;
  overflow: auto;
  margin-bottom: 10px;
  margin-top: 5px;
}

.ccontent ul.inline {
  display: inline;
}

.ccontent ul.inline li {
  display: inline;
}

.ccontent ul.messages-thread li {
  padding-left: 18px;
}

.ccontent ul.messages-thread table {
  width: 100%;
}

.ccontent ul.messages-thread ul {
  margin-left: 0;
  padding-left: 0;
}

.ccontent .news-category-image {
  width: 188px;
  height: 110px;
}

.mfcontents-summaries-item {
  margin-bottom: 20px;
  padding: 3px;
}

.potd-pref-selector {
  float: right;
  padding: 0px 4px 0 0;
  text-align: right;
  width: auto;
}

@media screen and (max-width: 800px) {
  .notifications-index {
    margin: 16px;
  }
}

.page-content-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
}

/* TODO: move this to a view specific css? */
.account-state {
  display: inline-block;
  border: 1px solid var(--chip-border-color);
  border-radius: 4px;
  font-size: 14px;
  font-weight: normal;
  padding: 0px 8px;
  margin-left: 16px;
}

.account-state a {
  font-weight: bold;
}

.account-state--banned {
  background: var(--chip-banned-bg);
  border-color: var(--chip-banned-border-color);
}

.account-state--unconfirmed {
  background: var(--chip-unconfirmed-bg);
  border-color: var(--chip-unconfirmed-border-color);
}
.admin-section {
  margin-top: 40px;
}

.admin-section h2 {
  border-bottom: 1px solid var(--subheader-border-color);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 16px;
  padding-bottom: 12px;
}
.autocomplete {
  border: 1px solid var(--input-border-color);
  cursor: pointer;
  list-style-type: none;
  position: absolute;
  width: 200px;
  z-index: 100;
}

.autocomplete li {
  padding: 3px;
}
.avatar-editor {
  --slot-size: 64px;

  display: grid;
  grid-template-areas:
    "equipment render configuration"
    "equipment render configuration"
    "backpack backpack backpack";
  grid-template-columns: var(--slot-size) 250px 1fr;
  grid-template-rows: 1fr 20px;
  column-gap: 16px;
}

@media screen and (max-width: 440px) {
  .avatar-editor {
    grid-template-columns: var(--slot-size) min-content 1fr;
  }
}

@media screen and (max-width: 1024px) {
  .avatar-editor {
    --slot-size: 48px;
    grid-template-areas:
      "equipment render backpack"
      "switcher switcher switcher";
    grid-template-rows: 1fr auto;
  }
}

.avatar-editor--configuration {
  grid-area: configuration;
}

.avatar-editor--render {
  grid-area: render;
}

.avatar-editor--switcher {
  grid-area: switcher;
}

.avatar-editor--back-to-v1 {
  margin-top: 40px;
  margin-left: 95px;
}

.avatar-editor--resizer {
  grid-area: resizer;
  display: none !important;
}

.avatar-editor--configuration form {
  margin-top: 26px;
  display: grid;
  grid-auto-flow: row;
  column-gap: 16px;
  row-gap: 12px;
  align-items: center;
  grid-template-columns: 100px 122px;
}

.avatar-editor--render,
.avatar-editor--resizer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-editor--render img {
  --render-size: 300px;
  margin-top: -170px;
  height: var(--render-size);
}

.avatar-editor-option {
  display: flex;
  width: 200px;
  align-items: center;
}

.avatar-editor-option i {
  font-size: 28px;
  color: var(--link-color);
  cursor: pointer;
}

.avatar-editor-option i:active {
  color: var(--link-active-color);
}

.avatar-editor-option .indicator {
  margin: 0 4px;
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.avatar-editor-option .indicator .selected-option {
  font-size: 18px;
  font-weight: bold;
  width: 30px;
  text-align: right;
}

.avatar-editor-option .indicator .separator {
  margin: 0 4px;
  color: var(--secondary-color);
  font-size: 12px;
}

.avatar-editor-option .indicator .total {
  color: var(--secondary-color);
  font-size: 12px;
  width: 22px;
}

.avatar-editor--configuration form > *:last-child {
  grid-column: span 2;
}

.avatar-editor--backpack-wrapper {
  margin-top: 32px;
  grid-area: backpack;
}

.avatar-editor--backpack-title {
  margin-left: 16px;
  font-size: 18px;
}

.avatar-editor--backpack {
  margin: 8px 0 0 16px;
  width: fit-content;
  display: grid;
  grid-gap: 4px;
  grid-template-columns: repeat(8, 1fr);
}

.avatar-editor--equipment .slot,
.avatar-editor--backpack .slot {
  background: var(--avatar-editor-slot-bg);
  height: var(--slot-size);
  width: var(--slot-size);
  position: relative;
}

.avatar-editor--equipment .slot img,
.avatar-editor--backpack .slot img {
  width: var(--slot-size);
  height: var(--slot-size);
  z-index: 2;
}

.avatar-editor--equipment {
  grid-area: equipment;
  margin: 26px 0 0 16px;
  display: grid;
  grid-auto-flow: row;
  row-gap: 4px;
  height: fit-content;
}

.avatar-editor--backpack .slot--valid-slot,
.avatar-editor--equipment .slot--valid-slot {
  background: rgb(171, 220, 247);
}

.slot img {
  cursor: grab;
}

.slot:hover {
  background: var(--avatar-editor-slot-hover-bg);
}
.breadcrumb {
  margin: 8px 0;
}

.breadcrumb li + li:before {
  content: "\0000bb ";
  padding-right: 1rem;
}

.breadcrumb li {
  display: inline-block;
  padding-left: 1rem;
}

.breadcrumb li:first {
  padding-left: 0;
}

.breadcrumb li a {
  display: inline-block;
}
.button {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  font-family: arial;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 1rem 0.7rem 0.7rem 0.7rem;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none !important;
}

.button--cancel {
  line-height: 21px;
  background: var(--button-cancel-bg) !important;
  color: #c00 !important;
  box-shadow: none !important;
}
.cash-movements li {
  display: grid;
  grid-template-areas: "amount description party tstamp";
  grid-template-columns: 65px 1fr 100px 106px;
  grid-gap: 6px;
}

.cash-movements li div {
  padding: 4px;
}

@media screen and (max-width: 800px) {
  .cash-movements li {
    grid-template-areas:
      "amount party tstamp"
      "description description description";
    grid-template-columns: 65px 106px 1fr;
    margin: 12px 0;
    row-gap: 0;
  }

  .cash-movements--tstamp {
    text-align: right;
  }

  .cash-movements--header div {
    display: none;
  }

  .cash-movements li .cash-movements--description {
    padding-top: 0;
    font-size: 12px;
    padding-left: 75px;
  }
}

.cash-movements--amount {
  grid-area: amount;
  text-align: right;
  font-weight: bold;
}

.cash-movements--description {
  grid-area: description;
}

.cash-movements--party {
  grid-area: party;
}

.cash-movements--tstamp {
  grid-area: tstamp;
  text-align: right;
}

.cash-movements--header {
  font-weight: bold;
}
.chessboard {
  background: repeating-conic-gradient(var(--body-bg-color) 0 90deg, var(--secondary-dense-icon-color) 0 180deg) 0 0/40px 40px round;
  margin: 15px;
  padding: 10px;
}
.site-links {
  padding: 12px 10px 12px 10px;
  box-sizing: border-box;
  padding-bottom: 5px;
  margin: 0 16px;
  display: none;
}

body > footer {
  margin: 0 auto 40px auto;
  display: flex;
  justify-content: center;
}

.site-links a {
  color: var(--secondary-link-color);
}

.site-links a:hover {
  text-decoration: underline;
}

.site-links li {
  padding: 6px 12px;
  min-width: 90px;
  text-align: center;
}

@media (min-width: 736px) {
  .site-links {
    display: block;
  }

  .site-links li {
    display: inline-block;
  }
}
/* TODO: remove these styles. */
.cmain--aac-contents h1 {
  word-break: break-word;
}

@media screen and (max-width: 800px) {
  .cmain--aac-contents > h1 {
    margin: 12px;
  }
  .cmain--aac-contents .content-meta,
  .cmain--aac-contents .content--source,
  .cmain--aac-contents .mcontent > .md-content {
    margin: 0 12px;
  }

  .cmain--aac-contents .mcontent > .mftext,
  .content-tags,
  .mfcontents-summaries {
    margin-left: 12px;
    margin-right: 12px;
  }

  .cmain--mobile-padding {
    margin: 12px;
  }
}
.competition-cup {
  width: 16px;
}

.match-won,
.match-lost,
.match-tie {
  font-weight: bold;
}
/* unclean */
.content-comments {
  display: grid;
  row-gap: 45px;
}

.content-comments--comment {
  display: grid;
  grid-template-areas:
    "header header"
    "avatar text"
    "actions actions";
  grid-template-columns: 68px 1fr;
  grid-template-rows: repeat(3, min-content);
}

.content-comments--comment-avatar {
  grid-area: avatar;
  display: flex;
  justify-content: center;
  align-items: start;
  min-height: 82px;
}

.content-comments--comment-avatar img {
  border-radius: 3px;
  margin-top: 14px;
}

.content-comments--comment-avatar img.v2-avatar {
  width: 64px;
  margin-top: -34px;
  border-radius: 0;
}

.content-comments--comment-header {
  grid-area: header;
  display: flex;
  gap: 10px;
  background: var(--alt1-bg);
  padding: 2px 10px;
}

.content-comments--comment-header .comment--created-on {
  flex-grow: 1;
}

.content-comments--comment-header .comment--created-on a {
  color: var(--secondary-color);
  text-decoration: none;
  font-size: 10px !important; /* Necessary for Chrome/iOS. */
}

.content-comments--comment-header.unread-item .comment--created-on a {
  color: var(--unread-item-color);
}

.content-comments--comment-header .comment--created-on a:hover {
  text-decoration: underline;
}

.content-comments--comment-text {
  grid-area: text;
}

.content-comments--comment-actions {
  grid-area: actions;
}

.content-comments .userinfo .rank {
  text-align: right;
}

.content-comments .user-info {
  border-bottom-left-radius: 30px;
}

.content-comments .user-info-holder .avatar {
  margin-bottom: 2px;
}

.content-comments .user-info-bar {
  margin-left: 3px;
  width: 50px;
}

.content-comments .avatar {
  margin-bottom: 6px;
}

.content-comments .comment-info {
  float: right;
  text-align: right;
  margin-right: 3px;
}

.content-comments .text {
  padding: 10px 5px 0px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.content-comments .comment-header div {
  display: inline-block;
}

.content-comments .post-comment {
  margin: 35px 0 0 3px;
}

.content-comments--comment-actions {
  border-top: 1px solid var(--subheader-border-color);
  margin-top: 4px;
  padding-left: 16px;
  padding-top: 8px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.content-comments--comment-actions .moderate-comments-opener-detail,
.content-comments--comment-actions a {
  font-size: 13px;
  color: var(--secondary-link-color);
}

.content-comments--comment-actions .content-comments--action-button {
  display: flex;
}

.content-comments--comment-actions i {
  font-size: 16px;
}

.content-comments--comment-actions > * {
  margin-right: 16px;
}

@media (min-width: 800px) {
  .content-comments--comment-actions > *:last-child {
    margin-right: 0;
  }
}

.comment-rating-state {
  border: 1px solid;
  border-radius: 5px;
  font-weight: bold;
  padding: 1px 8px 2px 8px;
  display: flex;
  margin: 2px;
  align-items: center;
  background: var(--comment-rating-state-bg) !important;
}

.moderate-comments-opener-detail {
  display: inline-block;
  cursor: pointer;
}

.content-comments--reply-action a {
  display: flex;
  align-items: center;
}

.content-comments--reply-action a i {
  margin-right: 4px;
}

.moderate-comments {
  border: 1px solid;
  width: 300px;
  margin-top: -3px;
  position: absolute;
  z-index: 3;
}

.comments--go-up i {
  font-size: 20px;
}

.moderate-comments .good {
  float: left;
  width: 50%;
  background: var(--good-block-bg);
}

.moderate-comments .bad {
  float: left;
  width: 50%;
}

.moderate-comments .neutral {
  clear: left;
}

.report-comments {
  display: inline-block;
  justify-content: flex-end;
  display: flex;
  flex-grow: 1;
}

.moderate-comments a {
  padding-left: 3px;
  display: block;
  width: 100%;
  font-weight: bold;
}

.ccontent .moderate-comments a img {
  border: 0;
}

.moderate-comments-opener {
  display: inline;
}

.hidden-comments-indicator {
  margin-top: 30px;
  text-align: center;
}

.image-deleter {
  z-index: 100;

  /* TODO(slnc): temp hack until we have an icon here */
  font-weight: bold;
  float: right;
  margin: 1px;
  padding: 3px;

  cursor: pointer;
}

.droparea {
  border: 3px dashed;
  width: 16rem;
  border-radius: 10px;
  vertical-align: middle;
  text-align: center;
  cursor: default;
  margin: 30px 0 10px 0;
  margin: 3rem 0 1rem 0;
}

.droparea div {
  padding-left: 1rem;
}

.align-right {
  text-align: right;
}

.user-link {
  font-weight: bold;
}

abbr {
  cursor: pointer;
}

.new-comment-form {
  padding-top: 25px;
  margin: 12px;
}

/* Old uncleaned */
.commentlink {
  font-size: 10px;
  line-height: 26px;
}

@media screen and (max-width: 800px) {
  .user-info-holder .emblemas,
  .content-comments .droparea {
    display: none;
    visibility: hidden;
  }
  .content-comments {
    row-gap: 24px;
  }

  .content-comments .text {
    padding-left: 5px;
    padding-right: 16px;
  }

  .comments--go-up {
    display: none;
  }
}

/* TODO: this doesn't sem to work anymore */
.inactive .moderate-comments-opener-detail {
  opacity: 1;
}

.inactive .moderate-comments-opener-detail {
  transition: all 250ms ease-in-out;
}

.moderated-comment-placeholder {
  background: var(--secondary-block-bg);
  border: 1px solid var(--popup-border-color);
  color: var(--blockquote-color);
  font-size: 12px;
  padding: 8px 16px 8px 83px;
}

.content-comments .nav.title {
  font-weight: bold;
}

.content-comments .comment-number,
.number {
  font-weight: bold;
  line-height: 26px;
}

.content-comments .author {
  font-weight: bold;
  line-height: 26px;
}

.content-comments--cta-register {
  color: var(--secondary-link-color);
  background: var(--secondary-block-bg);
  border: 1px solid var(--popup-border-color);
  padding: 20px;
  border: 1px solid;
  margin-top: 3px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-comments--cta-register a {
  margin-right: 10px;
}

.comment-reply {
  max-height: 78px;
  overflow-y: auto;
  cursor: pointer;
}

.comment-reply.expanded {
  max-height: 600px;
  overflow-y: auto;
}
.content-events {
  margin: 16px 0;
  border: 1px solid hsl(210, 8%, 85%);
}

.content-events,
.content-events th,
.content-events td {
  font-size: 13px;
}

.content-events th {
  background: hsl(210, 8%, 97.5%);
}

.content-events td,
.content-events th {
  line-height: 18px;
  padding: 8px 20px 8px 0;
}

.content-events td:first-child,
.content-events th:first-child {
  padding-left: 5px;
}

.content-events tr {
  border-bottom: 1px solid hsl(210, 8%, 85%);
}

.content-events--event-type {
  padding: 3px 5px;
  border-radius: 3px;
}

.content-events--event-type-historia {
  color: hsl(210, 8%, 45%);
  background-color: hsl(210, 8%, 85%);
}

.content-events--event-type-comentario {
  color: var(--dark-bg-chip-text-color);
  background-color: hsl(140, 40%, 65%);
}

.content-events--event-type-review {
  color: var(--dark-bg-chip-text-color);
  background-color: hsl(27, 90%, 45%);
}

.content-events .created-on {
  min-width: 122px;
  text-align: right;
}

.content-events--event-comment {
  width: 99%;
}

.username {
  white-space: nowrap;
}

.content-events--details-opener {
  cursor: pointer;
  white-space: nowrap;
}

.content-events--details-opener i {
  margin-right: 3px;
  font-size: 16px;
}

.content-events--details-opener-rotated i {
  transform: rotate(90deg);
}

/* Originally copy-pasted from Diffy's CSS. */
.diff {
  overflow: auto;
  display: flex;
}

.diff ul {
  background: var(--body-bg-color);
  overflow: auto;
  font-size: 13px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: table;
  width: 100%;
}

.diff del,
.diff ins {
  display: block;
  text-decoration: none;
}

.diff li .symbol {
  margin-right: 8px;
  color: var(--body-color);
  padding-left: 4px;
}

.diff li {
  padding: 0;
  display: table-row;
  margin: 0;
  height: 1em;
}

.diff li.ins {
  background: #dfd;
  color: #080;
}

.diff li.del {
  background: #fee;
  color: #b00;
}

.diff li:hover {
  background: #ffc;
}

/* try 'whitespace:pre;' if you don't want lines to wrap */
.diff del,
.diff ins,
.diff span {
  white-space: pre-wrap;
  font-family: courier;
}

.diff del strong {
  font-weight: normal;
  background: #fcc;
}

.diff ins strong {
  font-weight: normal;
  background: #9f9;
}
/* unclean */
.content-footer {
  margin-bottom: 30px;
  margin-top: 25px;
  min-height: 54px;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr max-content;
}

.content-footer--actions {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: max-content;
  column-gap: 16px;
  width: max-content;
  padding: 6px 0 0 8px;
}

.content-footer .actions a {
  color: var(--secondary-link-color);
  font-size: 13px;
}

.content-footer .actions a:hover {
  color: var(--secondary-link-hover-color);
}

.content-footer .actions a i {
  font-size: 16px;
}

.content-footer a img {
  border: 0;
}

.content-footer .content-details {
  float: right;
  padding-right: 6px;
}

.content-footer .author-avatar {
  float: right;
}

.content-footer .last {
  width: 183px;
  height: 56px;
  padding-right: 2px;
  padding-top: 2px;
  float: right;
  margin: 0 0 0 -3px;
}

.content-votes {
  margin-right: 24px;
}

.content-net-votes-score {
  color: var(--body-color);
}

/* TODO: duplicated in game-page.css .game-review-rate-review */
.content-votes i {
  color: var(--link-color);
  font-size: 20px;
  cursor: pointer;
  opacity: 80%;
}

.content-votes i:hover {
  opacity: 100%;
}

.content-votes i.rate-content.fa-solid {
  opacity: 100%;
}

.content-votes i.disabled,
.content-votes i.disabled:hover {
  color: var(--secondary-disabled-color);
  cursor: default;
}

.content-footer--author {
  margin: 2px 2px 0 0;
}

@media screen and (max-width: 800px) {
  .secondary-block.content-footer {
    padding-left: 4px;
    min-height: 34px;
    border-right: 0;
    border-left: 0;
  }

  .content-footer--author {
    display: none;
  }

  .content-footer--actions {
    width: auto;
  }
}
.content-meta {
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.content-quality-severity--high {
  color: #ca0000;
}

.content-quality-severity--low {
  color: #ffc107;
}

.content-quality-severity--green {
  color: #137c00;
}

.content-quality-flags {
  display: flex;
  margin-top: 16px;
  background: var(--secondary-block-bg);
  padding: 16px;
  border: 1px solid var(--secondary-block-border-color);
}

.content-quality-flags img {
  width: 50px;
  height: 50px;
  margin-right: 16px;
  border-radius: 6px;
}

.new-content-form--content-quality {
  display: none;
  grid-area: content-quality;
  margin-top: 32px;
}

@media (min-width: 800px) {
  .new-content-form--content-quality {
    display: block;
  }
}

.check-content-quality {
  display: block;
  margin-top: 16px;
}
.content-tags {
  padding-top: 5px;
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

#new-tag-input-text {
  width: 100px;
  margin-left: 3px;
}

.one-of-my-tags-ops {
  position: absolute;
  margin-top: -15px;
}

#my-content-tags-title {
  position: absolute;
  margin-top: -15px;
  font-weight: bold;
  text-transform: uppercase;
}

#tags-placeholder {
  display: inline-block;
}

.content-tags--tag {
  background: var(--alt1-bg);
  border-radius: 4px;
  padding: 3px 6px 2px 6px;
  font-size: 12px;
}

#my-content-tags .tag {
  margin-top: 4px;
  margin-right: 15px;
  padding-top: 15px;
}

#tag-this-content,
#new-tag-input {
  padding-top: 7px;
}

#content-tags {
  clear: left;
}

#tag-this-content {
  cursor: pointer;
}
.content-writing-advice {
  font-size: 13px;
}

.content-writing-advice ul {
  list-style: disc;
}

.content-writing-advice li {
  margin-left: 16px;
  margin-bottom: 9px;
}

.mtitle--toggable {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.content-headline header a {
  padding-right: 1rem;
}

.content-image {
  padding: 2px;
}

.content-image img {
  width: 100%;
}

.content-headline-image {
  margin-top: 8px;
  margin-bottom: 8px;
  max-width: 700px;
  background-size: cover;
  background-repeat: no-repeat;
  height: 10rem;
}

.content-thumbnail-image {
  width: 75px;
  height: 75px;
  background-size: contain;
  background-repeat: no-repeat;
}
.contents-stream .content-headline:last-child {
  border-bottom: 0;
}

.contents-stream--pager {
  display: flex;
}

.contents-stream--pager .mpager {
  flex-grow: 1;
}

.contents-stream--card-mode {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  cursor: pointer;
}

.contents-stream--card-mode img {
  width: 20px;
}

.contents-stream--card-mode-choices {
  position: absolute;
  z-index: 2;
  border: 1px solid var(--dropdown-border-color);
  background: var(--page-level-content-bg);
  padding: 4px;
  top: 11px;
  left: 7px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 4px;
  filter: drop-shadow(0 0.45rem 0.25rem var(--big-elements-drop-shadow-color));
}

.contents-stream--card-mode--selected,
.contents-stream--card-mode-choices img {
  filter: grayscale(1);
}

.contents-stream--card-mode--selected {
  opacity: 0.4;
}

.contents-stream--card-mode-choices img.selected {
  filter: hue-rotate(0deg);
}
.content-attribute-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.content-attribute-value {
  margin-bottom: 1rem;
  background: var(--secondary-block-bg);
  padding: 0.5rem;
}

.home-image {
  max-width: 100%;
  width: 100%;
}

.content-headline {
  box-sizing: border-box;
  overflow: hidden;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  border-bottom: 1px solid var(--subtle-alt1-border-color);
  padding: 15px;
  display: flex;
  justify-content: space-between;
}

.content-headline header a {
  background: var(--page-level-content-bg);
}

.content-headline--sm-main-image .content-headline--author,
.content-headline--main-image .content-headline--author {
  display: none;
}

.content-headline--details-stats-author {
  display: inline-block;
  margin-left: 10px;
}

.content-headline--avatar .content-headline--details-stats-author {
  display: none;
}

.content-headline--sm-main-image .content-headline--details img {
  float: right;
  max-width: 166px;
  margin-left: 4px;
}

.content-headline--sm-main-image .content-headline--details.with-image {
  display: grid;
  grid-template-areas:
    "headline image"
    "stats image"
    "last-reply image";
  grid-template-columns: 1fr 172px;
}

.content-headline--sm-main-image .content-headline--details-image {
  grid-area: image;
}

.content-headline--sm-main-image .content-headline--details-headline {
  grid-area: headline;
  display: flex;
  align-items: center;
}

.content-headline--sm-main-image .content-headline--details-stats {
  grid-area: stats;
}

.content-headline--sm-main-image .content-headline--details-last-reply {
  grid-area: last-reply;
}

.content-headline--avatar .content-headline--details img {
  display: none;
}

.content-headline--sm-main-image .content-headline--details img {
  border-radius: 8px;
}

.content-headline--main-image .content-headline--details img {
  width: 100%;
  border-radius: 12px;
}

.content-headline:first-child {
  border-top: 1px solid var(--subtle-alt1-border-color);
}

.content-headline:nth-child(even) {
  background-color: var(--subtle-alt1-bg);
}

/* TODO: rm stream-entry css, no longer used. */
.stream-entry--authorship {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}

.stream-entry--authorship-item-comments i {
  margin-right: 4px;
  margin-top: 1px;
}

.stream-entry--authorship-item {
  /* border-radius: 8px; */
  /* padding: 4px 8px; */
  /* border: 1px solid #eaeaea; */
  display: flex;
}

.content-headline--details .unread-item,
.content-headline--details .unread-item:visited {
  background: var(--unread-item-bg);
  color: var(--unread-item-color);
  display: block;
  padding: 3px 6px 1px 6px;
  border-radius: 4px;
}

/* .stream-entry--authorship a {
  text-decoration: none;
}

.stream-entry--authorship img {
  margin-right: 5px;
  border-radius: 3px;
} */

/* .content-headline p:last-child {
  margin-bottom: 0;
} */

/* .content-headline header {
  margin-bottom: 5px;
  font-size: 14px;
  line-height: 18.8px;
} */

.content-headline--author {
  flex: 0 0 50px;
}

.content-headline--author .v2-avatar {
  border: 0;
  margin-top: -42px;
  width: 64px;
  image-rendering: pixelated;

  /* opacity: 0.5; */
}

.content-headline--author .v2-avatar--mrachmed {
  width: 64px;
  height: 128px;
  transform: scale(2);
  margin-top: 39px;
  margin-left: 34px;
}

.content-headline--details {
  flex: 1 0 100px;
}
.content-headline--details-stats {
  font-size: 13px;
  display: flex;
  gap: 12px;
  color: #9e9fa2;
}

.content-headline--details-last-reply {
  font-size: 13px;
  color: #9e9fa2;
}

.content-headline--details-last-reply a {
  color: #9e9fa2 !important;
}

.content-headline--details-stats i {
  font-size: 11px;
}

.content-headline--details-content-type i {
  font-size: 13px;
}

.content-headline--details-content-type:empty {
  display: none;
}

.content-headline--nav {
  flex: 0 0 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
  display: none;
}

.content-headline--nav i {
  display: inline-block;
  font-size: 16px;
  width: 22px;
  color: #88bacb;
  height: 29px;
  line-height: 26px;
}

.content-headline--nav a:first-child i {
  margin-bottom: 5px;
  border-bottom: 1px solid #ddd;
}

.content-headline a:visited {
  color: var(--link-color);
}

.ccontent .content-snippet {
  padding-bottom: 20px;
}

.authorship {
  margin-bottom: 1rem;
}

a.content-headline--details-stats-author,
a.content-headline--details-stats-author:visited {
  color: #9e9fa2;
}

.content-headline--details-headline {
  font-size: 15px;
}

.content-headline--author {
  height: 54px;
}
.cookies-eu {
  filter: drop-shadow(0 0 1.5rem var(--big-elements-drop-shadow-color));

  position: fixed;
  z-index: 1001;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  border-top: 1px solid var(--popup-border-color);

  background: var(--popup-bg);
  padding: 50px 0;


  .cookies-eu-content-holder {
    display: inline-block;

    padding: 0 100px;

    a {
      text-decoration: underline;
    }
  }

  .cookies-eu-button-holder {
    display: inline-block;

    .cookies-eu-ok {
      font-size: 14px;
      font-weight: bold;

      line-height: 20px;

      min-width: 26px;
      margin-right: 5px;
      padding: 8px 16px;

      cursor: pointer;
      text-align: center;
      white-space: nowrap;

      border: 0;
      outline: none;
      color: var(--cookies-eu-button-color);
      background-color: var(--cookies-eu-button-background-color);
    }
  }
}
.csupport {
  width: 260px;
  margin-top: 8px;
}

.csupport p {
  margin-left: 3px;
}

.csupport .current a {
  display: block;
  width: 178px;
  padding-left: 5px;
}
.cta-link {
  display: inline-block;
  border-radius: 8px;
  background: var(--blockquote-bg);
  padding: 8px 16px;
  margin: var(--box-gap) 0;
  border: 1px solid var(--blockquote-border-color);
}
@media screen and (max-width: 800px) {
  .decisions-index {
    margin: 16px;
  }
  .decisions-index--type {
    display: none;
  }
}
.decision-comment {
  margin-bottom: 1rem;
}

.decision-comment p {
  margin-top: 2px;
}

.decision-comments {
  margin-top: 20px;
}

.decision-comment-position {
  font-weight: bold;
}

.decision-choices {
  padding: 1rem 0;
}

.decision-choices.choice-type-binary {
  text-align: center;
}

.decision-title {
  margin-bottom: 16px;
}

.decision-title-n-choice {
  margin: 1rem 0;
}

.decision-participants {
  margin-top: 1rem;
}

.decision-context table {
  margin-left: 10%;
}
.ccontent .download-mirror {
  border: 0;
}
.dialog {
  width: 610px;
  border: 1px solid #000;
  background: var(--body-bg-color);
  position: fixed;
  top: 40%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 201;
  padding: 16px;
  box-sizing: border-box;
}

@media screen and (max-width: 800px) {
  .dialog {
    width: 90%;
  }
}

.dialog--overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 200;
}

.dialog header {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
}

.dialog form input[type="text"] {
  box-sizing: border-box;
}

.dialog--buttons {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: right;
}

.dialog--buttons > * {
  margin-right: 16px;
}

.dialog--buttons > *:last-child {
  margin-right: 0;
}

.dialog--cancel-button {
  cursor: pointer;
}
.dropdown {
  padding: 5px;
  border-radius: 6px;
}

.dropdown a,
.dropdown a:visited {
  color: var(--topnav--bg-link-color);
}

.dropdown a:hover {
  color: var(--topnav--bg-link-color);
}

.dropdown header {
  color: var(--dropdown-header-color);
}

.dropdown {
  background: var(--popup-bg);
  color: var(--popup-color);
  border-color: var(--popup-border-color);
}
.notification-header {
  background-color: #000;
  padding-left: 15px;
  color: #fff;
  font-weight: bold;
}
.emblems-table li {
  display: grid;
  grid-template-columns: 150px 182px 100px 1fr;
  grid-gap: 8px;
}

.emblems-table li > div {
  vertical-align: middle;
  min-height: 32px;
}

.emblems-table--progress {
  text-align: center;
  padding-top: 1px;
  min-height: 28px;
}

@media screen and (max-width: 800px) {
  .emblems-table li {
    grid-template-columns: 182px 130px 70px;
    grid-template-areas:
      "chip progress count"
      "description description description";
    padding: 8px 4px 8px 0px;
    box-sizing: border-box;
  }

  .emblems-table--progress {
    grid-area: progress;
  }
  .emblems-table--chip {
    grid-area: chip;
  }
  .emblems-table--count {
    grid-area: count;
    text-align: right;
  }
  .emblems-table--description {
    grid-area: description;
    padding-left: 4px;
    box-sizing: border-box;
  }

  .emblems-table .mtitle {
    margin: 16px;
  }
}
.emblem {
  width: auto;
  border: 1px solid;
  padding: 0 10px 0 5px;
  font-weight: bold;
  border-radius: 5px;
  margin: 2px 4px;
  display: inline-block;
  border-color: #000;
  background: #000;
  white-space: nowrap;
}

.emblem.common {
  color: #d8d8d8;
}

.emblem.unfrequent {
  color: #88a7ff;
}

.emblem.rare {
  color: #fcf65e;
}

.emblem.legendary {
  color: #ff7200;
}

.emblem.special {
  color: #a7ff88;
}
.header--faction-building {
  position: absolute;
  top: -90px;
  right: 106px;
  height: 112px;
  overflow: hidden;
  z-index: 9;
}

.faction-building-preview {
  display: inline-block;
  border-radius: 4px;
}

.faction-building {
  margin: 15px;
  display: flex;
  flex-direction: column;
}
.factions-table--members {
  width: 72px;
}
input[type="text"],
input[type="password"],
textarea {
  padding: 4px 8px 2px 8px;
}
.friends-list {
  columns: 3;
}

@media screen and (max-width: 800px) {
  .friends-list {
    columns: 2;
  }
  .friends-list-title {
    margin: 16px 8px;
  }
}

.friend {
  display: flex;
}
.game-list-contents tr {
  border-bottom: 1px solid var(--content-separator-border-color);
}

.game-list-contents td {
  margin-top: 5px;
  vertical-align: middle;
}

.game-list-contents tr:last-child {
  border-bottom: 0;
}
.game-list-contents--game {
  display: flex;
}

.game-list-contents--game-cover {
  margin-right: 8px;
}

.game-list-contents--game-cover img {
  height: 48px;
}
/* TODO: check that we're not using this anywhere else and move it to pages/. */
.game-page {
  display: grid;
  grid-template:
    "title title"
    "summary summary"
    "images images"
    "reviews news";
  grid-template-columns: 1fr 1fr;
  row-gap: var(--box-gap);
  column-gap: var(--box-gap);
}

.game-page--no-news {
  grid-template:
    "title title"
    "summary summary"
    "images images"
    "reviews reviews";
}

.game-page-title {
  grid-area: title;
  font-size: 24px;
  font-weight: bold;
}

.game-page-essentials ul {
  margin-top: 8px;
  margin-bottom: 16px;
  display: flex;
  font-size: 12px;
  font-weight: normal;
}

.game-page-developer-name {
  font-weight: bold;
}

.game-page-essentials li + li {
  margin: 0 4px;
  padding: 0 4px;
}

.game-page-essentials li + li::before {
  content: " | ";
}

.game-page-summary {
  grid-area: summary;
  display: grid;
  grid-template-columns: min-content 2fr 1fr;
  column-gap: var(--box-gap);
}

.game-page-images {
  grid-area: images;
}

.game-page-reviews {
  grid-area: reviews;
}

.game-page-news {
  grid-area: news;
}

.game-page-cover {
  width: 90px;
  height: 90px;
}

.game-page-reviews--review {
  display: grid;
  grid-template:
    "score author"
    "review review"
    "blank rate-review";
  grid-template-columns: 30px 1fr;
  column-gap: 4px;
  border-bottom: 1px solid var(--content-separator-border-color);
  margin-bottom: var(--box-gap);
  padding-bottom: var(--box-gap);
}

.game-page-reviews--review:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.text-centered {
  text-align: center;
}

.game-review-list-score,
.game-reviews-summary-score {
  grid-area: score;
  height: 38px;
  font-size: 18px;
}

.game-review-list-score {
  width: 30px;
}

.game-reviews-summary-score {
  width: 40px;
}

.game-page-score-number,
.game-review-list-score,
.game-reviews-summary-score {
  border-radius: 6px;
  background: rgb(201, 201, 201);
  color: #fff;
  font-weight: bold;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-page-score-number {
  font-size: 40px;
  width: 100px;
  height: 100px;
}

.game-page-score {
  margin: 0 auto;
}

.game-page-score table {
  margin-top: var(--box-gap);
  height: 50px;
  border-collapse: collapse;
}

.ccontent .game-page-score-bars td {
  vertical-align: bottom;
  height: 50px;
  padding: 0;
}

.game-page-score-bars td div {
  width: 100%;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.game-review-list-author {
  grid-area: author;
}

.game-review-list-review {
  grid-area: review;
  padding-left: 34px;
  padding-top: var(--box-gap);
}

.game-review-rate-review i {
  font-size: 20px;
  cursor: pointer;
  color: var(--link-color);
  opacity: 80%;
}

.game-review-rate-review i:hover {
  opacity: 100%;
}

i.game-review-rate.fa-solid {
  opacity: 100%;
}

.game-review-rate-review i.disabled,
.game-review-rate-review i.disabled:hover {
  color: #ddd;
  cursor: default;
}

.game-review-rate-review {
  display: flex;
  grid-area: rate-review;
}

.game-review-net-votes-score,
.content-net-votes-score {
  margin: 0 5px;
  font-size: 14px;
  font-weight: bold;
  min-width: 24px;
  text-align: center;
}

.game-page--user-lists {
  margin-top: 16px;
  display: flex;
}

.game-page--user-lists li {
  margin-right: 16px;
  border-radius: 6px;
  border: 2px solid #ccc;
  font-size: 12px;
  display: flex;
}

.game-page--user-lists .game-page--user-lists-existing-chip {
  background: #fafafa;
  border-color: #f1f1f1;
}

.game-page--user-lists .game-page--user-lists-add-chip {
  /* background: #ebffed; */
  border-color: #49874c;
}

.game-page--user-lists-existing-chip-action a,
.game-page--user-lists-existing-chip-name a {
  padding: 1px 5px;
}

.game-page--user-lists-existing-chip-action {
  font-weight: bold;
  border-left: 2px solid #ddd;
}

.game-page--user-lists-add-chip a,
.game-page--user-lists-existing-chip-action a {
  display: inline-block;
  padding: 1px 5px;
}

.game-page--user-lists-existing-chip-action a {
  color: rgb(186, 186, 186);
}

.game-page--user-lists-existing-chip-action a:hover {
  background: rgb(254, 224, 224);
  color: red;
}

.game-page--user-lists-add-chip a {
  color: #49874c;
}

.game-page--user-lists-add-chip a:hover {
  background: #49874c;
  color: #fff;
}

/* TODO: respect BEM, don't do this. */
.game-page-images .homepage-box-images ul {
  max-width: 820px;
  gap: 8px;
  overflow-x: auto;
}
.game-search {
  margin-bottom: var(--box-gap);
}
.game-search input[type="text"] {
  width: 100%;
}
.games-home {
  display: grid;
  grid-template:
    "search search sidebar"
    "new-releases new-releases sidebar"
    "top-scores browse-genres sidebar"
    "popular browse-platforms sidebar"
    "spacer spacer sidebar" / 1fr 1fr 1fr;
  max-width: 952px;
  margin: var(--box-gap) 0 0 var(--box-gap);
  grid-gap: var(--box-gap);
  grid-template-rows: min-content min-content min-content min-content 1fr;
}

@media screen and (max-width: 800px) {
  .games-home {
    grid-template:
      "sidebar"
      "top-scores"
      "browse-genres"
      "browse-platforms" / 1fr;
    grid-template-rows: min-content;
    grid-gap: 0;
    margin: 16px;
  }

  .games-home-search,
  .games-home-new-releases,
  .games-home-popular {
    display: none;
  }
}

.games-home-search {
  grid-area: search;
}

.games-home-sidebar {
  grid-area: sidebar;
}

.games-home-new-releases {
  grid-area: new-releases;
}

.games-home-new-releases .games-list-game-cover a {
  display: block;
  width: 100%;
  height: 100%;
}

.games-home-top-scores {
  grid-area: top-scores;
}

.games-home-browse-genres {
  grid-area: browse-genres;
}

.games-home-popular {
  grid-area: popular;
}

.games-home-browse-themes {
  grid-area: browse-platforms;
}

.games-home-spacer {
  grid-area: spacer;
}

.game-reviews-summary {
  display: grid;
  grid-template-columns: min-content 1fr;
  column-gap: 8px;
  margin-top: 14px;
}

.game-reviews-summary .game-reviews-summary-score {
  grid-column: 1;
  grid-row: 1;
}

.game-reviews-summary .game-reviews-summary-details {
  display: block;
  grid-column: 2;
  grid-row: 1;
}
.games-list li {
  display: grid;
  grid-template-areas:
    "cover title score"
    "cover details score";
  grid-template-columns: 100px 1fr 80px;
  grid-template-rows: min-content 1fr;
  column-gap: var(--box-gap);
  margin-bottom: var(--box-gap);
}

.games-list-game-title {
  font-size: 16px;
  font-weight: bold;
  grid-area: title;
}

.games-list-game-title-release-year {
  color: #888;
  font-size: 13px;
  font-weight: normal;
}

.games-list-game-cover {
  background: #f6f6f6;
  grid-area: cover;
  height: 90px;
  width: 90px;
}

.games-list-game-details {
  grid-area: details;
}

.games-list-game-score {
  grid-area: score;
}

.games-list-results {
  margin-bottom: var(--box-gap);
}
@font-face {
  font-family: "GmIcons";
  src: url(/fonts/gm_icons.ttf);
}

.gm-icon {
  font-family: "GmIcons";
}

.gm-icon.full-page {
  font-family: "GmIcons";
  font-size: 400px;
}

.gm-icon.big {
  font-family: "GmIcons";
  font-size: 20px;
}

.gm-icon.small {
  font-family: "GmIcons";
  font-size: 10px;
}

.gm-icon-button {
  display: inline-block;
}

.gm-icon-button {
  padding: 4px;
  margin-right: 0px;
}
#small-poll .option {
  margin-left: 5px;
}

#small-poll .percent {
  width: 98%;
  margin-right: 5px;
  margin-bottom: 10px;
}

.daily-joy-babe2,
.daily-joy-dude2,
.daily-joy-void2 {
  display: inline;
  width: auto;
  cursor: pointer;
}

.ccontent a.daily-joy-babe2 img {
  width: 16px;
  height: 16px;
  border: 0;
}

.ccontent a.daily-joy-dude2 img {
  width: 16px;
  height: 16px;
  border: 0;
}

.ccontent a.daily-joy-void2 img {
  width: 16px;
  height: 16px;
  border: 0;
}
/** homepage **/
.homepage {
  display: grid;
  grid-template:
    "news topics timely"
    "images images timely"
    "articles articles timely"
    "files files timely"
    "spacer spacer timely" / 1fr 1fr 1fr;
  max-width: 952px;
  grid-gap: var(--box-gap);
  grid-template-rows: min-content min-content min-content min-content 1fr;
}

.homepage--server .mcontent {
  display: flex;
  justify-content: center;
  font-weight: 500;
  height: 70px;
  align-items: center;
  flex-direction: column;
}

.homepage--server-admin {
  font-size: 11px;
}

.homepage-section-news {
  grid-area: news;
}

.homepage-section-topics {
  grid-area: topics;
  margin-bottom: 0;
}

.homepage-section-topics li {
  display: flex;
}

.homepage-section-blogs,
.homepage-section-wikis {
  margin-top: 20px;
}

.homepage-section-blogs li {
  display: grid;
  grid-auto-columns: 1fr max-content;
  padding-left: 10px;
  border-bottom: 1px solid var(--content-separator-border-color);
}

.homepage-section-blogs li:last-child {
  border-bottom: 0;
}

.homepage-section-blogs li .avatar {
  text-align: right;
  grid-column: 2;
}

.homepage-section-blogs li a {
  display: flex;
  align-items: center;
  grid-column: 1;
}

.homepage-section-news .module,
.homepage-section-topics .module {
  margin-bottom: 0;
}

.homepage-section-spacer {
  grid-area: spacer;
}

.homepage-section-timely {
  grid-area: timely;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: min-content;
}

.homepage-section-articles {
  grid-area: articles;
}

.homepage-section-images {
  grid-area: images;
}

.homepage-section-files {
  grid-area: files;
}

/** homepage-box **/
.homepage-box .mtitle {
  background: var(--subheader-stronger-contrast-bg);
  color: var(--subheader-stronger-contrast-color);
  padding: 4px 4px 2px 6px;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.homepage-box .mtitle a {
  color: var(--subheader-stronger-contrast-color);
}

/* TODO: rm once we rm global .alt1 styles. */
.homepage-box .alt1 {
  background: transparent;
}

/* TODO: try to merge contents-titles. */
.homepage-box.contents-titles li,
.homepage-box.contents-list li,
.homepage-box-competitions tr {
  border-bottom: 1px solid var(--content-separator-border-color);
  margin: 6px 0;
  padding-bottom: 3px;
}

.homepage-box.contents-titles li a,
.homepage-box.contents-list li a {
  display: block;
  padding: 3px 0 0 6px;
}

.homepage-box.contents-titles li:last-child,
.homepage-box.contents-list li:last-child,
.homepage-box-competitions tr:last-child {
  border-bottom: 0;
}

/* TODO: remove the .ccontent .module bits. */
.ccontent .module.homepage-box .mcontent {
  padding-top: 2px;
}

.homepage-box-bets-li {
  display: grid;
}

/* TODO: clean this once we remove the ccontent declaration. */
.ccontent .homepage-box-poll label {
  font-weight: normal;
}

.homepage-box-poll li {
  margin-bottom: 0.8rem;
}

.homepage-box-potd .screenshot {
  margin: 16px 0;
  text-align: center;
}

.homepage-box-files {
  display: grid;
  grid-gap: 16px;
  grid-auto-columns: minmax(0, 1fr);
}

.homepage-box-files > div {
  grid-row: 1;
}

.homepage-box-demos li {
  display: grid;
}

.homepage-box-images ul {
  display: flex;
  padding-top: 16px;
  justify-content: space-between;
}

.homepage-box-articles .featured img {
  display: block;
}

.homepage-box-articles-others-item {
  display: grid;
  grid-template:
    "image title"
    "image type";
  grid-template-columns: 50px 1fr;
  column-gap: 8px;
  grid-template-rows: min-content 1fr;
}

.homepage-box-articles-others-image {
  grid-area: image;
}

.homepage-box-articles-others-title {
  grid-area: title;
}

.homepage-box-articles-others-type {
  grid-area: type;
}

.homepage-box-faction-stats .mcontent {
  display: grid;
  grid-template:
    "founded-on building"
    "members building"
    "online building"
    "karma building" / 1fr 100px;
  row-gap: 8px;
  padding-left: 6px;
}

.homepage-box-faction-stats-stat-value {
  margin-top: 16px;
  font-weight: bold;
  font-size: 16px;
  color: #666;
}

.homepage-box-faction-stats-stat-label {
  color: #666;
}

.homepage-box-faction-stats-founded-on {
  grid-area: founded-on;
}

.homepage-box-faction-stats-members {
  grid-area: members;
}

.homepage-box-faction-stats-online {
  grid-area: online;
}

.homepage-box-faction-stats-karma {
  grid-area: karma;
}

.homepage-box-faction-stats-building {
  grid-area: building;
}

.homepage-section-game-reviews {
  margin-top: 16px;
}

.homepage-box--game-review {
  width: 100%;
  display: grid !important;
  border-bottom: 1px solid var(--content-separator-border-color);
  column-gap: 6px;
  grid-template-areas:
    "cover game-name author"
    "cover excerpt author"
    "cover excerpt author";
  grid-template-columns: 32px 1fr 32px;
  grid-template-rows: min-content 1fr 1fr;
  padding-bottom: 6px;
}

.homepage-box--game-review:first-child {
  padding-top: 4px;
}

.homepage-box--game-review:last-child {
  border-bottom: 0;
}

.homepage-box--game-review .cover {
  grid-area: cover;
  padding-top: 2px;
}

.homepage-box--game-review .cover a img {
  border: 0;
}

.homepage-box--game-review .game-name {
  grid-area: game-name;
  font-size: 12px;
  line-height: normal;
}

.homepage-box--game-review .game-review-list-score,
.game-list-contents .game-review-list-score {
  /* TODO: create own style, we're overriding most of the original game-review-list-score. */
  display: inline-block;
  height: 21px;
  font-size: 14px;
  font-weight: normal;
  width: 24px;
}

.homepage-box--game-review .avatar {
  grid-area: author;
  text-align: center;
  padding-top: 1px;
}

.homepage-box--game-review .game-review-excerpt {
  grid-area: excerpt;
  word-break: break-word;
  font-size: 13px;
  line-height: 18px;
}

.home-desktop .contents-stream--card-mode {
  margin-left: 0;
}

.home-desktop--columns {
  display: flex;
  gap: 24px;
}

.home-desktop--columns > div {
  flex: 0 1 50%;
}

.home-desktop--card-switcher-container {
  margin-bottom: 8px;
  display: flex;
  justify-content: flex-start;
}

.ccontent .home-desktop--columns .module.homepage-box .mcontent {
  padding-top: 0;
}
.gallery-info {
  float: left;
  width: 175px;
}
.input-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}

.input-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.input-switch--slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--popup-shadow-color);
  transition: 0.2s;
  border-radius: 34px;
}

.input-switch--slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: var(--switch-slider-color);
  transition: 0.2s;
  border-radius: 50%;
}

input:checked + .input-switch--slider {
  background-color: #ba0000;
}

.disabled input:checked + .input-switch--slider {
  background-color: #ad8c8c;
}

input:focus + .input-switch--slider {
  box-shadow: 0 0 1px #ba0000;
}

input:checked + .input-switch--slider:before {
  transform: translateX(24px);
}
.items-db--slot-group > li {
  margin-top: 16px;
  display: grid;
  grid-template-areas:
    "picture name"
    "picture description";
  grid-template-columns: 74px 1fr;
  grid-template-rows: min-content 1fr;
  column-gap: 8px;
  row-gap: 8px;
  margin-bottom: 24px;
}

.items-db--picture {
  grid-area: picture;
  background: var(--hamburger-menu-hover-bg);
  border: 1px solid #000;
  border-radius: 4px;
  box-sizing: border-box;
  height: 128px;
  width: 74px;
  background-repeat: repeat;
  background-image: url(/images/db-item-bg.png);
}

.items-db--picture div {
  padding: 4px;
  height: 128px;
  width: 72px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-repeat: repeat;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
}

.items-db--picture img {
  width: 64px;
  height: 64px;
}

.items-db--name {
  grid-area: name;
  font-size: 18px;
}

.items-db--description {
  grid-area: description;
}

/* TODO: copy-paste from markdown-content.css. */
.items-db--description blockquote {
  color: var(--blockquote-color);
  background: var(--blockquote-bg);
  font-style: italic;
  position: relative;
  padding: 11px 11px 11px 24px;
  margin-left: 0;
}
.items-db--description blockquote:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  border-radius: 4px;
  background: var(--blockquote-border-color);
}

.items-db--description-properties {
  margin-top: 16px;
}

.items-db--description-properties li {
  list-style: disc;
  margin-left: 18px;
}

.items-db--description-title {
  margin-top: 16px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
}
.user-daily-karma-stats {
  margin-top: 16px;
}

.user-daily-karma-stats td {
  padding: 5px 3px 5px 6px;
}

.user-daily-karma-stats .delta {
  width: 32px;
  text-align: right;
  font-size: 13px;
  padding-left: 0;
}

.user-daily-karma-stats .opener {
  width: 20px;
  text-align: center;
}

.user-daily-karma-stats tr {
  border: 1px solid var(--subtle-alt1-border-color);
}

.user-daily-karma-stats--details-opener {
  cursor: pointer;
  font-size: 18px;
}

.user-daily-karma-stats--details-opener-rotated i {
  transform: rotate(90deg);
}

.user-daily-karma-stats--details {
  background: var(--secondary-block-bg);
}

.short-change-type {
  width: 90px;
  font-size: 12px;
  color: hsl(210, 8%, 45%);
  text-align: right;
}

.user-daily-karma-stats .tstamp {
  width: 125px;
  text-align: right;
  font-size: 12px;
  color: hsl(210, 8%, 45%);
  padding-right: 12px;
}

@media screen and (max-width: 800px) {
  .user-daily-karma-stats .tstamp {
    display: none;
  }

  .user-daily-karma-stats--title {
    margin: 16px;
  }
}
.last-commented-objects {
  margin-bottom: 0;
}

.last-commented-objects a {
  display: block;
}
/* TODO: rework all of these to use .md-content instead. */
.md-content ul,
.md-content ol {
  margin-bottom: 32px;
  margin-left: 8px;
}

.md-content code {
  background: var(--code-block-bg);
  padding: 2px 4px;
  border-radius: 3px;
}

.md-content ul ul,
.md-content ol ol,
.md-content ul ol,
.md-content ol ul {
  margin-bottom: 0;
}

.md-content li {
  margin-left: 16px;
}

.md-content ul li {
  list-style: disc;
}

.md-content ol li {
  list-style: decimal;
}

.md-content h1 {
  border-bottom: 1px solid var(--subheader-border-color);
  overflow: hidden;
  /* for h1s next to TOC */
  font-size: 24px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  margin-top: 40px;
}

.md-content a,
.md-content a:hover,
.md-content a:visited {
  text-decoration: underline;
}

.md-content a img {
  border: 0;
}

.md-content a.username-link,
.md-content a.username-link:hover,
.md-content a.username-link:visited {
  color: var(--username-link-color);
  text-decoration: none;
  font-weight: 600;
}

.md-content a.username-link:hover {
  text-decoration: underline;
}

.md-content h1:first-child {
  margin-top: 0;
}

.md-content h2 {
  font-size: 18px;
}

.md-content pre {
  background: var(--code-block-bg);
  border-radius: 6px;
  padding: 12px 20px;
  border-radius: 6px;
  margin-bottom: var(--box-gap);
}

.md-content blockquote *:last-child {
  margin-bottom: 0;
}

.md-content table {
  margin: 24px 0;
}

.md-content table td,
.md-content table th {
  border: 1px solid var(--table-border-color);
  padding: 5px;
}

.md-content table th {
  background-color: var(--table-header-bg);
}

.md-content img {
  max-width: 100%;
  height: auto !important;
}

/*
This doesn't work because of smileys...
.md-content p>img:only-child {
  display: block;
  margin: 0 auto;
}

/* Youtube videos */
.md-content iframe {
  display: block;
  margin: 0 auto;
  width: 560px;
  aspect-ratio: 4 / 3;
}

@media screen and (max-width: 800px) {
  .md-content iframe {
    width: 100%;
  }
}

#markdown-toc {
  float: left;
  background: var(blockquote-bg);
  max-width: 200px;
  margin-right: 24px;
  padding: 8px;
  border: 1px solid var(blockquote-border-color);
  border-radius: 4px;
}

/* Callouts / admonitions */
.md-content .importante,
.md-content .consejo,
.md-content .atencion,
.md-content .peligro {
  /* border-left: 4px solid #666; */
  /* border-radius: 2px; */
  margin: 1em 0;
  padding: 16px;
}

.md-content .importante,
.md-content .consejo {
  background: var(--blockquote-importante-bg);
}

.md-content .importante:before,
.md-content .consejo:before {
  background: var(--blockquote-importante-border-color);
}

.md-content .atencion {
  background: var(--blockquote-atencion-bg);
}

.md-content .atencion:before {
  background: var(--blockquote-atencion-border-color);
}

.md-content .peligro {
  background: var(--blockquote-peligro-bg);
}

.md-content .peligro:before {
  background: var(--blockquote-peligro-border-color);
}

.md-content details {
  border: 1px solid var(--subtle-alt1-bg);
  padding-left: 16px;
  margin-bottom: 16px;
  white-space: pre-line;
}

.md-content details[open] {
  padding-bottom: 16px;
}

.md-content details summary {
  background: var(--subtle-alt1-bg);
  padding: 4px;
  cursor: pointer;
  margin-left: -16px;
}

.md-content details[open] summary {
  margin-bottom: 8px;
}
.CodeMirror .md-content {
  padding: 10px;
  background: #fafafa;
}

.CodeMirror {
  resize: vertical;
  overflow: auto;
}

.CodeMirror-code {
  /* Necessary so that the last line doesn't partially overflow after manually
  resizing the editor. */
  margin-bottom: 20px;
}
.ccontent--maximized-image {
  margin: 0 auto;
}

.cmain--maximized-image {
  margin-right: 0;
  width: 960px;
}

.csupport--maximized-image {
  display: none;
}
.mdeditor2 {
  margin-bottom: 12px;
}

.mdeditor2--help {
  display: flex;
  justify-content: end;
  margin-top: 6px;
}

.mdeditor2--toolbar {
  user-select: none;
  padding: 9px 10px;
  border-top: 1px solid var(--input-border-color);
  border-left: 1px solid var(--input-border-color);
  border-right: 1px solid var(--input-border-color);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  display: flex;
  gap: 2px;
  background: var(--subheader-bg);
  transition: 0.15s padding ease;
}

.mdeditor2--toolbar--compressed {
  padding: 0px 10px;
}

.mdeditor2--toolbar--compressed > * {
  display: none;
}

.mdeditor2--toolbar--compressed .btn:last-child {
  display: initial;
}

.mdeditor2--toolbar .btn {
  min-width: 30px;
  height: 30px;
  border: 1px solid transparent;
  text-align: center;
  display: inline-block;
  line-height: 30px;
  border-radius: 3px;
  background: none;
  color: var(--mdeditor-btn-color);
  margin: 0;
  font-size: 16px;
  padding: 0;
  cursor: pointer;
}

.mdeditor2--toolbar .btn--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.mdeditor2--toolbar-separator {
  border-left: 1px solid var(--input-border-color);
  border-right: 1px solid transparent;
  margin: 5px 2px 0 1px;
  height: 22px;
}

.mdeditor2--toolbar .btn:first-child {
  margin-left: 0;
}

.mdeditor2 textarea,
.mdeditor2--preview {
  padding: 16px;
  width: 100%;
  min-height: 305px;
  height: auto;
  word-wrap: break-word;
  border: 1px solid var(--input-border-color);
  border-radius: 0;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background: var(--input-bg);
  color: var(--input-color);
}

@media (min-width: 800px) {
  .mdeditor2 textarea,
  .mdeditor2--preview {
    min-height: 385px;
  }
}

.comment-textarea .mdeditor2 textarea,
.comment-textarea .mdeditor2--preview {
  min-height: 165px;
}

.mdeditor2 textarea {
  max-height: 305px;
  resize: vertical;
}

.mdeditor2--toolbar .btn.active,
.mdeditor2--toolbar .btn:hover {
  background: var(--mdeditor-btn-hover-bg);
  border-color: var(--mdeditor-btn-hover-border-color);
}

.btn.mdeditor2--toolbar-toggle-full {
  flex-grow: 1;
  /* justify-items: flex-end; */
  text-align: right;
  color: #949494;
}

@media (min-width: 800px) {
  .mdeditor2 textarea {
    max-height: 685px;
  }

  .btn.mdeditor2--toolbar-preview {
    /* to prevent accidental clicks on toggle while previewing */
    margin-right: 44px;
  }

  .mdeditor2--toolbar-toggle-full {
    padding-right: 4px;
  }
}

.mdeditor2--toolbar .btn.mdeditor2--toolbar-toggle-full:hover {
  border-color: transparent;
}

.mdeditor2--toolbar .btn:disabled {
  opacity: 0.4;
}

.mdeditor2--preview {
  background: var(--mdeditor-preview-bg);
}

@media (max-width: 576px) {
  .mdeditor2--toolbar .mdeditor2--toolbar-clean,
  .mdeditor2--toolbar .mdeditor2--toolbar-code,
  .mdeditor2--toolbar .mdeditor2--toolbar-heading,
  .mdeditor2--toolbar .mdeditor2--toolbar-list-ol,
  .mdeditor2--toolbar .mdeditor2--toolbar-table {
    display: none;
  }
}

.mdeditor2--help i {
  font-size: 16px;
  color: var(--secondary-dense-icon-color);
}

a.mdeditor2--help:hover {
  text-decoration: none;
}

.mdeditor2--help i:hover {
  color: var(--body-color);
}
.members-index {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-gap: 16px;
}

@media screen and (max-width: 800px) {
  .members-index {
    margin: 16px;
    grid-auto-flow: row;
  }
}

.members-index--ranking-entry {
  display: grid;
  grid-template-areas:
    "avatar name"
    "avatar extra";
  grid-template-columns: 62px 1fr;
}

.members-index--ranking-entry-avatar {
  grid-area: avatar;
}

.members-index--ranking-entry-name {
  grid-area: name;
}
.members-index--ranking-entry-extra {
  grid-area: extra;
}

.avatar-img--normal {
  width: 50px;
  height: 50px;
}

.avatar-img--small {
  width: 32px;
  height: 32px;
}

.avatar-img--very_small {
  width: 16px;
  height: 16px;
}

.members-index--ranking-pos {
  vertical-align: top;
  font-size: 18px;
}
.members-user-info ul {
  margin: 5px 0 0 52px;
  text-align: left;
}

.members-user-info .avatar {
  float: left;
  margin-right: 3px;
}

.members-user-info li {
  width: 69px;
  margin-bottom: 2px;
}
.ccontent .messages {
  table-layout: fixed;
  border-collapse: collapse;
}

.messages .new a {
  font-weight: bold;
  text-decoration: none;
  overflow: hidden;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ccontent .messages td.preview {
  padding: 2px 5px;
  overflow: hidden;
  white-space: nowrap;
}

.ccontent .messages-thread table {
  table-layout: fixed;
  border-collapse: collapse;
}

.ccontent .messages-thread .preview {
  overflow: hidden;
  white-space: nowrap;
}

.ccontent td.preview a {
  text-decoration: none;
}

.ccontent .messages-controls {
  margin-right: 20px;
  float: left;
}

.ccontent .messages .preview span {
  padding-left: 13px;
}
.contents-titles ul {
  margin-top: 0;
}
.mpager {
  margin: 40px auto;
  display: flex;
  justify-content: center;
}

.mpager .currentpage {
  padding: 1px 5px;
  border: 1px solid;
  margin: 0 2px;
}

.mpager a,
.mpager .current {
  border-radius: 3px;
  background: var(--alt1-bg);
  border: 1px solid var(--subtle-alt1-border-color);
  padding: 3px 7px;
  margin: 0 2px;
}

.mpager .disabled {
  color: var(--secondary-color);
}

.mpager .current {
  font-style: normal;
}

.mpager a:hover {
  border-color: var(--link-color);
}

.mpager .current {
  font-weight: bold;
}

.mpager .pagination {
  display: flex;
  gap: 2px;
}

.mpager .pagination * {
  box-sizing: border-box;
  display: inline-block;
  padding: 3px 7px;
}

.contents-stream--pager .mpager {
  margin: 16px 10px 16px;
}

.contents-stream--pager .mpager a {
  padding: 4px 7px;
  margin: 0 3px;
}

.contents-stream--pager .mpager * {
  font-size: 13px;
}
.new-content-form {
  display: grid;
  grid-template-areas:
    "content-type faction "
    "title title"
    "other-fields other-fields"
    "submit submit"
    "content-quality content-quality";
}

@media screen and (max-width: 800px) {
  .new-content-form {
    grid-template-areas:
      "content-type"
      "faction"
      "title"
      "other-fields"
      "submit";
  }
}

.new-content-form--faction {
  grid-area: faction;
}

.new-content-form--content-type {
  grid-area: content-type;
  margin-bottom: var(--box-gap);
}

.new-content-form--title {
  grid-area: title;
}

.new-content-form--other-fields {
  grid-area: other-fields;
}

.new-content-form--submit {
  grid-area: submit;
}

.new-content-form-header {
  margin-bottom: 16px;
  font-size: 20px;
}

.edit-content-form--danger-zone {
  padding: 32px 0;
  border-top: 1px solid var(--table-border-color);
  margin-top: 64px;
}

.edit-content-form--danger-zone i {
  font-size: 16px;
}

.edit-content-form--danger-zone-header {
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.content-prefix {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  cursor: pointer;
}

.content-prefix > * {
  padding: 2px 8px 1px 8px;
}

.content-prefix .content-prefix--chip {
  background: var(--chip-bg);
  border-radius: 4px;
}

.content-prefix,
.new-content-form input[type="text"] {
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  padding: 6px 10px 5px 10px;
  margin-bottom: 16px;
}

.content-prefix-form--label {
  margin-bottom: 4px;
}

.content-prefix-form {
  z-index: 10;
  position: absolute;
  border: 1px solid var(--popup-border-color);
  border-radius: 4px;
  background: var(--popup-bg);
  top: 96px;
  left: 16px;
  min-height: 100px;
  padding: 16px;
  width: 92%;
  max-width: 500px;
}

.content-prefix-form--pro-mode {
  display: flex;
  color: #777;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

.content-prefix-form--pro-mode label {
  margin-left: 8px;
}
.page-content-wrapper {
  padding-top: 2.1rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;
  position: relative;
}

@media screen and (max-width: 800px) {
  .page-content-wrapper {
    padding-top: 0;
  }
}

.page-content-wrapper--content-columns {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 16px;
  margin: 16px;
  grid-template-columns: 1fr;
}

@media screen and (max-width: 800px) {
  .page-content-wrapper--content-columns {
    margin: 0;
  }
}
.page-level-content {
  border: 1px solid var(--page-level-content-border-color);
  border-radius: 6px;
  background: var(--page-level-content-bg);
  color: var(--page-level-content-color);
}

@media screen and (max-width: 800px) {
  .page-level-content {
    border: 0;
    border-radius: 0;
  }
}

.page-level-content .contents-list li {
  margin-bottom: 1px;
}

.page-level-content .contents-list li a {
  display: block;
  width: 100%;
  overflow: hidden;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.page-feedback {
  margin: 16px;
  border-radius: 6px;
  border: 1px solid;
}

.page-feedback div {
  margin: 10px;
}

.page-feedback--disappearing {
  animation: roll-up-and-fade-out 5s forwards;
}

@keyframes roll-up-and-fade-out {
  0% {
    opacity: 1;
    overflow: hidden;
  }
  60% {
    opacity: 1;
    height: auto;
  }
  100% {
    opacity: 0;
    height: 0;
  }
}
.poll-user-vote {
  margin-bottom: 32px;
}

.poll-results--option-name {
  margin-bottom: 4px;
}

.poll-results--option {
  margin-bottom: 24px;
}

.poll-results {
  max-width: 360px;
  margin: 0 auto;
}

@media screen and (max-width: 800px) {
  .poll-user-vote {
    margin: 0 16px 32px 16px;
  }
  .poll-results {
    margin: 0 16px;
  }
}
.product-img.SoldClanAvatar img {
  background: url(/skins/default/images/shop_products/SoldClanAvatar.png);
}

.product-img.SoldChangeNick img {
  background: url(/skins/default/images/shop_products/SoldChangeNick.png);
}

.product-img.SoldClanAvatar img {
  background: url(/skins/default/images/shop_products/SoldClanAvatar.png);
}

.product-img.SoldUserAvatar img {
  background: url(/skins/default/images/shop_products/SoldUserAvatar.png);
}

.product-img.SoldFaction img {
  background: url(/skins/default/images/shop_products/SoldFaction.png);
}

.product-img.SoldOldFaction img {
  background: url(/skins/default/images/shop_products/SoldOldFaction.png);
}

.product-img.SoldFactionAvatar img {
  background: url(/skins/default/images/shop_products/SoldFactionAvatar.png);
}

.product-img.SoldOutstandingClan img {
  background: url(/skins/default/images/shop_products/SoldOutstandingClan.png);
}

.product-img.SoldOutstandingFaction img {
  background: url(/skins/default/images/shop_products/SoldOutstandingFaction.png);
}

.product-img.SoldOutstandingUser img {
  background: url(/skins/default/images/shop_products/SoldOutstandingUser.png);
}

.product-img.SoldProfileSignatures img {
  background: url(/skins/default/images/shop_products/SoldProfileSignatures.png);
}
.progress-bar {
  width: 100%;
  border: 1px solid #aaa;
  border-radius: 5px;
  box-sizing: border-box;
  position: relative;
}

.progress-bar--label {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 2em;
  text-align: center;
  font-size: 12px;
  color: hsl(210, 8%, 5%);
}

.progress-bar--bar {
  border-radius: 5px 0 0 5px;
  height: 24px;
}

.progress-bar--nearly-full .progress-bar--bar {
  border-radius: 5px;
}

.progress-bar--orange {
  border-color: hsla(28, 31%, 52%, 1);
}
.progress-bar--orange .progress-bar--bar {
  background: hsla(28, 40%, 92%, 1);
}

.progress-bar--blue {
  border-color: hsla(230, 46%, 56%, 1);
}
.progress-bar--blue .progress-bar--bar {
  background: hsla(221, 100%, 91%, 1);
}

.progress-bar--silver {
  border-color: hsla(0, 0%, 59%, 1);
}
.progress-bar--silver .progress-bar--bar {
  background: hsla(0, 0%, 87%, 1);
}

.progress-bar--gold {
  border-color: hsla(45, 100%, 47%, 1);
}
.progress-bar--gold .progress-bar--bar {
  background: hsla(48, 100%, 91%, 1);
}

.progress-bar--bet-1 {
  border-color: #1984c5;
}
.progress-bar--bet-1 .progress-bar--bar {
  background: #a7d5ed;
}

.progress-bar--bet-2 {
  border-color: #d67020;
}
.progress-bar--bet-2 .progress-bar--bar {
  background: #ffc77c;
}

/* TODO: get rid of this one */
.pcent-bar {
  height: 0.4rem;
  border: 1px solid;
  margin: 2px;
  background: var(--percent-bar-bg);
  border-color: var(--percent-bar-bg-border-color);
}

.pcent-bar.compact {
  border: 0;
}

.pcent-bar .bar {
  margin-bottom: 12px;
  height: 0.4rem;
  background: var(--percent-bar-fg);
}
.questions--best-answer {
  padding: 16px;
  background: var(--secondary-block-bg);
  border: 1px solid var(--secondary-block-border-bg);
  border-radius: 4px;
}

.questions--best-answer-author {
  margin: 8px 0 24px 0;
}

@media screen and (max-width: 800px) {
  .question-best-answer-comment .mtitle,
  .questions--best-answer,
  .questions--best-answer-author,
  .question-best-answer-comment .reset-question,
  .question-prize {
    margin-left: 16px;
    margin-right: 16px;
  }
}
.rating-stars ul {
  list-style-type: none;
  padding: 0;
  user-select: none;
}
.rating-stars ul > li.star {
  display: inline-block;
}

.rating-stars ul > li.star > i.fa {
  width: 32px;
  font-size: 2.5em;
  color: #ccc;
}

.rating-stars ul > li.star.hover > i.fa {
  cursor: pointer;
  color: #ff912c;
}

.rating-stars ul > li.star.selected > i.fa {
  color: #c00;
}
.render-stats {
  position: absolute;
  z-index: 201;
  top: 13rem;
  right: 1rem;
  padding: 4px 12px;
  filter: drop-shadow(0 0 0.5rem #666);
}
.score-5s-5 {
  background-color: #48c023;
}

.score-5s-4 {
  background-color: #b7dd29;
}

.score-5s-3 {
  background-color: #f1c40f;
}

.score-5s-2 {
  background-color: #ffa534;
}

.score-5s-1 {
  background-color: #e94735;
}
.search-results-box {
  margin-bottom: 32px;
}

.search-results-box header {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 4px;
}

.search-results--search-bar {
  margin-bottom: 16px;
  margin-right: 16px;
}

@media screen and (max-width: 800px) {
  .search-results--search-bar {
    margin: 16px;
    display: flex;
  }
}

.search-results--search-bar input[type="text"] {
  padding: 6px 8px;
  width: 100%;
  font-size: 16px;
}

.search-results--search-with-google {
  margin-top: 64px;
}

.search-results-box .game-with-cover img {
  width: 48px;
}

.search-results-box .game-with-cover {
  display: flex;
  align-items: center;
  min-height: 48px;
}

.search-results-box .game-with-cover a:first-child {
  width: 48px;
  margin-right: 8px;
}
.sorting-table-header {
  font-size: 12px;
}

.sorting-table-header th {
  padding-left: 6px;
}
.submenu {
  font-size: 13px;
}

.submenu--l1 {
  background: #780000;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 800px) {
  .submenu--l1 {
    border-radius: 0;
  }
}

.submenu--l2 {
  background: #8f2020;
  display: flex;
  flex-wrap: wrap;
}

.submenu li {
  padding: 7px 12px 5px 12px;
  margin-bottom: 0;
}

.submenu li:first-child {
  padding-left: 16px;
}

.submenu--l1 a,
.submenu--l2 a {
  color: rgb(238, 238, 238);
}

.submenu--l1 .current a,
.submenu--l2 .current a {
  color: var(--submenu-desktop-current-color);
}

.submenu--l1 .current,
.submenu--l2 .current {
  font-weight: bold;
  background: var(--submenu-desktop-current-bg);
}

.submenu--l1 .current:first-child {
  border-top-left-radius: 4px;
}

@media screen and (max-width: 800px) {
  .submenu--l1 .current:first-child {
    border-radius: 0;
  }
}

.submenu--level2-title {
  font-weight: bold;
}

/*** MOBILE ***/
.submenu--mobile .submenu--l1 {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  max-height: none;
  box-sizing: border-box;
  /* WARNING: DON'T CHANGE TO 44PX, Chrome mobile view != actual mobile view. */
  margin: 109px 0 0 0;
  z-index: 10;
  overflow-y: scroll;
  flex: 1 0 100%;
  width: 100%;
}

.submenu--mobile ul {
  display: block;
}

.submenu--mobile--opener {
  border: 1px solid var(--submenu-mobile-border-color);
  background: var(--submenu-mobile-bg);
  border-radius: 8px;
  margin: 8px 8px 4px 8px;
  padding: 4px 8px;
  color: #777;
  display: flex;
  gap: 8px;
  align-items: center;
}

.submenu--mobile--opener img.factionfavicon {
  height: 17px;
}

.submenu-opener-location {
  font-weight: bold;
}

.submenu--mobile--opener .submenu-opener-caret {
  flex-grow: 1;
  text-align: right;
}

body.submenu-body-overlay {
  background: #780000;
}

.nofilter {
  filter: drop-shadow(0 0 0 red);
}

.submenu--l1--with-l2 .submenu--l2 {
  background: #780000;
}

.submenu--l1--with-l2 li:first-child {
  padding-left: 12px;
}

.submenu--l1--with-l2 .current {
  background: #780000;
  font-weight: normal;
  border-top: 1px solid #4e0101;
  border-bottom: 1px solid #4e0101;
}

.submenu--l1--with-l2 .current .current {
  border: 0;
}

.submenu--l1--with-l2 .current .current {
  font-weight: bold;
  background: #fff;
}

.submenu--l1--with-l2 .current a {
  color: rgb(238, 238, 238);
}

.submenu--l1--with-l2 .current .current a {
  color: rgb(69, 69, 69);
}
.tag-page-header {
  background: #000;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 110px;
  height: 110px;
  background-size: auto 110px;
  background-repeat: no-repeat;
  background-position: right center;
  padding: 0 1rem;
}

.tag-header-image-thumbnail {
  max-width: 100%;
  height: auto;
}
.product-line {
  text-align: left;
}

.product-img {
  text-align: center;
  margin: 5px 0;
}

.product-img img {
  width: 84px;
  height: 84px;
}

.ccontent .product-img a img {
  border: 0;
}
.topnav--bar-desktop {
  z-index: 10;
  position: absolute;
  box-sizing: border-box;
  display: grid;
  grid-template-areas:
    "logo-mascot logo-letters menu search spacer lt login"
    "logo-mascot faction faction faction faction faction faction";
  grid-template-columns: 60px 184px 110px 40px 1fr 46px 130px;
  width: 100%;
  padding: 0 24px;
}

.logged-in .topnav--bar-desktop {
  grid-template-areas:
    "logo-mascot logo-letters menu search spacer new-content lt notifications achievements messages moderation account"
    "logo-mascot faction faction faction faction faction faction faction faction faction faction account";
  grid-template-columns: 60px 184px 110px 40px 1fr 126px repeat(5, 40px) 60px;
}

.topnav--bar-desktop > * {
  background: var(--topnav--bar-bg);
}

.topnav--bar-desktop a {
  color: var(--site-header-desktop-link-color);
}

.topnav--bar-desktop--icon a {
  display: flex;
  justify-content: center;
}

.topnav--bar-desktop--icon i {
  font-size: 19px;
  padding: 10px 8px 8px 8px;
}

.topnav--bar-desktop--icon a:hover {
  background: #efefef;
}

.topnav--bar-desktop--icon a:hover i {
  color: var(--site-header-desktop-link-hover-color);
}

.topnav--bar-desktop a:hover {
  text-decoration: none;
}

.topnav--bar-desktop--faction-name a:hover,
.topnav--bar-desktop--account-menu a:hover {
  text-decoration: underline;
}

.topnav--bar-desktop--logo-mascot {
  grid-area: logo-mascot;
  font-size: 48px;
  padding: 21px 0 0 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.topnav--bar-desktop--new-content {
  grid-area: new-content;
}

.topnav--bar-desktop--icon.topnav--bar-desktop--new-content i {
  color: var(--site-header-desktop-bg);
}

.topnav--bar-desktop--logo-letters {
  grid-area: logo-letters;
  padding-top: 9px;
  padding-left: 6px;
}

.topnav--bar-desktop--faction-name {
  grid-area: faction;
  background: transparent;
  margin-left: 12px;
}

.topnav--bar-desktop--faction-name a {
  display: inline-block;
  background: var(--site-header-faction-name-bg);
  min-width: 164px;
  padding: 3px 6px 2px 6px;
  font-weight: bold;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  display: flex;
  align-items: center;
  width: fit-content;
}

.topnav--bar-desktop--faction-name a img {
  margin-right: 4px;
}

.topnav--bar-desktop--menu {
  grid-area: menu;
  padding-left: 9px;
}

.topnav--bar-desktop--menu a {
  display: flex;
  justify-content: space-between;
  padding: 8px 8px;
  font-weight: 500;
}
.topnav--bar-desktop--menu a:hover {
  /* background: #eaeaea;
  text-decoration: none; */
}

.topnav--bar-desktop--search {
  grid-area: search;
  border-bottom-right-radius: 5px;
  display: flex;
}

.topnav--bar-desktop--search-bar {
  padding: 5px 8px 4px 8px;
  background: var(--body-bg-color);
  border-bottom-right-radius: 5px;
  z-index: 2;
}

.topnav--bar-desktop--search-bar input[type="text"] {
  border-radius: 4px;
  min-width: 200px;
}

.topnav--bar-desktop--spacer {
  grid-area: spacer;
  background: transparent;
}

.topnav--bar-desktop--lt {
  grid-area: lt;
  border-bottom-left-radius: 5px;
  justify-content: end;
  display: flex;
  position: relative;
}

.topnav--bar-desktop--new-content,
.topnav--bar-desktop--login {
  display: flex;
  padding: 0 4px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.topnav--bar-desktop--login a,
.topnav--bar-desktop--new-content a {
  background: var(--site-header-desktop-link-color);
  border-radius: 8px;
  display: block;
  width: 100%;
  font-size: 15px;
  line-height: normal;
  font-weight: 500;
  padding: 2px 0 1px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topnav--bar-desktop--new-content a {
  margin: 1px 0 0 0;
}
.topnav--bar-desktop--new-content a:hover {
  background: var(--topnav--bar-publish-hover-bg) !important;
}
.topnav--bar-desktop--new-content i {
  padding: 4px 8px 5px 0 !important;
}
.topnav--bar-desktop--new-content a:hover i {
  color: var(--topnav--bar-bg) !important;
}

.topnav--bar-desktop--new-content a,
.topnav--bar-desktop--login a {
  color: var(--topnav--bar-bg) !important;
}

.logged-in .topnav--bar-desktop--lt {
  border-bottom-left-radius: 0;
}

.logged-in .topnav--bar-desktop--new-content {
  border-bottom-left-radius: 5px;
}

.topnav--bar-desktop--login {
  grid-area: login;
  border-bottom-right-radius: 5px;
}

.topnav--bar-desktop--notifications {
  grid-area: notifications;
  position: relative;
}

.topnav--bar-desktop--activity-indicator {
  width: 11px;
  height: 11px;
  position: absolute;
  top: 6px;
  right: 2px;
  border-radius: 8px;
  transition: width 0.125s, height 0.125s, right 0.125s, top 0.125s, background 0.125s;
  background: hsl(200, 100%, 38%);
  box-shadow: 0 0 0 2px hsl(210, 8%, 97.5%);
}

.topnav--bar-desktop--has-activity-indicator:hover .topnav--bar-desktop--activity-indicator {
  width: 14px;
  height: 14px;
  top: 4px;
  right: 0px;
  box-shadow: 0 0 0 3px hsl(210, 8%, 97.5%);
}

.topnav--bar-desktop--achievements {
  grid-area: achievements;
  position: relative;
}

.topnav--bar-desktop--achievements-new-points {
  position: absolute;
  top: 5px;
  right: 3px;
  background: hsl(140, 40%, 47%);
  box-shadow: 0 0 0 2px var(--topnav--bar-bg);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 5px 1px 5px;
  border-radius: 1000px;
  line-height: 1.1;
  min-width: 24px;
  display: flex;
  justify-content: center;
  transition: top cubic-bezier(0.165, 0.84, 0.44, 1) 0.15s, opacity 0.5s;
  cursor: pointer;
}

.topnav--bar-desktop--achievements:hover .topnav--bar-desktop--achievements-new-points {
  top: 1px;
}

.topnav--bar-desktop--messages {
  grid-area: messages;
  position: relative;
}

.topnav--bar-desktop--moderation {
  grid-area: moderation;
  position: relative;
}

.topnav--bar-desktop--account {
  grid-area: account;
  text-align: center;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  padding-top: 4px;
  position: relative;
}

.topnav--bar-desktop--account img {
  width: 48px;
  margin-top: 4px;
  border-radius: 4px;
}

.topnav--bar-desktop--account-menu,
.topnav--bar-desktop--achievements-popup {
  position: absolute;
  right: 0px;
  white-space: nowrap;
  text-align: right;
  font-size: 13px;
  background: #fff;
  box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05), 0 2px 8px hsla(0, 0%, 0%, 0.05);
  padding: 0;
  z-index: 100;
  border-radius: 4px;
  border-top-right-radius: 0;
}

.topnav--bar-desktop--account-menu a {
  display: block;
  padding: 6px 16px 4px 16px;
  box-sizing: border-box;
}

.topnav--bar-desktop--account-menu {
  top: 60px;
  width: 125px;
}

.topnav--bar-desktop--achievements-popup {
  top: 30px;
  width: 190px;
}

/* TODO: duplicated with Menu styles, merge them. */
.topnav--bar-desktop--account-menu a:hover {
  background: var(--hamburger-menu-hover-bg);
  text-decoration: none;
}

#menu-label {
  font-weight: 600;
  font-size: 14px;
}

#menu-label i {
  margin-right: 4px;
}

#menu-caret {
  font-size: 20px;
  margin-top: -5px;
  text-align: right;
}

.topnav--bar-desktop--menu span {
  display: inline-block;
}

.topnav--bar-desktop--achievements-links {
  display: flex;
  justify-content: end;
}

.topnav--bar-desktop--achievements-links li a {
  display: inline-block;
  padding: 5px 8px 1px 8px;
}

.topnav--bar-desktop--achievements-links li a:hover {
  background: transparent;
  text-decoration: underline;
}

.topnav--bar-desktop--achievements-links li:last-child {
  padding-right: 4px;
}

.topnav--bar-desktop--achievements-karma-timeline {
  width: 400px;
}

.topnav--bar-desktop--achievements-karma-timeline a {
  justify-content: left;
}

.topnav--bar-desktop--achievements-karma-timeline a:hover {
  background: var(--site-header-desktop-bg);
}

.topnav--bar-desktop--achievements-karma-timeline table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}
.topnav--bar-desktop--achievements-karma-timeline .description {
  text-overflow: ellipsis;
  overflow: hidden;
}

.topnav--bar-desktop--achievements-karma-timeline .short-change-type {
  width: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topnav--bar-desktop--achievements-karma-timeline .delta {
  width: 36px;
  padding-right: 6px;
}

.topnav--bar-desktop--achievements-karma-timeline .short-change-type i {
  font-size: 16px;
  color: hsl(210, 8%, 45%);
}

.topnav--bar-desktop--achievements-popup {
  max-height: 600px;
  overflow-y: auto;
}

a .logo-mafia,
a:visited .logo-mafia {
  color: #cc1f26;
}
.topnav--bar-mobile {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: max-content max-content 1fr max-content max-content;
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 47px;
  box-sizing: border-box;
}

/* TODO: refactor this logic to not have to enumerate every class name. */

.topnav--bar-mobile--logo,
.topnav--bar-mobile--post,
.topnav--bar-mobile--menu,
.topnav--bar-mobile--up,
.topnav--bar-mobile--down,
.topnav--bar-mobile--search,
.topnav--bar-mobile--lt,
.topnav--bar-mobile--account,
.topnav--bar-mobile--messages,
.topnav--bar-mobile--notifications,
.topnav--bar-mobile--review,
.topnav--bar-mobile--account-buttons {
  background: var(--site-header-mobile-bg);
}

.topnav--bar-mobile--menu,
.topnav--bar-mobile--post,
.topnav--bar-mobile--up,
.topnav--bar-mobile--down,
.topnav--bar-mobile--search,
.topnav--bar-mobile--account,
.topnav--bar-mobile--lt,
.topnav--bar-mobile--messages,
.topnav--bar-mobile--notifications,
.topnav--bar-mobile--review {
  padding: 16px 8px 8px 12px;
  font-size: 21px;
}

.topnav--bar-mobile div:last-child {
  padding-right: 14px;
}

.topnav--bar-mobile--lt {
  border-bottom-left-radius: 8px;
}

.topnav--bar-mobile--account-buttons {
  padding-left: 6px;
}

.topnav--bar-mobile--account-buttons span {
  background: #fff;
  color: #000;
  font-weight: bold;
  display: inline-block;
  border-radius: 8px;
  padding: 2px 8px 3px 8px;
  margin: 13px 2px 0 5px;
}

.topnav--bar-mobile--account-buttons span:active {
  color: #fff;
  background: #000;
}

.topnav--bar-mobile--activity-indicator {
  width: 11px;
  height: 11px;
  position: absolute;
  top: 12px;
  left: 9px;
  border-radius: 8px;
  transition: width 0.125s, height 0.125s, right 0.125s, top 0.125s, background 0.125s;
  background: hsl(200, 100%, 38%);
  box-shadow: 0 0 0 2px hsl(210, 8%, 97.5%);
}

.topnav--bar-mobile--search {
  padding-right: 14px;
}

.topnav--bar-mobile--search {
  border-bottom-left-radius: 8px;
  padding-right: 14px;
}

.topnav--bar-mobile--account img {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  margin-top: -2px;
}

.topnav--bar-mobile--logo {
  border-bottom-right-radius: 8px;
  padding-left: 6px;
}

.topnav--bar-mobile--logo .mascot {
  font-size: 30px;
  margin-top: 14px;
  margin-left: 6px;
  margin-right: 6px;
}

.topnav--bg--faction-header {
  border-bottom: 1px solid #000;
}

.topnav--bar-mobile--logo .mascot a,
.topnav--bar-mobile--logo .mascot a.logo {
  color: var(--site-header-mobile-color);
}

.topnav--bar-mobile--account-buttons .button {
  height: 18px;
  line-height: 18px;
  margin: 7px 8px 4px 0;
}

.topnav--bar-mobile--search-bar {
  box-sizing: border-box;
  /* position: absolute; */
  z-index: 11;
  /* top: 45px; */
  width: 100%;
  /* background: hsl(210, 8%, 90%); */
  padding: 4px 0;
}

.topnav--bar-mobile--search-bar form {
  display: grid;
  grid-template-columns: 1fr;
  box-sizing: border-box;
  margin: 5px 9px;
}

.topnav--bar-mobile--search-bar input[type="text"] {
  border-radius: 3px;
  padding: 5px 8px;
}

.topnav--bar-mobile i {
  color: var(--site-header-mobile-color);
}

.topnav--bar-mobile--active-state i {
  color: hsl(358, 62%, 52%);
}
.topnav--menu .sections-list2 {
  display: block;
  vertical-align: top;
}

.topnav--menu.popup {
  background: var(--hamburger-menu-bg);
  color: var(--hamburger-menu-color);
  box-shadow: none;
  border: 1px solid var(--hamburger-menu-border-color);
  border-top: 0;
}

.topnav--menu.popup a {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.topnav--menu.popup a,
.topnav--menu.popup a:visited {
  font-size: 14px;
  font-weight: normal;
  color: var(--hamburger-menu-color);
}

.topnav--menu--mobile.popup a,
.topnav--menu--mobile.popup a:visited {
  font-size: 15px;
}

.topnav--menu.popup a:hover {
  background: var(--hamburger-menu-hover-bg);
  text-decoration: none;
}

.topnav--menu {
  left: 286px;
  top: 36px;
  /* TODO: rm width from util class popup */
  width: 229px !important;
  max-height: 350px;
  overflow-y: auto;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 0;
  z-index: 102;
}

body.noscroll {
  overflow: hidden;
}

.topnav--menu.topnav--menu--mobile {
  top: 48px;
  right: 0;
  left: 0;
  bottom: 0;
  max-height: none;
  position: fixed;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  background: var(--hamburger-menu-bg);
  border-radius: 0;
  border-top: 1px solid var(--hamburguer-menu-border-color);
}

.topnav--menu ul {
  margin: 0 0 20px 0;
}

.topnav--menu li {
  margin: 0;
}

.topnav--menu header {
  padding-left: 10px;
}

.topnav--menu a {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 6px 16px 4px 16px;
}

.topnav--menu header {
  margin-bottom: 4px;
  margin-top: 26px;
  font-size: 10px;
  font-weight: 500;
  line-height: 16px;
  text-transform: uppercase;
}

.topnav--menu .sections-list2:first-child header {
  margin-top: 15px;
}

.dark-theme-switcher {
  display: flex;
}

.dark-theme-switcher li {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  cursor: pointer;
  padding: 4px 0;
}

.dark-theme-switcher li.active {
  color: #f00;
}

.dark-theme-switcher li:hover {
  background: var(--hamburger-menu-hover-bg);
}
.topnav--bg {
  height: 68px;
  background: var(--site-header-desktop-bg);
  z-index: 8;
  position: relative;
}

.topnav--bg--mobile {
  background-color: var(--site-header-mobile-bg);
}

.topnav--bg--faction-header {
  background: var(--site-header-mobile-bg) no-repeat center / cover;
  height: 140px;
}

@media screen and (max-width: 800px) {
  .topnav--bg {
    height: 48px;
  }

  .topnav--bg--faction-header {
    height: 65px;
  }
}

#menu-label {
  font-weight: 600;
  font-size: 14px;
}

.gm-icon-button a:hover {
  text-decoration: none;
}
.user-profile-page {
  display: grid;
  grid-template-areas:
    "warning warning warning"
    "bio achievements games"
    "contributions contents comments"
    "friends signatures competition"
    "admin admin admin";
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 16px;
}

@media screen and (max-width: 800px) {
  .user-profile-page {
    grid-template-areas:
      "warning"
      "bio"
      "achievements"
      "games"
      "contributions"
      "contents"
      "comments"
      "friends"
      "signatures"
      "competition"
      "admin";
    grid-template-columns: 1fr;
  }

  .user-profile-page--bio--tstamps,
  .user-profile-page--bio--description,
  .user-profile-page .mcontent {
    margin: 6px 12px;
  }
}

.user-profile-page .module {
  margin-bottom: 0;
}

.user-profile-page--warning {
  grid-area: warning;
}

.user-profile-page--bio {
  grid-area: bio;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.user-profile-page--bio--avatar {
  width: 128px;
  margin-top: -95px;
}

.user-profile-page--bio--tstamps {
  display: flex;
  gap: 16px;
}

.user-profile-page--bio--tstamps div {
  flex-grow: 1;
}

.user-profile-page--achievements {
  grid-area: achievements;
  overflow-y: scroll;
  max-height: 580px;
}

.user-profile-page--games {
  grid-area: games;
}

.user-profile-page--contributions {
  grid-area: contributions;
}

.user-profile-page--contents {
  grid-area: contents;
}

.user-profile-page--comments {
  grid-area: comments;
}

.user-profile-page--friends {
  grid-area: friends;
}

.user-profile-page--signatures {
  grid-area: signatures;
}

.user-profile-page--competition {
  grid-area: competition;
}

.user-profile-page--admin {
  grid-area: admin;
}

.user-profile-page--friends .mcontent {
  display: flex;
  flex-wrap: wrap;
}

.user-profile-page--friends--friend {
  width: 60px;
  overflow: hidden;
  text-align: center;
  margin: 5px 0 15px 0px;
  white-space: nowrap;
  font-size: 12px;
}

@media screen and (max-width: 800px) {
  .user-profile-page--friends--friend {
    width: 72px;
  }
}

.user-profile-page--friends--friend img {
  width: 50px;
  height: 50px;
}

.ban-reasons {
  display: inline-block;
}

.ban-reasons ul {
  display: inline-block;
  font-weight: normal;
}

.ban-reasons li {
  display: inline-block;
  margin-right: 8px;
}

.ban-reasons li::before {
  content: " - ";
}

.ban-reasons li:first-child::before {
  content: none;
}

.ban-reasons li:last-child {
  margin-right: 0;
}
.user-with-avatar {
  display: flex;
  align-items: center;
  min-height: 48px;
}

.user-with-avatar img {
  width: 48px;
}

.user-with-avatar a:first-child {
  width: 48px;
  margin-right: 8px;
}
.user-listing li {
  clear: left;
  padding-top: 4px;
  height: 1%;
  overflow: hidden;
}

.user-listing li span.nick {
  font-weight: bold;
}

.user-listing li .photo {
  float: left;
  margin: 2px;
}
.align-right {
  text-align: right;
}

.f_number {
  font-family: Georgia, "Courier New", "Times New Roman", serif;
}

/* Font sizes */
/* .infoinline is deprecated, use .f_* */
.infoinline,
.infoinline td {
  font-size: 10px;
  font-size: 1rem;
}

.infoinline a {
  text-decoration: underline;
}

.infoinline a:hover {
  color: var(--secondary-link-hover-color);
}

/**
 * Uses:
 * -
 */
.f_giga {
  font-size: 34px;
  font-size: 3.4rem;
  font-weight: bold;
  line-height: 4.2rem;
}

/**
 * Uses:
 * - content titles
 */
.f_kilo {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 3rem;
  margin-bottom: 0.6rem;
}

/**
 * Uses:
 * - content titles in lists where more than the title is shown
 * - module headers
 * - top menu headers
 */
.f_hecto {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 2rem;
}

/**
 * Uses:
 * - content first paragraph
 * - subheaders
 * - content titles where only the content's title is shown
 */
.f_deca {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.6rem;
}

/**
 * Uses:
 * - headers of left sidebar
 */
.f_deci {
  font-size: 11px;
  font-size: 1.1rem;
  line-height: 1.1rem;
  font-weight: bold;
}

/**
 * (class for non-headers)
 * Uses:
 * - everything less important than the body of a page
 */
.f_milli,
.f_milli input,
.f_milli textarea {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.4rem;
}

/**
 * - numbers in very small charts
 */
.f_micro {
  font-size: 10px;
  font-size: 1rem;
  line-height: 1rem;
}

.f-module-title {
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

th.timestamp,
td.timestamp,
th.number,
td.number {
  text-align: right;
}

.alt1 {
  background-color: var(--alt1-bg);
}

.w20 {
  width: 20px;
}
.w25 {
  width: 25px;
}
.w50 {
  width: 50px;
}
.w75 {
  width: 75px;
}
.w100 {
  width: 100px;
}
.w125 {
  width: 125px;
}
.w150 {
  width: 150px;
}
.w100pc {
  width: 100%;
}

.hidden {
  display: none !important;
}

.hidden-opacity {
  opacity: 0;
}

.centered {
  text-align: center;
}

img.icon,
a img.icon {
  border: 0;
}

.ellipsis {
  overflow: hidden;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.content-category {
  text-transform: uppercase;
  font-weight: normal;
}

.page-overlay,
.page-overlay2 {
  position: fixed;
  inset: 0;
  z-index: 11;
  background: var(--overlay-bg);
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-overlay2--semi-transparent > *:first-child {
  filter: drop-shadow(0 0.45rem 0.25rem var(--big-elements-drop-shadow-color));
}

.page-overlay2--closer {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 24px;
  color: var(--secondary-color);
  cursor: pointer;
}

.page-overlay2--semi-transparent {
  background: rgba(var(--body-bg-color-triplet), 0.4);
}

.page-overlay img {
  max-width: 100%;
  max-height: 100%;
  padding: 16px;
  width: auto;
  height: auto;
}

.popup {
  position: absolute;
  background: var(--popup-bg);
  width: auto;
  padding: 10px;
  margin-left: -10px;
  z-index: 10;
  min-width: 150px;
  max-width: 650px;
  box-shadow: 5px 5px 3px var(--popup-shadow-color);
  color: var(--popup-color);
  border-color: var(--popup-border-color);
}

.u-pixelated {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.u-good-color {
  color: var(--good-color);
}

table.u-alt tr:nth-child(even),
ul.u-alt li:nth-child(even),
ol.u-alt li:nth-child(even) {
  background-color: var(--alt1-bg);
}

.secondary-block {
  color: var(--secondary-color);
  background: var(--secondary-block-bg);
  border: 1px solid var(--secondary-block-border-color);
}

.secondary-area {
  color: var(--secondary-color);
  border: 3px dashed var(--secondary-block-border-color);
}

.unread-item,
.alt0.unread-item,
.alt1.unread-item {
  background: var(--unread-item-bg);
  color: var(--unread-item-color);
}

.unread-item a,
.unread-item a:hover {
  color: var(--unread-item-color);
}

.good {
  color: var(--good-color);
}

.bad {
  color: var(--bad-color);
}

.good-block,
.good-block .pcent-bar .bar {
  background: var(--good-block-bg);
  border-color: var(--good-block-border-color);
  color: var(--good-block-color);
}

.bad-block,
.bad-block .pcent-bar .bar {
  background: var(--bad-block-bg);
  border-color: var(--bad-block-border-color);
  color: var(--bad-block-color);
}

.good a,
.good a:hover,
.good a:visited {
  color: var(--good-link-color);
}

.bad a,
.bad a:hover,
.bad a:visited {
  color: var(--bad-link-color);
}

.important-block {
  border: 1px solid var(--important-block-border-color);
  background: var(--important-block-color);
  padding: 16px;
  margin-bottom: 16px;
}

.button {
  background: var(--button-bg);
  color: var(--button-color);
  border-color: var(--button-border-color);
  box-shadow: inset 0px 1px 0px 0px var(--button-border-shadow-color);
}

.button-disabled {
  opacity: 0.3;
}

a.button,
a.button:visited {
  color: var(--button-color);
}

.u-selected {
  background: var(--selected-bg);
}

.u-picture {
  border: 1px solid var(--picture-border-color);
}

.u-secondary-link {
  /* TODO: look for other occurrences of secondary-link-color & create util class. */
  color: var(--secondary-link-color);
}

.u-secondary-link:hover {
  color: var(--body-color);
}

.u-underlined {
  text-decoration: underline;
}

.warning10 .pcent-bar .bar {
  background: #ff172f;
}

.warning9 .pcent-bar .bar {
  background: #ca4200;
}

.warning8 .pcent-bar .bar {
  background: #f95e00;
}

.warning7 .pcent-bar .bar {
  background: orange;
}

.warning6 .pcent-bar .bar {
  background: #ffdf00;
}

.warning5 .pcent-bar .bar {
  background: yellow;
}

.warning4 .pcent-bar .bar {
  background: #c7ff04;
}

.warning3 .pcent-bar .bar {
  background: #71ff1c;
}

.warning2 .pcent-bar .bar {
  background: #00e624;
}

.warning1 .pcent-bar .bar,
.positive .pcent-bar .bar {
  background: green;
}

.negative .pcent-bar .bar {
  background: #d00d0d;
}

.warning10 .pcent-bar {
  border-color: #ff172f;
}

.warning9 .pcent-bar {
  border-color: #ca4200;
}

.warning8 .pcent-bar {
  border-color: #f95e00;
}

.warning7 .pcent-bar {
  border-color: orange;
}

.warning6 .pcent-bar {
  border-color: #ffdf00;
}

.warning5 .pcent-bar {
  border-color: yellow;
}

.warning4 .pcent-bar {
  border-color: #c7ff04;
}

.warning3 .pcent-bar {
  border-color: #71ff1c;
}

.warning2 .pcent-bar {
  border-color: #00e624;
}

.warning1 .pcent-bar {
  border-color: green;
}

.more {
  text-align: right;
}

.more a {
  font-weight: bold;
}

a.secondary {
  color: var(--secondary-link-color);
}

.subheader {
  clear: left;
  padding: 0 1px;
  margin: 25px 1px 5px 0;
  background: var(--subheader-bg);
  border-color: var(--subheader-border-color);
  color: var(--subheader-color);
  font-weight: bold;
}

a.wiki-page-missing {
  padding: 2px 4px;
  border-radius: 4px;
  position: relative;
  text-decoration: none;
}

.wiki-page-missing:after {
  content: "";
  border: 1px dashed var(--link-color);
  border-radius: 4px;
  width: 100%;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
}
img.gs-ut { background-position: -0px 0; }
img.gs-q3a { background-position: -16px 0; }
img.gs-aa { background-position: -32px 0; }
img.gs-bf1942 { background-position: -48px 0; }
img.gs-cod1 { background-position: -64px 0; }
img.gs-d3 { background-position: -80px 0; }
img.gs-moh { background-position: -96px 0; }
img.gs-nwn { background-position: -112px 0; }
img.gs-pk { background-position: -128px 0; }
img.gs-ro { background-position: -144px 0; }
img.gs-sof2 { background-position: -160px 0; }
img.gs-ut2003 { background-position: -176px 0; }
img.gs-ut2004 { background-position: -192px 0; }
img.gs-wc3 { background-position: -208px 0; }
img.gs-dow { background-position: -224px 0; }
img.gs-cs { background-position: -240px 0; }
img.gs-et { background-position: -256px 0; }
img.gs-cod2 { background-position: -272px 0; }
img.gs-hl { background-position: -288px 0; }
img.gs-hl2 { background-position: -304px 0; }
img.gs-q2 { background-position: -320px 0; }
img.gs-q { background-position: -336px 0; }
img.gs-wow { background-position: -352px 0; }
img.gs-fifa { background-position: -368px 0; }
img.gs-bf2 { background-position: -384px 0; }
img.gs-q4 { background-position: -400px 0; }
img.gs-pes { background-position: -416px 0; }
img.gs-dod { background-position: -432px 0; }
img.gs-dods { background-position: -448px 0; }
img.gs-css { background-position: -464px 0; }
img.gs-to { background-position: -480px 0; }
img.gs-sacr1 { background-position: -0px 0; }
img.gs-fc { background-position: -512px 0; }
img.gs-fear { background-position: -528px 0; }
img.gs-ut3 { background-position: -544px 0; }
img.gs-qw { background-position: -560px 0; }
img.gs-bf2142 { background-position: -576px 0; }
img.gs-moha { background-position: -592px 0; }
img.gs-sc2 { background-position: -608px 0; }
img.gs-psp { background-position: -624px 0; }
img.gs-xbox360 { background-position: -640px 0; }
img.gs-wii { background-position: -656px 0; }
img.gs-ps3 { background-position: -672px 0; }
img.gs-ps2 { background-position: -688px 0; }
img.gs-nds { background-position: -704px 0; }
img.gs-pc { background-position: -720px 0; }
img.gs-cod4 { background-position: -736px 0; }
img.gs-gw2 { background-position: -752px 0; }
img.gs-ql { background-position: -768px 0; }
img.gs-gow { background-position: -784px 0; }
img.gs-ff { background-position: -800px 0; }
img.gs-tmnf { background-position: -816px 0; }
img.gs-ogame { background-position: -832px 0; }
img.gs-coh { background-position: -848px 0; }
img.gs-u { background-position: -864px 0; }
img.gs-cz01 { background-position: -880px 0; }
img.gs-kh { background-position: -0px 0; }
img.gs-diablo3 { background-position: -912px 0; }
img.gs-fs { background-position: -928px 0; }
img.gs-cod5 { background-position: -944px 0; }
img.gs-mkt { background-position: -960px 0; }
img.gs-war { background-position: -976px 0; }
img.gs-insur { background-position: -992px 0; }
img.gs-sro { background-position: -1008px 0; }
img.gs-es3 { background-position: -1024px 0; }
img.gs-tibia { background-position: -1040px 0; }
img.gs-l2 { background-position: -1056px 0; }
img.gs-aoe { background-position: -1072px 0; }
img.gs-gh { background-position: -1088px 0; }
img.gs-l4d { background-position: -1104px 0; }
img.gs-12345 { background-position: -1120px 0; }
img.gs-fc2 { background-position: -1136px 0; }
img.gs-aa712 { background-position: -1152px 0; }
img.gs-dowii { background-position: -1168px 0; }
img.gs-ca { background-position: -1184px 0; }
img.gs-1234a { background-position: -0px 0; }
img.gs-bf1943 { background-position: -0px 0; }
img.gs-ht { background-position: -1232px 0; }
img.gs-rf { background-position: -1248px 0; }
img.gs-mw2 { background-position: -1264px 0; }
img.gs-cry { background-position: -1280px 0; }
img.gs-fall4 { background-position: -1296px 0; }
img.gs-sfate { background-position: -1312px 0; }
img.gs-blubg { background-position: -0px 0; }
img.gs-aion { background-position: -1344px 0; }
img.gs-sf4 { background-position: -1360px 0; }
img.gs-etw { background-position: -1376px 0; }
img.gs-uc { background-position: -0px 0; }
img.gs-uc2 { background-position: -0px 0; }
img.gs-csp { background-position: -1424px 0; }
img.gs-fm { background-position: -1440px 0; }
img.gs-nfs { background-position: -1456px 0; }
img.gs-scrd2 { background-position: -1472px 0; }
img.gs-vco { background-position: -0px 0; }
img.gs-drage { background-position: -1504px 0; }
img.gs-loleu { background-position: -1520px 0; }
img.gs-l4d2 { background-position: -1536px 0; }
img.gs-hon { background-position: -1552px 0; }
img.gs-mendi { background-position: -0px 0; }
img.gs-bfbc2 { background-position: -1584px 0; }
img.gs-mo { background-position: -1600px 0; }
img.gs-mh3 { background-position: -1616px 0; }
img.gs-cabal { background-position: -1632px 0; }
img.gs-codbo { background-position: -1648px 0; }
img.gs-f3 { background-position: -1664px 0; }
img.gs-nfshp { background-position: -1680px 0; }
img.gs-m2e { background-position: -1696px 0; }
img.gs-il2 { background-position: -1712px 0; }
img.gs-pkst { background-position: -1728px 0; }
img.gs-csm { background-position: -1744px 0; }
img.gs-fbo { background-position: -0px 0; }
img.gs-gbr { background-position: -1776px 0; }
img.gs-hoi3 { background-position: -1792px 0; }
img.gs-mnc { background-position: -1808px 0; }
img.gs-blc { background-position: -1824px 0; }
img.gs-bff3 { background-position: -1840px 0; }
img.gs-ptal2 { background-position: -1856px 0; }
img.gs-apbr { background-position: -1872px 0; }
img.gs-m3 { background-position: -1888px 0; }
img.gs-wot { background-position: -1904px 0; }
img.gs-wii2 { background-position: -1920px 0; }
img.gs-asc { background-position: -1936px 0; }
img.gs-pkmn { background-position: -1952px 0; }
img.gs-msef { background-position: -1968px 0; }
img.gs-tesv { background-position: -1984px 0; }
img.gs-swtr { background-position: -0px 0; }
img.gs-gtav { background-position: -0px 0; }
img.gs-dt2 { background-position: -2032px 0; }
img.gs-dcuo { background-position: -2048px 0; }
img.gs-ttris { background-position: -2064px 0; }
img.gs-codbo2 { background-position: -2080px 0; }
img.gs-mxp3 { background-position: -0px 0; }
img.gs-csgo { background-position: -2112px 0; }
img.gs-warz { background-position: -2128px 0; }
img.gs-ps4--1 { background-position: -0px 0; }
img.gs-starfield { background-position: -2160px 0; }
img.gs-ow { background-position: -2176px 0; }
img.gs-sot { background-position: -2192px 0; }
img.gs-desarrollo { background-position: -2208px 0; }
img.gs-musica { background-position: -2224px 0; }
img.gs-cine { background-position: -2240px 0; }
img.gs-software { background-position: -2256px 0; }
img.gs-anime { background-position: -2272px 0; }
img.gs-inet { background-position: -2288px 0; }
img.gs-literatura { background-position: -2304px 0; }
img.gs-deportes { background-position: -2320px 0; }
img.gs-estudiante { background-position: -2336px 0; }
img.gs-diseno { background-position: -2352px 0; }
img.gs-hw { background-position: -2368px 0; }
img.gs-tmovil { background-position: -2384px 0; }
img.gs-actualidad { background-position: -2400px 0; }
img.gs-apple { background-position: -2416px 0; }
img.gs-gm { background-position: -2432px 0; }
img.gs-parties { background-position: -0px 0; }
img.gs-blogs { background-position: -0px 0; }
img.gs-slime { background-position: -2480px 0; }
img.gs-diablo4 { background-position: -2496px 0; }
img.gs-apex-legends { background-position: -2512px 0; }
img.gs-war-thunder { background-position: -2528px 0; }
img.gs-corepunk { background-position: -0px 0; }
img.gs-lost-ark { background-position: -2560px 0; }
img.gs-oculus-quest-quest2 { background-position: -2576px 0; }
img.gs-switch { background-position: -2592px 0; }
img.gs-call-of-duty-modern-warfare-ii { background-position: -0px 0; }
img.gs-gua { background-position: -2624px 0; }
/*









*/