.topic-container {
    margin: 30px 0;
    padding: 30px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    background-color: var(--portlet);
    box-shadow: var(--shadow)
}

.topic-article {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--text-200-color);
    padding: 30px;
    border-radius: 20px;
}

.topic-header {
    order: -1
}

.topic-headbar {
    background-color: var(--text-100-color);
    height: 70px;
    border-radius: 5px;
    margin: 15px 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    flex-wrap: wrap
}

.topic-title {
    font-size: 30px;
    font-family: var(--font2);
    color: var(--dark)
}

.topic-user {
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
    gap: 0 15px;
    align-content: center;
    line-height: 100%;
    font-style: normal
}

.topic-user img {
    width: 50px;
    height: 50px;
    grid-row: 1/3;
    border-radius: 100px
}

.topic-user b {
    color: var(--heads);
    font-size: 16px
}

.topic-user time {
    font-size: 14px;
    color: var(--text-400-color);
    display: flex;
    align-items: center;
    gap: 10px
}

.topic-user time:before {
    content: '\e91c';
    content: "\e2b9";
    font-family: 'lucide';
}

.topic-category {
    background-color: #FFF;
    color: var(--text-400-color);
    padding: 10px 12px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: .2s
}

a.topic-category:before {
    content: '\e91e';
    content: "\e060";
    font-family: 'lucide';
}

.topic-category:hover:before {
    color: var(--primary-color)
}

.topic-category:hover {
    color: var(--heads)
}

.topic-content {
    font-family: var(--font2);
    color: var(--dark);
    font-size: 20px
}

.topic-content p {
    margin: 0 20px
}

.topic-attsh {
    border-top: 1px dotted var(--shades);
    margin-top: 30px;
    padding-top: 30px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    border-radius: 2px
}

.topic-attsh>b {
    color: var(--heads);
    font-size: 16px;
    width: 100%;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px
}

.topic-attsh>b:before {
    content: '\e915';
    font-family: icons;
    font-weight: 400
}

.topic-attsh figure {
    background-color: var(--shades);
    width: 100px;
    height: 100px;
    margin: 0
}

.topic-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    flex-wrap: wrap;
    gap: 15px
}

.topic-count button,
.topic-count a {
    background-color: var(--text-300-color);
    font-size: 16px;
    font-weight: 400;
    color: var(--portlet);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 5px;
    padding: 12px 15px;
    flex-grow: 1;
    border-radius: 100px;
}

button.toco-likes {
    background-color: var(--secondary-color);
    color: #FFF;
    font-family: sans-serif
}

button.toco-likes.liked {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color)
}

button.toco-togoogle {
    background-color: var(--portlet);
    color: var(--text-400-color)
}

button.delete-topic {
    color: #bd3e3e;
    background: #FFF;
    border: 1px solid;
}

.topic-count {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap
}

.toco-likes:before {
    content: '\e911';
    font-family: icons;
    font-weight: 400;
    font-size: 22px
}

.toco-comments:before {
    content: '\e912';
    content: "\e40d";
    font-family: 'lucide';
    font-weight: 400;
    font-size: 18px
}

.toco-togoogle:before {
    margin: 5px;
    content: '\e92a';
    font-family: icons;
    font-weight: 400;
    font-size: 16px
}

.topic-status:before {
    content: '\e913';
    content: "\e0ba";
    font-family: 'lucide';
    font-weight: normal;
}

.topic-status {
    color: var(--heads);
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    gap: 5px
}

.topic-comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 15px;
    flex-wrap: wrap
}

.topic-solution.topic-comment {
    background-color: var(--green-light-color);
    border-color: var(--green-border-color);
    border-width: 2px;
}

.tocm-user {
    font-style: normal;
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
    gap: 5px 15px;
    align-content: center;
    line-height: 100%;
    position: relative
}

.raag-date:before {
    content: '\e91c';
    content: "\e2b9";
    font-family: 'lucide';
}

.raag-date {
    display: flex;
    align-items: center;
    gap: 10px
}

.admin-avatar:before {
    content: '\e961';
    content: "\e241";
    font-family: 'lucide';
    position: absolute;
    bottom: -7px;
    right: 35px;
    font-size: 16px;
    color: var(--green-color);
    width: 25px;
    height: 25px;
    background-color: var(--green-light-color);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.tocm-avatar {
    grid-row: 1/3;
    border-radius: 100px;
    overflow: hidden;
    cursor: pointer
}

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

.tocm-username {
    color: var(--heads);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer
}

.rate-agent {
    font-size: 12px;
    color: var(--text-400-color);
    display: flex;
    align-items: center
}

.answer-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.topic-solution .rate-agent {
    color: var(--text-400-color);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 10px
}

.tocm-head {
    display: block;
    font-size: 20px;
    color: var(--heads);
    margin-bottom: 20px
}

.tocm-content {
    font-family: var(--font2);
    font-size: 20px;
    color: var(--dark);
    margin-top: 15px;
    line-height: 1.5em
}

.tocm-content img {
    max-height: 50vh;
    margin: 0 auto
}

.topic-comment {
    background-color: var(--text-100-color);
    border: 0 solid var(--shadow-color);
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 20px
}

.mark-answer {
    padding: 15px;
    border-radius: 3px;
    font-size: 16px
}

.topic-images {
    margin: 30px auto
}

.topic-images-wrap {
    height: 100%;
    gap: 10px
}

.topic-images span {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--text-light);
    cursor: pointer;
    border-radius: 3px;
}

.topic-images span img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: 0.1s;
}

.topic-images span:hover img {
    transform: scale(1.05);
}

.toimg-grid-2 {
    max-height: 500px;
    max-width: min(calc(100vw - 100px), 1024px)
}

.toimg-grid-2 .topic-images-wrap {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    max-height: inherit;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr
}

.toimg-grid-3 {
    height: 100vh;
    max-height: 500px;
    width: max-content;
    max-width: min(calc(100vw - 100px), 1024px)
}

.toimg-grid-3 .topic-images-wrap {
    display: grid;
    grid-template-columns: 75fr 25fr;
    grid-template-rows: auto auto
}

.toimg-grid-3 .topic-images-wrap span:first-of-type {
    grid-row: 1/3
}

.toimg-grid-4 {
    height: 100vh;
    max-height: 500px;
    width: max-content;
    max-width: 100%
}

.toimg-grid-4 .topic-images-wrap {
    display: grid;
    grid-template-columns: 75fr 25fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.toimg-grid-4 .topic-images-wrap span:first-child {
    grid-row: 1/4
}

.image-tool__caption {
    display: none !important
}

.toimg-grid-1 {
    max-height: 500px;
    max-width: min(calc(100vw - 100px), 1024px)
}

.toimg-grid-1 .topic-images-wrap {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    max-height: inherit;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr
}

.sidebar {
    width: 450px;
    flex-shrink: 0
}

.sidehead {
    border-bottom: 1px solid var(--shades);
    padding-bottom: 5px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.sidehead h2 {
    color: var(--heads);
    font-size: 18px
}

.sidehead a {
    line-height: 100%;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 700;
    color: var(--text-400-color);
    transition: .2s
}

.sidehead a:hover {
    background-color: var(--shades);
    color: var(--heads)
}

img.reply-avatar {
    border-radius: 100px
}

.reply-wrap {
    display: flex;
    gap: 20px;
    align-items: center
}

.reply-wrap .reply-textbox {
    width: 100%
}

.comuque-reply-form.active .reply-wrap {
    align-items: flex-start
}

.comuque-reply-form.active .comuque-reply-form-foot {
    display: block
}

a.noanswer-link {
    display: flex;
    align-items: center;
    gap: 10px
}

ul.top-empos {
    display: flex;
    flex-direction: column;
    gap: 20px
}

ul.top-empos li {
    display: grid;
    grid-template: auto 1fr/auto 1fr;
    gap: 5px 10px
}

ul.top-empos li img {
    grid-row: 1/3;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    background-color: var(--shades);
    object-fit: cover
}

ul.top-empos li b {
    color: var(--dark);
    padding-top: 7px
}

.empo-rate span {
    font-family: var(--font2);
    position: relative;
    width: 5em;
    height: 1em
}

.empo-rate span:before,
.empo-rate span:after {
    content: "\e920\e920\e920\e920\e920";
    font-family: icons;
    position: absolute;
    top: 0;
    inset-inline-start: 0
}

.empo-rate span:after {
    content: "\e91f\e91f\e91f\e91f\e91f";
    max-width: var(--rate);
    overflow: hidden;
    color: var(--green-color)
}

.empo-rate {
    display: flex;
    align-items: center;
    gap: 5px
}

.empo-rate u {
    text-decoration: none
}

.not-inited {
    max-width: 300px;
    overflow: hidden
}

@media screen and (max-width: 768px) {
    article.topic-article {
        border: none;
        padding: 0;
        border-radius: 0;
    }

    .topic-container {
        padding: 0;
    }
}