:root {
  --st-text-prim: #0064cd;
  --st-text-sec: #979797;
  --st-bg-prim: rgb(25, 25, 25);
  --st-bg-sec: #cecece;
  --st-bg-ter: #ececec;
  --st-bg-qua: #f6f6f6;
  --st-bg-qui: #fcfcfc;
  --st-text-selected-prim: #1c1c1c;
  --st-highlight-prim: #c65555;
  --st-font-color: var(--st-text-prim);
  --st-bg-color: var(--st-bg-prim);
  --st-tab-selected: #fffafa;
  --st-tab-highlighted: var(--st-highlight-prim);
  --st-bg-notification-item: var(--st-bg-qua);
  --st-bg-message-info: #e2f5fc;
  --st-text-message-info: #95a2a7;
  --st-bg-message-error: #fce2e2;
  --st-text-message-error: var(--st-highlight-prim);
  --st-header-logo: var(--st-text-prim);
  --st-bg-menu-item: var(--st-bg-qua);
  --st-nav-tab-selected: var(--st-text-selected-prim);
  --st-nav-tab-line: var(--st-bg-sec);
  --st-br-paginator-button: var(--st-bg-ter);
  --st-bg-unread: #e2f5fc;
  --st-br-topic-item: var(--st-bg-ter);
  --st-text-topic-item: var(--st-text-sec);
  --st-bg-topic-item: var(--st-bg-qui);
  --st-text-topic-comment-new: var(--st-highlight-prim);
  --st-text-topic-item-link: var(--st-text-prim);
  --st-text-topic-item-link-visited: var(--st-text-sec);
  --st-br-comment-item: var(--st-bg-ter);
  --st-bg-comment-user-admin: #a1a100;
  --st-bg-comment-user-mod: #259b20;
  --st-bg-comment-user-topic-owner: #207a9b;
  --st-br-comment-quote: var(--st-bg-sec);
  --st-bg-comment-poll-bar: var(--st-bg-sec);
  --st-bg-comment-badge: var(--st-bg-sec);
  --st-text-comment-badge: var(--st-text-sec);
  --st-bg-comment-diff-ins: #eaffea;
  --st-bg-comment-diff-del: #fce2e2;
  --st-bg-user-pic: var(--st-bg-sec);
  --st-text-user-pic: #cecece;
  --st-bg-admin-stat: var(--st-bg-qua);
  --st-br-textarea: var(--st-bg-sec);
  --st-br-input-focus: var(--st-highlight-prim);
  --st-bg-input: var(--st-bg-prim);
  --st-text-link: var(--st-text-sec);
  --st-text-link-hover: var(--st-text-selected-prim);
  --st-bg-code: var(--st-bg-qua);
  --st-bg-selection: var(--st-bg-sec);
  --st-text-selection: var(--st-bg-prim);
  --st-text-button: var(--st-text-prim);
  --st-bg-button: var(--st-bg-sec);
  --st-bg-button-undo: var(--st-highlight-prim);
  --st-bg-checkbox: var(--st-bg-prim);
  --st-br-checkbox: var(--st-bg-sec);
  --st-text-error-list: var(--st-highlight-prim);
    --header-height: 60px;
}

* {
    font-family: "Roboto", sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.layout__topics__topic.js-clickable-area {
    background: #272727;
    border: none !important;
    border-radius: 10px;
    padding: 15px;
}

.button {
    cursor: pointer;
}

.live-search-results {
    position: absolute;
    max-height: max-content;
    overflow-y: auto;
    z-index: 1000;
    width: 100%;
    margin-top: 5px;
    display: none;
    margin-inline: 0;
    border-radius: 8px;
    flex-direction: column;
    gap: 5px;
}

.search-result-item {
    padding: 10px;
    cursor: pointer;
    background: #272727;
    display: flex;
    flex-direction: column;
    a {
        color: rgba(255, 255, 255, 0.91);
        text-decoration: none;
    }
}

.search-result-item:hover {
    background: #2a2a2a;
}
.button-login {
    background-color: transparent;
    font-size: 16px;
    color: rgb(255, 255, 255);
    font-style: normal;
    cursor: pointer;
    box-sizing: border-box;
    font-weight: 400;
    text-decoration: none;
    border-radius: 90px;
    outline: none;
    overflow: hidden;
    width: fit-content;
    padding-inline: 15px;
    height: 45px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
    min-width: 140px;
    justify-content: center;
    border: 2px solid #fff;
    &:hover {
        color: rgb(225, 29, 32);
        border-color: rgb(225, 29, 32);
    }
}

.button-login-transparent {
    background-color: rgb(255, 255, 255);
    font-size: 16px;
    color: rgb(20, 20, 20);
    font-style: normal;
    cursor: pointer;
    box-sizing: border-box;
    font-weight: 500;
    text-decoration: none;
    border-radius: 90px;
    outline: none;
    overflow: hidden;
    min-width: 140px;
    padding-inline: 15px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #fff;
    transition: all 0.2s ease;
    &:hover {
        color: rgb(255, 255, 255);
        border-color: rgb(225, 29, 32);
        background: rgb(225, 29, 32);
    }
}

.login-con {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header {
    justify-content: center;
    align-items: center;
    background: #141414;
    padding: 0 10px;
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 999;
    transition: all 0.5s ease;
    position: relative;
    height: var(--header-height);
}

.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    margin-top: 0;
    border-radius: 0;
    transition: all 0.5s ease;
}

.layout-header-inner {
    width: 100%;
    max-width: calc(1080px - 15px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: center;
    height: 100%;
}

.header-margin-top {
    margin-top: 110px;
}

.search-input {
    outline: 1px solid hsl(0deg 0% 100% / 5%);
    border: none;
    background: #1f1f1f;
    border-radius: 8px;
    padding-left: 40px;
    width: 100%;
    height: 35px;
    &::placeholder {
        font-size: 13px;
    }
    &:focus {
        outline: 2px solid rgba(34, 142, 93, 0.8);
    }
}

.search-con {
    margin-left: auto;
    position: relative;
    margin-right: 0;
    width: 280px;
}

.search-con:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 10px;
    width: 18px;
    aspect-ratio: 1 / 1;
    height: 17px;
    background-repeat: no-repeat;
    background-size: contain;
    object-fit: contain;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='18.000000' height='18.000000' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdesc%3e Created with Pixso. %3c/desc%3e%3cdefs%3e%3cclipPath id='clip2_14'%3e%3crect id='lucide/search' rx='0.000000' width='17.000000' height='17.000000' transform='translate(0.500000 0.500000)' fill='white' fill-opacity='0'/%3e%3c/clipPath%3e%3c/defs%3e%3crect id='lucide/search' rx='0.000000' width='17.000000' height='17.000000' transform='translate(0.500000 0.500000)' fill='%23FFFFFF' fill-opacity='0'/%3e%3cg clip-path='url(%23clip2_14)'%3e%3cpath id='Vector' d='M15.75 15.75L12.49 12.49M8.25 14.25C4.93 14.25 2.25 11.56 2.25 8.25C2.25 4.93 4.93 2.25 8.25 2.25C11.56 2.25 14.25 4.93 14.25 8.25C14.25 11.56 11.56 14.25 8.25 14.25Z' stroke='%23FFFFFF' stroke-opacity='1.000000' stroke-width='2.000000' stroke-linejoin='round' stroke-linecap='round'/%3e%3c/g%3e%3c/svg%3e ");
}

.spirit .layout {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--st-font-color);
    background-color: var(--st-bg-color);
    cursor: default;
    width: 100%;
    max-width: 1080px;
    height: 100%;
    margin: 0 auto;
    padding: 0 6px;
    display: flex;
    gap: 24px;
    box-sizing: border-box;
    flex-direction: column;
    position: relative;
}

.content-block {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
    z-index: 5;
}
.nav-con {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    border-radius: 15px;
    background: rgb(20, 20, 20);
    height: max-content;
}
.menu__new_topic,
.nav-con .menu-link,
.secondaryContent.user-sidebar{
    padding-inline: 17px;
}
.header .menu_list__link {
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 400;
}
.nav-con-chat {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    gap: 25px;
    height: 100%;
    max-height: 80vh;
    min-height: 80vh;
}
.content-all.chat-content-all .nav-chat {
    display: none;
}
.content-all {
    width: 75%;
}

.layout__topics {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.topic-meta {
    display: flex;
    gap: 7px;
    align-items: center;
}

.topic__title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.layout__topics__topic {
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-radius: 15px;
    background: rgb(20, 20, 20);
    padding: 15px;
    transition: all 0.2s ease;
    align-items: self-start;
    &:hover {
        background: #161616;
    }
}

.layout__topics__topic:hover {
    .topic-title-inner .user-suffix {
        opacity: 1;
        margin: 0;
    }
}

.topic-meta-link {
    color: var(--st-text-topic-item);
    font-size: 0.75rem;
    text-decoration: none;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 5px;
}

.topic-title-con .fa.fa-circle{
    font-size: 5px;
    color: var(--st-text-topic-item);
}

.topic__link {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
    font-size: 16px;
    text-decoration: none;
    text-wrap-mode: wrap;
}
.topic__comments.my-commented {
    background: rgba(29, 160, 225, 0.15) !important;
}
.topic__comments.form-send.my-commented {
    color: rgb(29, 160, 225);
}
.topic__link.is-visited {
    color: #8d8d8d;
}

.topic-comment-con {
    display: flex;
    padding-block: 15px;
    border-block: 1px solid #ffffff0d;
    gap: 15px;
    flex-direction: column;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
}

.spirit .topic__comments {
    padding: 5px 15px;
    background: rgb(55 55 55);
    border-radius: 60px;
    font-weight: 500;
    font-size: 14px;
    color: var(--st-text-sec);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    &:hover {
        .fa.fa-comment {
            color: var(--st-font-color);
        }
    }
}

.topic-comment-con .fa.fa-comment {
    font-size: 16px;
    transition: all 0.2s ease-in-out;
}

.btn-like svg {
    width: 16px;
    height: 16px;
}

button.btn-like {
    margin-right: 12px;
    height: 35px;
    min-width: 60px;
    width: fit-content;
    background: #303030;
    border-radius: 15px;
    min-height: 35px;
    font-weight: 800;
    font-size: 14px;
    color: var(--st-text-topic-item-link-visited);
    z-index: 2;
    position: relative;
    padding: 0 15px 0 30px;
}

button.btn-like span {
    width: fit-content;
    display: block;
}

button.btn-like:after {
    font-family: "FontAwesome", sans-serif;
    content: "\f004";
    position: absolute;
    top: 0;
    bottom: 0;
    margin-block: auto;
    left: 10px;
    width: 15px;
    height: 14px;
}

.topic-body .img {
    width: 100%;
    display: block;
    height: 100%;
}

.topic-body .img img {
    width: 100%;
    height: 100%;
}

.comment-footer {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.topic-last-comment {
    display: flex;
    gap: 10px;
}

.topic-last-comment .comment__img__avatar {
    width: 35px;
    height: 35px;
    font-size: 18px;
    line-height: 18px;
}

.comment-body {
    font-size: 14px;
    color: rgb(255 255 255 / 90%);
    text-wrap-style: pretty;
}

.topic-comment-meta {
    color: rgb(255 255 255 / 80%);
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    a {
        color: rgb(255 255 255 / 80%);
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
    }
}

.comment__img__avatar {
    width: 35px;
    height: 35px;
}

.topic__title .comment__img__avatar {
    font-size: 20px;
}

.topic-content-link {
    font-size: 14px;
    color: rgb(255 255 255 / 90%);
    text-decoration: none;
    max-height: 400px;
    overflow: hidden;
    height: 100%;
    display: block;
    border-radius: 10px;
    transition: max-height 0.3s ease-out;
}

button.btn-like.liked:after {
    color: var(--st-text-prim);
}

.topic-body {
    position: relative;
}

.load-more {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    display: none;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(0deg, black, #00000000);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    &:hover {
        text-decoration: underline;
    }
}

.menu__new_topic .button {
    width: 100%;
    display: flex;
    border-radius: 90px;
    height: 40px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: rgb(20, 20, 20);
    background: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 400;
    transition: all 0.2s ease-in-out;
    padding-inline: 30px;
    margin-bottom: 20px;
    &:hover {
        background: #E11D20;
        color: #fff;
    }
}

.header__tab__nav .menu_list .menu_list__link {
    padding: 7px 5px;
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
    font-size: 16px;
    transition: all 0.2s ease;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header__tab__nav .menu_list .menu_list__link:hover {
    filter: brightness(0.8);
}
.header__tab__nav .menu_list__link {
    padding-block: 7px;
    padding-left: 7px;
}

.spirit .menu_list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.spirit .header__tabs {
    margin-left: 0px;
    flex: initial;
    display: flex;
    align-items: center;
    position: relative;
    gap: 10px;
    margin-right: 55px;
}

.spirit .header__tabs_content {
    position: absolute;
    top: 110%;
    height: fit-content;
    background: rgb(33, 33, 33);
    border-radius: 15px;
    z-index: 9999;
    right: 0;
}

.header__tabs_content__tab {
    padding-bottom: 20px;
    width: max-content;
    border-radius: 15px;
    min-width: 170px;
    flex-direction: column;
}
.avatar__con {
    position: relative;
    transition: all 0.2s ease;
    height: fit-content;
    width: fit-content;
}
.avatar__con:hover {
    .comment__img__avatar {
        filter: brightness(0.5);
    }
    .avatar__arrow {
        z-index: 10;
        opacity: 1;
    }
}
#notif-mark-all-read::after {
    display: none;
}
.chat-participants .comment__img__avatar.avatar-nick-trigger {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    font-size: 17px;
}
.chat-participants {
    display: flex;
    gap: 10px;
    padding: 5px;
    width: fit-content;
}
.user-avatar .avatar__arrow {
    display: none;
}
.user-avatar .avatar__con:hover {
    .comment__img__avatar {
        filter: brightness(1);
    }
}
.avatar__arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -5;
    opacity: 0;
    margin: auto;
    pointer-events: none;
}
.header__tabs__item.button {
    background-color: rgb(34, 142, 93);
    font-size: 13px;
    color: rgb(214, 214, 214);
    font-style: normal;
    cursor: pointer;
    box-sizing: border-box;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    outline: none;
    transition: background 0.8s;
    overflow: hidden;
    width: fit-content;
    padding-inline: 15px;
    height: 35px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.fa-chevron-down:before {
    content: "\f078";
    font-size: 10px;
    line-height: 10px;
    height: 12px;
    display: block;
}

.header__tabs__item.js-tab-notification .fa.fa-bell {
    color: var(--st-text-message-info);
    font-size: 20px;
    line-height: 20px;
}

.spirit .header__tab__bell ul li {
    background-color: transparent;
    margin-left: 0;
    color: #fff;
    padding: 15px;
    &:hover {
        background: #303030;
    }
}
.menu_list__link.menu-child-link.bottom {
    align-items: center;
}
.menu_list__link.menu-child-link.bottom svg {
    width: 18px;
    height: 18px;
}
nav.header__tab__nav {
    padding: 20px 15px 0;
    min-width: 200px;
}
.spirit .header__tab__bell ul li a {
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
    font-size: 14px;
    text-overflow: ellipsis;
    max-width: 320px;
    text-wrap-mode: wrap;
    overflow: hidden;
    text-wrap-style: pretty;
    font-weight: 400;
    height: 100%;
    padding-block: 15px;
}

.spirit .header__tab__bell ul li a:hover {
    color: rgba(255, 255, 255, 0.8);
}

.header-bell {
    position: relative;
    cursor: pointer;
}

.header-bell-notification {
    display: none;
    position: absolute;
    top: 180%;
    background: #272727;
    right: 0;
}

.header-bell-notification-active {
  display: flex;
}

.notification-con {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.notification-con span {
    color: rgb(255 255 255 / 90%);
    font-size: 14px;
    margin-bottom: 10px;
}

.notification-con a {
    color: rgb(255 255 255 / 80%);
    font-size: 14px;
    font-weight: 600;
}

.header__tabs .fa-envelope {

    font-size: 20px;
    line-height: 20px;
}
.header__tabs__item.js-tab-notification {
    color: #fff;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 100%;
    transition: all 0.1s ease;
}
.header__tabs__item.js-tab-notification:hover {
    background: #212121;
    color: #E11D20;
}

.send-message-button .fa.fa-envelope {
    color: rgb(255 255 255 / 90%);
    font-size: 16px;
    transition: all 0.2s ease;
    &:hover {
        color: rgba(255, 255, 255, 0.60);
    }
}

.topic-username {
    color: rgb(255 255 255 / 90%);
    font-size: 14px;
}

.comments__reply__img a {
    text-decoration: none;
}

.header__tab__nav li {
    width: 100%;
}

.user-status {
    font-size: 0.9em;
    padding: 2px 6px;
    border-radius: 5px;
    display: inline-block;
    animation: fadeIn 0.5s ease;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

span.user-status {
    font-size: 12px;
}

.comment-meta.topic-comment-meta a {
    display: flex;
    align-items: center;
}

.comments__reply__img a:hover {
    filter: brightness(1.2);
}

#pm-icon {
    color: #fff;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 100%;
}
#pm-icon:hover {
    background: #212121;
    color: #E11D20;
}
#pm-icon.pm-active,
#pm-icon.pm-active i {
    color: #E11D20;
    background: #212121;
}
#pm-unread-count {
    position: absolute;
    top: 0px;
    left: 0;
    background: rgb(76, 4, 5);
    color: white;
    border-radius: 50%;
    font-size: 10px;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    line-height: 0;
    padding-top: 2px;
    padding-inline: 1px;
}

.header-bell-con {
    position: relative;
}
.bell-content {
    position: absolute;
    right: 0;
    top: 110%;
    color: rgb(255 255 255 / 90%);
    font-size: 14px;
    background: #212121;
    z-index: 99;
    max-height: 350px;
    min-width: 250px;
}
.header-con {
    display: flex;
    align-items: center;
}
.nav-con_home {
    display: none;
}
.layout__article .layout__menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #141414;
    padding: 15px 20px;
    border-radius: 15px;
}

.topic__title {
    display: flex;
    align-items: baseline;
    position: relative;
    width: 100%;
}

.topic-title-con {
    display: flex;
    gap: 15px;
    width: 100%;
}
.topic-title-bottom {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.topic-title-inner {
    display: flex;
    gap: 20px;
    align-items: anchor-center;
    font-size: 14px;
}

.topic-title-inner .fa.fa-envelope {
    color: rgba(255, 255, 255, 0.9);
}

.topic-title-inner a:hover {
    .fa.fa-envelope {
        color: rgb(255, 255, 255);
    }
}

.topic__category a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    text-decoration: none;
    &:hover {
        text-decoration: underline;
    }
}
small.user-sidebar__rank-title {
    font-size: 12px;
    font-weight: 400;
    color: #fff;
}
.time-pub {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    &:hover {
        text-decoration: underline;
    }
}

.topic-title-inner .fa.fa-lock {
    color: #ca0303;
    font-size: 16px;
    line-height: 16px;
}

.topic-title-inner .fa.fa-thumb-tack {
    font-size: 16px;
    line-height: 16px;
}

.topic__comments .fa.fa-thumbs-up {
    transition: all 0.2s ease;
    color: var(--st-text-sec);
    font-size: 18px;
    line-height: 18px;
}

.topic__comments:hover {
    .fa.fa-thumbs-up {
        color: var(--st-text-prim);
    }
}

.comment-topic-con {
    display: flex;
    gap: 15px;
    width: 100%;
}

.layout__topics .comment-topic-con .comment__img__avatar {
    width: 35px;
    height: 35px;
    min-height: 35px;
    min-width: 35px;
    font-size: 16px;
    line-height: 16px;
}

.form-topic-list {
    height: 0;
    opacity: 0;
    z-index: -1;
}

.form-topic-list-open {
    height: fit-content;
    opacity: 1;
    z-index: 1;
    margin-top: 15px;
}


.comment-topic {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.comment-topic-image {
    padding: 5px 10px;
    background: #aaa;
    border-radius: 10px;
    color: #272727;
    font-size: 15px;
    font-weight: 500;
    width: fit-content;
    gap: 5px;
}

.comment-topic-image-con {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.comment-topic-right {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    a:not(.time-pub) {
        color: rgba(255, 255, 255, 0.9);
        text-decoration: none;
        font-size: 16px;
    }
}

.topic__first-comment p {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comment-topic p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.topic__first-comment .img {
    border-radius: 15px;
    overflow: hidden;
}

.comment-topic-right .time-pub {
    text-decoration: underline;
}

.header-login-con {
    position: relative;
    padding: 5px 15px 5px 5px;
    border-radius: 100px;
    &:hover {
        background: rgb(33, 33, 33);
    }
}
.header-login-con.is-selected {
    background: rgb(33, 33, 33);
}
a.comment-mention {
    color: rgb(255 255 255 / 90%);
}

.spirit .comment__img__avatar {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    min-height: 50px;
    min-width: 50px;
}

.header-login-con .comment__img__avatar {
    margin-right: 15px;
    width: 40px;
    height: 40px;
    min-height: 30px;
    min-width: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.header-login-con .header__tabs__item {
    display: flex;
    flex-direction: row;
    gap: 3px;
    align-items: center;
    color: rgb(255 255 255 / 90%);
    text-decoration: none;
    font-size: 14px;
}

.header__tabs {
    transition: all 0.2s ease;
    a:hover{
        i.fa, i.fa.fa-bell, i.fa.fa-envelope{
            transition: all 0.2s ease;
            color: var(--st-text-prim);
        }
    }
}
#notif-icon.has-unread .fa-bell {
    color: #E11D20;
    transition: color .2s;
}
#private-messages-header.has-unread .fa-comment {
    color: #E11D20;
    transition: color .2s;
}
.header__tabs__item.js-tab-notification.is-selected {
    background: #212121;
    color: #E11D20;
}
.header__tabs__item.js-tab-notification.has-unread {
    color: #e11d20; /* Например, красный колокольчик */
}


#private-messages-header:hover {

    #pm-icon > i {
        transition: all 0.2s ease;
        color: #E11D20;
    }
}

#pm-modal {
    display: none;
    position: absolute;
    right: 0;
    top: 110%;
    height: fit-content;
    background: rgb(33, 33, 33);
    z-index: 9999;
    border-radius: 15px;
    color: rgb(255 255 255 / 90%);
    font-size: 14px;
    width: 310px;
    padding-bottom: 20px;
    flex-direction: column;
}

#pm-list a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.pm-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 5px;
    border-radius: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    &:hover {
        background: #2c2c2c;
    }
}

.pm-modal-all {
    width: 100%;
    height: 30px;
    margin-top: 10px;
    background: aliceblue;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--st-text-prim);
    &:hover {
        background: #0968cb;
    }
}

.pm-modal-all a {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.breadcrumb_nav {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
}

.breadcrumb_nav li a {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 15px;
    text-decoration: none;
}

.content-all .layout__article {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.breadcrumb_nav .fa {
    color: rgba(255, 255, 255, 0.9);
    font-size: 10px;
    line-height: 10px;
    font-weight: 300;
}

.content-all .headline {
    color: rgba(255, 255, 255, 0.9);
    font-size: 20px;
    padding: 10px;
    background: #141414;
    border-radius: 10px;
}

.spirit .topic_edit_link {
    font-size: 16px;
    color: #ff000080;
    margin-left: 15px;

}

.head-line-con {
    display: flex;
    align-items: center;
}

.detail-sub {
    font-size: 14px;
    color: #a3a3a3;
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.detail-sub .topic__category a {
    color: #007afa;
    font-weight: 600;
}

.detail-sub .comment__info__username__link span {
    font-weight: 600;
    text-decoration: none;
}

.detail-sub .comment__info__username__link {
    text-decoration: none;
}

.search-con form {
    position: relative;
}

#id_q {
    height: 38px;
    width: 100%;
    border-radius: 8px;
    border: none;
    background: #212121;
    padding-left: 35px;
    outline: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

#id_q:hover {
    outline: 1px solid rgb(255 255 255 / 20%);
}
#id_q:focus {
    outline: 1px solid rgb(255 255 255 / 20%);
}

.content-all .comments_list {
    background: #141414;
    padding: 15px;
    border-radius: 15px;
    width: 100%;
}

#layout-topics {
    width: 100%;
    margin-top: 15px;
}

.spirit .comments_list__comment {
    border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.spirit .comments_list__comment:last-child {
    border-bottom: none;
}

.search-con div {
    background: #212121;
    border-radius: 8px;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
    width: 100%;
}
.search-result-item__snippet div {
    background: transparent;
}
.search-con a {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    text-decoration: none;
    border-radius: 3px;
    &:hover {
        background: #303030;
    }
}

.search-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-item span:first-child {
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.search-item span:last-child {
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
}

.comment__info__username__link {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-decoration: none;
    color: rgb(255 255 255 / 90%);
    align-items: flex-start;
    &:hover {
        color: rgb(255 255 255 / 100%);;
    }
}

.comment__info__date.js-move-comment-checkbox-list span {
    color: #a3a3a3;
    font-size: 12px;
}

.spirit .comment__info__username__link .is-owner {
    color: rgba(255, 255, 255, 0.9);
}

.comment__text.js-comment-text p {
    color: rgb(255 255 255 / 90%);
    font-size: 14px;
    text-wrap-style: pretty;
}

.comment__actions a {
    color: rgb(255 255 255 / 90%);
    text-decoration: none;
}

.comment__actions {
    margin-top: 20px;
    list-style: none;
    text-decoration: none;
    gap: 7px;
    color: rgb(255 255 255 / 90%);
}

.head-line-con .fa.fa-thumb-tack {
    font-size: 18px;
    line-height: 18px;
}

.head-line-con {
    display: flex;
    align-items: center;
    gap: 5px;
}

li.menu-link {
    width: 100%;
    display: flex;
    flex-direction: column;
}


li.menu-link.submenu-link {
    flex-direction: row;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: transparent !important;
}
.menu-img {
    width: 18px;
    height: 18px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    object-fit: fill;
    margin-right: 10px;
}
.menu-title {
    display: flex;
    gap: 10px;
}

.menu_list__link.menu-child-link {
    font-size: 14px;
    font-weight: 400;
    color: #d6d6d6;;
}

.nav-con .menu_list {

}
nav.breadcrumbs {
    color: #E11D20;
    margin-bottom: 10px;
}
.nav-con .menu-link {
    margin-bottom: 5px;
    border-radius: 3px;
}
.rank-page__sub {
    color: #fff;
    font-size: 16px;
}
.nav-con .menu-link:hover {
    background: rgba(225, 29, 32, 0.15);
    a {
        /*color: rgb(225, 29, 32);*/
    }
}
a.menu_list__link.menu-child-link {
    padding-block: 10px;
    width: 100%;
    border-radius: 5px;
    display: flex;
    gap: 10px;
    color: rgb(255, 255, 255);
    text-decoration: none;
    text-wrap-mode: wrap;
    font-size: 16px;
    padding-left: 15px;
    &:hover {
        color: rgb(225, 29, 32);
        background: rgba(225, 29, 32, 0.15);
        .menu-img {
            filter: invert(58%) sepia(74%) saturate(5362%) hue-rotate(1063deg) brightness(98%) contrast(110%);
        }
    }
}

.menu-title .menu_list__link {
    font-weight: 700;
    font-size: 14px;
    color: #949494;
    letter-spacing: 0.2px;
    transition: all 0.2s ease;
    text-decoration: none;
    &:hover {
        text-decoration: underline;
    }
}

.custom-select-wrapper {
  position: relative;
  display: inline-block;
  width: 260px;
    min-width: 200px;
  font-size: 15px;
}

.custom-select {
    background: #1b1b1b;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    user-select: none;
    border: 1px solid rgb(255 255 255 / 10%);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
    height: 40px;
}

.custom-select-trigger:after {
    content: '';
    display: block;
    vertical-align: middle;
    border-top: 6px solid #aaa;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    position: absolute;
    right: 15px;
    top: 50%;
    bottom: 50%;
}

.custom-options {
    display: none;
    position: absolute;
    left: 0;
    top: 110%;
    width: 100%;
    background: #1b1b1b;
    color: #fff;
    border-radius: 0 0 6px 6px;
    z-index: 10;
    border: 1px solid rgb(255 255 255 / 10%);
    border-top: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    max-height: 240px;
    overflow-y: auto;
}

.custom-select.open .custom-options {
    display: flex;
    animation: fadeIn 0.18s;
    flex-direction: column;
}

.custom-option {
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.13s;
}
.custom-option:hover, .custom-option.selected {
  background: #272727;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.spirit .menu_list__link {
    display: block;
    /*padding: 3px 0;*/
    border-radius: 5px;
}

.user-suffix svg {
    max-width: 22px;
    max-height: 22px;
    background-size: cover;
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.topic-title-inner {
    width: fit-content;
    text-wrap-mode: nowrap;
}

#customSelectTrigger {
    width: 100%;
    display: block;
    padding: 8px 16px;
}

.fa-heart, .fa-comment-dots, .fa-comment-dots {
    font-size: 16px;
}
.fa-heart.unliked, .like-count.unliked, .fa-comment-dots {
    color: #fff;
}
.fa-heart.liked, .like-count.liked {
    color: #E11D20;
}
.topic-like-block a:hover .fa-heart.unliked {
    color: #E11D20;
}
.like-count {
    font-size: 14px;
    color: #fff;
}
.like-button.liked,
.like-count.liked,
.fa-heart.liked {
    color: #e74c3c !important;
    /* можно добавить font-weight: bold; если нужно */
}

.like-button.liked {
    background: rgba(225, 29, 32, 0.15);
}
.like-button.unliked {
    background: rgba(255, 255, 255, 0.15);
}
.comments__reply__img {
    position: relative;
}


.send-private {
    position: absolute;
    right: 0px;
    bottom: -10px;
    background: #272727;
    border-radius: 100%;
    width: 28px;
    height: 28px;
    display: none;
    align-items: center;
    justify-content: center;
}
.comment__img__avatar:hover {
    filter: brightness(1.2);
}
.send-private .fa.fa-envelope {
    color: var(--st-text-sec);
    line-height: 15px;
    font-size: 15px;
}

.comment-topic-right a {
    display: flex;
    gap: 10px;
}

.spirit .header__tab__bell ul {
    padding: 0;
    list-style: none;
    margin: 0;
    &:hover {

    }
}

.spirit .unread {
    display: none;
    font-size: 0.75rem;
    background: #0064cd;
    padding: 2px 4px;
    border-radius: 3px;
}

.bump {
    display: none;
}

button.btn.btn-sm.btn-link, button.btn.btn-primary {
    background: none;
    svg {
        circle {
            transition: all 0.2s ease;
            stroke: rgba(255, 255, 255, 0.7);
        }
        path {
            transition: all 0.2s ease;
            stroke: rgba(255, 255, 255, 0.7);
        }
    }
}

button.btn.btn-sm.btn-link:hover, button.btn.btn-primary:hover {
    background: #454545;;
    svg {
        circle {
            stroke: rgba(255, 255, 255, 0.9);
        }
        path {
            stroke: rgba(255, 255, 255, 0.9);
        }
    }
}

.topic__title form {
    position: absolute;
    right: 0;
    top: 0;
}

button.btn.btn-sm.btn-link svg {
    width: 25px;
    height: 25px;
}

button.btn.btn-primary svg {
    width: 25px;
    height: 25px;
}

.layout__article .menu_list__link {
    color: rgb(255 255 255 / 90%);
    text-decoration: none;
}
.content-all .layout__menu .menu__dropdown_button > a {
    color: rgb(255 255 255 / 90%);
    text-decoration: none;
}

.views {
    display: block;
}

.views svg {
    margin-right: 5px;
    width: 20px;
    height: 20px;
    path {
        fill: rgba(255, 255, 255, 0.9);
    }
}

span.user-nickname {
    display: flex;
    gap: 5px;
    align-items: center;
    font-size: 16px;
    color: #fff;
    justify-content: flex-start;
    min-height: fit-content !important;
}

ul.comment__info__date.js-move-comment-checkbox-list {
    margin: 0;
    padding: 0;
    list-style: none;
    color: rgb(255 255 255 / 60%);
    font-size: 13px;
}

.user-suffix {
    text-wrap-mode: nowrap;
    max-width: 380px;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: bottom;
    word-wrap: break-word;
    font-size: 13px;
    color: #a2a2a2;
    opacity: 0;
    transition: all 0.2s ease;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
    a {
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
    }


.spirit .comments_list__comment:hover {
    .user-suffix {
        opacity: 1;
    }
}

ul.comment__actions {
    padding: 0;
    margin: 10px 0 20px 0;
    font-size: 0.875rem;
    display: flex;
    flex-wrap: wrap;
}

.spirit .comments_list__comment:first-child {
    padding-left: 0;
}

.spirit .comments_list__comment {
    padding-left: 20px;
}

.spirit .comment__actions li a {
    display: flex;
    align-items: center;
    gap: 7px;
}

.comment-like .fa-heart {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s ease;
}

.comment-like .fa-heart.liked {
  color: #e74c3c;
}

.custom-paginator {
  display: flex;
  justify-content: flex-end;
  margin: 1em 0;
}

.custom-paginator__list {
    list-style: none;
    margin: 0;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 7px;
}

.custom-paginator__item {
  margin: 0 4px;
}

.custom-paginator__link {
  display: block;
  min-width: 32px;
  padding: 6px 10px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  color: #ffffff;
  border-radius: 5px;
  transition: background-color 0.2s;
}

.custom-paginator__item.active .custom-paginator__link {
  background-color: var(--st-text-prim);
  color: #fff;
  font-weight: bold;
}

.custom-paginator__link:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.custom-paginator__item.disabled .custom-paginator__link,
.custom-paginator__item.disabled .custom-paginator__ellipsis {
  color: #888;
  background: transparent;
  cursor: default;
}

.custom-paginator__ellipsis {
  display: block;
  min-width: 32px;
  padding: 6px 10px;
  text-align: center;
  font-size: 14px;
  color: #ffffff;
}

.pagination-total {
    font-size: 12px;
    font-weight: 400;
    color: rgb(255 255 255 / 90%);
    margin: 0 4px;
}

.comments-title {
    display: flex;
    align-items: center;
    gap: 15px;
}

.fa.fa-thumbs-up.like {
    color: var(--st-text-prim);
    transition: all 0.2s ease;
    font-size: 18px;
    line-height: 18px;
}

span.like-count {
    margin-left: 4px;
}

a.js-like-topic, .comment-like {
    display: flex;
    gap: 10px;
    align-items: center;
}

.topic__comments {
    transition: all 0.2s ease;
}

.topic__comments:hover {
    color: #fff;
}

.like-button {
    transition: all 0.2s ease;
}

.like-button:hover {
    color: #ffffff;
    .fa.fa-thumbs-up.like{
        filter: brightness(1.2);
    }
}

.header__tab__bell.js-notifications-content-list::-webkit-scrollbar,
#autocomplete-results-modal::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar,
#chat-send-text::-webkit-scrollbar,
.autocomplete-suggestions::-webkit-scrollbar,
#chat-list::-webkit-scrollbar,
#categoryDropdown::-webkit-scrollbar,
.autocomplete-results::-webkit-scrollbar,
#smile-picker-grid::-webkit-scrollbar,
#smile-picker-categories-topic::-webkit-scrollbar,
#smile-picker-grid-topic::-webkit-scrollbar,
.smile-picker-grid::-webkit-scrollbar,
.smile-picker-categories::-webkit-scrollbar,
.staff-list::-webkit-scrollbar
{
    width: 10px;
    background: rgb(20, 20, 20);
    border-radius: 3px;
}

.header__tab__bell.js-notifications-content-list::-webkit-scrollbar-thumb,
#autocomplete-results-modal::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb,
#chat-send-text::-webkit-scrollbar-thumb,
.autocomplete-suggestions::-webkit-scrollbar-thumb,
#chat-list::-webkit-scrollbar-thumb,
#categoryDropdown::-webkit-scrollbar-thumb,
.autocomplete-results::-webkit-scrollbar-thumb,
#smile-picker-grid::-webkit-scrollbar-thumb,
#smile-picker-categories-topic::-webkit-scrollbar-thumb,
#smile-picker-grid-topic::-webkit-scrollbar-thumb,
.smile-picker-grid::-webkit-scrollbar-thumb,
.smile-picker-categories::-webkit-scrollbar-thumb,
.staff-list::-webkit-scrollbar-thumb
{
    background: #212121;
    border: 3px solid #fff;
    border-color: rgb(20, 20, 20);
    border-radius: 3px;
}
#chat-send-text::-webkit-resizer {
    background: transparent;
    width: 35px;
    height: 35px;
    background-size: cover;
    margin-bottom: 5px;
    margin-right: 6px;
    padding: 5px;
    object-fit: fill;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='45.000000' height='35.000000' viewBox='0 0 45 35' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdesc%3e Created with Pixso. %3c/desc%3e%3cdefs/%3e%3crect id='Прямоугольник 12' width='45.000000' height='35.000000' fill='%23C4C4C4' fill-opacity='0.100000'/%3e%3cpath id='path' d='M20 11.5C20 11.3 20.03 11.1 20.11 10.92C20.19 10.74 20.29 10.58 20.43 10.43C20.58 10.29 20.74 10.19 20.92 10.11C21.1 10.03 21.3 10 21.5 10L25.5 10C25.69 10 25.89 10.03 26.07 10.11C26.25 10.19 26.41 10.29 26.56 10.43C26.7 10.58 26.8 10.74 26.88 10.92C26.96 11.1 27 11.3 27 11.5L27 15.5C27 15.69 26.96 15.89 26.88 16.07C26.8 16.25 26.7 16.42 26.56 16.56C26.41 16.7 26.25 16.8 26.07 16.88C25.89 16.96 25.69 17 25.5 17C25.3 17 25.1 16.96 24.92 16.88C24.74 16.8 24.58 16.7 24.43 16.56C24.29 16.42 24.19 16.25 24.11 16.07C24.03 15.89 24 15.69 24 15.5L24 13L21.5 13C21.3 13 21.1 12.96 20.92 12.88C20.74 12.8 20.58 12.7 20.43 12.56C20.29 12.42 20.19 12.25 20.11 12.07C20.03 11.89 20 11.69 20 11.5ZM11.5 23L15.5 23C15.69 23 15.89 22.96 16.07 22.88C16.25 22.8 16.41 22.7 16.56 22.56C16.7 22.42 16.8 22.25 16.88 22.07C16.96 21.89 17 21.69 17 21.5C17 21.3 16.96 21.1 16.88 20.92C16.8 20.74 16.7 20.58 16.56 20.43C16.41 20.29 16.25 20.19 16.07 20.11C15.89 20.03 15.69 20 15.5 20L13 20L13 17.5C13 17.3 12.96 17.1 12.88 16.92C12.8 16.74 12.7 16.58 12.56 16.43C12.41 16.29 12.25 16.19 12.07 16.11C11.89 16.03 11.69 16 11.5 16C11.3 16 11.1 16.03 10.92 16.11C10.74 16.19 10.58 16.29 10.43 16.43C10.29 16.58 10.19 16.74 10.11 16.92C10.03 17.1 10 17.3 10 17.5L10 21.5C10 21.69 10.03 21.89 10.11 22.07C10.19 22.25 10.29 22.42 10.43 22.56C10.58 22.7 10.74 22.8 10.92 22.88C11.1 22.96 11.3 23 11.5 23ZM32 7.5L32 25.5C32 25.66 31.98 25.82 31.95 25.98C31.91 26.14 31.87 26.3 31.8 26.45C31.74 26.6 31.66 26.75 31.57 26.88C31.48 27.02 31.38 27.15 31.26 27.26C31.15 27.38 31.02 27.48 30.88 27.57C30.75 27.66 30.6 27.74 30.45 27.8C30.3 27.87 30.14 27.91 29.98 27.95C29.82 27.98 29.66 28 29.5 28L7.5 28C7.33 28 7.17 27.98 7.01 27.95C6.85 27.91 6.69 27.87 6.54 27.8C6.39 27.74 6.24 27.66 6.11 27.57C5.97 27.48 5.84 27.38 5.73 27.26C5.61 27.15 5.51 27.02 5.42 26.88C5.33 26.75 5.25 26.6 5.19 26.45C5.12 26.3 5.08 26.14 5.04 25.98C5.01 25.82 5 25.66 5 25.5L5 7.5C5 7.33 5.01 7.17 5.04 7.01C5.08 6.85 5.12 6.69 5.19 6.54C5.25 6.39 5.33 6.24 5.42 6.11C5.51 5.97 5.61 5.84 5.73 5.73C5.84 5.61 5.97 5.51 6.11 5.42C6.24 5.33 6.39 5.25 6.54 5.19C6.69 5.12 6.85 5.08 7.01 5.04C7.17 5.01 7.33 5 7.5 5L29.5 5C29.66 5 29.82 5.01 29.98 5.04C30.14 5.08 30.3 5.12 30.45 5.19C30.6 5.25 30.75 5.33 30.88 5.42C31.02 5.51 31.15 5.61 31.26 5.73C31.38 5.84 31.48 5.97 31.57 6.11C31.66 6.24 31.74 6.39 31.8 6.54C31.87 6.69 31.91 6.85 31.95 7.01C31.98 7.17 32 7.33 32 7.5ZM29 8L8 8L8 25L29 25L29 8Z' fill='%23FFFFFF' fill-opacity='0.900000' fill-rule='nonzero'/%3e%3c/svg%3e ");
}
.send-comment-top {
    display: flex;
    gap: 15px;
    align-items: baseline;
    margin-bottom: 15px;
}

.comments__reply {
    padding: 20px;
    border-radius: 15px;
    background: #141414;
}

textarea#id_comment {
    background: #303030;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 10px;
    color: rgb(255 255 255 / 90%);
    font-size: 14px;
    min-height: 160px;
    max-height: 500px;
}

.comment__reply__text form {
    position: relative;
}

.comment__reply__actions {
    position: relative;
    background: #272727;
    width: 100%;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

ul.comment__reply__actions__list {
    padding: 10px;
    margin: 0 !important;
    list-style: none;
    gap: 10px;
}

ul.comment__reply__actions__list li {
    margin: 0 !important;
    background: var(--st-text-prim);
    border-radius: 5px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

ul.comment__reply__actions__list li a {
    color: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.send-button {
    width: fit-content;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
input.button.comment__reply__actions__publish:hover, button.send-button.btn.btn-sm.btn-primary:hover {
    background: #3d3d3d;
}
.topic-inline-reply .publish-editor {
    justify-content: flex-end;
}
i.fa-solid.fa-thumbtack, i.fas.fa-bookmark, i.far.fa-bookmark {
    color: rgb(255 255 255 / 90%);
}
#inviteModal {
    position: fixed;
    z-index: 999;
    width: 320px;
    min-height: fit-content;
    height: fit-content;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    background: #303030;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid rgb(255 255 255 / 10%);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
input#inviteNicknames {
    width: 100%;
    height: 35px;
    border-radius: 7px;
    outline: 0;
    background: #272727;
    color: rgb(255 255 255 / 90%);
    font-size: 14px;
    border: 1px solid rgb(255 255 255 / 20%);
    padding-left: 10px;
}
input#inviteNicknames:focus {
    border-color: rgba(255, 255, 255, 0.9);
}
button.btn.btn-primary.button-invite {
    padding: 10px 20px;
    border-radius: 90px;
    background: rgb(255 255 255);
    color: rgb(20, 20, 20);
    font-size: 14px;
}
button.btn.btn-primary.button-invite:hover {
    background: rgb(225, 29, 32);
    color: rgb(255 255 255 / 90%);
}
button#inviteCancel {
    padding: 5px 10px;
    border-radius: 5px;
    color: rgb(255 255 255 / 90%);
    font-size: 14px;
    background: #e53b3b;
    margin-left: auto;
}
form#inviteForm {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.send-button svg {
    width: 35px;
    height: 35px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    left: 0;
    pointer-events: none;
    user-select: none;
}

.comment__reply__actions {
    padding: 5px;
}

.send-button svg path {
    fill: rgba(255, 255, 255, 0.6);
    stroke: rgba(255, 255, 255, 0);
}

input.button.comment__reply__actions__publish {
    width: 100%;
    height: 100%;
    float: right;
    font-size: 13px;
    padding: 10px 30px;
    background: #303030;
    border-radius: 5px;
}

.comment__reply__actions {
    justify-content: flex-end;
    display: flex;
}

.comment__reply__preview.js-box-preview-content {
    color: rgb(255 255 255 / 90%);
    font-size: 14px;
}

.comment__text__poll__title {
    color: rgb(255 255 255 / 90%);
}

.comment__text__poll__choices label {
    color: rgb(255 255 255 / 90%);
    font-size: 14px;
}

.comment__text__poll__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

input.comment__text__poll__actions__action.button {
    width: fit-content;
    height: 35px;
    padding-inline: 20px;
    background: #373737;
    border-radius: 5px;
    color: rgb(255 255 255 / 60%);
    transition: all 0.2s ease;
    &:hover {
        filter: brightness(1.2);
    }
}

a.comment__text__poll__actions__action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: rgb(255 255 255 / 70%);
    height: 35px;
    padding-inline: 20px;
    background: #373737;
    margin: 0 !important;
    border-radius: 5px;
    font-size: 0.875rem !important;
    transition: all 0.2s ease;
    &:hover {
        filter: brightness(1.2);
    }
}

.comment__text__poll__choices ul {
    margin: 0;
    padding: 0;
}

.comment__text__poll {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comment__text__poll__choices__choice__description {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: baseline;
    color: rgb(255 255 255 / 90%);
    font-size: 14px;
}

.comment__text__poll__choices__choice__description a {
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    text-decoration: none;
}

li.comment__text__poll__choices__choice {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.comment__text__poll__note {
    font-weight: 600;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
}

.layout__list__item {
    display: flex;
    gap: 10px;
    align-items: baseline;
    color: rgb(255 255 255 / 60%);
    font-size: 14px;
}

a.layout__list__item__link {
    color: rgb(255 255 255 / 90%);
    font-weight: 500;
    text-decoration: none;
}

.spirit .paginator {
    margin-bottom: 0;
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.7);
}

.topic-title-con .comments__reply {
    border: none;
    padding: 0;
    height: fit-content;
    border-radius: 100%;
}

.topic-title-con .comments__reply__img {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100%;
}

.form-publish {
    position: relative;
}

input.button.topic__reply__actions__publish {
    width: 45px;
    height: 40px;
    background: transparent;
}

.publish-con {
    position: relative;
}

.publish-con ul.comment__reply__actions__list {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #272727;
    border-radius: 6px;
}

.publish-con {
    min-height: 350px;
    max-height: fit-content;
}

.publish-editor ul.comment__reply__actions__list {
    width: fit-content;
    position: relative;
    padding: 0;
}
.topic-title {
    font-size: 24px;
    font-weight: 400;
    margin: 0;
}
.publish-editor {
    display: flex;
    background: #1d1d1d;
    border-radius: 6px;
    padding: 5px;
    align-items: center;
    position: relative;
    width: 100%;
    border: 1px solid rgb(255 255 255 / 10%);
    justify-content: space-between;
}

.form-publish {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-publish .publish-con {
    min-height: 350px;
}

input#id_title {
    border-radius: 6px;
    border: 1px solid rgb(255 255 255 / 20%);
    color: rgb(255 255 255 / 90%);
}

select#id_category {
    border-radius: 6px;
    color: rgb(255 255 255 / 90%);
    font-size: 14px;
    height: 40px;
    width: 100%;
}
.form-publish label {
    color: #fff;
}

.publish-con .topic_publish_comment {
    position: relative;
}

a.topic__comments {
    text-decoration: none;
    gap: 7px;
    display: flex;
    align-items: baseline;
}

a.comment__reply__info__link {
    text-decoration: none;
}

.blockquote_expand a {
    background: rgb(255 255 255 / 41%) !important;
    border-radius: 0 0 5px 6px;
    width: 40px;
    height: 20px;
    color: rgb(255 255 255 / 90%);
}

.blockquote_expand {
    border-top: 3px solid rgb(128 128 128) !important;
}

.profile-background {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 0;
    background-size: cover;
    object-fit: fill;
    background-position: top;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 1000px 20px #000000;
}

.layout__profile {
    padding: 15px;
    background: #141414;
    border-radius: 15px;
    justify-content: center;
    flex-direction: column;
    display: flex;
    align-items: center;
}
.profile__img__avatar {
    width: 150px;
    height: 150px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    object-fit: cover;
    border-radius: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.profile__img {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
}

.profile__img__username.user-nickname {
    display: flex;
    gap: 10px;
    flex-direction: column;
    width: 100%;
}

.suffix-profile {
    max-width: 500px;
    color: rgb(255 255 255 / 60%);
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    text-wrap-mode: nowrap;
}

.profile-info {
    display: flex;
    gap: 5px;
    height: fit-content;
}

.title-profile {
    color: rgb(255 255 255 / 90%);
    font-size: 15px;
}

.profile-info-sig-up {
    display: flex;
    flex-direction: column;
}

.profile-info-sig-up div {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    gap: 5px;
}

.profile-button {
    display: flex;
    gap: 20px;
    align-items: center;
    width: 100%;
}

.profile-button .button {
    display: flex;
    gap: 5px;
    flex-direction: row;
    align-items: baseline;
}

ul.nav__tabs {
    padding: 0;
    list-style: none;
    margin: 0;
    margin-top: 10px;
}

ul.comment__info__date {
    padding: 0;
    margin: 0;
    flex-direction: row;
    gap: 10px;
    list-style: none;
    color: #a9a9a9;
}



.nav__tabs__link {
    font-size: 15px;
    font-weight: 400;
}

.spirit .nav__tabs__link.is-selected {
    color: #ffffff;
    border-bottom: 4px solid var(--st-nav-tab-line);
}

.comment-list-profile {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px;
    background: #212121;
    margin-top: 20px;
    border-radius: 15px;
    width: 100%;
}

ul.paginator {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.paginator.custom-paginator__list {
    gap: 10px;
    padding: 5px;
    width: fit-content;
}

.paginator__button.active {
    background-color: var(--st-text-prim);
    font-weight: bold;
    display: block;
    min-width: 32px;
    padding: 8px 8px;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    color: #ffffff;
    border-radius: 3px;
    transition: background-color 0.2s;
}

.spirit .paginator__button a {
    border: none;
    border-radius: 3px;
    padding: 8px 8px !important;
    min-width: 32px;
    text-align: center;
    display: block;
    &:hover {
        background: rgba(255, 255, 255, 0.2);
    }
}

.profile__img__avatar.no-pic {
    max-height: 120px;
    max-width: 120px;
}

input#id_users {
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
}

.comments__footer_menu__notify {
    display: flex;
    width: 100px;
}

.comments__footer_menu__notify form .button{
    background: #272727;
    padding: 8px 15px;
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.9);
}

.comments__footer_menu__notify {
    margin: 0 !important;
}

.menu__new_topic.button {
    display: flex;
    border-radius: 7px;
    height: 40px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: hsl(0deg 0% 100% / 90%);
    background: var(--st-text-prim);
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    padding-inline: 30px;
}

.layout__article p {
    color: rgb(255 255 255 / 90%);
}

.layout__admin {
    padding: 15px;
    background: #272727;
    border-radius: 15px;
    border: 1px solid rgb(255 255 255 / 10%);
}

.layout__admin form {
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.layout__admin form input {
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    color: rgb(255 255 255 / 90%);
    background: #303030;
    height: 35px;
    padding-inline: 10px;
}

.layout__admin form .field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    justify-content: flex-start;
}

.layout__admin form .button {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: center;
    color: hsl(0deg 0% 100% / 90%);
    background: var(--st-text-prim);
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    padding-inline: 30px;
    width: 150px;
}

dl.profile__settings {
    display: flex;
    flex-direction: column;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 7px;
}

.profile__settings form {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    justify-content: flex-start;
}

.form-profile-update .field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: rgba(255, 255, 255, 0.9);
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.form-profile-update .field input {
    border-radius: 6px;
    height: 35px;
    width: 50%;
    background: #3d3d3d;
    outline: 0;
    padding-top: 6px;
    padding-left: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.con-profile-update {
    padding: 15px;
    background: #272727;
    border-radius: 15px;
    border: 1px solid rgb(255 255 255 / 10%);
}

.con-profile-update #id_avatar {
    margin-top: 10px;
}

.con-profile-update .image_widget {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    flex-direction: column;
    img {
        width: 100px;
        height: 100px;
        border-radius: 100%;
    }
}

.con-profile-update .image_widget .image_widget__clear {
    margin: 0;
    font-size: 15px;
}

.con-profile-update input[type="checkbox"] {
    margin: 0;
    padding: 0;
    width: 15px;
    height: 15px;
}

input.button.profile-save {
    display: flex;
    border-radius: 7px;
    height: 40px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: hsl(0deg 0% 100% / 90%);
    background: var(--st-text-prim);
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    padding-inline: 30px;
    margin-top: 20px;
}

body > div > div.spirit > div > div > div.content-all > div > div > form > div:nth-child(9), body > div > div.spirit > div > div > div.content-all > div > div > form > div:nth-child(8) {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: flex-end;
    gap: 5px;
}

form.form-profile-update {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

select#id_notify_when {
    color: #fff;
    background: #303030;
    border: 1px solid rgb(255 255 255 / 10%);
    height: 35px;
    width: 50%;
    border-radius: 7px;
    padding-inline: 5px;
}

.spirit input[type="checkbox"] {
    width: fit-content;
}

.messages_info {
    background: #303030 !important;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
}

.admin__statistics__box {
    background: #303030 !important;
    color: rgb(255 255 255 / 90%);
    border-radius: 5px;
}

textarea#id_template_footer {
    color: rgb(255 255 255 / 90%);
    background: #303030;
    border-radius: 6px;
    border: 1px solid rgb(255 255 255 / 10%);
}

select#id_parent {
    background: #303030;
    width: 50%;
    height: 35px;
    border-radius: 6px;
    border: 1px solid rgb(255 255 255 / 10%);
}

ul.admin__tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #fff;
    margin-bottom: 15px;
    a {
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
    }
    .admin__tabs__link.is-selected {
        color: #fff;
    }
}

input.button.button-custom {
    display: flex;
    border-radius: 7px;
    height: 40px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: hsl(0deg 0% 100% / 90%);
    background: var(--st-text-prim);
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    padding-inline: 30px;
    width: 50%;
    margin-top: 20px;
    min-width: fit-content;
}

textarea#id_body {
    background: #272727;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 10px;
    color: rgb(255 255 255 / 90%);
    padding: 10px;
    margin-bottom: 10px;
}

.form-r .field{
    color: rgba(255, 255, 255, 0.9);
}

select#id_reason {
    height: 25px;
    width: 50%;
    border-radius: 5px;
    margin-left: 5px;
    background: #272727;
    border: 1px solid rgb(255 255 255 / 10%);
    font-size: 15px;
}

textarea#id_nickname_suffix_html {
    background: #303030;
    border-radius: 6px;
    border: 1px solid rgb(255 255 255 / 10%);
    padding-inline: 10px;
    height: 50px;
}

form.form-auth {
    padding: 15px;
    background: #272727;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

form.form-auth .field {
    display: flex;
    flex-direction: column;
    width: 50%;
}

form.form-auth .field input {
    height: 35px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #303030;
    padding-inline: 10px;
    color: rgb(255 255 255 / 90%);
}

form.js-reply.form-publish.private {
    padding: 15px;
    background: #272727;
    border-radius: 15px;
}

form.js-reply.form-publish.private .field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

form.js-reply.form-publish.private .field input {
    width: 100%;
    background: #303030;
    border-radius: 7px;
    height: 35px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding-inline: 10px;
    color: rgb(255 255 255 / 90%);
}

form.js-reply.form-publish.create .field,
form.js-reply.form-publish.update .field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

form.js-reply.form-publish.create .field input,
form.js-reply.form-publish.update .field input{
    background: #272727;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    height: 35px;
    padding-inline: 10px;
    color: rgba(255, 255, 255, 0.9);
    width: 100%;
}

form.js-reply.form-publish.create .field select,
form.js-reply.form-publish.update .field select{
    background: #272727;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    height: 35px;
    padding-inline: 10px;
}

form.js-reply.form-publish.create {
    background: #272727;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
}

form.js-reply.form-publish.create textarea {
    padding: 10px;
}

.form-profile-update ul.errorlist {
    padding: 10px;
    list-style: none;
    background: #303030;
    border-radius: 6px;
    color: #cb3030c7;
}

.left-nav-con {
    width: 25%;
    height: 100%;
    position: relative;
    gap: 25px;
    display: flex;
    flex-direction: column;
}

form.form-con {
    padding: 15px;
    background: #272727;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

form.form-con .field {
    display: flex;
    flex-direction: column;
    width: 50%;
    color: rgba(255, 255, 255, 0.9);
}

form.form-con .field input {
    height: 35px;
    width: 100%;
    border-radius: 6px;
    background: #3d3d3d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding-inline: 10px;
}

.login__links {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.help-text-profile {
    font-size: 14px !important;
    line-height: 16px !important;
    margin-top: 5px;
    color: rgb(255 255 255 / 70%);
}

.comment__footer__share.js-tab-content {
    margin: 0;
    width: 100%;
    list-style: none;
    background: #303030;
    border-radius: 6px;
    padding: 10px;
}

input.comment__footer__share__url {
    background: #272727;
    height: 35px;
    border-radius: 6px;
    border: 1px solid rgb(255 255 255 / 10%);
    padding-inline: 10px;
    color: rgb(255 255 255 / 80%);
}

ul.comment__footer__share__menu {
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 5px;
    margin-top: 10px;
    flex-direction: row !important;
    align-items: baseline;
}

ul.comment__footer__share__menu a {
    padding: 5px 10px;
    background: #272727;
    border-radius: 3px;
}

ul.comment__footer__share__menu a:hover {
    color: #fff;
}

a.button.js-post.button-private {
    width: 200px;
    margin-block: 15px;
    gap: 5px;
}

.invite_user.private form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.invite_user.private form .field {
    display: flex;
    flex-direction: column;
    width: 50%;
    color: rgba(255, 255, 255, 0.9);
}

.invite_user.private form .field input {
    height: 35px;
    width: 200px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #3d3d3d;
    color: rgba(255, 255, 255, 0.9);
    padding-inline: 10px;
}

.button-custom {
    display: flex;
    border-radius: 7px;
    height: 40px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: hsl(0deg 0% 100% / 90%);
    background: rgb(225, 29, 32);
    font-size: 14px;
    font-weight: 400;
    transition: all 0.2s ease-in-out;
    padding-inline: 30px;
    width: 200px;
    margin-top: 20px;
    &:hover {
        filter: brightness(1.1);
    }
}

.layout__menu.private {
    display: flex;
    flex-direction: row;
    gap: 35px;
    align-items: center;
    justify-content: flex-start;
}

.comments__footer_menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
    gap: 15px;
}

form.js-reply.form-con.edit .field {
    width: 100%;
}

.topic_publish_comment {
    width: 100%;
}

.menu-link.bottom.submenu-link {
    display: flex;
    flex-direction: column;
}

.submenu_list.bottom .menu-link.submenu-link {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.menu-bottom {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.menu-bottom span {
    font-weight: 700;
    font-size: 14px;
    color: #949494;
    letter-spacing: 0.2px;
    padding-left: 7px;
}

.menu-bottom a {
    color: rgba(255, 255, 255, 0.9);
    padding-block: 0;
    width: 100%;
    border-radius: 5px;
    gap: 10px;
    padding-left: 7px;
    text-decoration: none;
    font-size: 13px;
}

.reset-sort {
    margin-left: 20px;
    cursor: pointer;
}

.reset-sort svg {
    width: 25px;
    height: 25px;
}

.reset-sort svg path{
    stroke: rgba(255, 255, 255, 0);
    fill: rgba(255, 255, 255, 0.8);
}
#notification-badge {
    position: absolute;
    top: 0px;
    left: 0;
    background: rgb(76, 4, 5);
    color: white;
    border-radius: 50%;
    font-size: 10px;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    line-height: 0;
    padding-top: 2px;
    padding-inline: 1px;
}
.membersOnline {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 20px;
  background: #fafafa;
}

span.userList__role {
    width: fit-content;
    height: fit-content;
    color: rgb(255 255 255 / 60%);
    font-size: 13px;
}

.userList__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.userList__item {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.userList__item--empty {
  color: #666;
}

.userList__role {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: contain;
  margin-right: 6px;
}

.userList__username {
  font-weight: 500;
  margin-right: 4px;
}
.user-online-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: 10px;
}

.left-nav-con.submenu_list.bottom a {
    padding-block: 0 !important;
}

.menu_list__link.menu-child-link.bottom svg {
    width: 20px;
    height: 20px;
}

.menu_list__link.menu-child-link.bottom svg path {
    stroke: rgba(255, 255, 255, 0.6);
}

svg.about {
    fill: rgba(255, 255, 255, 0.6);;
}

.user-sidebar__header {
    display: flex;
    flex-direction: row;
    gap: 10px;
    color: rgba(255, 255, 255, 0.9);
}

.user-sidebar__avatar {
    width: 50px;
    height: 50px;
    border-radius: 100%;
}

.user-sidebar__stat-label {
    width: 25px;
    height: 25px;
}
.user-online .menu-bottom-title {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
}
.user-sidebar__stats .button {
    width: 100%;
    display: flex;
    border-radius: 90px;
    height: 40px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: rgb(20, 20, 20);
    background: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 400;
    transition: all 0.2s ease-in-out;
    padding-inline: 30px;
    &:hover {
        background: #E11D20;
        color: #fff;
    }
}
.user-sidebar__stats {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: left;
    gap: 20px;
    flex-wrap: wrap;
}
.user-sidebar__stat {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgb(255, 255, 255);
    font-size: 14px;
    background: rgba(255, 255, 255, 0.15);
    padding: 5px 15px;
    border-radius: 100px;
}
.secondaryContent.user-sidebar {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
    justify-content: flex-start;
    color: rgba(255, 255, 255, 0.9);
}

/* Селектор .fr-box (для WYSIWYG-редактора) */
.topic-inline-reply .fr-box {
  width: 100%;
  min-height: 80px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px;
  font-size: 14px;
  resize: vertical;
}

/* Кнопка «Ответить» */
.topic-inline-reply button[type="submit"] {
    float: right;
    font-size: 13px;
    padding: 10px 30px;
    background: #303030;
    border-radius: 5px;
}

.form-topic-list {
    width: 100%;
}

.topic-list-comment {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.topic-inline-reply textarea#id_comment {
    min-height: 100px;
    max-height: 150px;
    padding: 10px;
}

button.send-button.btn.btn-sm.btn-primary {
    margin: 0;
}

.topic-inline-reply label {
    display: none;
}

.logo {
    max-width: 180px;
    max-height: 40px;
    height: 100%;
    width: 100%;
    object-fit: cover;
    background-size: contain;
    background-position: center;
}

a.header__logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment__text.js-comment-text img {
    background-size: cover;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.userList__list .userList__item {
    border-radius: 7px;
    padding: 3px;
}

.userList__list .userList__item:hover {
    background: rgba(61, 61, 61, 0.47);
}

.user-sidebar__next-max {
    font-size: 14px;
    line-height: 14px;
}

.user-sidebar__stat-value {
    font-size: 14px;
    line-height: 14px;
}

.comment__text.js-comment-text ul {
    color: rgb(255 255 255 / 90%);
    margin-left: 0;
    padding-left: 0;
}

.comment__footer.js-tabs-container {
    margin-top: 30px;
}

.spirit .comments_list__comment {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 5px;
}

.detail-info-con {
    display: flex;
    gap: 20px;
}
.comments_list p {
    color: rgb(255 255 255 / 90%);
}
div#layout-topics p {
    color: rgb(255 255 255 / 90%);
}
.profile-check {
    width: fit-content !important;
}
input#background-clear_id {
    width: fit-content;
}
dd.profile__settings__desc {
    margin: 0;
}
.content-all form .field:nth-child(5) {
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 7px;
    border-radius: 10px;
}
.menu-mobile {
    display: none;
}
.search-con-mobile {
    display: none;
}
ul.userList__list {
    max-height: 500px;
    overflow: auto;
    overflow-x: hidden;
}
ul.userList__list::-webkit-scrollbar {
    width: 10px;
    background: #303030;
    border-radius: 3px;
}

ul.userList__list::-webkit-scrollbar-thumb {
    background: #272727;
    border: 3px solid #fff;
    border-color: #303030;
    border-radius: 3px;
}
.icon-nickname {
    max-width: 15px;
    max-height: 15px;
    width: 15px;
    height: 15px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-nickname svg {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.nic-ico {
    display: flex;
    align-items: center;
    gap: 4px;
}
.nic-ico-user {
    position: relative;
    max-width: 15px;
    max-height: 15px;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nic-ico-user svg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 100%;
}
.user-info-con, .next-rank-con {
    display: flex;
    align-items: center;
    gap: 4px;
}

.user-info-con svg, .next-rank-con svg {
    max-width: 15px;
    max-height: 15px;
    width: 15px;
    height: 15px;
}

.profile-rank-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    width: 100%;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-block: 15px;
}
.user-sidebar__next-label, .user-sidebar__next-value {
    font-size: 14px;
}
.user-sidebar__next-rank {
    display: flex;
    flex-direction: column;
}
input.button.search-button {
    display: none;
    background: #0064cd;
    color: rgb(255 255 255 / 80%);
    width: 35px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 2px;
    height: 26px;
    border-radius: 1px 4px 4px 1px;
    font-size: 19px;
    line-height: 19px;
}
.search-result-item.show-all {
    background: #E11D20;
    text-align: center;
    padding: 10px 10px;
}
.search-result-item.show-all a:hover {
    background: transparent;
}


.editor-toolbar a {
  color: #444;
  transition: background 0.2s, color 0.2s;
  border-radius: 5px;
  margin: 0 2px;
}

.editor-toolbar a:hover,
.editor-toolbar a.active {
  background: #c9e0ff;
  color: #1b5fa8;
}

.editor-toolbar i.fa {
  font-size: 18px;
}



.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px !important;
    border-radius: 5px;
    background: #303030;
    margin-top: 15px;
    outline: 0;
    &:before {
        display: none !important;
    }
}
.editor-toolbar {
    border-top: 1px solid rgb(255 255 255 / 20%) !important;
    border-left: 1px solid rgb(255 255 255 / 20%) !important;
    border-right: 1px solid rgb(255 255 255 / 20%) !important;
    border-bottom: 1px solid rgb(255 255 255 / 20%) !important;
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
}
.editor-toolbar a {
    background: #0064cc;
    color: rgba(255, 255, 255, 0.9) !important;
}
.editor-toolbar .fa-bold { color: rgba(255, 255, 255, 0.9) !important; }
.editor-toolbar .fa-link { color: rgba(255, 255, 255, 0.9) !important; }
.editor-toolbar .fa-strikethrough { color: rgba(255, 255, 255, 0.9) !important; }
.editor-toolbar .fa-link { color: rgba(255, 255, 255, 0.9) !important; }
.editor-toolbar .fa-italic { color: rgba(255, 255, 255, 0.9) !important; }
.editor-toolbar .fa-upload { color: rgba(255, 255, 255, 0.9) !important; }
.editor-toolbar .fa-picture-o { color: rgba(255, 255, 255, 0.9) !important; }
.editor-toolbar .fa-list-ul { color: rgba(255, 255, 255, 0.9) !important; }
.editor-toolbar .fa-list-ol { color: rgba(255, 255, 255, 0.9) !important; }
.editor-toolbar .fa-eye { color: rgba(255, 255, 255, 0.9) !important; }
.editor-toolbar .fa-question-circle { color: rgba(255, 255, 255, 0.9) !important; }
.editor-toolbar i.separator {
    border-left: 1px solid rgb(255 255 255 / 20%) !important;
    border-right: 1px solid rgb(255 255 255 / 20%) !important;
}
.editor-toolbar a.active, .editor-toolbar a:hover {
    background: #1b5fa8 !important;
}
.editor-toolbar .fa-upload:before {
    content: "\f030";
}
.editor-toolbar .fa-picture-o:before {
    content: "\f0ee";
}
.comment__reply__text form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.button-not {
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    color: rgb(20, 20, 20);
    font-style: normal;
    cursor: pointer;
    box-sizing: border-box;
    font-weight: 500;
    text-decoration: none;
    border-radius: 90px;
    outline: none;
    overflow: hidden;
    min-width: 140px;
    padding-inline: 15px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
}
.alert.alert-warning {
    color: rgb(255 255 255 / 40%);
    font-size: 14px;
}

.comment-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transition: opacity 0.2s;
}
.list-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    padding-bottom: 20px;
    background: rgb(20, 20, 20);
    overflow: hidden;
}
.list-group:first-child {
    height: fit-content;
    min-height: 255px;
}
.comment-disabled:hover,
.comment-disabled:focus {
    opacity: 0.8;
}
li.comment-like.disabled {
    padding-inline: 15px;
    background: #252525;
    cursor: default;
}
li.comment-like {
    box-sizing: border-box;
    background: #373737;
    border-radius: 15px;
    font-weight: 500;
    font-size: 14px;
    color: var(--st-text-sec);
    cursor: pointer;
    max-height: 34px;
}
.chat-avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; background:#eee; }
.chat-message-body { font-size:1.08em; }
.chat-date {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    text-wrap: nowrap;
}

.chat-message.pinned-message {
    border-left: 5px solid rgb(225 29 32 / 30%);
    background: #272727;
    color: rgb(255 255 255 / 90%);
    font-size: 14px;
    border-radius: 15px 15px 15px 0 !important;
}
.chat-message.pinned-message .chat-message-header {
    margin-bottom: 0;
    width: 100%;
}
.chat-message-header {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    position: relative;
    background: rgb(26, 26, 26);
    padding: 15px;
    border-radius: 15px 15px 15px 0;
    align-items: flex-start;
}
.chat-message-header:hover {
    filter: brightness(1.3);
    cursor: pointer;
}
.chat__messages__avatar_con {
    position: relative;
    height: fit-content;
    width: fit-content;
}
.chat-message-badge {
    display: flex;
    flex-direction: row;
    gap: 5px;
    margin-left: auto;
}
.chat__messages__avatar_con .topic-title-inner {
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 5;
}
.user-online-dot {
    width: 8px;
    height: 8px;
    background: green;
    border-radius: 100%;
}
.edit-button-con {
    position: absolute;
}
.chat-edit-con {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    z-index: 999;
    transform: rotate(90deg);
    align-self: flex-end;

}
.chat-edit-con:hover {
    color: rgba(255, 255, 255, 0.9);
    .edit-button-con {
        display: flex;
    }
}
.edit-button-con {
    display: none;
    position: absolute;
    top: 128%;
    width: max-content;
    padding: 5px;
    gap: 5px;
    height: 25px;
    align-items: center;
    justify-content: space-between;
    background: rgb(62, 22, 23);
    border-radius: 5px;
    transform: rotate(270deg);
    min-width: 40px;
}
.chat-edit-con.active .fa-ellipsis-vertical {
    color: #fff !important;
}

.action.toggle-pin {
    color: rgba(255, 255, 255, 0.9);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.action.toggle-pin i&:hover {
    color: aquamarine;
}
.action.edit-message {
    color: rgba(255, 255, 255, 0.9);
}
.unread-badge {
    min-width: 18px;
    display: inline-block;
    text-align: center;
    margin-left: 7px;
}
.action.toggle-pin i {
    font-size: 15px;
}
.chat-message-header svg {
    width: 15px;
    height: 15px;
}
.autocomplete-suggestions {
    background: #303030;
    border: 1px solid rgb(255 255 255 / 10%);
    position: absolute;
    z-index: 10001;
    width: 100%;
    max-height: 180px;
    overflow-y: auto;
    display: none;
    color: rgb(240 248 255 / 90%);
    font-size: 14px;
    padding: 5px;
}
.autocomplete-suggestions .suggestion {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 5px;
}
.autocomplete-suggestions .suggestion:hover {
    background: #272727;
}
.left-nav-con.chat-con {
    width: 40%;
}
.content-all.chat-content-all {
    width: 60%;
    border-radius: 15px;
    background: #141414;
    overflow: hidden;
    max-height: 90vh;
}
.last-message {
    margin-top: 2px;
    color: #888;
    font-size: 0.9em;
    width: 100%;
    display: flex;
    gap: 10px;
    flex-direction: row;
    align-items: center;
}
.last-message-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.content-block.chat-layer {
    height: 100%;
    border-radius: 5px;
    gap: 20px;
}
.popup-conversation-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 1px solid #353535;
    color: #fff;
    padding: 20px 15px 15px 15px;
}
.popup-conversation-controls a {
    color: #fff;
}
.fa.fa-check-double.conversationControl--icon {
    &:hover {
        filter: invert(58%) sepia(74%) saturate(5362%) hue-rotate(1063deg) brightness(98%) contrast(110%);
    }
}
.popup-conversation-controls a {
    display: flex;
    align-items: center;
    position: relative;
    transition: all 0.2s ease;
    &::after {
        position: absolute;
        content: "";
        width: 0;
        height: 1px;
        left: 0;
        bottom: -1px;
        background: rgba(255, 255, 255, 0.2);
        transition: all 0.2s ease;
    }
    &:hover {
        color: rgba(255, 255, 255, 0.9);
        &:after {
            width: 100%;
            background: rgba(255, 255, 255, 0.9);
        }
    }
}
a#pm-mark-all-read::after {
    display: none;
}
.modal-list-item {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    width: 100%;
    padding: 15px;
}
.pm-popup-dialog:hover {
    .modal-list-item {
        background: #303030;
    }
}
.avatar-modal {
    min-width: 30px;
    min-height: 30px;
    width: 30px;
    height: 30px;
    max-width: 30px;
    max-height: 30px;
}
.modal-pm-messages {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.modal-pm-author {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.modal-pm-author b {
    color: #fff;
}
.modal-pm-item-con {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.modal-item-body {
    max-width: 200px;
    width: 100%;
    display: block;
    max-height: 30px;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-block: 5px;
}
i.fa.fa-check-double.conversationControl--icon:hover {
    color: rgba(255, 255, 255, 0.9);
}
.pm-popup-dialog {
    border-radius: 8px;
}
i.fa-solid.fa-thumbtack.not {
    transform: rotate(90deg);
}
#chat-list {
    display: flex;
    flex-direction: column;
}
.chat-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 20px;
    position: relative;
}
.chat-item:hover {
    background: rgba(225, 29, 32, 0.15);
}
.button-chat-nav.active {
    background: rgba(225, 29, 32, 0.15);
}
.last-message-author {
    color: rgb(240 248 255 / 90%);
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 400;
}
.last-message-date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}
.last-message-body {
    color: rgb(240 248 255 / 70%);
}
.chat-item-con {
    display: flex;
    align-items: center;
    gap: 15px;
    position: absolute;
    bottom: 20px;
    right: 22px;
}
.chat-item-link {
    color: rgb(255 255 255 / 90%);
    font-size: 15px;
    width: 100%;
}
#chat-list li .avatar-nick-trigger .comment__img__avatar {
    width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
}
#chat-list {
    padding: 0;
    margin: 0;
    overflow: auto;
    padding-top: 20px;
    max-height: 100%;
}
#chat-list li {
    list-style: none;
    margin: 0;
    color: #fff;
    padding-left: 20px;
}
.nav-chat-con {
    background: #201f1f;
    border-radius: 7px;
    border: 1px solid rgb(255 255 255 / 10%);
    padding: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}
#mark-all-read {
    color: rgb(255 255 255 / 50%);
}
.chat-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: stretch;
    font-size: 16px;
    line-height: 16px;
    width: 100%;
}
#chat-search {
    height: 40px;
    width: 100%;
    border-radius: 8px;
    border: none;
    background: rgb(33, 33, 33);
    outline: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    position: relative;
    padding-left: 40px;
}
.search-chay-con::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 25px;
    width: 18px;
    aspect-ratio: 1 / 1;
    height: 17px;
    background-repeat: no-repeat;
    background-size: contain;
    object-fit: contain;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='18.000000' height='18.000000' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdesc%3e Created with Pixso. %3c/desc%3e%3cdefs%3e%3cclipPath id='clip2_14'%3e%3crect id='lucide/search' rx='0.000000' width='17.000000' height='17.000000' transform='translate(0.500000 0.500000)' fill='white' fill-opacity='0'/%3e%3c/clipPath%3e%3c/defs%3e%3crect id='lucide/search' rx='0.000000' width='17.000000' height='17.000000' transform='translate(0.500000 0.500000)' fill='%23FFFFFF' fill-opacity='0'/%3e%3cg clip-path='url(%23clip2_14)'%3e%3cpath id='Vector' d='M15.75 15.75L12.49 12.49M8.25 14.25C4.93 14.25 2.25 11.56 2.25 8.25C2.25 4.93 4.93 2.25 8.25 2.25C11.56 2.25 14.25 4.93 14.25 8.25C14.25 11.56 11.56 14.25 8.25 14.25Z' stroke='%23FFFFFF' stroke-opacity='1.000000' stroke-width='2.000000' stroke-linejoin='round' stroke-linecap='round'/%3e%3c/g%3e%3c/svg%3e ");
}
.search-chay-con {
    width: 100%;
    position: relative;
    padding: 20px 15px;
}
.button-chat-nav {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
    gap: 20px;
    color: #fff;
}
.button-chat-nav:hover {
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(225, 29, 32, 0.15);
    svg {
        filter: brightness(1.5);
    }
}
.title-chat-create {
    color: rgb(255 255 255);
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    width: 100%;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.chat-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.chat-form label {
    color: rgb(255 255 255 / 90%);
    font-size: 15px;
}
.chat-form label input[type="checkbox"] {
    margin: 0;
}
.chat-form .form-control {
    width: 100%;
    height: 35px;
    margin-bottom: 6px;
    border-radius: 7px;
    font-size: 15px;
    outline: none;
    transition: border .2s;
    background: #212121;
    border: none;
    padding-left: 10px;
    color: rgba(255, 255, 255, 0.9);
}
.chat-form .form-control:focus {
    border-color: #497cf6;
    background: #393939;
}

#selected-participants {
    margin: 5px 0 5px 0;
    min-height: 10px;
}

/* Кастомные чекбоксы */
.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 15px;
    font-weight: 400;
}

.custom-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.custom-checkbox .checkbox-mark {
    width: 20px;
    height: 20px;
    background: #f4f7fb;
    border: 2px solid #b5c7df;
    border-radius: 5px;
    transition: border-color .18s, background .18s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.custom-checkbox input[type="checkbox"]:checked + .checkbox-mark {
    background: #e11d20;
    border-color: #E11D20;
}
.custom-checkbox .checkbox-mark:after {
    content: "";
    display: none;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    position: absolute;
    left: 6px;
    top: 1px;
}
.custom-checkbox input[type="checkbox"]:checked + .checkbox-mark:after {
    display: block;
}

/* Кнопка */
.chat-form .btn-primary {
    background: #497cf6;
    color: #fff;
    border: none;
    padding: 10px 28px;
    font-size: 16px;
    border-radius: 9px;
    margin-top: 18px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.chat-form .btn-primary:hover {
    background: #395eb8;
}
.select-con {
    display: flex;
    width: 100%;
    position: relative;
    flex-direction: column;
}
#autocomplete-results div { padding: 4px 10px; cursor:pointer;}
#autocomplete-results div:hover { background:#2c2c2c;}
#selected-participants span {
    background: #ffffff26;
    padding: 2px 7px;
    border-radius: 6px;
    display: inline-block;
    color: rgb(255 255 255 / 70%);
    font-size: 14px;
}
#autocomplete-results {
    display: none;
    position: absolute;
    background: #303030;
    border: 1px solid rgb(255 255 255 / 10%);
    z-index: 9999;
    max-height: 200px;
    overflow-y: auto;
    top: 65%;
    width: 100%;
    border-radius: 6px;
    color: rgb(255 255 255 / 90%);
    font-size: 15px;
}

#autocomplete-results::-webkit-scrollbar-track {
    background: transparent;
}

#autocomplete-results::-webkit-scrollbar {
  width: 8px;
  background: rgba(0, 0, 0, 0);
}
#autocomplete-results::-webkit-scrollbar-thumb {
  background: #272727;
  border-radius: 2px;
    border: 3px solid #272727;
}
.layout__menu.mobile {
    display: none;
}
.menu-link.active > a,
.menu-link.submenu-link.active > a {
    color: #fff;
}
.menu-link.active {
    gap: 3px;
    background: rgba(225, 29, 32, 0.15);
    .menu_list__link.par {
        color: #E11D20;
    }
    .menu-img {
        filter: invert(58%) sepia(74%) saturate(5362%) hue-rotate(1063deg) brightness(98%) contrast(110%);
    }
}
.menu_list__link.menu-child-link .menu-img {
    filter: none;
    margin-right: 0;
}
.topic-body {
    width: 100%;
}
.topic__first-comment {
    color: #fff;
}
.topic__first-comment img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 8px;
}
figcaption.attachment__caption {
    display: none;
}
.category-menu {
    padding: 0;
    margin: 0;
}
.menu-link .menu_list__link.par {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 10px !important;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
}

.link-con:hover {
    .menu_list__link.par span {
        color: rgba(225, 29, 32, 1);
    }
    .menu-img {
        filter: invert(58%) sepia(74%) saturate(5362%) hue-rotate(1063deg) brightness(98%) contrast(110%);
    }
}
.menu-link.active .menu_list__link.par i {
    transform: rotate(-180deg);
}

ul.submenu_list.bottom {
    height: fit-content;
    opacity: 1;
    z-index: 5;
    padding: 0;
}
.arrow {
    width: 25px;
    height: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.2);
}
.arrow:hover {
    background: #272727;
}
.link-con {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 5px;
    padding-block: 10px;
    cursor: pointer;
}
ul.submenu_list {
    padding: 0;
}
.category-menu li.menu-link.submenu-link a.menu_list__link.menu-child-link {
    padding-left: 0;
    background: transparent;
}
.like-button:hover {
    background: rgba(225, 29, 32, 0.15);
    color: rgba(225, 29, 32, 1);
    i {
        color: rgba(225, 29, 32, 1);
    }
    span {
        color: rgba(225, 29, 32, 1);
    }
}
.form-send:hover {
    color: rgba(29, 160, 225, 1);
    background: rgba(29, 160, 225, 0.15);
}
.menu-link.active .submenu_list {
    display: block !important;
}
.menu_list__link.menu-child-link.bottom i {
    line-height: 20px;
}
div#create-chat-modal {
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / 69%);
}
.chat-modal {
    position: relative;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 320px;
    height: fit-content;
    background: #272727;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
}
.modal-title {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}
.chat-modal-title {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    font-weight: 500;
}
#close-create-chat {
    background: transparent;
    outline: 0;
    border: 1px solid rgb(255 255 255 / 20%);
    color: rgb(255 255 255 / 20%);
    border-radius: 5px;
    height: 25px;
    width: 25px;
    cursor: pointer;
}
#close-create-chat:hover {
    background: #3d3d3d;
    color: #fff;
}
#close-create-chat i {
    font-size: 16px;
    line-height: 16px;
}
#create-chat-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
#create-chat-form input {
    height: 35px;
    width: 100%;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 7px;
    margin-top: 3px;
    background: #3d3d3d;
    padding-left: 10px;
    color: rgba(255, 255, 255, 0.9);
}
#create-chat-form input:focus {
    outline: 1px solid rgba(255, 255, 255, 0.5);
}
#create-chat-form label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 7px;
    margin-top: 5px;
}
#create-chat-form label input {
    padding: 0;
    margin: 0;
    width: fit-content;
    height: fit-content;
}
#create-chat-submit-btn {
    outline: 0;
    border: none;
    width: 100%;
    cursor: pointer;
}
.modal-check {
    display: flex;
    flex-direction: column;
}
#selected-participants-modal span {
    padding: 5px 10px;
    background: #c5e1ff;
    border-radius: 7px;
}
#selected-participants-modal {
    margin-block: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.participants {
    width: 100%;
    position: relative;
}
#autocomplete-results-modal {
    position: absolute;
    width: 100%;
    background: #3d3d3d;
    border-radius: 7px;
    border: 1px solid rgb(255 255 255 / 10%);
    color: rgb(255 255 255 / 90%);
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 5px;
    max-height: 180px;
    overflow: auto;
}
#autocomplete-results-modal div {
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
}
#autocomplete-results-modal div:hover {
    background: #272727;
}
.message.pinned {
    margin-bottom: 18px;
    padding: 12px;
    border-radius: 10px;
    border-left: 5px solid gold;
    background: #fffbe6;
}
.chat-messages {
    overflow-x: hidden !important;
    padding: 10px;
    /*background: #141414;*/
    min-height: 100px;
    overflow-y: auto;
    height: 100%;
    z-index: 3;
}

.chat-header {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 10px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
textarea#editMessageText {
    background: #2b2b2b;
    border-radius: 6px;
    padding: 5px;
    color: rgb(255 255 255 / 90%);
    font-size: 14px;
}
div#editMessageModal h4 {
    color: rgb(255 255 255 / 90%);
    font-size: 17px;
    font-weight: 400;
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
}
.button-cancel {
    font-size: 14px;
    background: transparent;
    position: absolute;
    top: 10px;
    right: 10px;
}
.button-cancel:hover {
    background: #272727;
}
.chat-message-header .user-suffix {
    display: none;
}
.title-chat {
    margin: 0;
    font-size: 20px;
    color: rgb(255 255 255 / 90%);
    font-weight: 400;
    text-wrap: pretty;
}
.chat-hr {
    margin-block: 10px;
    height: 1px;
    width: 100%;
    background: rgb(255 255 255 / 10%);
}
.chat-edit {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
}
.chat-edit-item {
    position: absolute;
    top: 110%;
    right: 0;
    padding: 10px;
    background: #212121;
    border-radius: 8px;
    width: max-content;
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 99;
}
.chat-edit-item button {
    height: 35px;
    width: 100%;
    border-radius: 5px;
    background: transparent;
    text-align: left;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    padding-inline: 5px;
}
.chat-edit-item button:hover {
    background: #2c2c2c;
}
.chat-edit.active {
    background: #212121;
}
.chat-message-body {
    position: relative;
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.chat-attachment img {
    display: block;
    max-width: 180px;
    max-height: 180px;
    border-radius: 8px;
    box-shadow: 0 2px 8px #0002;
}
.topic__title button.btn.btn-sm.btn-link:hover, button.btn.btn-primary:hover {
    background: transparent;
}
.chat-message {
    overflow: visible;
}
.chat-attachment {
    display: block;
    margin-top: 8px;
    max-width: 200px;
}
.topic_publish_comment .publish-editor {
    justify-content: flex-end;
}
.chat-message {
    border-radius: 10px 10px 10px 0;
    width: 100%;
    float: left;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: flex-end;
    margin-bottom: 10px;
}
.chat-message{
    .chat-edit-con {
        display: none;
    }
}
.chat-message .avatar__con {
    margin-bottom: 6px;
}
.chat-message .comment__img__avatar.avatar-nick-trigger {
    width: 35px;
    min-width: 35px;
    height: 35px;
    min-height: 35px;
    font-size: 17px;
}
/*.chat-message::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: -10px;*/
/*    bottom: -1px;*/
/*    width: 20px;*/
/*    height: 10px;*/
/*    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='277.577637' height='123.000000' viewBox='0 0 277.578 123' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdesc%3e Created with Pixso. %3c/desc%3e%3cdefs/%3e%3cpath id='Прямоугольник 11' d='M277.57 0L161.57 0C161.57 0 148.32 39.25 105.07 70C72.95 92.83 24.29 110.98 1.37 118.81C-0.81 119.55 -0.26 123 2.04 123L277.57 123L277.57 0Z' fill='%23272727' fill-opacity='1.000000' fill-rule='evenodd'/%3e%3c/svg%3e ");*/
/*    background-size: contain;*/
/*    background-repeat: no-repeat;*/
/*    z-index: 0;*/
/*    pointer-events: none;*/
/*}*/
.chat-message.my-message {
    width: 100%;
    position: relative;
    border-radius: 10px 10px 0 10px;
    &::before {
        display: none;
    }
}
.chat-message.my-message .chat-message-header {
    background: rgba(225, 29, 32, 0.15);
}
/*.chat-message.my-message::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    right: -10px;*/
/*    bottom: -1px;*/
/*    width: 20px;*/
/*    height: 10px;*/
/*    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='277.577637' height='123.000000' viewBox='0 0 277.578 123' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdesc%3e Created with Pixso. %3c/desc%3e%3cdefs/%3e%3cpath id='Прямоугольник 10' d='M0 0L116 0C116 0 129.25 39.25 172.5 70C204.61 92.83 253.28 110.98 276.2 118.81C278.37 119.55 277.83 123 275.53 123L0 123L0 0Z' fill='%23272727' fill-opacity='1.000000' fill-rule='evenodd'/%3e%3c/svg%3e ");*/
/*    background-size: contain;*/
/*    background-repeat: no-repeat;*/
/*    z-index: 0;*/
/*    pointer-events: none;*/
/*}*/
.chat-message.pinned-message .avatar__con {
    width: 100%;
    margin-left: 5px;
    &:before {
        display: none;
    }
}
.textarea-con {
    position: relative;
    margin-bottom: 10px;
    min-height: 38px;
    max-height: 160px;
}
.smile-con {
    position: absolute;
    bottom: 0;
    top: 2px;
    right: 60px;
    left: auto;
    height: fit-content;
    margin: auto 0 3px;
}
.smile-con button {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
}
#chat-send-form .publish-editor {
    justify-content: space-between;
}
#smile-picker-panel {
    right: -270%;
    bottom: 155%;
    background: #212121;
    position: absolute;
    border-radius: 10px;
    padding: 10px;
    min-width: 320px;
    max-width: 100%;
    width: max-content;
    flex-direction: column;
    gap: 10px;
}
#smile-picker-search, #smile-picker-search-topic {
    background: #191919;
    border-radius: 8px;
    height: 30px;
    padding-left: 10px;
    color: rgb(255 255 255 / 90%);
    border: 1px solid rgb(255 255 255 / 10%);
}
#smile-picker-search:focus {
    outline: 0;
    border-color: rgba(255, 255, 255, 0.9);
}
.btn.btn-sm.btn-primary {
    color: #fff;
    text-decoration: underline;
}
#chat-send-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    resize: none;
    min-height: 30px;
    max-height: 160px;
    box-sizing: border-box;
    background: #212121;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    padding-right: 90px;
    padding-left: 15px;
    padding-top: 10px;
}

.textarea-con-up {
    position: relative;
    min-height: 30px;
    max-height: 160px;
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: flex-end;
}
input#chat-attachment-input {
    background: #303030;
    padding: 5px;
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.9);
}
.chat-send-tools {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 7px;
    position: relative;
}

.attach-btn {
    background: #212121;
    color: rgb(255 255 255 / 80%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    border: none;
    transition: background 0.18s, color 0.18s;
}

.attach-btn:hover {
    background: #212121;
    color: rgb(224, 29, 32);
}
.cat-con {
    width: 100%;
}
#smile-picker-categories {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0;
    user-select: none;
    cursor: grab;
    padding-bottom: 5px;
    -webkit-overflow-scrolling: touch;
}
#smile-picker-categories::-webkit-scrollbar {
    height: 6px;
    background: #3d3d3d;
}
#smile-picker-categories::-webkit-scrollbar-thumb {
    background: #272727;
    border-radius: 6px;
}
#chat-send-form .btn-success {
    background: transparent;
    border-radius: 100%;
    z-index: 99;
    margin-right: 15px;
    margin-bottom: 8px;
}
#chat-send-form .btn-success svg {
    width: 18px;
    height: 18px;
}
#chat-send-form .btn-success:hover {
    svg path {
        stroke: rgb(225, 29, 32);
    }
}
.textarea-container {
    display: flex;
    align-items: center;
    width: 90%;
    background: #212121;
    border-radius: 8px;
    min-height: 40px;
}
#chat-send-form .publish-editor {
    display: flex;
    background: transparent;
    border-radius: 8px;
    padding: 12px;
    align-items: center;
    position: relative;
    width: 100%;
    border: none;
    justify-content: space-between;
}
#attachment-preview img {
    width: 40px;
    height: 40px;
    background-size: cover;
    object-fit: cover;
    background-position: center center;
    border: 2px solid #3d3d3d;
    border-radius: 5px;
}
#attachment-preview button {
    transition: color 0.15s;
    background: transparent;
    color: #5e0000;
}
#attachment-preview button:hover {
    color: #a00;
}
.chat-preview {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}
#image-viewer-modal {
    position: fixed; z-index: 10000;
    inset: 0;
    background: rgba(25,25,25,0.95);
    display: none;
    align-items: center; justify-content: center;
    transition: background 0.18s;
}
#image-viewer-modal.active { display: flex; }

.image-viewer-img-wrap {
    position: relative;
    max-width: 96vw;
    max-height: 96vh;
    width: 100%;
    height: 100%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
img#image-viewer-img {
    user-select: none;
    cursor: zoom-in;
    background: #222;
    border-radius: 10px;
    max-width: 96vw;
    max-height: 96vh;
    transition: box-shadow 0.14s;
    box-shadow: 0 4px 30px #0009;
}
.image-viewer-close {
    position: absolute; top:12px; right:20px;
    background: rgba(0,0,0,0.55); color: #fff; border: none;
    font-size: 2rem; width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; z-index: 10; line-height: 36px;
}
.chat-container {
    max-height: 100vh;
    overflow: hidden;
}

.pinned-message-bar {
    position: sticky;
    top: 0;
    z-index: 11;
    background: #fffbe7;
    border-bottom: 1px solid #ece18f;
    box-shadow: 0 1px 8px #0001;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 56px;
    padding: 8px 12px;
}
.pm-list {
    font-size: 14px;
    font-weight: 400;
}
.pinned-message-content {
    flex: 1 1 auto;
}

.pinned-dot {
    display: flex;
    width: 5px;
    height: 10px;
    background: rgba(255, 255, 255, 0.9);
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.15s, box-shadow 0.15s;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 3px;
}
.pinned-dot.active {
    opacity: 1;
    background: #da1d20;
}
.pinned-dot:hover {
    opacity: 0.75;
}
.pinned-bar {
    background: #ffe05500;
    padding: 8px 14px;
    min-height: 56px;
    max-height: 56px;
    overflow: hidden;
}
.pinned-item {
  display: flex;
  align-items: center;
  cursor: pointer;
    width: 100%;
    font-size: 12px;
}
.pinned-avatar {
  width: 32px; height: 32px; border-radius: 50%; margin-right: 10px;
}
.pinned-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.pinned-info .user-suffix {
    display: none;
}
.pinned-dots {
    max-height: 30px;
}
.pinned-user { font-weight: bold; }
.pinned-date { color: #bbb; font-size: 0.9em; margin-left: 6px;}
.pinned-text { color: #ccc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 300px;}
.highlighted { background: rgba(0, 100, 204, 0.52) !important; transition: background 0.3s;}

#pinnedSlider {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.pinned-title {
    display: flex;
    gap: 5px;
    align-items: center;
}
.con-chat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    position: relative;
}
.con-chat::after {
    content: "";
    position: absolute;
    width: 40%;
    height: 40%;
    filter: blur(150px);
    background: rgba(225, 29, 32, 0.5);
    bottom: -150px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
}
.form-con {
    display: flex;
    flex-direction: column;
    z-index: 3;
}
ul.message_text {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 10%);
    padding: 10px;
    color: rgb(255 255 255 / 90%);
    margin-bottom: 10px;
    border-radius: 10px;
}
.editor-toolbar {
    flex-wrap: wrap;
}
.nav-con.user-online {
    max-height: 400px;
    overflow: auto;
    min-height: 200px;
}
.trix-button-group.trix-button-group--text-tools,
.trix-button-group.trix-button-group--block-tools,
.trix-button-group.trix-button-group--file-tools,
.trix-button-group.trix-button-group--history-tools{
    display: flex;
    margin-bottom: 10px;
    border: none;
    border-top-color: 0;
    border-bottom-color: 0;
    border-radius: 3px;
}
button.trix-button.trix-button--icon,
button.trix-button.trix-button--icon,
button.trix-button.trix-button--icon.trix-button--icon-attach,
button.trix-button.trix-button--icon.trix-button--icon-undo{
    border-bottom: none;
    background: rgb(255 255 255 / 40%);
    border-radius: 3px;
    color: rgb(255 255 255 / 90%);
}
button.trix-button.trix-button--icon:hover,
button.trix-button.trix-button--icon:hover,
button.trix-button.trix-button--icon.trix-button--icon-attach:hover,
button.trix-button.trix-button--icon.trix-button--icon-undo:hover{
    background: rgb(255 255 255 / 80%);
}
button.trix-button.trix-button--icon:not(:first-child) {
    border-left: none;
}
.trix-button-group {
    gap: 3px;
}
.trix-button-row button {
    min-width: 30px;
    max-width: 30px;
}
.trix-button-row {
    flex-wrap: wrap !important;
}
trix-editor {
    background: #1d1d1d;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgb(255 255 255 / 90%);
}
trix-editor:focus{
    border-color: rgba(255, 255, 255, 0.5) !important;
}
.comment__text.js-comment-text {
    color: rgb(255 255 255 / 90%);
}
figure.attachment.attachment--preview.attachment--png {
    margin: 0;
}
#pinnedBar {
    transition: transform 0.3s cubic-bezier(.4,.2,.6,1), opacity 0.3s;
    will-change: transform, opacity;
}
.sp-quote {
    border-left: 3px solid #99c;
    background: #f7f7fa;
    padding: 8px 16px;
    margin: 10px 0;
    border-radius: 4px;
}
.sp-quote-meta {
    color: #888;
    font-size: 12px;
    margin-bottom: 4px;
}
.sp-quote-body {
    font-size: 14px;
}
.sp-quote-date {
    color: #bbb;
    font-style: italic;
}
.comment-topic pre, .comment__text pre {
    color: rgb(255 255 255 / 70%);
    font-size: 14px;
    background: #424242;
    border-radius: 5px;
    position: relative;
    border: 1px solid rgb(255 255 255 / 10%);
}
.comment-topic pre::after, .comment__text pre::after {
    content: "\f121";
    font-family: "FontAwesome", sans-serif;
    position: absolute;
    top: 0;
    right: 5px;
    font-size: 13px;
}
.tags-autocomplete-picker {
  position: relative;
  margin-bottom: 10px;
}
#tagAutocompleteInput {
  width: 100%;
  padding: 5px 8px;
  border-radius: 12px;
  border: 1px solid #aaa;
  font-size: 15px;
}
.autocomplete-results {
  position: absolute;
  z-index: 20;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  border-radius: 8px;
  margin-top: 2px;
  max-height: 180px;
  overflow-y: auto;

}
.autocomplete-item {
    padding: 5px 5px;
    cursor: pointer;
    margin: 5px;
    border-radius: 5px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
}
#tagAutocompleteResults {
    background: #272727;
}
.autocomplete-item:hover {
    background: rgb(255 255 255 / 10%);
    color: rgb(255 255 255 / 90%);
}
.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.tag-chip-selected {
  background: #272727;
    margin: 2px;
    padding: 2px 10px 2px 9px;
    border-radius: 14px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.tag-chip-remove {
  margin-left: 6px;
  color: #d33;
  font-weight: bold;
  cursor: pointer;
}
input[type="hidden"] + label,
label[for^="id_topic_hash"],
label[for^="id_comment_hash"] {
    display: none !important;
}
.filter-con {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1000;
    justify-self: center;
    background: rgb(7 7 7 / 62%);
}
.filter-con.open {
    opacity: 1;
    display: flex;
}
.filter-inner {
    width: 500px;
    max-height: min-content;
    border-radius: 10px;
    flex-direction: column;
    align-items: flex-start;
    margin: auto;
    background: #212121;

}
.custom-multiselect-dropdown {
    background: #fff;
    box-shadow: 0 6px 24px rgba(0,0,0,.10);
    border-radius: 8px;
    padding: 7px 0;
    min-width: 210px;
    z-index: 99;
}
.dropdown-option.cat-parent label { font-weight: bold; }
.dropdown-option.cat-child label { color: #889; }
.chip { background:#f5f6fa; margin:2px; padding:2px 10px 2px 9px; border-radius:14px; font-size:13px; display:inline-flex; align-items:center;}
.chip-remove { margin-left:7px; cursor:pointer; color:#c00; }

.exclude-categories-select {
    min-width: 260px;
    position: relative;
}
#categoryMultiselect {
    position: relative;
}
#categoryDropdownTrigger {
    display: flex;
    align-items: center;
    cursor: pointer;
    border: 1px solid rgb(255 255 255 / 10%);
    padding: 7px 12px;
    border-radius: 7px;
    background: #272727;
    min-height: 38px;
    gap: 8px;
    color: rgb(255 255 255 / 60%);
    height: 35px;
}
#categoryDropdownTriggerText {
    color: rgb(255 255 255 / 90%);
    font-size: 15px;
}
#dropdownArrow {
    margin-left: auto;
    font-size: 14px;
    user-select: none;
}
.popup-title {
    width: 100%;
    background: #e11d20;
    color: rgb(255 255 255 / 90%);
    font-size: 15px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px 10px 0 0;
}
.popup-close {
    background: transparent;
    cursor: pointer;
    font-size: 15px;
    color: rgb(255 255 255 / 80%);
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    &:hover {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.9);
    }
}
.popup-body {
    display: flex;
    flex-direction: column;
    padding: 15px;
    gap: 5px;
    width: 100%;
}
.exclude-categories-select label, .tags-autocomplete-picker label {
    font-size: 14px;
    color: rgb(255 255 255 / 90%);
}
.exclude-categories-select {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#categoryDropdown {
    display: none;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 110%;
    background: rgb(39 39 39);
    box-shadow: rgba(0, 0, 0, 0.11) 0px 4px 24px;
    z-index: 9999;
    max-height: 340px;
    overflow-y: auto;
    border-radius: 7px;
}
.dropdown-option.cat-parent {
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
}
.dropdown-option.cat-parent label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.dropdown-option.cat-child label {
    padding-left: 22px;
    color: #889;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
}
.dropdown-option.cat-child label input,
.dropdown-option.cat-parent label input{
    margin: 0;
    width: 16px;
    height: 16px;
}
span.chip {
    background: #272727;
    margin: 2px;
    padding: 2px 10px 2px 9px;
    border-radius: 14px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
#selectedExcludeCats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.tags-autocomplete-picker input {
    border: 1px solid rgb(255 255 255 / 10%) !important;
    background: #272727;
    outline: 0;
    height: 40px;
    border-radius: 7px !important;
    color: rgba(255, 255, 255, 0.9);
}
.tags-picker {
    margin-top: 10px;
}
.error-tags-con {
    padding: 10px;
    border: 1px solid #0064cc;
    border-radius: 7px;
}
.min-tags-hint {
    font-size: 15px;
    color: rgb(255 255 255 / 80%);
    font-weight: 400;
}
.error-tags-con.error-tags-con {
    font-size: 15px;
    font-weight: 500;
}
.topic-inline-reply {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}
.comment__img__avatar {
    border: 1px solid rgb(255 255 255 / 10%);
}
.chat-back {
    display: none;
}
.nav-con.user.desc-only,
.nav-con.user-online.desc-only,
.nav-con.categories.desc-only,
.nav-con.new-topic.desc-only,
.nav-con.contacts.desc-only{
    display: none;
}
#smile-picker-grid, #smile-picker-grid-topic {
    max-height: 410px;
    overflow: auto;
}
.user-card-modal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 99999;
    display: none;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}
.avatar-nick-trigger {
    cursor: pointer;
    position: relative;
    height: fit-content;
}
.user-card-modal-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
#user-card-modal-content {
    width: 40rem;
    height: 400px;
    background: rgb(20, 20, 20);
    border: 1px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    margin: 10%;
    display: flex;
    align-items: center;
    z-index: 99999999;
    justify-content: center;
}
.user-card-modal-inner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.user-card-modal-top {
    height: 120px;
    display: flex;
    align-items: center;
    padding-inline: 20px;
    justify-content: space-between;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
}
.user-card-avatar .comment__img__avatar {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    font-size: 30px;
}
.user-card-modal-top-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}
.user-card-modal-top-profile span.user-nickname {
    font-size: 18px;
}
.user-card-modal-top-profile .user-suffix {
    opacity: 1;
    max-width: 250px;
    text-wrap: wrap;
    i.fa.fa-circle {
        display: none;
    }
}
.user-card-actions .button-custom {
    margin: 0;
}
.user-card-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 15px;
    span {
        color: rgba(255, 255, 255, 0.9);
        font-size: 15px;
    }
}
.user-modal-info {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.user-card-inner {
    display: flex;
    width: 100%;
    padding: 15px;
    flex-direction: column;
    gap: 40px;
}
.user-card-row {
    padding: 10px 15px;
    background: #3b3b3b;
    color: rgb(240 248 255 / 80%);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0);
    &:hover {
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
}
.user-card-row i {
    font-size: 18px;
    line-height: 18px;
}
.user-modal-title {
    font-size: 15px;
    color: rgb(255 255 255 / 70%);
}
.textarea-con-comment {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: stretch;
}
#smile-picker-panel-topic {
    background: #373737;
    border: 1px solid rgb(221 221 221 / 10%);
    box-shadow: 0 4px 20px #0002;
    padding: 10px;
    flex-direction: column;
    max-height: 220px;
    overflow-y: hidden;
    position: absolute;
    bottom: 110%;
    right: 0;
    border-radius: 9px;
    z-index: 1000;
    width: 630px;
}

.smile-btn img {
    pointer-events: none;
}
#smile-picker-categories-topic {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    overflow: auto;
    padding-bottom: 5px;
}
#smile-picker-search-topic {
    margin-block: 5px;
    min-height: 30px;
}
.smileys {
    width: 30px !important;
    height: 30px !important;
}
.smile-picker-panel {
    right: -5px;
    bottom: 125%;
    position: absolute;
    min-width: 655px;
    max-width: 100%;
    width: max-content;
    flex-direction: column;
    background: rgb(61, 61, 61);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.1);
    border-image: initial;
    border-radius: 10px;
    padding: 10px;
    gap: 10px;
    max-height: 240px;
}
.smile-picker-grid {
    max-height: 410px;
        overflow: auto;
}
.smile-picker-search {
    height: 30px;
    padding-left: 10px;
    color: rgba(255, 255, 255, 0.9);
    background: rgb(57, 57, 57);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.1);
    border-image: initial;
    border-radius: 5px;
}
.smile-picker-categories {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0px;
    user-select: none;
    cursor: grab;
    padding-bottom: 5px;
    gap: 5px;
}
.user-card-button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 15px;
    border-radius: 7px;
    width: fit-content;
    transition: all 0.3s ease;
    &:hover {
        background: #232323;
        i {
            transition: all 0.3s ease;
            color:#E11D20;
        }
    }
}
.user-last-topic {
    font-size: 15px;
    color: rgb(255 255 255 / 90%);
    &:hover {
        text-decoration: underline;
    }
}
.user-online-item .user-suffix {
    display: none;
}
.user-suffix i.fa.fa-circle {
    font-size: 5px;
}
ul.comment__info__date.js-move-comment-checkbox-list {
    display: none;
    align-items: center;
    gap: 0;
}
#notif-icon .far.fa-bell {
    font-size: 19px;
    line-height: 19px;
}
#private-messages-header .far.fa-comment {
    font-size: 19px;
    line-height: 19px;
}
.spirit figure {
    margin: 0;
}
.content-block {
    height: calc(100vh - var(--header-height) - 40px) !important
}
.badge.bg-warning {
    color: rgb(255 255 255 / 50%);
    border-radius: 5px;
    font-size: 10px;
    padding: 0 5px;
}
.chat-message-header .badge.bg-warning {
    color: rgb(255 255 255 / 50%);
    border-radius: 5px;
    font-size: 10px;
    padding: 0 5px;
    margin: 0;
}
.chat-message-header .badge.bg-info {
    color: rgb(255 255 255 / 50%);
    border-radius: 5px;
    font-size: 10px;
    padding: 0 5px;
    margin: 0;
}
.textarea-con-comment .smile-con {
    position: absolute;
    bottom: 0;
    top: 2px;
    right: 20px;
    left: auto;
    height: fit-content;
    margin: auto 0 3px;
}
.textarea-con-comment .smile-picker-panel {
    right: -20px;
    bottom: 125%;
    position: absolute;
    min-width: 305px;
    max-width: 100%;
    width: max-content;
    flex-direction: column;
    background: rgb(61, 61, 61);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.1);
    border-image: initial;
    border-radius: 10px;
    padding: 10px;
    gap: 10px;
    max-height: 240px;
}

.rank-progress-right {
    text-align: right;
}
.rank-progress-main {
    flex: 1;
    position: relative;
    margin: 0 12px;
}
.rank-progress-bg {
    height: 4px;
    border-radius: 3px;
    background: linear-gradient(90deg, #333 0%, #900 60%, #333 100%);
    position: relative;
    overflow: hidden;
}
.rank-progress-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    background: linear-gradient(90deg, #f33 60%, transparent 100%);
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.rank-progress-center {
    position: absolute;
    left: 50%;
    top: -22px;
    transform: translateX(-50%);
    color: #fff;
    font-size: 1.2rem;
    font-family: inherit;
    font-weight: 500;
    text-shadow: 0 1px 4px #6008;
    pointer-events: none;
}
.rank-progress-bar-bg {
    position: relative;
    background: radial-gradient(circle, rgb(193 38 38 / 70%) 0%, rgb(201 29 29 / 59%) 20%, rgb(13 13 13) 80%);
    border-radius: 11px;
    opacity: 0;
    height: 0;
    padding: 0;
    z-index: -10;
}
.rank-card:hover {
    transition: all 0.4s ease-in;
    .rank-progress-bar-bg {
        opacity: 1;
        height: fit-content;
        padding: 10px 15px;
        z-index: 2;
    }
}

.rank__title {
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
}
.rank-progress-bar {
    position: relative;
    margin: 10px 0 0;
    height: 5px;
    background: rgba(225, 29, 32, 0.15);
    border-radius: 2em;
}
.user-groups-page {
    padding-bottom: 20px;
}

.rank__progress_title {
    position: absolute;
    left: 50%;
    top: -2em;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
}
.menu_list__link.desc.popup_header {
    position: relative;
    font-size: 16px;
    color: rgb(255, 255, 255);
    font-weight: 400;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 0;
    padding-inline: 15px;
    &:hover {
        background: rgba(225, 29, 32, 0.15);
        color: rgb(225, 29, 32);
    }
}
.popup_header_con {
    display: none;
    position: absolute;
    top: 100%;
    background: #212121;
    padding: 15px 0;
    border-radius: 15px;
    left: 0;
    min-width: 250px;
    cursor: auto;
}
.popup_header_con.active {
    display: block;
}
.staff-list {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
    overflow: auto;
}
.staff-block {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    width: 100%;
}
.staff-title {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    padding-inline: 15px;
}
.staff-item {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding: 10px 15px;
    width: 100%;
    &:hover {
        background: rgba(225, 29, 32, 0.15);
    }
}
.popup_header_con .staff-list .comment__img__avatar {
    width: 35px;
    height: 35px;
    max-width: 35px;
    max-height: 35px;
    min-width: 35px;
    min-height: 35px;
    font-size: 18px;
}
.staff-text {
    font-size: 13px;
    color: rgb(255 255 255 / 50%);
}
.staff-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.popup_header_con .button.button-custom {
    width: -webkit-fill-available;
    margin-inline: 15px;
    font-size: 16px;
    border-radius: 90px;
}
.popup_header_con .button.button-custom:hover {
    background: #fff;
    color: rgb(20, 20, 20);
}
.rank-card {
    background: #141414;
    border-radius: 15px;
    margin: 16px 0;
    padding: 20px 17px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: all 0.1s ease-in-out;
}
.rank-header-text {
    display: flex;
    flex-direction: column;
}
.rank-header__title {
    display: flex;
    gap: 10px;
    align-items: center;
}
.rank-header { display: flex; justify-content: space-between; align-items: center; }
.rank-page__title {
    color: #fff;
    font-weight: 400;
    font-size: clamp(18px, 4vw, 24px);
    margin-top: 0;
    margin-bottom: 10px;
}
.rank-min-score { color: #aaa; font-size: 15px; }
.rank-desc { color: #888; margin: 6px 0 10px; }
.rank-permissions { display: flex; flex-wrap: wrap; gap: 8px; }
.perm-btn {
    padding: 6px 12px;
    border-radius: 6px;
    background: #282828;
    color: #aaa;
    font-size: 14px;
    display: flex;
    align-items: center;
}
.perm-yes {
    background: rgba(225, 29, 32, 0.15);
    color: rgb(255 255 255 / 80%);
}
.perm-no { background: #222; color: #888; opacity: 0.75; }
.perm-ico { margin-right: 6px; font-size: 17px; }
.perm-addon {
    color: rgb(225, 29, 32);
    margin-left: 5px;
    font-size: 14px;
    font-weight: 600;
}
span.rank-title {
    color: rgb(255 255 255 / 50%);
    font-size: 14px;
}
.popup_header_con {
  pointer-events: none;
}
.popup_header_con.active {
  pointer-events: auto;
}
#popupLink {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.popup-close-btn, .popup__menu_user {
    display: none;
}
.categories {
    margin-top: 10px;
}
.spirit .menu_list li:last-child {
    margin-bottom: 0;
    width: 100%;
}


@media screen and (max-width: 1440px) {
    .content-all.chat-content-all {
        max-height: 100%;
    }
}



@media screen and (max-width: 1025px) {
    .menu-mobile {
        display: none;
    }
    .nav-con {
        border-radius: 13px;
        gap: 15px;
    }
    .menu__new_topic, .nav-con .menu-link, .secondaryContent.user-sidebar {
        padding-inline: 10px;
    }
    .content-block {
        gap: 5px;
        margin-top: 10px;
    }
    .spirit .comment__img__avatar {
        width: 45px;
        height: 45px;
        min-height: 45px;
        min-width: 45px;
    }
    span.userList__username {
        font-size: 14px;
    }
    .user-online-item {
        gap: 0;
    }
    ul.userList__list {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin: 0;
    }
    .userList__list .userList__item {
        margin: 0;
    }
    .left-nav-con {
        width: 27%;
    }

    .content-all {
        width: 73%;
    }

    .topic-comment-con {
        padding-block: 7px;
        gap: 5px;
    }

    .layout__topics__topic {
        gap: 5px;
        border-radius: 15px;
        padding: clamp(10px, 4vw, 20px);
    }

    .layout__topics {
        gap: 7px;
    }

    .comments__reply__img .comment__img__avatar {
        width: 45px;
        height: 45px;
    }
    .layout__article .layout__menu {
        margin-bottom: 0px;
        padding: 8px;
        border-radius: 15px;
    }
    button.btn.btn-sm.btn-link svg {
        width: 30px;
        height: 30px;
    }
    .comment-topic {
        width: 100%;
    }
    .comment-topic > ul {
        padding-left: 20px;
        margin: 0;
    }
    h1.topic-title {
        font-size: 22px;
        margin: 5px;
    }
    .content-all .headline {
        margin-bottom: 5px;
    }
    .comment__text__poll__actions {
        flex-wrap: wrap;
    }
    svg.user-sidebar__stat-label {
        width: 20px;
        height: 20px;
    }
    .detail-info-con {
        gap: 10px;
    }
    .custom-paginator {
        margin: 0;
    }
    .comment__footer.js-tabs-container {
        margin-top: 10px;
    }
    .detail-sub {
        flex-wrap: wrap;
    }
    .menu_list__link.menu-child-link.bottom svg {
        width: 18px;
        height: 18px;
    }
    .menu_list__link.menu-child-link.bottom {
        align-items: center;
    }
    .menu-bottom {
        margin-top: 10px;
    }
    .user-sidebar__avatar {
        width: 40px;
        height: 40px;
        margin-top: 4px;
    }
    .comment-topic-con {
        max-height: 300px;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .form-profile-update .field input {
        width: 100%;
    }
    .nav-chat-con {
        flex-direction: column;
        gap: 5px;
        align-items: stretch;
    }
    .content-all.chat-content-all {
        width: 70%;
    }
    .content-block {
        height: calc(100vh - var(--header-height) - 40px) !important;
    }
    .content-all.chat-content-all {
        max-height: 100%;
        border-radius: 15px;
        padding: 0;
    }
    textarea#editMessageText {
        min-height: 150px;
        max-height: 350px;
    }
    form#editMessageForm {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .title-chat-create {
        font-size: 17px;
        padding-bottom: 5px;
        margin-bottom: 5px;
    }
    .trix-button-group.trix-button-group--history-tools:last-child {
        margin: 0;
    }
    .chat-back {
        display: none;
    }
    #smile-picker-grid, #smile-picker-grid-topic {
        max-height: 410px;
        overflow: auto;
    }
    .spirit .profile__img__avatar.no-pic {
        font-size: 63px;
        line-height: 63px;
    }
    .profile__img__avatar {
        min-width: 90px;
        min-height: 90px;
        width: 90px;
        height: 90px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        object-fit: cover;
        border-radius: 100%;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .profile__img__avatar.no-pic {
        max-height: 90px;
        max-width: 90px;
    }
    .search-con {
        width: 220px;
    }
    .spirit .header__tabs {
        margin-right: 15px;
    }



}

@media screen and (max-width: 767px) {
    .content-all {
        width: 100%;
    }
    .content-block {
        height: calc(100vh - var(--header-height) - 10px) !important;
    }
    .attach-btn {
        min-width: 40px;
        min-height: 40px;
        max-width: 40px;
        max-height: 40px;
    }
    #attachment-preview img {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
    }
    .chat-preview span {
        font-size: 11px !important;
        color: #888;
        line-height: 12px;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .textarea-container {
        width: 85%;
    }
    #attachment-preview {
        width: 100%;
        max-width: 90vw;
        position: fixed;
        bottom: 16vh;
        left: 12px;
        background: #212121;
        padding: 5px;
        border-radius: 8px;
        overflow: auto;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .layout__article .layout__menu {
        flex-direction: column;
        gap: 10px;
        border-radius: 7px;
    }
    .layout__menu.mobile .menu__new_topic {
        width: 100%;
        display: flex;
        gap: 15px;
        justify-content: space-between;
    }
    .comments__reply__img .comment__img__avatar {
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
    }
    .user-suffix {
        display: none;
    }
    .topic-title-inner {
        align-items: center;
        flex-direction: row;
        gap: 5px;
        flex-grow: 1;
    }
    .topic-title-con {
        width: 100%;
    }
    .layout__topics .comment-topic-con .comment__img__avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        color: initial;
    }
    .header__logo_wrapper {
        display: none;
    }
    ul.comment__reply__actions__list {
        display: flex;
        gap: 3px;
    }
    ul.comment__reply__actions__list li {
        border-radius: 3px;
        width: 30px;
        height: 30px;
    }
    .publish-editor {
        justify-content: space-between;
        padding: 5px;
    }
    .form-publish {
        gap: 5px;
    }
    .time-pub {
        text-wrap-mode: wrap;
        display: flex;
        align-items: baseline;
        gap: 5px;
    }
    .topic-title-con .fa.fa-circle {
        font-size: 5px;
        color: var(--st-text-topic-item);
        display: block;
    }
    ul.breadcrumb_nav {
        gap: 3px;
    }
    .head-line-con h1 {
        font-size: 20px;
        font-weight: 400;
        line-height: 20px;
    }
    .head-line-con {
        gap: 5px;
        flex-wrap: wrap;
    }
    .detail-sub {
        flex-direction: row;
        row-gap: 0;
        flex-wrap: wrap;
        column-gap: 10px;
    }
    .content-all .headline {
        margin-bottom: 0px;
    }
    .content-all .comments_list {
        padding: 10px;
        border-radius: 10px;
    }
    ul.breadcrumb_nav {
        margin-top: 0;
        margin-bottom: 0;
    }
    .head-line-con > h1 {
        font-size: 22px;
        font-weight: 500;
    }
    .comment__text__poll__actions {
        flex-wrap: wrap;
    }
    .comment-topic {
        width: 100%;
    }
    .comment-topic > ul {
        padding: 0;
        margin: 0;
    }
    .con-profile-update {
        padding: 7px;
        background: #272727;
        border-radius: 15px;
        border: 1px solid rgb(255 255 255 / 10%);
    }
    .menu-mobile {
        display: block;
        background: transparent;
        min-width: 30px;
        min-height: 30px;
        width: 30px;
        height: 30px;
        border-radius: 3px;
    }
    .menu-mobile svg {
        width: 100%;
        height: 100%;
        background-size: cover;
        object-fit: cover;
    }
    .header {
        padding-block: 5px;
    }
    .comment__img__avatar.no-pic {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header-con {
        gap: 20px;
    }
    #pm-modal {
        left: 0;
        width: 100%;
        position: fixed;
        top: 0;
        right: 0;
        margin: auto;
        max-width: 96%;
        background: rgb(20, 20, 20);
        height: 100%;
    }
    .left-nav-con.chat-con {
        width: 100%;
    }
    .title-chat {
        width: 50%;
        font-size: 14px;
        line-height: 14px;
    }
    .chat-edit {
        width: 35px;
        height: 35px;
    }
    .nav-con-chat {
        padding: 5px;
        border-radius: 6px;
        max-height: 92vh;
    }
    .left-nav-con.left-nav-con-open {
        height: 100%;
    }
    .left-nav-con.chat-con.left-nav-con-open {
        max-height: 100%;
        background: rgb(33, 33, 33);
    }
    .username-header, #user-menu-icon .fa-chevron-down {
        display: none;
    }
    .bell-content {
        left: 0;
        right: 0;
        width: 96%;
        margin: auto;
        position: fixed;
        top: 60px;
    }
    .spirit .layout__header {
        position: fixed;
        top: 0;
    }
    .spirit .layout {
        margin-top: 50px;
    }
    .left-nav-con {
        padding-top: 20px;
        left: -700px;
        opacity: 0;
        width: 0;
        position: fixed;
        top: 50px;
        background: #272727;
        padding-inline: 5px;
    }
    .left-nav-con-open {
        left: 0;
        width: 100%;
        opacity: 1;
        z-index: 99;
    }
    .header__search.header__search--desktop.search-con {
        display: none;
    }
    .nav-con {
        padding: 4px;
        border-radius: 9px;
        gap: 15px;
    }
    #id_q {
        padding-left: 10px;
    }
    .search-result-item {
        border-radius: 5px;
        padding: 5px;
    }
    .search-result-item a {
        font-size: 14px;
    }
    .live-search-results {
        position: relative;
    }
    form#sortForm {
        width: 100%;
        justify-content: space-between;
        display: flex;
    }
    .profile__img__avatar.no-pic {
        max-height: 50px;
        max-width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.9);
    }
    .layout__profile {
        padding: 7px;
    }
    .profile-button {
        flex-direction: column;
        gap: 5px;
        align-items: center;
        margin-top: 20px;
    }
    .comments_list__comment.no-footer {
        flex-wrap: wrap;
        flex-direction: row;
    }
    ul.paginator.custom-paginator__list {
        margin-top: 10px;
    }
    .comment-list-profile {
        padding: 5px;
    }
    .search-con-mobile {
         display: block;
    }
    .layout__menu.mobile {
        display: flex;
        margin-block: 10px;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .layout__menu.mobile .button.button-custom {
        background: #E11D20;
        margin: 0;
        width: 100%;
        max-width: 48%;
        height: 35px;
        color: rgb(255, 255, 255);
    }
    .layout__menu.mobile .button.button-custom:hover {
        background: #fff;
        color: rgb(20, 20, 20);
    }
    .layout__menu.mobile .menu__new_topic .button {
        height: 35px;
        width: 100%;
        font-size: 13px;
        font-weight: 500;
        padding-inline: 10px;
    }
    .layout__topics__topic {
        border-radius: 7px;
    }
    .topic-body {
        width: 100%;
    }
    .topic-list-comment {
        width: 100%;
        border-top: 1px solid rgb(255 255 255 / 5%);
        border-bottom: 1px solid rgb(255 255 255 / 5%);
        padding-block: 10px;
    }
    .publish-editor {
        justify-content: flex-end;
    }
    .categories-mobile {
        width: 100%;
        height: fit-content;
    }
    .categories-mobile {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .categories-mobile .nav-con {
        border: none;
    }
    .categories-mobile .nav-con.search-con-mobile {
        padding: 0;
        margin-bottom: 20px;
    }
    #id_q {
        height: 35px;
        width: 100%;
    }
    input.button.search-button {
        width: 45px;
        height: 33px;
    }
    .categories-mobile-close {
        height: 0;
        z-index: -2;
        opacity: 0;
        display: none;
    }
    .categories-mobile-open {
        height: fit-content;
        z-index: 5;
        opacity: 1;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .spirit .menu_list__link {
        padding: 3px 0;
    }
    .categories-mobile .menu_list__link {
        padding-left: 10px;
    }
    .categories-mobile .menu_list__link.menu-child-link {
        margin-inline: 5px;
    }
    .nav-con.new-topic, .nav-con.categories {
        display: none;
    }
    .menu_list__link.menu-child-link.bottom i {
        font-size: 13px;
        line-height: 13px;
    }
    .nav-con.user-online {
        order: 3;
    }
    .autocomplete-suggestions {
        width: 290px;
    }
    .chat-message-header {
        flex-wrap: wrap;
        border-bottom: 1px solid rgb(255 255 255 / 10%);
        justify-content: end;
        padding-bottom: 5px;
    }
    .editor-toolbar i.separator {
        display: none !important;
    }
    .nav-con.user-online {
        max-height: 350px;
        overflow: auto;
    }
    .pinned-bar {
        max-height: 75px;
    }
    .pinned-dots {
        max-height: 45px;
        overflow: auto;
        width: 10px;
    }
    button.btn.btn-sm.btn-link svg {
        width: 22px;
        height: 30px;
    }
    .head-line-con .fa.fa-thumb-tack {
        font-size: 14px;
        line-height: 14px;
    }
    .spirit .comments_list__comment {
        padding-left: 10px;
    }
    .spirit .topic__comments {
        padding: 5px 10px;
        font-size: 13px;
        max-height: 30px;
    }
    li.comment-like {
        font-size: 13px;
        max-height: 30px;
    }
    #filter-bar {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .reset-sort {
        margin-left: auto;
    }
    .filter-con {
        width: 95vw;
    }
    button.btn.button-custom.save {
        width: 100%;
    }
    .chat-empty-stub {
        display: none !important;
    }
    .nav-chat {
        height: 68vh;
    }
    #chat-list {
        height: 100%;
        margin-top: 15px;
    }
    i.fa-solid.fa-thumbtack,
    i.far.fa-bookmark{
        font-size: 16px;
        margin-right: 5px;
    }
    #smile-picker-panel {
        position: absolute;
        bottom: 175%;
        height: fit-content;
        width: 95%;
        margin: auto;
        max-height: 600px;
        left: -240px;
    }

    .chat-back {
        width: 45px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        border-radius: 3px;
        background: #e01d20;
        color: rgb(255 255 255 / 80%);
        font-size: 20px;
        line-height: 20px;
    }
    .chat-back i {
        user-select: none;
    }
    .nav-con-chat.desc {
        display: none;
    }
    .content-all.chat-content-all .nav-chat {
        display: block;
    }
    .nav-con.user.desc-only, .nav-con.user-online.desc-only, .nav-con.categories.desc-only, .nav-con.new-topic.desc-only, .nav-con.contacts.desc-only {
        display: flex;
    }
    .content-all.chat-content-all {
        width: 100%;
    }
    .header-login-con .comment__img__avatar {
        margin: 0;
    }
    .header-login-con {
        padding: 5px 5px 5px 5px;
    }
    .spirit .comment__img__avatar {
        width: 35px;
        height: 35px;
        min-height: 35px;
        min-width: 35px;
    }
    .user-card-modal-top-profile {
        margin-bottom: 10px;
    }
    .user-card-modal-top {
        flex-direction: column;
        padding: 15px;
        height: fit-content;
    }
    .user-card-modal-top-profile {
        width: 100%;
    }
    #user-card-modal-content {
        margin: 2%;
    }
    .user-card-actions {
        width: 100%;
    }
    .user-card-actions a {
        width: 100%;
    }
    .user-card-info {
        padding-inline: 10px;
        span {
            font-size: 13px;
        }
    }
    .user-last-topic {
        font-size: 14px;
    }
    .user-card-inner {
        padding: 10px;
        gap: 20px;
    }
    .user-modal-info {
        gap: 8px;
        justify-content: space-between;
    }
    .user-card-button {
        padding: 7px 10px;
    }
    .user-card-nick .user-suffix {
        display: flex;
    }
    .nav-con_home {
        color: #fff;
        display: flex;
        gap: 15px;
        align-items: baseline;
        font-size: 15px;
        padding: 5px;
        background: #272727;
        border-radius: 8px;
        flex-direction: column;
    }
    .menu_list__link.mob {
        cursor: pointer;
        color: #fff;
        gap: 15px;
        display: flex;
        align-items: baseline;
        width: 100%;
    }
    .menu_list__link.desc.popup_header {
        display: none;
    }
    .topic-title-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
    .spirit .header__tabs {
        margin-right: 0;
    }
    .menu__new_topic, .nav-con .menu-link, .secondaryContent.user-sidebar {
        padding-inline: 0px;
    }
    #popupLink {
        display: none;
    }
    .button-login, .button-login-transparent, .button-not {
        font-size: 14px;
        height: 37px;
        min-width: 125px;
    }
    .popup-close-btn {
        display: block;
        background: transparent;
        align-self: flex-end;
        margin: 20px 15px 0 0;
    }
    .spirit .header__tabs_content {
        background: #141414;
    }
    .header__tabs_content__tab {
        padding-bottom: 20px;
        width: 100%;
        border-radius: 0;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        background: #141414;
        height: 100%;
    }
    .popup__menu_user .avatar-nick-trigger {
        min-width: 80px;
        min-height: 80px;
    }
    .popup__menu_user {
        align-self: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        margin-bottom: 40px;
    }
    .popup__menu_user .user-sidebar__rank-title {
        margin-top: 20px;
        margin-bottom: 5px;
    }
    .bell-content {
        max-height: 100%;
    }
    .spirit .header__tab__bell ul li {
        border-radius: 8px;
        background: rgb(33, 33, 33);
    }
    .spirit .header__tab__bell {
        padding-inline: 10px;
    }
    .header__tab__nav .menu_list .menu_list__link {
        padding: 15px 20px;
        border-radius: 8px;
        justify-content: flex-end;
        flex-direction: row-reverse;
        gap: 15px;
        background: #212121;
    }
    .spirit .menu_list {
        gap: 15px;
        height: 100%;
    }
    li.logout__mob {
        margin-top: auto;
    }
    .menu_list__link.js-post.logout {
        flex-direction: row;
        justify-content: space-between;
    }
    .pm-popup-list {
        margin-inline: 10px;
    }
    .modal-list-item {
        padding: 10px;
        background: rgb(33, 33, 33);
        border-radius: 8px;
    }
    .rank-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .rank-card {
        padding: 10px 7px;
    }
    .rank-page__sub {
        font-size: 14px;
        line-height: 14px;
    }
    nav.breadcrumbs {
        margin-top: 15px;
    }
    span.user-nickname {
        justify-content: flex-start;
    }
    .popup_header_con_mobile {
        width: 100%;
        display: none;
    }
    .popup_header_con_mobile.open {
        display: flex;
    }
    .staff-title {
        font-size: 14px;
        padding-inline: 30px;
    }
    .staff-item {
        padding: 10px 30px;
    }
    .popup__menu_user .user-nickname.avatar-nick-trigger {
        justify-content: center;
    }



}