gistfile1.css

:root {
  --text-color: #ABB2BF;
  --color-dark-magenta: #56B6C2;
  --color-dark-green: #98C379;
  --color-dark-blue: #61AFEF;
  --color-dark-red: #E06C75;
  --color-red: #E06C75;
  --color-light-red: #E06C75;
  --color-green: #98C379;
  --color-light-green: #98C379;
  --color-yellow: #D19A66;
  --color-light-yellow: #D19A66;
  --color-magenta: #56B6C2;
  --color-light-magenta: #56B6C2;
  --color-dark-purple: #C678DD;
  --color-purple: #C678DD;
  --color-light-purple: #C678DD;
  --color-blue: #61AFEF;
  --color-light-blue: #61AFEF;
  --color-bright-white: #FFFFFF;
  --color-light-orange: #D19A66;
  --bg-0: hsl(210, 0%, 37%);
  --bg-1: hsl(217, 0%, 13%);
  --bg-2: hsl(217, 0%, 11%);
  --bg-3: hsl(215, 0%, 7%);
  --bg-4: hsl(216, 0%, 4%);
  --bg-5: hsl(240, 0%, 1%);
  --message-bubble-bg: #222;
  --message-bubble-fg: currentColor;
  --message-bubble-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .2);
  --message-bubble-border-radius: 20px;
  --message-bubble-border: none;
  --message-bubble-avatar-border-radius: 50%;
  --achievement-fg: inherit;
  --achievement-bg: var(--bg-2);
  --achievement-box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
  --achievement-progress-bg: #56B6C2;
  --alert-bg: var(--bg-3);
  --alert-fg: #ABB2BF;
  --alert-gap-color: var(--bg-0);
  --alert-gap-width: 1px;
  --article-card-bg: var(--bg-1);
  --article-card-fg: #ABB2BF;
  --article-card-head-fg: #ABB2BF;
  --article-card-time-fg: #ABB2BF;
  --article-box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
  --bbcode-input-header-bg: var(--bg-2);
  --bbcode-input-body-bg: var(--bg-2);
  --bbcode-input-border: 1px solid var(--bg-4);
  --bbcode-input-border-radius: 5px;
  --bbcode-rendered-fg-default: #c9d1d9;
  --bbcode-rendered-fg-muted: #8b949e;
  --bbcode-rendered-fg-subtle: #484f58;
  --bbcode-rendered-canvas-default: transparent;
  --bbcode-rendered-canvas-subtle: #313131;
  --bbcode-rendered-border-default: #3c3d3d;
  --bbcode-rendered-border-muted: #464749;
  --bbcode-rendered-neutral-muted: #46484b66;
  --bbcode-rendered-accent-fg: #58a6ff;
  --bbcode-rendered-accent-emphasis: #2260be;
  --bbcode-rendered-attention-subtle: #7289da;
  --bbcode-rendered-danger-fg: #ff141ccc;
  --bbcode-rendered-quote-bg: #6662;
  --bbcode-rendered-quote-border: var(--color-green);
  --body-bg: hsl(217, 0%, 13%);
  --body-fg: var(--text-color);
  --body-bg-secondary: hsl(215, 0%, 7%);
  --breadcrumb-fg: #777;
  --breadcrumb-active-fg: #aaa;
  --breadcrumb-hover-fg: #ddd;
  --breadcrumb-inactive-text-decoration: none;
  --button-filled-bg: var(--color-green);
  --button-filled-border: none;
  --button-filled-border-radius: 9999px;
  --button-filled-fg: white;
  --button-outlined-bg: inherit;
  --button-outlined-border: 1px solid var(--bg-4);
  --button-outlined-border-radius: 9999px;
  --button-outlined-fg: currentColor;
  --button-text-bg: inherit;
  --button-text-border: none;
  --button-text-border-radius: 5px;
  --button-text-fg: currentColor;
  --chatbox-message-bg: var(--bg-1);
  --chatbox-button-fg: #666;
  --chatbox-button-hover-fg: #888;
  --chatbox-users-bg: var(--bg-2);
  --chatbox-tab-delete-fg: #c22222;
  --chatbox-tab-delete-bg: var(--bg-0);
  --comparison-divider-fg: #fff;
  --comparison-button-fg: #fff;
  --data-table-fg: var(--text-color);
  --data-table-th-bg: var(--bg-3);
  --data-table-thead-border: none;
  --data-table-tr-border: 1px solid var(--bg-4);
  --data-table-tr-even-bg: var(--bg-2);
  --data-table-tr-hover-bg: var(--bg-2);
  --data-table-tr-odd-bg: var(--bg-2);
  --data-table-tfoot-border: none;
  --dialog-bg: var(--bg-2);
  --dialog-border: none;
  --dialog-border-radius: 10px;
  --dialog-box-shadow: none;
  --dialog-fg: var(--text-color);
  --dialog-head-bg: var(--bg-5);
  --dialog-head-fg: #fff;
  --donation-border-color: var(--bg-5);
  --donation-box-shadow-color: var(--bg-5);
  --donation-primary-text-color: #d2d2d2;
  --donation-secondary-text-color: #aaaaaa;
  --donation-background-color: var(--bg-5);
  --donation-price-days-color: orange;
  --donation-chart-daily-bg: rgba(75, 192, 192, .2);
  --donation-chart-daily-border: rgba(75, 192, 192, 1);
  --donation-chart-monthly-bg: rgba(153, 102, 255, .2);
  --donation-chart-monthly-border: rgba(153, 102, 255, 1);
  --fieldset-bg: inherit;
  --fieldset-fg: #bbb;
  --fieldset-border-radius: 5px;
  --fieldset-border: 1px solid var(--bg-0);
  --footer-bg: transparent;
  --footer-hr-fg: #222;
  --icon-button-bg: inherit;
  --icon-button-border: none;
  --icon-button-border-radius: 9999px;
  --icon-button-fg: currentColor;
  --icon-button-filled-bg: var(--color-green);
  --icon-button-filled-fg: white;
  --icon-button-filled-border: none;
  --input-text-border: 1px solid var(--bg-0);
  --input-text-border-active: 2px solid #2195f3;
  --input-text-border-error: 1px solid #ba1b1b;
  --input-text-border-hover: 2px solid #999;
  --input-text-border-radius: 5px;
  --input-text-fg: #bbb;
  --input-text-padding: 12px;
  --input-text-padding-active: 11px;
  --input-text-padding-hover: 11px;
  --key-value-even-bg: var(--bg-2);
  --key-value-fg: var(--text-color);
  --key-value-odd-bg: var(--bg-2);
  --key-value-padding: 10px;
  --label-bg: #e2e2e2;
  --label-fg: var(--bg-0);
  --label-fg-active: #2195f3;
  --label-fg-error: #ba1b1b;
  --label-fg-hover: #999;
  --legend-fg: var(--bg-0);
  --legend-bg: transparent;
  --legend-border: none;
  --legend-border-radius: 0;
  --mediahub-card-bg: var(--bg-5);
  --mediahub-card-fg: #ddd;
  --mediahub-card-hover-fg: #fff;
  --mediahub-card-border: none;
  --mediahub-card-border-radius: 0;
  --mediahub-card-box-shadow: none;
  --meta-backdrop-filter: brightness(30%);
  --meta-dropdown-backdrop-filter: brightness(2) blur(10px);
  --meta-dropdown-bg: #4449;
  --meta-dropdown-backdrop-filter-hover: brightness(2) blur(10px);
  --meta-dropdown-hover-bg: rgba(255, 255, 255, .1);
  --meta-dropdown-fg: #bbb;
  --meta-dropdown-hover-fg: #ccc;
  --meta-description-fg: #ddd;
  --meta-id-tag-fg: #eee;
  --meta-id-tag-bg: transparent;
  --meta-id-tag-hover-fg: #fff;
  --meta-id-tag-hover-bg: rgba(255, 255, 255, .1);
  --meta-chips-heading-fg: #bbb;
  --meta-chip-icon-fg: hsl(0, 0%, 12%);
  --meta-chip-icon-hover-bg: #bbb;
  --meta-chip-icon-bg: #cdcdcd;
  --meta-chip-name-fg: #e2e2e2;
  --meta-chip-value-fg: #aaa;
  --meta-chip-value-hover-fg: #ccc;
  --meta-chip-backdrop-filter-hover: brightness(2) blur(10px);
  --meta-chip-hover-bg: rgba(255, 255, 255, .1);
  --meter-fg: var(--bg-4);
  --meter-bg: var(--bg-0);
  --notification-read: transparent;
  --notification-unread: var(--color-green);
  --option-bg: #303030;
  --option-fg: #999;
  --paginate-bg: var(--bg-5);
  --paginate-bg-hover: #222;
  --paginate-bg-current: #202020;
  --paginate-fg: #888;
  --paginate-fg-disabled: var(--bg-0);
  --paginate-divider: #303030;
  --panel-action-fg: #aaa;
  --panel-border: none;
  --panel-bg: var(--bg-2);
  --panel-fg: var(--text-color);
  --panel-box-shadow: none;
  --panel-border-radius: 0;
  --panel-head-bg: var(--bg-4);
  --panel-head-fg: #fff;
  --playlist-card-bg: var(--bg-5);
  --playlist-card-border: none;
  --playlist-card-border-radius: 8px;
  --playlist-card-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
  --playlist-card-fg: #bbb;
  --playlist-card-missing-image-bg: #202020;
  --playlist-card-missing-image-fg: #b5b5b5;
  --prize-bg: var(--bg-5);
  --prize-border-radius: 10px;
  --prize-border: none;
  --prize-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
  --prize-fg: #bbb;
  --prize-heading-fg: #bbb;
  --prize-icon-primary-color: mediumseagreen;
  --prize-icon-secondary-color: linen;
  --post-bg: var(--bg-1);
  --post-fg: #ccc;
  --post-shadow: none;
  --post-head-fg: var(--text-color);
  --post-head-bg: none;
  --post-toolbar-bg: var(--bg-3);
  --post-toolbar-fg: #ccc;
  --post-toolbar-hover-bg: #262626;
  --post-toolbar-hover-fg: inherit;
  --post-like-fg: #98C379;
  --post-dislike-fg: #E06C75;
  --post-aside-bg: var(--bg-3);
  --post-aside-fg: #ccc;
  --post-footer-fg: var(--text-color);
  --quick-search-bg: var(--bg-3);
  --quick-search-fg: #b6b6b6;
  --quick-search-border: 1px solid transparent;
  --quick-search-border-radius: 16px;
  --quick-search-box-shadow: 0 4px 6px rgba(32, 33, 36, .28);
  --quick-search-selector-fg: #b6b6b6;
  --quick-search-selector-hover-bg: #4b4b4b;
  --quick-search-selector-hover-fg: #ddd;
  --quick-search-selector-selected-bg: var(--bg-4);
  --quick-search-selector-selected-fg: #ddd;
  --quick-search-result-bg: var(--bg-0);
  --quick-search-result-fg: #ccc;
  --quick-search-result-hover-bg: var(--bg-4);
  --quick-search-result-hover-fg: #ccc;
  --quick-search-result-image-border-radius: 5px;
  --quick-search-result-year-fg: #888;
  --quick-search-result-border: none;
  --scrollbar-color: #ffffff19;
  --secondary-nav-bg: var(--bg-3);
  --secondary-nav-tab-fg: #aaa;
  --secondary-nav-tab-bg: inherit;
  --secondary-nav-tab-active-text-decoration: underline #777 2px;
  --secondary-nav-tab-hover-fg: #ddd;
  --secondary-nav-tab-hover-bg: transparent;
  --secondary-nav-tab-hover-text-decoration: underline #777 2px;
  --secondary-nav-tab-menu-bg: var(--bg-4);
  --secondary-nav-tab-menu-fg: inherit;
  --secondary-nav-tab-menu-border: none;
  --secondary-nav-tab-menu-border-radius: 6px;
  --secondary-nav-tab-menu-box-shadow: 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12), 0 7px 8px -4px rgba(0, 0, 0, .2);
  --select-border: 1px solid var(--bg-0);
  --select-border-active: 2px solid #61AFEF;
  --select-border-error: 1px solid #E06C75;
  --select-border-hover: 2px solid #999;
  --select-border-radius: 5px;
  --select-fg: #bbb;
  --select-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%23bbb' d='M6 8l-1 1l5 5l5-5l-1-1l-4 4l-4-4z'/></svg>");
  --select-padding: 11px 23px 11px 11px;
  --select-padding-active: 10px 22px 10px 10px;
  --select-padding-hover: 10px 22px 10px 10px;
  --subforum-listing-odd-bg: var(--bg-3);
  --subforum-listing-even-bg: transparent;
  --subforum-listing-border: none;
  --textarea-border: 1px solid var(--bg-4);
  --textarea-border-active: 2px solid #61AFEF;
  --textarea-border-error: 1px solid #E06C75;
  --textarea-border-hover: 2px solid var(--bg-1);
  --textarea-border-radius: 5px;
  --textarea-fg: #bbb;
  --textarea-padding: 12px;
  --textarea-padding-active: 11px;
  --textarea-padding-hover: 11px;
  --top-nav-bg: var(--body-bg);
  --top-nav-box-shadow: none;
  --top-nav-dropdown-fg: #bbb;
  --top-nav-dropdown-hover-fg: #eee;
  --top-nav-dropdown-hover-bg: var(--bg-3);
  --top-nav-dropdown-hover-text-decoration: none;
  --top-nav-dropdown-menu-bg: var(--bg-3);
  --top-nav-dropdown-menu-border: none;
  --top-nav-dropdown-menu-border-radius: 6px;
  --top-nav-dropdown-menu-box-shadow: 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12), 0 7px 8px -4px rgba(0, 0, 0, .2);
  --top-nav-dropdown-menu-item-fg: #bbb;
  --top-nav-dropdown-menu-item-bg: transparent;
  --top-nav-dropdown-menu-item-hover-fg: inherit;
  --top-nav-dropdown-menu-item-hover-bg: var(--bg-0);
  --top-nav-dropdown-menu-item-hover-text-decoration: none;
  --top-nav-dropdown-menu-item-icon-fg: #ccc;
  --top-nav-dropdown-menu-item-icon-bg: var(--bg-1);
  --top-nav-ratio-bar-fg: #ddd;
  --top-nav-icon-bar-icon-bg: var(--bg-2);
  --top-nav-icon-bar-icon-fg: #bbb;
  --top-nav-icon-bar-icon-border-radius: 50%;
  --top-nav-icon-bar-icon-hover-bg: var(--bg-3);
  --top-nav-icon-bar-icon-hover-fg: #b6b6b6;
  --top-nav-stats-fg: #999;
  --top-nav-toggle-fg: #999;
  --torrent-card-bg: var(--bg-2);
  --torrent-card-fg: var(--text-color);
  --torrent-card-border: none;
  --torrent-card-head-bg: var(--bg-5);
  --torrent-card-head-fg: #fff;
  --torrent-card-link-fg: #fff;
  --torrent-card-genre-fg: #fff;
  --torrent-group-bg: var(--bg-5);
  --torrent-group-header-bg: #303030;
  --torrent-group-text: white;
  --torrent-group-text-muted: #878787;
  --torrent-group-table-stripe-even: rgba(255, 255, 255, .02);
  --torrent-group-table-stripe-odd: rgba(255, 255, 255, .05);
  --torrent-group-hover-brightness-emphasis: 1.2;
  --torrent-group-chip-border: rgba(255, 255, 255, .05);
  --torrent-row-fg: #ccc;
  --torrent-row-visited-fg: #56B6C2;
  --torrent-row-sticky-bg: var(--bg-3);
  --torrent-row-format-fg: #ccc;
  --torrent-row-format-bg: var(--bg-2);
  --torrent-row-buttons-fg: currentColor;
  --torrent-row-seeders-fg: #98C379;
  --torrent-row-leechers-fg: #E06C75;
  --torrent-row-completed-fg: #61AFEF;
  --torrent-row-thanks-fg: #56B6C2;
  --torrent-row-comments-fg: #98C379;
  --torrent-row-internal-fg: #D19A66;
  --torrent-row-personal-fg: #C678DD;
  --torrent-row-stream-optimized-fg: #61AFEF;
  --torrent-row-featured-fg: #C678DD;
  --torrent-row-freeleech-fg: #D19A66;
  --torrent-row-double-upload-fg: #98C379;
  --torrent-row-sticky-fg: #cccccc;
  --torrent-row-highspeed-fg: #E06C75;
  --torrent-row-sd-fg: #56B6C2;
  --torrent-row-bumped-fg: #D19A66;
  --torrent-tag-fg: #eee;
  --torrent-tag-bg: transparent;
  --torrent-tag-hover-fg: #fff;
  --torrent-tag-hover-bg: rgba(255, 255, 255, .1);
  --user-stat-card-bg: var(--bg-5);
  --user-stat-card-fg: #ddd;
  --user-stat-card-border: none;
  --user-stat-card-border-radius: 0;
  --user-stat-card-box-shadow: none
}

.text-success {
  color: var(--color-light-green)
}

.text-warning {
  color: var(--color-light-yellow)
}

.text-bright {
  color: #fefefe
}

a.text-bright:focus,
a.text-bright:hover {
  color: #fcfcfc
}

.text-blue {
  color: var(--text-color)
}

.text-purple {
  color: #C678DD
}

a {
  color: var(--color-blue)
}

a:hover {
  color: var(--color-light-blue)
}

.text-green {
  color: var(--color-light-green)
}

.text-muted {
  color: #999
}

.text-red {
  color: var(--color-light-red)
}

.text-orange {
  color: var(--color-light-orange)
}

.text-pink {
  color: #56B6C2
}

.text-danger {
  color: var(--color-light-red)
}

.badge-user {
  border: 0;
  box-shadow: none;
  background-color: #373737;
  text-shadow: 1.5px 1.5px #000
}

.footer__icon {
  color: #947bcc
}

#frame {
  background: #262929
}

#frame .content .messages ul li {
  border-bottom: 1px dashed #424545
}

.chatbox .typing {
  color: #ddd
}

#frame .content .messages ul li.sent h4 .text-muted {
  color: #818686
}

#frame .content .messages ul li>img {
  border: 3px solid #61AFEF
}

#frame .content .message-input .wrap input {
  color: #32465a
}

#frame .content .message-input .wrap input:focus {
  outline: none
}

#frame .content .message-input .wrap .attachment {
  color: #435f7a
}

#frame .content .message-input .wrap button {
  background: #32465a;
  color: #f5f5f5
}

#frame .content .message-input .wrap button:hover {
  background: #435f7a
}

.sent>a {
  height: 100%;
  position: absolute;
  bottom: 0
}

.sent>a>img {
  display: block !important;
  height: 100%;
  position: absolute;
  bottom: 4px
}

#frame .content .messages ul li.sent img.chat-user-image {
  height: 40px;
  width: 40px
}

.sent>h4 {
  display: block !important;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-color: var(--message-bubble-bg) !important;
  padding: 4px 12px 0 8px;
  margin: 4px 12px 0 48px
}

.sent>div {
  display: block !important;
  border-bottom-right-radius: 15px;
  background-color: var(--message-bubble-bg) !important;
  padding: 0 12px 4px 8px !important;
  margin: 0 12px 4px 48px !important
}

.sent>.system {
  border-bottom-left-radius: 15px
}

.sent>div:not(.system):before {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 38px;
  width: 0;
  border-right: 10px solid var(--message-bubble-bg) !important;
  border-top: 10px solid transparent
}

#frame .content .messages ul li.sent {
  border: 0;
  display: table;
  max-width: 85%;
  width: auto
}

#frame .content .messages ul li.sent h4 .text-muted {
  float: none
}

body {
  margin: 0 auto;
  max-width: 1440px
}

main {
  margin: 0 2rem;
  padding: 2rem;
  background-color: var(--body-bg-secondary)
}

main:has(>article>section.meta) {
  background: #0a111b33
}

.page__torrents,
.user-torrents,
.user-peers {
  margin: 0 !important
}

.user-torrents,
.user-peers {
  width: unset;
  align-self: unset
}

.user-torrents .data-table>tbody>tr>td,
.user-peers .data-table>tbody>tr>td {
  font-size: 10px
}

.user-torrents__name {
  font-size: 10px
}

.top-nav {
  background-color: var(--top-nav-bg);
  box-shadow: var(--top-nav-box-shadow);
  display: grid;
  grid-template-areas: "left" "right";
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  align-items: center;
  padding: 1rem 2rem .5rem
}

.top-nav__left {
  grid-area: left;
  display: flex;
  column-gap: 32px;
  justify-content: space-between;
  width: 100%;
  margin-bottom: .5rem
}

.top-nav__main-menus {
  grid-area: right;
  display: flex;
  list-style-type: none;
  align-items: center;
  margin: auto 0;
  padding: 0;
  justify-self: start
}

.top-nav__right {
  container-type: inline-size;
  grid-area: right;
  display: flex;
  column-gap: 40px;
  width: 60%;
  margin-left: auto;
  position: relative;
  top: -4rem
}

.top-nav__ratio-bar.top-nav__ratio-bar {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-template-columns: repeat(4, auto);
  font-size: 12px
}

.top-nav__stats {
  display: none
}

@container (min-width: 800px) {
  .top-nav__ratio-bar.top-nav__ratio-bar {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(8, auto);
    font-size: 12px
  }

  .top-nav__ratio-bar li:nth-child(-n+4),
  .top-nav__ratio-bar li:nth-child(n+5) {
    flex-basis: calc(25% + -0px);
    text-align: center
  }
}

@container (min-width: 650px) {
  .top-nav__username--highresolution {
    display: flex
  }
}

@container (min-width: 520px) and (max-width: 600px) {
  .top-nav__stats {
    display: grid
  }

  .top-nav__ratio-bar.top-nav__ratio-bar {
    display: none
  }
}

@container (max-width: 520px) {
  .top-nav__ratio-bar.top-nav__ratio-bar {
    display: none
  }
}

@media screen and (max-width: 767px) {
  .top-nav__main-menus {
    display: none
  }

  .top-nav__toggle {
    position: absolute;
    top: 2.5rem;
    right: 2.5rem;
    font-size: 2.5rem
  }

  .top-nav {
    padding-bottom: .5rem
  }

  main {
    margin: 0
  }
}

.top-nav__main-menus {
  gap: 3px
}

.top-nav__main-menus>li {
  background: var(--bg-2);
  border-radius: 6px;
  position: relative
}

.top-nav__dropdown>ul {
  top: 30px
}

.top-nav__icon-bar .top-nav__dropdown>ul {
  top: 32px;
  right: 0
}

.nav-tab-menu__items {
  top: 30px
}

.quick-search {
  top: 40px;
  height: 32px
}

body>header {
  position: unset
}

.top-nav--left__container .progress {
  height: 2px;
  width: 100%;
  position: absolute;
  bottom: 0
}

.secondary-nav {
  margin-left: 2rem;
  width: calc(100% - 4rem);
  position: relative
}

.panel__heading {
  padding: 7px 10px
}

.torrent-search__filters {
  margin: 0 1rem
}

.meta__backdrop {
  top: 0
}

#missing-media-table.data-table>tbody>tr>td {
  font-size: 11px
}

.top-nav__branding {
  width: 220px;
  height: 60px
}

.top-nav.mobile {
  display: flex;
  flex-direction: column
}

.top-nav__right.mobile {
  width: 100%;
  top: unset
}

.top-nav__main-menus.mobile {
  width: 100%;
  margin-bottom: 16px
}

.top-nav__main-menus.mobile>li {
  width: 100%
}

.chatbox-message__content {
  word-wrap: break-word
}