@charset "UTF-8";.body a,.body button {
    outline: 0
}

.body input::-webkit-inner-spin-button,.body input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.body input[type=number] {
    -moz-appearance: textfield
}

.body .text-muted {
    color: #666!important;
    color: var(--color-text-muted)!important
}

.body .btn:not([class*=btn-outline]) {
    color: #000;
    color: var(--color-text-color)
}

.body .btn.btn-danger,.body .btn.btn-info,.body .btn.btn-primary,.body .btn.btn-secondary,.body .btn.btn-success,.body .btn.btn-warning {
    color: #fff
}

.body .btn.btn-primary {
    background-color: var(--color-primary-theme);
    border-color: var(--color-primary-theme-border)
}

.body .btn-mana {
    background-color: #fff;
    background-color: var(--color-bg-main);
    border-color: #bbb;
    border-color: var(--color-border-outer)
}

.body .btn-mana:hover {
    background-color: #eee;
    background-color: var(--color-bg-focus);
    border-color: #ddd;
    border-color: var(--color-border-inner)
}

.body .btn-outline-arca {
    border-color: #bbb;
    border-color: var(--color-border-outer);
    color: var(--color-text-color)
}

.body .btn-outline-arca:hover {
    border-color: #ddd;
    border-color: var(--color-border-inner)
}

.body .badge-success {
    background-color: #3d414d;
    background-color: var(--color-bg-badge);
    border: 1px solid var(--color-border-badge)
}

.body .card {
    border: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    padding: 1rem;
    border-radius: 6px
}

.body input,.body select,.body textarea {
    background-color: #fff;
    background-color: var(--color-bg-input);
    color: #000;
    color: var(--color-text-color)
}

.body input:focus,.body select:focus,.body textarea:focus {
    background-color: #fff;
    background-color: var(--color-bg-input);
    color: #000;
    color: var(--color-text-color)
}

.body .input-group-text {
    background-color: #eee;
    background-color: var(--color-bg-focus);
    color: #000;
    color: var(--color-text-color)
}

.body .form-control:focus,.body .input-group-text,.body input,.body select,.body textarea {
    border-color: #bbb;
    border-color: var(--color-border-outer)
}

.body .dropdown-item {
    color: #000;
    color: var(--color-text-color)
}

.body .dropdown-item:hover {
    background-color: #eee;
    background-color: var(--color-bg-focus)
}

.body .dropdown-item:focus {
    background-color: #0275d8
}

.body .dropdown-menu {
    color: #000;
    color: var(--color-text-color);
    border-color: #bbb;
    border-color: var(--color-border-outer);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
    border-radius: 3px;
    background-color: #fff;
    background-color: var(--color-bg-dropdown)
}

.body .dropdown-menu.left {
    left: 0!important;
    right: auto!important
}

.body .dropdown-menu.left::before {
    left: 5px;
    right: auto
}

.body .dropdown-menu.left::after {
    left: 5px;
    right: auto
}

.body .dropdown-menu .dropdown-item:hover {
    color: #000;
    color: var(--color-text-color)
}

.body .dropdown-menu .dropdown-item .badge {
    min-width: 1.2rem;
    border: 1px solid var(--color-border-outer);
    font-weight: 400
}

.body .dropdown-divider {
    border-color: #bbb;
    border-color: var(--color-border-outer)
}

.body .modal .close {
    color: #000;
    color: var(--color-text-color)
}

.body .modal-header {
    border-color: #bbb;
    border-color: var(--color-border-outer)
}

.body .modal-content {
    color: #000;
    color: var(--color-text-color);
    background-color: #fff;
    background-color: var(--color-bg-main)
}

.body .modal-footer {
    border-color: #bbb;
    border-color: var(--color-border-outer)
}

.body .text-strike {
    text-decoration: line-through
}

.body .fs-1 {
    font-size: 2.5rem!important
}

.body .fs-2 {
    font-size: 2rem!important
}

.body .fs-3 {
    font-size: 1.75rem!important
}

.body .fs-4 {
    font-size: 1.5rem!important
}

.body .fs-5 {
    font-size: 1.25rem!important
}

.body .fs-6 {
    font-size: 1rem!important
}

.body .form-inline label {
    min-width: 2.5rem;
    margin-left: .75rem;
    margin-right: .3rem;
    margin-bottom: 0
}

@media screen and (max-width: 575px) {
    .body .form-inline label {
        margin-left:0
    }
}

.body .form-inline .form-group:first-of-type label {
    margin-left: 0
}

.body .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle
}

.body .form-control:disabled,.body .form-control[readonly] {
    background-color: #fff;
    background-color: var(--color-bg-main);
    cursor: not-allowed;
    opacity: .5
}

.body .table {
    color: #000;
    color: var(--color-text-color)
}

.body .table td,.body .table th {
    padding: .4rem .6rem;
    border-color: #ddd;
    border-color: var(--color-border-inner)
}

.body .table tbody tr:last-of-type td {
    border-bottom: 1px solid;
    border-color: #ddd;
    border-color: var(--color-border-inner)
}

.body .pagination-wrapper {
    margin-top: .5rem
}

@media screen and (max-width: 575px) {
    .body .navbar-expand .navbar-nav .nav-link {
        padding-right:.4rem
    }
}

.body .alert-leaf {
    border-color: #e7ce96
}

@media screen and (max-width: 575px) {
    .body .dropdown-toggle::after {
        display:none
    }
}

.body .dropdown-toggle.no-caret::after {
    display: none
}

.body video {
    vertical-align: middle
}

.body pre {
    color: inherit
}

.body .article-write .write-body .fr-wrapper {
    box-sizing: content-box
}

.body hr {
    border-top-color: #ddd;
    border-top-color: var(--color-border-inner)
}

@media(prefers-color-scheme: dark) {
    html:not(.theme-light) .body .alert-danger,html:not(.theme-light) .body .alert-dark,html:not(.theme-light) .body .alert-info,html:not(.theme-light) .body .alert-light,html:not(.theme-light) .body .alert-primary,html:not(.theme-light) .body .alert-secondary,html:not(.theme-light) .body .alert-success,html:not(.theme-light) .body .alert-warning {
        background-color:#383b40;
        border-color: var(--color-border-inner);
        color: var(--color-text-color)
    }

    html:not(.theme-light) .body hr {
        border-top-color: #5a5a64;
        border-top-color: var(--color-border-inner)
    }

    html:not(.theme-light) .body .close {
        text-shadow: none;
        color: #fff
    }
}

html.theme-dark .body .alert-danger,html.theme-dark .body .alert-dark,html.theme-dark .body .alert-info,html.theme-dark .body .alert-light,html.theme-dark .body .alert-primary,html.theme-dark .body .alert-secondary,html.theme-dark .body .alert-success,html.theme-dark .body .alert-warning {
    background-color: #383b40;
    border-color: var(--color-border-inner);
    color: var(--color-text-color)
}

html.theme-dark .body hr {
    border-top-color: #5a5a64;
    border-top-color: var(--color-border-inner)
}

html.theme-dark .body .close {
    text-shadow: none;
    color: #fff
}

.body .ad {
    padding: 0!important;
    margin: .5rem auto;
    border: 0!important;
    width: 728px;
    height: 90px;
    overflow: hidden;
    position: relative
}

.body .ad img,.body .ad video {
    width: 100%;
    height: 100%
}

.body .right-sidebar .ad {
    width: 300px;
    height: 600px
}

.body .article-body>.ad {
    display: none
}

@media screen and (max-width: 767px) {
    .body .board-article-list .ad,.body .board-summary .ad,.body .included-article-list .ad {
        width:320px;
        height: 100px
    }

    .body .right-sidebar>.ad {
        width: 0;
        height: 0;
        display: none
    }
}

@media screen and (max-width: 450px) and (min-width:300px) {
    .body .board-article-list .ad,.body .board-summary .ad,.body .included-article-list .ad {
        margin-left:-1rem;
        width: calc(100% + 2rem);
        min-height: 31.25vw
    }

    .body .article-body>.ad {
        display: block;
        width: 300px;
        height: 250px;
        margin: 1em auto 0
    }
}

.body .ads-img {
    margin: 10px 0
}

.body .ads-img-320 {
    width: 320px;
    height: 100px
}

.body .ads-img-728 {
    width: 728px;
    height: 90px
}

.body .ad .a-badge {
    position: absolute;
    top: 0;
    right: 0;
    height: 12px;
    margin: 0;
    box-sizing: content-box
}

.body .ad .a-badge.sponsored {
    font: 11px Arial;
    padding: 1px 2px;
    color: #bbb;
    pointer-events: none
}

.body .ad .a-badge.adservice {
    cursor: pointer;
    border: 1px solid #269ce9;
    font: 700 11px Arial;
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
    background-color: #2b80b7;
    width: 50px;
    padding: 2px 6px;
    color: #fff
}

.body .noti-alert {
    background-color: #fff;
    background-color: var(--color-bg-main);
    display: inline-block;
    position: fixed;
    float: right;
    width: 24rem;
    opacity: 0;
    right: 1rem;
    bottom: -6rem
}

.body .noti-alert .content a {
    display: block
}

@keyframes highlight-comment-info-fade {
    0% {
        background-color: var(--color-highlight-color)
    }

    100% {
        background-color: var(--color-bg-focus)
    }
}

.body .board-article .edit-menu {
    padding: .35rem .75rem;
    background-color: #fff;
    background-color: var(--color-bg-main);
    text-align: right;
    font-size: .9em
}

.body .board-article .edit-menu .left {
    float: left
}

.body .board-article .edit-menu:empty {
    display: none
}

.body .board-article .edit-menu:after {
    content: '';
    clear: both;
    display: block
}

.body .board-article .edit-menu .dropdown-menu {
    background-color: #fff;
    background-color: var(--color-bg-dropdown)
}

.body .board-article .edit-menu .dropdown-menu .dropdown-item:hover {
    color: #000;
    color: var(--color-text-color)
}

.body .board-article .article-wrapper {
    overflow: auto;
    margin-top: .5rem
}

@media screen and (max-width: 575px) {
    .body .board-article .article-wrapper {
        margin-left:-1rem;
        margin-right: -1rem
    }
}

.body .board-article .article-wrapper .user-block {
    display: inline-block
}

.body .board-article .article-wrapper .user-block .btn-block-user {
    padding: 0 .3rem;
    margin-top: -.3rem
}

.body .board-article .article-head {
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer)
}

.body .board-article .article-head .title-row {
    padding: .5rem .75rem;
    font-size: 1.1rem;
    border-bottom: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    background-color: #eee;
    background-color: var(--color-bg-focus)
}

.body .board-article .article-head .title-row .article-stats {
    position: absolute;
    margin-top: -1.8rem;
    margin-left: -.5rem
}

.body .board-article .article-head .title-row .article-stats span.bubble {
    padding: .4rem .8rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 1rem
}

.body .board-article .article-head .title-row .article-stats span.live {
    background-color: var(--deal-status-live)
}

.body .board-article .article-head .title-row .article-stats span.end {
    background-color: #bababa
}

.body .board-article .article-head .title-row .title {
    display: inline-block
}

.body .board-article .article-head .title-row .title.close-deal {
    text-decoration: line-through
}

.body .board-article .article-head .title-row .title.ion-android-star:before {
    color: #e99f27
}

.body .board-article .article-head .title-row .title .category-badge {
    margin: 0
}

.body .board-article .article-head .title-row .category {
    display: inline-block;
    float: right
}

.body .board-article .article-head .title-row .category .label {
    line-height: 1.1em;
    font-size: .7em
}

.body .board-article .article-head .info-row {
    padding: .35rem .75rem .3rem;
    border-bottom: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    font-size: .9rem;
    overflow: hidden
}

.body .board-article .article-head .info-row:last-of-type {
    border-bottom: none
}

.body .board-article .article-head .info-row .member-info {
    display: inline-block
}

.body .board-article .article-head .info-row .member-info .avatar {
    display: inline-block
}

.body .board-article .article-head .info-row .member-info .avatar img {
    width: 1rem;
    height: 1rem
}

@media screen and (max-width: 575px) {
    .body .board-article .article-head .info-row .member-info {
        display:block;
        margin-bottom: .25rem
    }
}

.body .board-article .article-head .info-row .article-info {
    display: inline-block;
    float: right;
    font-size: .8rem;
    line-height: 1.4rem
}

.body .board-article .article-head .info-row .article-info .head {
    margin-right: .3rem
}

.body .board-article .article-head .info-row .article-info .dropdown-menu {
    background-color: #fff;
    background-color: var(--color-bg-dropdown)
}

.body .board-article .article-head .info-row .article-info .dropdown-menu .dropdown-item:hover {
    color: #000;
    color: var(--color-text-color)
}

.body .board-article .article-head .info-row .info-prevent-delete {
    font-size: .8rem;
    text-align: center;
    clear: both
}

.body .board-article .article-head .info-row .sep:before {
    margin: 0 .2em
}

.body .board-article .article-head .info-row .head {
    margin-right: .3rem;
    font-weight: 600
}

@media screen and (max-width: 575px) {
    .body .board-article .article-head .info-row {
        float:none;
        display: block
    }

    .body .board-article .article-head .info-row .date {
        display: block
    }

    .body .board-article .article-head .info-row .date .sep:before {
        display: none
    }
}

.body .board-article .article-body {
    padding: .8rem;
    word-break: break-all;
    overflow-x: auto
}

.body .board-article .article-body table.article-options {
    border-radius: 4px;
    border: 1px solid var(--deal-table-border)
}

.body .board-article .article-body table.article-options tbody tr td {
    font-size: .9rem;
    border: 0 solid transparent;
    border-bottom: 1px solid var(--deal-table-border)
}

.body .board-article .article-body table.article-options tbody tr td.displayName {
    background-color: var(--color-bg-table)
}

.body .board-article .article-body table.article-options tbody tr td.close-deal {
    text-decoration: line-through
}

.body .board-article .article-body table.article-options tbody tr td.close-deal p,.body .board-article .article-body table.article-options tbody tr td.close-deal span {
    opacity: .4
}

.body .board-article .article-body table.article-options tbody tr:first-child td {
    border-radius: 4px 0 0 0
}

.body .board-article .article-body table.article-options tbody tr:last-child td {
    border: 0 solid transparent;
    border-radius: 0 0 0 4px
}

.body .board-article .article-body p {
    margin: 0;
    line-height: 2
}

.body .board-article .article-body .cut-row {
    border-top: 2px dashed;
    border-bottom: 2px dashed;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    padding: .75rem;
    text-align: center;
    margin: 2rem -.75rem
}

.body .board-article .article-body .article-link a {
    color: #666;
    color: var(--color-text-muted)
}

.body .board-article .article-body .article-content video:focus {
    outline: 0
}

.body .board-article .article-body .article-content video.video-passive {
    cursor: pointer
}

.body .board-article .article-body .article-content [href$=".gif?type=orig"] {
    position: relative;
    display: inline-block
}

.body .board-article .article-body .article-content [href$=".gif?type=orig"]:after {
    position: absolute;
    bottom: .3rem;
    right: .3rem;
    content: 'GIF';
    font-size: .8rem;
    background: rgba(0,0,0,.4);
    color: #fff;
    font-weight: 700;
    padding: .3rem .4rem;
    line-height: .8rem;
    border-radius: .2rem
}

.body .board-article .article-body .article-content iframe {
    border: none
}

.body .board-article .article-body .article-content iframe.arca-vote {
    display: block;
    margin: 2em auto;
    width: 100%;
    max-width: 40em;
    height: 150px;
    border-radius: 5px;
    box-shadow: 0 0 5px -3px rgba(0,0,0,.1),0 3px 6px -4px rgba(0,0,0,.1)
}

.body .board-article .article-body .article-content iframe.instagram,.body .board-article .article-body .article-content iframe.safeframe,.body .board-article .article-body .article-content iframe.tiktok,.body .board-article .article-body .article-content iframe.tweet {
    width: 100%;
    max-width: 40em;
    border-radius: 5px;
    overflow: hidden
}

.body .board-article .article-body .article-content iframe.twitch {
    border-radius: 5px;
    overflow: hidden
}

.body .board-article .article-body .article-content iframe[src^="https://www.youtube.com"] {
    aspect-ratio: 16/9;
    min-width: 300px
}

.body .board-article .article-body .article-content img.arca-emoticon {
    max-width: 100px;
    max-height: 100px
}

.body .board-article .article-body .vote-area {
    margin: 2rem 0 .5rem;
    text-align: center;
    clear: both
}

.body .board-article .article-body .vote-area .itemForm {
    display: inline-block
}

.body .board-article .article-body .vote-area .itemForm:first-child {
    margin-right: 5px
}

.body .board-article .article-body .vote-area .itemForm:nth-child(2) {
    margin-left: 5px
}

.body .board-article .article-body .vote-area .item {
    display: inline-block;
    text-align: center;
    border: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    background-color: #fff;
    background-color: var(--color-bg-main);
    color: #000;
    color: var(--color-text-color);
    border-radius: 5px;
    min-width: 4rem;
    padding: .5rem 1.3rem;
    position: relative
}

.body .board-article .article-body .vote-area .item .icon:before {
    display: block;
    font-size: 3rem;
    margin-bottom: .3rem
}

.body .board-article .article-body .vote-area .item:last-of-type {
    margin-right: 0
}

.body .board-article .article-body .vote-area .item:hover {
    border-color: #1671bc;
    text-decoration: none
}

.body .board-article .article-body .vote-area .item.already {
    border: 1px solid;
    border-color: #007bff;
    border-color: var(--color-btn-hover);
    outline: 1px solid;
    outline-color: #007bff;
    outline-color: var(--color-btn-hover);
    cursor: default
}

.body .board-article .article-body .vote-area .unusable:before {
    content: "❌";
    position: absolute;
    top: 0;
    right: 0;
    font-size: .3rem
}

.body .board-article .article-body .pull-xs-right {
    margin-top: -.85rem;
    float: right
}

.body .board-article .article-body .article-link {
    text-align: right;
    font-size: .9rem;
    margin: -.5rem -.5rem 0 0
}

.body .board-article .article-body .article-link a {
    letter-spacing: -.5px;
    text-decoration: none
}

.body .board-article .article-content a,.body .board-article .fr-view a {
    color: #0275d8;
    color: var(--color-link-color)
}

.body .board-article .article-content a:focus,.body .board-article .article-content a:visited,.body .board-article .fr-view a:focus,.body .board-article .fr-view a:visited {
    color: #0275d8;
    color: var(--color-link-color)
}

.body .board-article .article-content a:not([href]),.body .board-article .fr-view a:not([href]) {
    color: inherit
}

.body .board-article .article-content a:before,.body .board-article .fr-view a:before {
    padding: 0 .15em;
    color: #fff;
    font-family: Ionicons!important
}

.body .board-article .article-content a.invalid,.body .board-article .fr-view a.invalid {
    color: red!important
}

.body .board-article .article-content a.invalid:before,.body .board-article .fr-view a.invalid:before {
    background: red;
    content: "\f100"
}

.body .board-article .article-menu {
    font-size: 1.2rem;
    padding: .5rem .75rem;
    border-top: 1px solid;
    border-color: #ddd;
    border-color: var(--color-border-inner)
}

.body .board-article .article-menu .btn {
    height: 2rem
}

.body .board-article .article-menu .btn.btn-mana:hover {
    background-color: #007bff;
    background-color: var(--color-btn-hover);
    border-color: #007bff;
    border-color: var(--color-btn-hover);
    color: #fff
}

.body .board-article .article-menu #imageToZipBtn {
    z-index: 1;
    position: relative
}

.body .board-article .article-menu #imageToZipBtn .download-progress {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 0%;
    height: 100%;
    background-color: #363a3b;
    z-index: -1;
    transition-duration: .2s;
    mix-blend-mode: difference
}

.body .board-article #comment:target {
    animation: none
}

.body .board-article .article-comment .newcomment-alert {
    border: 2px solid var(--color-bg-navbar);
    border-radius: 6px;
    padding: .3rem;
    text-align: center;
    text-decoration: none;
    animation: opacity-target-fade-in 1s
}

.body .board-article .article-comment .newcomment-alert.re-event {
    animation: opacity-target-fade-out-in 1s
}

.body .board-article .article-comment .newcomment-alert .text {
    color: var(--color-text-color);
    font-size: 1rem;
    margin: 0 auto;
    padding: .5rem;
    text-decoration: none;
    cursor: pointer
}

.body .board-article .article-comment .title {
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    padding: .5rem .75rem;
    font-size: 1.2rem;
    transition: opacity .3s
}

.body .board-article .article-comment .title.batch-comment-action {
    top: 0;
    right: 0;
    left: 0
}

.body .board-article .article-comment .title.hidden {
    opacity: 0;
    pointer-events: none
}

.body .board-article .article-comment .list-area {
    padding: .75rem;
    overflow: hidden;
    position: relative
}

.body .board-article .article-comment .list-area.checkbox-mode .batch-comment-checkbox {
    display: inline-flex
}

.body .board-article .article-comment .list-area.checkbox-mode .comment-item {
    padding-left: 2rem
}

.body .board-article .article-comment .list-area .batch-comment-checkbox {
    position: absolute;
    left: .75rem;
    display: none
}

.body .board-article .article-comment .list-area .removeCommentIds {
    vertical-align: middle;
    margin-top: .5rem
}

@media screen and (max-width: 575px) {
    .body .board-article .article-comment .list-area .removeCommentIds {
        left:10px!important
    }
}

.body .board-article .article-comment .list-area .comment-item {
    width: 100%;
    margin-bottom: .9rem;
    word-break: break-all;
    transition: padding-left .5s
}

@media screen and (max-width: 767px) {
    .body .board-article .article-comment .list-area .comment-item {
        min-width:inherit;
        display: block;
        width: 100%
    }
}

.body .board-article .article-comment .list-area .comment-item:target .content .info-row {
    animation: highlight-comment-info-fade 2.5s;
    animation-timing-function: ease-out
}

.body .board-article .article-comment .list-area .comment-item .avatar {
    display: inline-block
}

.body .board-article .article-comment .list-area .comment-item .avatar img {
    width: 1rem;
    height: 1rem
}

.body .board-article .article-comment .list-area .comment-item .content {
    border: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    font-size: .95rem
}

.body .board-article .article-comment .list-area .comment-item .content span.ion-android-arrow-dropup-circle {
    position: absolute;
    color: var(--color-link-color);
    margin-left: -1.75rem;
    font-size: 1.2em
}

.body .board-article .article-comment .list-area .comment-item .content .link-card-link {
    text-decoration: none
}

.body .board-article .article-comment .list-area .comment-item .content .link-card {
    background-color: var(--color-bg-link-card)
}

.body .board-article .article-comment .list-area .comment-item .content .link-card:hover {
    background-color: var(--color-link-card-focus);
    cursor: pointer
}

.body .board-article .article-comment .list-area .comment-item .content .link-card .oembed-area {
    position: relative;
    padding-bottom: 56.25%
}

.body .board-article .article-comment .list-area .comment-item .content .link-card .oembed-area iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none
}

.body .board-article .article-comment .list-area .comment-item .content .link-card .link-card-thumbnail-wrapper {
    width: 25%;
    height: 8rem;
    background-image: var(--image-fallback-link-card);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-clip: border-box;
    border-radius: 10px;
    overflow: hidden
}

.body .board-article .article-comment .list-area .comment-item .content .link-card .link-card-thumbnail-wrapper * {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--color-bg-link-card-thumbnail)
}

.body .board-article .article-comment .list-area .comment-item .content .link-card .link-card-thumbnail {
    width: 100%;
    height: 100%
}

.body .board-article .article-comment .list-area .comment-item .content .link-card .link-card-content {
    width: 75%
}

.body .board-article .article-comment .list-area .comment-item .content .link-card .link-card-link {
    color: var(--color-link-color);
    overflow: hidden;
    white-space: nowrap;
    word-wrap: normal;
    text-overflow: ellipsis
}

.body .board-article .article-comment .list-area .comment-item .content .link-card .link-card-title {
    color: var(--color-text-color);
    overflow: hidden;
    white-space: nowrap;
    word-wrap: normal;
    text-overflow: ellipsis
}

.body .board-article .article-comment .list-area .comment-item .content .link-card .link-card-description {
    color: var(--color-text-color);
    opacity: 50%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3
}

@media screen and (max-width: 575px) {
    .body .board-article .article-comment .list-area .comment-item .content .link-card .link-card-thumbnail-wrapper {
        width:50%
    }

    .body .board-article .article-comment .list-area .comment-item .content .link-card .link-card-content {
        width: 100%
    }

    .body .board-article .article-comment .list-area .comment-item .content .link-card .link-card-description {
        -webkit-line-clamp: 1
    }

    .body .board-article .article-comment .list-area .comment-item .content .link-card .link-card-container {
        flex-direction: column!important
    }
}

.body .board-article .article-comment .list-area .comment-item .content .info-row {
    padding: .2rem .5rem;
    border-bottom: 1px dashed;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    font-size: .85rem;
    overflow: hidden;
    background-color: #eee;
    background-color: var(--color-bg-focus)
}

.body .board-article .article-comment .list-area .comment-item .content .info-row .right {
    float: right;
    display: flex;
    flex-wrap: wrap
}

.body .board-article .article-comment .list-area .comment-item .content .info-row .right .sep::before {
    margin: 0 .4rem
}

.body .board-article .article-comment .list-area .comment-item .content .info-row .author {
    position: relative;
    z-index: 0
}

.body .board-article .article-comment .list-area .comment-item .content .info-row .author:after {
    position: absolute;
    z-index: -1;
    left: 0;
    top: 70%;
    height: 25%;
    width: 100%;
    background-color: var(--color-user-highlight);
    content: " "
}

.body .board-article .article-comment .list-area .comment-item .content .info-row-rating {
    border-top: 1px dashed;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    border-bottom: none
}

.body .board-article .article-comment .list-area .comment-item .content .info-row-rating .rating {
    border: 1px solid #ccc;
    float: right;
    margin: 0;
    padding: .2rem;
    font-weight: 700
}

.body .board-article .article-comment .list-area .comment-item .content .message {
    padding: .5rem;
    position: relative;
    overflow: hidden
}

.body .board-article .article-comment .list-area .comment-item .content .message.has-more {
    max-height: 8rem
}

.body .board-article .article-comment .list-area .comment-item .content .message.has-more .btn-more {
    display: block!important
}

.body .board-article .article-comment .list-area .comment-item .content .message a {
    color: #0275d8;
    color: var(--color-link-color)
}

.body .board-article .article-comment .list-area .comment-item .content .message a:focus,.body .board-article .article-comment .list-area .comment-item .content .message a:visited {
    color: #0275d8;
    color: var(--color-link-color)
}

.body .board-article .article-comment .list-area .comment-item .content .message .text {
    display: inline
}

.body .board-article .article-comment .list-area .comment-item .content .message .text pre {
    display: inherit;
    font-size: .9rem;
    font-family: inherit;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.1rem;
    color: #000;
    color: var(--color-text-color)
}

.body .board-article .article-comment .list-area .comment-item .content .message .modified {
    font-size: .7rem
}

.body .board-article .article-comment .list-area .comment-item .content .message .btn-more {
    display: none;
    background-color: #eee;
    background-color: var(--color-bg-focus);
    font-weight: 700;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: .15rem 0 0;
    font-size: .85rem
}

.body .board-article .article-comment .list-area .comment-item .content .message .emoticon-wrapper {
    width: 100px;
    height: 100px;
    display: inline-block
}

.body .board-article .article-comment .list-area .comment-item .content .message .emoticon-wrapper img,.body .board-article .article-comment .list-area .comment-item .content .message .emoticon-wrapper video {
    width: 100%;
    height: 100%;
    vertical-align: top
}

.body .board-article .article-comment .list-area .comment-item .content .message-best .best {
    padding: 0 .3rem;
    font-size: .8em
}

.body .board-article .article-comment .list-area .comment-item.filtered .content .info-row .right,.body .board-article .article-comment .list-area .comment-item.filtered .content .info-row .right a,.body .board-article .article-comment .list-area .comment-item.filtered .content .message .text pre {
    color: #666;
    color: var(--color-text-muted)
}

.body .board-article .article-comment .list-area .edit-form {
    margin-top: 1rem
}

.body .board-article .article-comment .list-area .edit-form .form-inline,.body .board-article .article-comment .list-area .reply-form .form-inline {
    margin-top: .4rem
}

.body .board-article .article-comment .list-area .edit-form .message,.body .board-article .article-comment .list-area .reply-form .message {
    max-height: none!important
}

.body .board-article .article-comment .list-area .edit-form .message .textarea-wrapper,.body .board-article .article-comment .list-area .reply-form .message .textarea-wrapper {
    margin-right: 4.25rem
}

.body .board-article .article-comment .list-area .edit-form .message .textarea-wrapper textarea,.body .board-article .article-comment .list-area .reply-form .message .textarea-wrapper textarea {
    height: 4rem;
    min-height: 4rem;
    overflow-y: hidden;
    resize: none
}

.body .board-article .article-comment .list-area .edit-form .message button,.body .board-article .article-comment .list-area .reply-form .message button {
    margin-top: -4rem;
    width: 4rem;
    height: 4rem
}

.body .board-article .article-comment .list-area .comment-wrapper .fadein {
    animation: highlight-target-fade 2.5s;
    animation-timing-function: ease-out
}

.body .board-article .article-comment .list-area .comment-wrapper .fadein .content .info-row {
    animation: highlight-comment-info-fade 2.5s;
    animation-timing-function: ease-out
}

.body .board-article .article-comment .list-area .comment-wrapper>.comment-wrapper {
    margin-left: 2rem;
    margin-right: 0
}

@media screen and (max-width: 767px) {
    .body .board-article .article-comment .list-area .comment-wrapper>.comment-wrapper {
        margin-left:.75rem
    }
}

.body .board-article .article-comment .list-area .comment-wrapper>.comment-wrapper>.comment-wrapper>.comment-wrapper>.comment-wrapper>.comment-wrapper>.comment-wrapper>.comment-wrapper>.comment-wrapper>.comment-wrapper>.comment-wrapper>.comment-wrapper>.comment-wrapper>.comment-wrapper>.comment-wrapper>.comment-wrapper {
    margin-left: 0!important
}

@media screen and (max-width: 1200px) {
    .body .board-article .article-comment .list-area .comment-wrapper>.comment-wrapper>.comment-wrapper>.comment-wrapper>.comment-wrapper>.comment-wrapper>.comment-wrapper>.comment-wrapper {
        margin-left:0!important
    }
}

@media screen and (max-width: 575px) {
    .body .board-article .article-comment .list-area .comment-wrapper>.comment-wrapper>.comment-wrapper>.comment-wrapper {
        margin-left:0!important
    }
}

.body .board-article .article-comment .list-area .comment-wrapper.right>.comment-wrapper {
    margin-right: 2rem;
    margin-left: 0
}

@media screen and (max-width: 767px) {
    .body .board-article .article-comment .list-area .comment-wrapper.right>.comment-wrapper {
        margin-right:.75rem
    }
}

.body .board-article .article-comment .list-area>.comment-wrapper.right {
    text-align: right
}

.body .board-article .article-comment .list-area>.comment-wrapper.right .comment-item .avatar {
    float: right
}

.body .board-article .article-comment .list-area>.comment-wrapper.right .comment-item .content {
    position: relative;
    margin-left: 0;
    margin-right: 52px
}

.body .board-article .article-comment .list-area>.comment-wrapper.right .comment-item .content:after,.body .board-article .article-comment .list-area>.comment-wrapper.right .comment-item .content:before {
    float: none;
    border: none;
    right: auto;
    left: auto
}

.body .board-article .article-comment .list-area>.comment-wrapper.right .comment-item .content:after,.body .board-article .article-comment .list-area>.comment-wrapper.right .comment-item .content:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    float: right;
    margin-right: -1rem
}

.body .board-article .article-comment .list-area>.comment-wrapper.right .comment-item .content:before {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #bbb;
    top: 3.33333333px;
    right: 6px
}

.body .board-article .article-comment .list-area>.comment-wrapper.right .comment-item .content:after {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #f7f7fc;
    top: 3.33333333px;
    right: 7px
}

.body .board-article .article-comment .list-area>.comment-wrapper.right .comment-item .content:after,.body .board-article .article-comment .list-area>.comment-wrapper.right .comment-item .content:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    float: right;
    margin-right: -1rem
}

.body .board-article .article-comment .list-area>.comment-wrapper.right .comment-item .content:before {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid var(--color-border-outer);
    top: 3.33333333px;
    right: 6px
}

.body .board-article .article-comment .list-area>.comment-wrapper.right .comment-item .content:after {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #f7f7fc;
    top: 3.33333333px;
    right: 7px
}

.body .board-article .article-comment .list-area>.comment-wrapper.right .comment-item .content .info-row {
    text-align: right
}

.body .board-article .article-comment .list-area>.comment-wrapper.right .comment-item .content .info-row .right {
    float: left
}

.body .board-article .article-comment .list-area>.comment-wrapper.right .reply-form {
    margin-left: 0;
    margin-right: 2rem
}

.body .board-article .article-comment .list-area+.write-area {
    border-top: 2px dashed;
    border-color: #bbb;
    border-color: var(--color-border-outer)
}

.body .board-article .article-comment .write-area {
    padding: .75rem
}

.body .board-article .article-comment .write-area .form-control:disabled {
    opacity: 1
}

@media screen and (max-width: 575px) {
    .body .board-article .article-comment .write-area .btn-voicecmt .text {
        display:none
    }
}

.body .board-article .article-comment .write-area .subtitle {
    margin-bottom: .75rem;
    font-size: 1.2rem
}

.body .board-article .article-comment .write-area .form-inline {
    margin-bottom: .75rem
}

.body .board-article .article-comment .write-area .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle
}

.body .board-article .article-comment .write-area .form-inline .form-group .form-control {
    width: 6.5rem
}

.body .board-article .article-comment .write-area .avatar {
    float: right
}

.body .board-article .article-comment .write-area .avatar img {
    width: 72px;
    height: 72px
}

@media screen and (max-width: 575px) {
    .body .board-article .article-comment .write-area .avatar {
        display:none
    }
}

.body .board-article .article-comment .write-area .input-wrapper {
    position: relative
}

.body .board-article .article-comment .write-area .input {
    width: calc(100% - .5rem - 72px);
    display: inline-block
}

@media screen and (max-width: 575px) {
    .body .board-article .article-comment .write-area .input {
        width:100%
    }

    .body .board-article .article-comment .write-area .input:before {
        display: none
    }

    .body .board-article .article-comment .write-area .input:after {
        display: none
    }
}

.body .board-article .article-comment .write-area .input textarea {
    resize: none;
    height: 72px;
    min-height: 72px;
    overflow-y: hidden;
    border-color: #bbb;
    border-color: var(--color-border-outer)
}

.body .board-article .article-comment .write-area .btns-wrapper {
    position: absolute;
    right: 0;
    top: 0
}

.body .board-article .article-comment .write-area .btns {
    float: right;
    margin-top: 0;
    margin-left: .5rem
}

.body .board-article .article-comment .write-area .btns .btn-mana {
    min-width: inherit;
    width: 4.5rem;
    height: 72px
}

@media screen and (max-width: 575px) {
    .body .board-article .article-comment .write-area .btns .btn-mana {
        width:4rem
    }
}

.body .board-article .article-comment .write-area .btns .btn-cmt {
    height: inherit;
    width: 4.5rem
}

.body .board-article .article-comment .write-area .btns .btn-voicecomment-upload {
    width: 5.5rem
}

.body .board-article .article-comment .write-area #commentFormButton {
    border-color: #bbb;
    border-color: var(--color-border-outer)
}

.body .board-article .article-comment .write-area button.d-flex.align-items-center[class*=ion-]::before {
    font-size: 1.4em
}

.body .board-article .included-article-list {
    border-top: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    padding-top: 1rem;
    margin-top: 1rem
}

@media screen and (max-width: 575px) {
    .body .board-article .included-article-list {
        padding-left:1rem;
        padding-right: 1rem;
        margin-left: -1rem;
        margin-right: -1rem
    }
}

.body .board-article .article-body img {
    max-width: 100%;
    height: auto
}

.body .board-article .article-body * {
    max-width: 100%
}

.body .board-article .article-body video {
    max-width: 100%;
    height: auto!important
}

.body .board-article .article-body iframe {
    max-width: 100%
}

.body .board-article .article-body table {
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    border-top: 1px solid;
    border-left: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer)
}

.body .board-article .article-body table caption,.body .board-article .article-body table td,.body .board-article .article-body table th {
    padding: .5rem .75rem;
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer)
}

.body .board-article .article-body table th {
    font-weight: 400
}

.body .board-article .article-body .recaptcha-privacy,.body .board-article .article-comment .recaptcha-privacy {
    font-size: .7rem
}

.body .board-article .article-body .recaptcha-privacy-align-right,.body .board-article .article-comment .recaptcha-privacy-align-right {
    text-align: right
}

.body .board-article .article-body .grecaptcha-badge,.body .board-article .article-comment .grecaptcha-badge {
    visibility: hidden
}

.body .board-article .namlacon {
    display: none;
    border: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    background-color: #eee;
    background-color: var(--color-bg-focus)
}

.body .board-article .namlacon .thumbnails {
    overflow-x: scroll;
    white-space: nowrap
}

.body .board-article .namlacon .thumbnails::-webkit-scrollbar {
    height: 2px
}

.body .board-article .namlacon .thumbnails img {
    width: 60px;
    height: 60px;
    border: solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    border-width: 0 1px 0 0;
    padding: 1px;
    cursor: pointer
}

.body .board-article .namlacon .emoticons {
    overflow-y: scroll;
    max-height: 200px
}

.body .board-article .namlacon .emoticons img {
    cursor: pointer;
    width: 100px;
    height: 100px
}

.body .board-article .namlacon .emoticons::-webkit-scrollbar {
    width: 2px
}

.body .board-article .voice-comment {
    min-height: 100px;
    padding: 1em;
    position: relative;
    display: none
}

.body .board-article .voice-comment .upload-alert-view {
    display: none;
    height: 100%;
    width: 100%;
    position: absolute;
    margin: -1em;
    background-color: #2d2f34;
    background-color: var(--color-bg-table);
    color: #000;
    color: var(--color-text-color);
    line-height: 90px;
    text-align: center
}

.body .board-article .voice-comment .audio-player {
    display: none
}

.body .board-article .voice-comment .audio-player audio {
    width: 100%
}

.body .board-article .voice-comment .progress-wrapper {
    display: block;
    margin-bottom: .5rem;
    overflow: hidden
}

.body .board-article .voice-comment .progress-wrapper .timestamp {
    text-align: center;
    font-weight: 600;
    margin: .5rem;
    float: right
}

.body .board-article .voice-comment .progress-wrapper .progress {
    margin-top: 1em;
    border-radius: 1em;
    height: .6rem
}

.body .board-article .icon-loading {
    border: .3rem solid #f3f3f3;
    border-top: .3rem solid #3d414d;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    top: .75rem;
    left: 1.5rem
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.body .board-article .settings-channels .header {
    height: 30px;
    font-size: .9em;
    margin-bottom: .5em
}

.body .board-article .settings-channels .header .bottom-border {
    border-bottom: 2px solid #aaa;
    border-bottom: 2px solid var(--color-border-inner)
}

.body .board-article .settings-channels .mychannel {
    margin-bottom: .5em
}

.body .board-article .settings-channels .mychannel .col {
    font-size: .9em
}

.body .board-article .settings-channels .mychannel .channel-info {
    font-size: 1.1rem;
    letter-spacing: -.5px;
    border-bottom: 1px solid #ccc;
    border-bottom: 1px solid var(--color-border-inner)
}

.body .board-article .settings-channels .mychannel .channel-info.peoplecnt {
    font-size: 1em
}

.body .board-article .settings-channels .mychannel .unnotificate,.body .board-article .settings-channels .mychannel .unsubscribe {
    font-size: .9em;
    color: var(--danger)
}

html.theme-dark .body .board-article .article-menu #imageToZipBtn .download-progress {
    background-color: #aaa
}

html.theme-dark .body .board-article .article-comment .newcomment-alert {
    border: 2px solid var(--color-text-color);
    border-radius: 6px;
    padding: .3rem;
    display: none;
    text-align: center
}

html.theme-dark .body .board-article .article-comment .newcomment-alert .text {
    color: var(--color-text-color);
    font-size: 1rem;
    margin: 0 auto;
    padding: .5rem;
    cursor: pointer
}

.body .board-article .board-title {
    display: flex;
    padding: 1rem;
    margin: -1rem -1rem .5rem;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #ddd;
    border-bottom-color: var(--color-border-inner)
}

@media screen and (max-width: 575px) {
    .body .board-article .board-title {
        padding:.5rem 1rem
    }
}

.body .board-article .board-title .left {
    margin-right: 1rem
}

.body .board-article .board-title .channel-icon-link:hover {
    text-decoration: none
}

.body .board-article .board-title .channel-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 100%
}

@media screen and (max-width: 575px) {
    .body .board-article .board-title .channel-icon {
        width:2.5rem;
        height: 2.5rem
    }
}

.body .board-article .board-title .channel-icon.text-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    text-transform: uppercase;
    background-color: #e6e6e6;
    background-color: var(--color-channel-shortcut-icon-background);
    color: #000;
    color: var(--color-text-color)
}

@media screen and (max-width: 575px) {
    .body .board-article .board-title .channel-icon.text-icon {
        font-size:1.1rem
    }
}

.body .board-article .board-title .right {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 0
}

.body .board-article .board-title .head {
    display: flex
}

@media screen and (max-width: 575px) {
    .body .board-article .board-title .head {
        align-items:center;
        min-height: 2.5rem
    }
}

.body .board-article .board-title .head .title {
    font-size: 1.3rem;
    font-weight: 500
}

.body .board-article .board-title .head .title:not(.unfold) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.body .board-article .board-title .head .info-btn {
    margin-left: .5rem;
    font-size: 1.25rem;
    font-weight: 500
}

@media screen and (min-width: 576px) {
    .body .board-article .board-title .head .info-btn {
        display:none
    }
}

.body .board-article .board-title .buttons {
    display: flex;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
    margin-left: auto;
    padding-left: 1rem
}

.body .board-article .board-title .buttons .btn {
    height: 2rem;
    min-width: 2rem;
    margin-right: .5rem;
    border: 1px solid #aaa
}

@media screen and (max-width: 575px) {
    .body .board-article .board-title .buttons .btn {
        margin-right:.3rem;
        text-align: center
    }

    .body .board-article .board-title .buttons .btn .text {
        display: none
    }
}

.body .board-article .board-title .buttons .btn .icon+.text {
    margin-left: .15rem
}

.body .board-article .board-title .buttons .btn:last-child {
    margin-right: 0
}

.body .board-article .board-title .notificate-btn .notificated,.body .board-article .board-title .notificate-btn .subscribed,.body .board-article .board-title .notificate-btn .unnotificate,.body .board-article .board-title .notificate-btn .unsubscribe,.body .board-article .board-title .subscribe-btn .notificated,.body .board-article .board-title .subscribe-btn .subscribed,.body .board-article .board-title .subscribe-btn .unnotificate,.body .board-article .board-title .subscribe-btn .unsubscribe {
    display: none
}

.body .board-article .board-title .notificate-btn .notificate,.body .board-article .board-title .notificate-btn .subscribe,.body .board-article .board-title .subscribe-btn .notificate,.body .board-article .board-title .subscribe-btn .subscribe {
    display: initial
}

.body .board-article .board-title .notificate-btn.active,.body .board-article .board-title .subscribe-btn.active {
    border-color: #2e7d32
}

@media screen and (max-width: 575px) {
    .body .board-article .board-title .notificate-btn.active,.body .board-article .board-title .subscribe-btn.active {
        color:#2e7d32
    }
}

.body .board-article .board-title .notificate-btn.active .notificate,.body .board-article .board-title .notificate-btn.active .subscribe,.body .board-article .board-title .notificate-btn.active .unnotificate,.body .board-article .board-title .notificate-btn.active .unsubscribe,.body .board-article .board-title .subscribe-btn.active .notificate,.body .board-article .board-title .subscribe-btn.active .subscribe,.body .board-article .board-title .subscribe-btn.active .unnotificate,.body .board-article .board-title .subscribe-btn.active .unsubscribe {
    display: none
}

.body .board-article .board-title .notificate-btn.active .notificated,.body .board-article .board-title .notificate-btn.active .subscribed,.body .board-article .board-title .subscribe-btn.active .notificated,.body .board-article .board-title .subscribe-btn.active .subscribed {
    display: initial
}

.body .board-article .board-title .notificate-btn.active:hover,.body .board-article .board-title .subscribe-btn.active:hover {
    border-color: #c62828;
    background-color: #c62828;
    color: #fff
}

.body .board-article .board-title .notificate-btn.active:hover .notificate,.body .board-article .board-title .notificate-btn.active:hover .notificated,.body .board-article .board-title .notificate-btn.active:hover .subscribe,.body .board-article .board-title .notificate-btn.active:hover .subscribed,.body .board-article .board-title .subscribe-btn.active:hover .notificate,.body .board-article .board-title .subscribe-btn.active:hover .notificated,.body .board-article .board-title .subscribe-btn.active:hover .subscribe,.body .board-article .board-title .subscribe-btn.active:hover .subscribed {
    display: none
}

.body .board-article .board-title .notificate-btn.active:hover .unnotificate,.body .board-article .board-title .notificate-btn.active:hover .unsubscribe,.body .board-article .board-title .subscribe-btn.active:hover .unnotificate,.body .board-article .board-title .subscribe-btn.active:hover .unsubscribe {
    display: initial
}

.body .board-article .board-title .notificate-btn .badge,.body .board-article .board-title .subscribe-btn .badge {
    margin-left: .4rem
}

.body .board-article .board-title .more-dropdown .dropdown-toggle {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 1.2rem;
    margin-left: .5rem;
    padding: 0 .75rem
}

.body .board-article .board-title .more-dropdown .dropdown-toggle::after {
    display: none
}

.body .board-article .board-title .more-dropdown .dropdown-menu {
    left: auto!important;
    right: 0!important;
    top: 2.5rem!important;
    transform: none!important
}

.body .board-article .board-title .more-dropdown .dropdown-menu .dropdown-item .icon {
    margin-right: .4rem
}

.body .board-article .board-title .description {
    font-size: .9rem;
    color: #666;
    color: var(--color-board-title-text);
    line-height: 1.3rem
}

@media screen and (max-width: 575px) {
    .body .board-article .board-title .description {
        margin-left:-3.5rem;
        margin-top: .5rem
    }

    .body .board-article .board-title .description:not(.show) {
        display: none
    }
}

.body .board-article .board-title .description .user-info a {
    color: inherit
}

.body .board-article .board-title .description .sep::before {
    margin: 0 .2rem;
    font-weight: 400;
    font-size: .8rem
}

.body .board-article .board-list {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1rem
}

@media screen and (max-width: 991px) {
    .body .board-article .board-list {
        grid-template-columns:repeat(2,1fr)
    }
}

@media screen and (max-width: 767px) {
    .body .board-article .board-list {
        grid-template-columns:repeat(1,1fr);
        gap: .5rem
    }
}

.body .board-article .board-list .board-item {
    display: flex;
    padding: .75rem;
    border-width: 1px;
    border-style: solid;
    border-color: #ddd;
    border-color: var(--color-border-inner)
}

.body .board-article .board-list .board-item:hover {
    text-decoration: none
}

.body .board-article .board-list .board-item .left {
    margin-right: .75rem
}

.body .board-article .board-list .board-item .channel-icon-link:hover {
    text-decoration: none
}

.body .board-article .board-list .board-item .channel-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 100%
}

.body .board-article .board-list .board-item .channel-icon.text-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    text-transform: uppercase;
    background-color: #e6e6e6;
    background-color: var(--color-channel-shortcut-icon-background);
    color: #000;
    color: var(--color-text-color)
}

.body .board-article .board-list .board-item .right {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 0
}

.body .board-article .board-list .board-item .head {
    display: flex;
    align-items: center;
    height: 2rem
}

.body .board-article .board-list .board-item .head .title {
    font-size: 1.1rem;
    font-weight: 500;
    margin-right: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.body .board-article .board-list .board-item .subscribe-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin-left: .5rem;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid #aaa
}

.body .board-article .board-list .board-item .subscribe-btn .subscribed,.body .board-article .board-list .board-item .subscribe-btn .unsubscribe {
    display: none
}

.body .board-article .board-list .board-item .subscribe-btn .subscribe {
    display: initial
}

.body .board-article .board-list .board-item .subscribe-btn.active {
    border-color: #689f4e;
    color: #689f4e
}

.body .board-article .board-list .board-item .subscribe-btn.active .subscribe,.body .board-article .board-list .board-item .subscribe-btn.active .unsubscribe {
    display: none
}

.body .board-article .board-list .board-item .subscribe-btn.active .subscribed {
    display: initial
}

.body .board-article .board-list .board-item .subscribe-btn.active:hover {
    border-color: #c62828;
    background-color: #c62828;
    color: #fff
}

.body .board-article .board-list .board-item .subscribe-btn.active:hover .subscribe,.body .board-article .board-list .board-item .subscribe-btn.active:hover .subscribed {
    display: none
}

.body .board-article .board-list .board-item .subscribe-btn.active:hover .unsubscribe {
    display: initial
}

.body .board-article .board-list .board-item .subscribe-btn .badge {
    margin-left: .4rem
}

.body .board-article .board-list .board-item .subscribe-btn .icon {
    margin-right: .15rem
}

.body .board-article .board-list .board-item .description {
    font-size: .9rem;
    color: #666;
    color: var(--color-board-title-text);
    line-height: 1.2rem
}

.body .board-article .board-list .board-item .description .sep::before {
    margin: 0 .2rem;
    font-weight: 400;
    font-size: .8rem
}

.body .board-article .board-list .board-item .description .info,.body .board-article .board-list .board-item .description .text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.body .board-article .board-audit-list li i a {
    color: #0275d8;
    color: var(--color-link-color)
}

.body .board-article .board-audit-list li i a:focus,.body .board-article .board-audit-list li i a:visited {
    color: #0275d8;
    color: var(--color-link-color)
}

.body .board-article .board-article-list {
    min-height: 20rem
}

.body .board-article .board-article-list .btns {
    margin-top: .75rem
}

@media screen and (max-width: 575px) {
    .body .board-article .btns-board {
        margin-right:-1rem;
        margin-left: -1rem
    }
}

.body .board-article .btns-board .select-list-type {
    width: 5rem;
    font-size: .9rem;
    padding: 0 0 0 .2rem;
    float: left
}

.body .board-article .btns-board .btn,.body .board-article .btns-board .form-control {
    height: 2rem
}

.body .board-article .article-list {
    margin-top: .5rem;
    margin-bottom: .5rem
}

@media screen and (max-width: 575px) {
    .body .board-article .article-list {
        margin-left:-1rem;
        margin-right: -1rem
    }
}

.body .board-article .article-list .admin-menu {
    margin-top: .5rem;
    margin-bottom: .5rem
}

.body .board-article .article-list .admin-menu #batchDeleteBtn {
    width: 100px
}

@media screen and (max-width: 767px) {
    .body .board-article .article-list .board-category-wrapper {
        margin:0 0 .5rem
    }
}

.body .board-article .article-list .board-category-wrapper .board-category {
    position: relative;
    display: flex;
    margin: 0;
    padding: 0 0 2px;
    white-space: nowrap;
    overflow-x: auto;
    align-items: stretch
}

.body .board-article .article-list .board-category-wrapper .board-category .simplebar-content {
    display: flex;
    position: relative
}

.body .board-article .article-list .board-category-wrapper .board-category .item {
    display: flex
}

.body .board-article .article-list .board-category-wrapper .board-category .item::after,.body .board-article .article-list .board-category-wrapper .board-category .item::before {
    content: "";
    width: .3rem;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    border-style: solid;
    border-width: 0 0 1px
}

.body .board-article .article-list .board-category-wrapper .board-category .item a {
    color: #666;
    color: var(--color-text-muted);
    list-style: none;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    border-style: solid;
    border-width: 0 0 1px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding: .4rem .55rem;
    text-decoration: none
}

@media screen and (max-width: 575px) {
    .body .board-article .article-list .board-category-wrapper .board-category .item a {
        padding:.15rem .4rem
    }
}

.body .board-article .article-list .board-category-wrapper .board-category .item a::before {
    content: "";
    width: .5rem
}

.body .board-article .article-list .board-category-wrapper .board-category .item a.active {
    color: #000;
    color: var(--color-text-color);
    font-weight: 600;
    border-width: 1px 1px 0
}

.body .board-article .article-list .board-category-wrapper .board-category .dummy {
    flex: 1;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    border-style: solid;
    border-width: 0 0 1px
}

.body .board-article .article-list .board-category-wrapper+.list-table {
    border-top: 0!important
}

.body .board-article .article-list .list-table {
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    font-size: .95rem
}

.body .board-article .article-list .list-table.hybrid .vrow.head {
    display: none!important
}

.body .board-article .article-list .list-table.hybrid .vrow-inner .vrow-top.deal-close {
    text-decoration: line-through
}

.body .board-article .article-list .list-table.hybrid .vrow-inner .vrow-top.deal-close .vcol.col-title {
    opacity: .4
}

.body .board-article .article-list .list-table.hybrid .vrow-inner .vrow-bottom.deal.deal-close {
    text-decoration: line-through;
    opacity: .4
}

.body .board-article .article-list .list-table .vrow.column {
    display: flex;
    width: 100%;
    padding: .4rem .6rem;
    border-bottom: 1px solid;
    border-color: #ddd;
    border-color: var(--color-border-inner);
    position: relative;
    align-items: center;
    height: 2.4rem
}

.body .board-article .article-list .list-table .vrow.column:hover .vrow-preview {
    display: block;
    z-index: 100
}

.body .board-article .article-list .list-table .vrow.column.disabled {
    opacity: .5
}

.body .board-article .article-list .list-table .vrow.column.active-with-bg {
    opacity: 1;
    background-color: var(--color-bg-body)
}

.body .board-article .article-list .list-table .vrow.column:last-child {
    border-bottom: 0
}

.body .board-article .article-list .list-table .vrow.column.head {
    border-bottom: 2px solid;
    border-color: #ddd;
    border-color: var(--color-border-inner);
    font-weight: 700
}

.body .board-article .article-list .list-table .vrow.column.head .vcol {
    font-size: .8rem!important
}

.body .board-article .article-list .list-table .vrow.column .vrow-inner {
    display: flex;
    flex: 1;
    align-items: center
}

.body .board-article .article-list .list-table .vrow.column .vrow-top {
    display: flex;
    flex: 1
}

.body .board-article .article-list .list-table .vrow.column .vrow-top .vcol {
    margin-right: 1rem
}

.body .board-article .article-list .list-table .vrow.column .vrow-bottom {
    display: flex
}

@media screen and (max-width: 767px) {
    .body .board-article .article-list .list-table .vrow.column .vrow-bottom {
        color:#666;
        color: var(--color-board-title-text)
    }
}

.body .board-article .article-list .list-table .vrow.column .vrow-bottom .vcol:not(:last-child) {
    margin-right: 1rem
}

.body .board-article .article-list .list-table .vrow.column .vrow-preview {
    background-color: #fff;
    background-color: var(--color-bg-main);
    position: absolute;
    top: 2.3rem;
    z-index: 1;
    padding: 5px;
    border: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    border-radius: 5px;
    width: 100px;
    height: 100px;
    box-sizing: content-box;
    display: none
}

.body .board-article .article-list .list-table .vrow.column .vrow-preview img {
    object-fit: contain;
    width: 100%;
    height: 100%
}

.body .board-article .article-list .list-table .vrow.column .vcol {
    display: inline-block;
    width: 100px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.body .board-article .article-list .list-table .vrow.column .vcol.col-author,.body .board-article .article-list .list-table .vrow.column .vcol.col-title {
    text-align: left;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
    text-overflow: ellipsis
}

.body .board-article .article-list .list-table .vrow.column .vcol.col-author .user-info {
    display: flex
}

.body .board-article .article-list .list-table .vrow.column .vcol.col-author .user-info span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: .2rem
}

.body .board-article .article-list .list-table .vrow.column .vcol.col-author .user-info span:last-child {
    flex: 1;
    flex-shrink: 0
}

.body .board-article .article-list .list-table .vrow.column .vcol.col-author,.body .board-article .article-list .list-table .vrow.column .vcol.col-category,.body .board-article .article-list .list-table .vrow.column .vcol.col-id,.body .board-article .article-list .list-table .vrow.column .vcol.col-rate,.body .board-article .article-list .list-table .vrow.column .vcol.col-time,.body .board-article .article-list .list-table .vrow.column .vcol.col-view {
    font-size: .83rem
}

.body .board-article .article-list .list-table .vrow.column .vcol.col-id {
    width: 6rem
}

.body .board-article .article-list .list-table .vrow.column .vcol.col-id .batch-check,.body .board-article .article-list .list-table .vrow.column .vcol.col-id .batch-check-all {
    float: left;
    margin-top: .25rem
}

.body .board-article .article-list .list-table .vrow.column .vcol.col-title {
    display: flex;
    align-items: center;
    flex: 1
}

.body .board-article .article-list .list-table .vrow.column .vcol.col-title .title {
    overflow: hidden;
    text-overflow: ellipsis
}

.body .board-article .article-list .list-table .vrow.column .vcol.col-title .info {
    margin-left: .25rem;
    font-size: .8rem
}

.body .board-article .article-list .list-table .vrow.column .vcol.col-author {
    width: 7rem
}

.body .board-article .article-list .list-table .vrow.column .vcol.col-category,.body .board-article .article-list .list-table .vrow.column .vcol.col-time {
    width: 6rem
}

.body .board-article .article-list .list-table .vrow.column .vcol.col-rate,.body .board-article .article-list .list-table .vrow.column .vcol.col-view {
    width: 3rem
}

@media screen and (max-width: 1200px) {
    .body .board-article .article-list .list-table .vrow.column .vcol.col-author {
        width:6rem
    }

    .body .board-article .article-list .list-table .vrow.column .vcol.col-time {
        width: 4rem
    }

    .body .board-article .article-list .list-table .vrow.column .vcol.col-id,.body .board-article .article-list .list-table .vrow.column .vcol.col-rate,.body .board-article .article-list .list-table .vrow.column .vcol.col-view {
        width: 3rem
    }
}

@media screen and (max-width: 767px) {
    .body .board-article .article-list .list-table .vrow.column {
        height:3.6rem
    }

    .body .board-article .article-list .list-table .vrow.column .vrow-inner {
        display: block
    }

    .body .board-article .article-list .list-table .vrow.column .vrow-bottom {
        margin-top: .2rem
    }

    .body .board-article .article-list .list-table .vrow.column .vcol {
        text-align: left!important;
        margin-right: 0!important
    }

    .body .board-article .article-list .list-table .vrow.column .vcol.col-author,.body .board-article .article-list .list-table .vrow.column .vcol.col-id,.body .board-article .article-list .list-table .vrow.column .vcol.col-rate,.body .board-article .article-list .list-table .vrow.column .vcol.col-time,.body .board-article .article-list .list-table .vrow.column .vcol.col-view {
        font-size: .8rem
    }

    .body .board-article .article-list .list-table .vrow.column .vcol.col-id {
        width: auto
    }

    .body .board-article .article-list .list-table .vrow.column .vcol.col-id .batch-check {
        display: inline
    }

    .body .board-article .article-list .list-table .vrow.column .vcol.col-id>* {
        display: none
    }

    .body .board-article .article-list .list-table .vrow.column .vcol.col-category {
        width: auto;
        display: inline-block;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25rem;
        margin: .25rem
    }

    .body .board-article .article-list .list-table .vrow.column .vcol.col-category:not(:empty) {
        padding: .25rem .4rem
    }

    .body .board-article .article-list .list-table .vrow.column .vcol.col-author {
        margin-right: 1rem!important;
        flex: 1
    }

    .body .board-article .article-list .list-table .vrow.column .vcol.col-rate,.body .board-article .article-list .list-table .vrow.column .vcol.col-time,.body .board-article .article-list .list-table .vrow.column .vcol.col-view {
        width: auto
    }

    .body .board-article .article-list .list-table .vrow.column .vcol.col-view::before {
        content: "조회";
        margin-right: .4rem
    }

    .body .board-article .article-list .list-table .vrow.column .vcol.col-rate:not(.d-sm-inline)::before {
        content: "추천";
        margin-right: .4rem
    }

    .body .board-article .article-list .list-table .vrow.column .vcol.col-time::after,.body .board-article .article-list .list-table .vrow.column .vcol.col-view::after {
        content: "|";
        margin: 0 .4rem 0 .2rem
    }

    .body .board-article .article-list .list-table .vrow.column .vcol.col-view::after {
        margin: 0 .4rem
    }
}

.body .board-article .article-list .list-table .vrow.hybrid {
    display: flex;
    position: relative;
    flex-direction: row-reverse;
    padding: .5rem
}

.body .board-article .article-list .list-table .vrow.hybrid:after {
    content: "";
    position: absolute;
    bottom: 0;
    border-bottom: 1px solid #eee;
    border-bottom: 1px solid var(--color-board-hybrid-split-line);
    right: .5rem;
    width: calc(100% - 2rem - 100px)
}

@media screen and (max-width: 575px) {
    .body .board-article .article-list .list-table .vrow.hybrid:after {
        width:calc(100% - 1.5rem - 80px)!important
    }
}

.body .board-article .article-list .list-table .vrow.hybrid:last-child {
    border-bottom: 0
}

.body .board-article .article-list .list-table .vrow.hybrid:last-child .vrow-inner:after {
    border-bottom: 0
}

.body .board-article .article-list .list-table .vrow.hybrid:not(:visited) .vrow-bottom,.body .board-article .article-list .list-table .vrow.hybrid:not(:visited) .vrow-middle {
    color: var(--color-text-muted)
}

.body .board-article .article-list .list-table .vrow.hybrid .vrow-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    overflow: hidden
}

.body .board-article .article-list .list-table .vrow.hybrid .vrow-bottom,.body .board-article .article-list .list-table .vrow.hybrid .vrow-middle {
    display: flex;
    font-size: .9rem
}

@media screen and (max-width: 575px) {
    .body .board-article .article-list .list-table .vrow.hybrid .vrow-bottom,.body .board-article .article-list .list-table .vrow.hybrid .vrow-middle {
        font-size:.75rem
    }
}

.body .board-article .article-list .list-table .vrow.hybrid .vrow-bottom .vcol,.body .board-article .article-list .list-table .vrow.hybrid .vrow-middle .vcol {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.body .board-article .article-list .list-table .vrow.hybrid .vrow-preview {
    width: 100px;
    height: 62px;
    margin-right: 1rem;
    background-image: url(/static/assets/images/default_preview_image.png);
    background-size: cover;
    background-position: center
}

@media screen and (max-width: 575px) {
    .body .board-article .article-list .list-table .vrow.hybrid .vrow-preview {
        width:80px;
        height: 45px;
        margin-right: .5rem;
        background-image: url(/static/assets/images/default_preview_image_small.png)
    }
}

.body .board-article .article-list .list-table .vrow.hybrid .vrow-preview img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-color: var(--color-bg-main)
}

.body .board-article .article-list .list-table .vrow.hybrid .vcol .title .media-icon {
    display: none
}

.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-id {
    display: none
}

.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-title {
    word-break: break-all
}

@media screen and (min-width: 576px) {
    .body .board-article .article-list .list-table .vrow.hybrid .vcol.col-title {
        font-size:1.1rem;
        line-height: 1
    }
}

.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-title .badges {
    margin-bottom: .25rem;
    align-items: center
}

.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-title .badge {
    color: #005078!important;
    color: var(--color-board-hybrid-badge-text-color)!important;
    font-weight: 500;
    margin: 0!important;
    padding: 0;
    background: 0 0!important;
    border: none!important
}

.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-title .badge.dash {
    color: #000!important;
    color: var(--color-text-color)!important
}

.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-title .badge.dash::before {
    content: "-";
    margin: 0 .25rem
}

.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-title .badge.dash:empty {
    display: initial!important
}

.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-title .deal-store {
    font-weight: 500;
    font-size: 70%;
    border-radius: .2rem;
    background-color: var(--color-bg-primary);
    color: #fff;
    padding: .3rem .3rem .2rem;
    line-height: 1
}

.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-title a.badge:hover {
    text-decoration: underline
}

.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-title a.title {
    color: #0275d8;
    color: var(--color-board-hybrid-title-text-color);
    font-weight: 600
}

.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-title .info {
    font-size: .7rem
}

.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-author {
    flex: 1;
    margin-right: .5rem
}

.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-author .user-info {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-author .user-icon {
    margin-left: .15rem
}

.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-time {
    margin-left: auto
}

.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-view::before {
    content: "조회";
    margin-right: .3rem
}

.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-rate:not(.d-sm-inline)::before {
    content: "추천";
    margin-right: .3rem
}

.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-time::after,.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-view::after {
    content: "|";
    margin: 0 .3rem;
    font-size: .8rem
}

.body .board-article .article-list .list-table .vrow.column .vrow-bottom,.body .board-article .article-list .list-table .vrow.column .vrow-middle,.body .board-article .article-list .list-table .vrow.column .vrow-top,.body .board-article .article-list .list-table .vrow.hybrid .vrow-bottom,.body .board-article .article-list .list-table .vrow.hybrid .vrow-middle,.body .board-article .article-list .list-table .vrow.hybrid .vrow-top {
    align-items: center
}

.body .board-article .article-list .list-table .vrow.column .vrow-bottom.deal .deal-price,.body .board-article .article-list .list-table .vrow.hybrid .vrow-bottom.deal .deal-price {
    color: var(--color-bg-best);
    font-weight: 600;
    margin-right: .3rem
}

.body .board-article .article-list .list-table .vrow.column .vrow-bottom.deal .col-author,.body .board-article .article-list .list-table .vrow.hybrid .vrow-bottom.deal .col-author {
    text-align: right;
    margin-right: 0
}

.body .board-article .article-list .list-table .vrow.column .vrow-bottom.deal .col-author::after,.body .board-article .article-list .list-table .vrow.hybrid .vrow-bottom.deal .col-author::after {
    content: "|";
    margin: 0 .4rem 0 .2rem
}

@media screen and (max-width: 575px) {
    .body .board-article .article-list .list-table .vrow.column .vrow-bottom.deal .col-view,.body .board-article .article-list .list-table .vrow.hybrid .vrow-bottom.deal .col-view {
        display:none
    }
}

.body .board-article .article-list .list-table .vrow.column .vcol.col-title .badges,.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-title .badges {
    display: flex
}

.body .board-article .article-list .list-table .vrow.column .vcol.col-title .badge,.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-title .badge {
    color: #fff;
    color: var(--color-board-category-text);
    background-color: #42464f;
    background-color: var(--color-board-category);
    border: 1px solid var(--color-board-category);
    margin: .25rem;
    border-radius: .15rem
}

.body .board-article .article-list .list-table .vrow.column .vcol.col-title .title .ion-android-star::before,.body .board-article .article-list .list-table .vrow.column .vcol.col-title .title .media-icon::before,.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-title .title .ion-android-star::before,.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-title .title .media-icon::before {
    width: 20px;
    text-align: center
}

.body .board-article .article-list .list-table .vrow.column .vcol.col-title .title .ion-android-star,.body .board-article .article-list .list-table .vrow.hybrid .vcol.col-title .title .ion-android-star {
    color: orange
}

.body .board-article .article-list .list-table .vrow.notice {
    border-color: #ddd;
    border-color: var(--color-border-inner);
    background-color: #eee;
    background-color: var(--color-bg-focus)
}

.body .board-article .article-list .list-table .vrow.notice:visited {
    background-color: #eee;
    background-color: var(--color-bg-focus);
    color: #000;
    color: var(--color-text-color)
}

.body .board-article .article-list .list-table .vrow.notice .vcol.col-view::after {
    display: none
}

.body .board-article .article-list .list-table a.vrow:visited {
    color: #bbb;
    color: var(--color-visited-article);
    background-color: #eee;
    background-color: var(--color-bg-focus)
}

.body .board-article .article-list .list-table a.vrow:visited.column .vrow-bottom {
    color: #bbb;
    color: var(--color-visited-article)
}

.body .board-article .article-list .list-table a.vrow.active {
    background-color: #eee;
    background-color: var(--color-bg-focus)
}

.body .board-article .article-list .list-table a.vrow:hover {
    text-decoration: none;
    background-color: #eee;
    background-color: var(--color-bg-focus)
}

@media screen and (max-width: 767px) {
    .body .board-article .article-list .list-table.show-filtered a.vrow.filtered,.body .board-article .article-list .list-table.show-filtered-deleted a.vrow.filtered-deleted,.body .board-article .article-list .list-table.show-filtered-keyword a.vrow.filtered-keyword,.body .board-article .article-list .list-table.show-filtered-notice a.vrow.filtered-notice,.body .board-article .article-list .list-table.show-filtered-user a.vrow.filtered-user {
        display:block
    }
}

.body .board-article .article-list.admin .list-table .vrow.hybrid {
    padding-left: 1.5rem
}

.body .board-article .article-list.admin .list-table .vrow.hybrid:after {
    width: calc(100% - 3rem - 100px)
}

@media screen and (max-width: 575px) {
    .body .board-article .article-list.admin .list-table .vrow.hybrid:after {
        width:calc(100% - 2.5rem - 80px)!important
    }
}

.body .board-article .article-list.admin .list-table .vrow.hybrid .vcol.col-id {
    display: flex;
    position: absolute;
    left: calc(.5rem/1.5);
    top: calc(.5rem/2)
}

.body .board-article .article-list.admin .list-table .vrow.hybrid .vcol.col-id span {
    display: none
}

.body .board-article .search-form {
    margin-top: .5rem
}

@media screen and (max-width: 575px) {
    .body .board-article .search-form {
        margin-right:-.5rem
    }
}

.body .board-article .pagination {
    margin: 0;
    text-align: center;
    flex-wrap: wrap
}

.body .board-article .pagination .page-item .page-link {
    color: #000;
    color: var(--color-text-color);
    background-color: #fff;
    background-color: var(--color-bg-main);
    border-color: #bbb;
    border-color: var(--color-border-outer);
    padding: .5rem .6rem
}

@media(min-width: 768px) {
    .body .board-article .pagination .page-item .page-link {
        padding:.4rem!important;
        min-width: 2.5rem!important
    }
}

.body .board-article .pagination .page-item .page-link:focus {
    box-shadow: none
}

.body .board-article .pagination .page-item .page-link:hover {
    background-color: #eee;
    background-color: var(--color-bg-focus)
}

.body .board-article .pagination .page-item.active .page-link {
    border-color: #00a495;
    background-color: #eee;
    background-color: var(--color-bg-focus)
}

.body .board-article .pagination .page-item.active .page-link:hover {
    border-color: #00a495
}

.body .board-article .hidden {
    display: none!important
}

.body .board-article .category-badge {
    color: #fff;
    color: var(--color-board-category-text);
    background-color: #42464f;
    background-color: var(--color-board-category);
    border: 1px solid #42464f;
    border: 1px solid var(--color-board-category);
    margin: .25rem;
    border-radius: .15rem
}

.body .board-article .frontend-header {
    line-height: 1;
    display: flex;
    border-bottom: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    padding: .4rem .6rem
}

.body .board-article .frontend-header .filter-count-container {
    text-align: right;
    flex: 1
}

.body .board-article .frontend-header .filter-count-container .filter-count {
    font-size: small;
    cursor: pointer;
    margin: 0 .1rem
}

.body .board-article .frontend-header .filter-count-container .filter-count-all {
    font-weight: 700
}

.body .board-article .article-list .list-table .notice-unfilter div {
    justify-content: center
}

.body .board-article .article-comment .list-area .comment-item.filtered,.body .board-article .article-list .list-table .vrow.filtered {
    display: none
}

.body .board-article .comment-item.filtered .content .info-row .user-info a,.body .board-article .comment-item.filtered .content .message .text pre {
    color: #666;
    color: var(--color-text-muted)
}

.body .board-article .article-list .list-table.show-filtered .vrow.filtered,.body .board-article .article-list .list-table.show-filtered-deleted .vrow.filtered-deleted,.body .board-article .article-list .list-table.show-filtered-keyword .vrow.filtered-keyword,.body .board-article .article-list .list-table.show-filtered-notice .vrow.filtered-notice,.body .board-article .article-list .list-table.show-filtered-user .vrow.filtered-user {
    display: flex
}

.body .board-article .article-comment .list-area.show-filtered .comment-item.filtered,.body .board-article .article-comment .list-area.show-filtered-deleted .comment-item.filtered-deleted,.body .board-article .article-comment .list-area.show-filtered-keyword .comment-item.filtered-keyword,.body .board-article .article-comment .list-area.show-filtered-notice .comment-item.filtered-notice,.body .board-article .article-comment .list-area.show-filtered-user .comment-item.filtered-user {
    display: block
}

.body .board-article .show-filtered .vrow.filtered {
    background-color: #eee;
    background-color: var(--color-bg-focus)
}

@keyframes highlight-target-fade {
    0% {
        background-color: var(--color-highlight-color)
    }

    100% {
        background-color: transparent
    }
}

@keyframes opacity-target-fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes opacity-target-fade-out {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes opacity-target-fade-out-in {
    0% {
        opacity: 1
    }

    50% {
        opacity: .3
    }

    100% {
        opacity: 1
    }
}

.body :target {
    animation: highlight-target-fade 2.5s;
    animation-timing-function: ease-out
}

.body .sep:before {
    content: '|';
    font-size: 1.1em;
    font-weight: 300;
    margin: 0 .5em;
    line-height: .9em
}

.body .btns {
    margin-top: .75rem;
    text-align: right
}

.body .btns .btn-primary,.body .btns .btn-success {
    min-width: 6rem
}

.body .btns .grecaptcha-badge {
    float: left
}

@media screen and (max-width: 575px) {
    .body .btns .grecaptcha-badge {
        margin-bottom:1rem
    }
}

.body .leaf-info {
    background-color: #3d414d;
    background-color: var(--color-bg-badge);
    color: #fff;
    font-family: Monospace;
    font-size: .8em;
    border-radius: .3rem;
    padding: 0 .3rem;
    margin-top: .2rem;
    border: 1px solid var(--color-border-badge)
}

.body .scrollbox {
    height: 15rem;
    border: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    overflow-y: scroll;
    word-wrap: break-word;
    padding: .25rem
}

.body .overflow-hidden {
    overflow: hidden
}

.body tbody.ui-sortable>tr>td:first-of-type:before {
    font-size: 1.3em
}

.body .table.align-middle td {
    vertical-align: middle
}

.body .clearfix {
    clear: both
}

.body .pre-wrap {
    white-space: pre-wrap;
    word-break: break-all;
    font-family: monospace
}

.body .text-divider {
    display: flex;
    align-items: center
}

.body .text-divider::after,.body .text-divider::before {
    content: '';
    height: 1px;
    background-color: silver;
    flex-grow: 1
}

.body .text-divider::before {
    margin-right: 1rem
}

.body .text-divider::after {
    margin-left: .75rem
}

.body .vertical-text-divider {
    display: flex;
    align-items: center;
    writing-mode: vertical-rl;
    text-orientation: upright
}

.body .vertical-text-divider::after,.body .vertical-text-divider::before {
    content: '';
    width: 1px;
    background-color: silver;
    flex-grow: 1
}

.body .vertical-text-divider::before {
    margin-bottom: 1rem
}

.body .vertical-text-divider::after {
    margin-top: 1rem
}

.body .batch-comment-checkbox-all+.custom-control-label::before,.body .removeCommentIds+.custom-control-label::before {
    border-radius: 100px
}

.body .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.body .hide-scrollbar::-webkit-scrollbar {
    display: none
}

.body .board-article {
    padding-top: 3rem;
    padding-bottom: 3rem
}

.body .dialog {
    margin: 2rem 0;
    background-color: #fff;
    background-color: var(--color-bg-dialog)
}

.body .dialog .card-subtitle {
    margin-bottom: 2rem
}

.body .dialog .row {
    margin: 0 0 1rem
}

.body .dialog .col-date,.body .dialog .col-title {
    text-align: left;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
    text-overflow: ellipsis;
    float: left
}

.body .dialog .col-title {
    width: 65%
}

.body .dialog .col-date {
    width: 35%
}

.body .dialog .col-date time {
    font-size: .85rem
}

.body .emoticon-list .emoticon {
    text-align: center;
    float: left;
    width: 168px;
    margin: 10px;
    border-radius: 12px;
    padding: 10px 4px;
    font-size: .9rem;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.15)
}

.body .emoticon-list .emoticon>* {
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis
}

@media screen and (max-width: 575px) {
    .body .emoticon-list .emoticon {
        width:200px;
        margin: 15px;
        padding: 15px;
        width: 45%;
        margin: 2%
    }
}

.body .emoticon-list .emoticon .title {
    margin-top: 10px;
    font-weight: 700
}

.body .emoticon-list .emoticon .nickname,.body .emoticon-list .emoticon .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.body .emoticon-list .emoticon img {
    width: 100px;
    height: 100px
}

.body .emoticon-list .sort {
    text-align: right;
    margin: 0 10px 10px 0
}

.body .emoticon-list .sort a {
    text-decoration: none
}

.body .emoticon-list .sort span {
    border-bottom: 1px solid #666;
    padding-bottom: 2px;
    font-size: .8rem
}

.body .emoticon-list .sort span.selected {
    font-weight: 700
}

.body .emoticon-view .info-row {
    overflow: inherit!important
}

.body .emoticon-view .info-row span {
    margin-left: .1rem
}

.body .emoticon-view .info-row .date {
    display: inline-block!important
}

.body .emoticon-view .info-row .date .sep::before {
    display: inline-block!important
}

.body .board-article .article-body .emoticon-tags {
    margin-top: 30px
}

.body .board-article .article-body .emoticon-tags h3 {
    font-weight: 700;
    font-size: 1rem
}

.body .board-article .article-body .emoticon-tags a.tag {
    color: #3b85d0
}

.body .board-article .article-body .emoticons-wrapper img,.body .board-article .article-body .emoticons-wrapper video {
    width: 100px;
    height: 100px!important;
    margin: 2px 0
}

.emoticon-containter #thumbnail~img {
    max-width: 100px;
    max-height: 100px
}

.emoticon-containter #emoticons img {
    padding-right: .5em;
    padding-bottom: .5em;
    max-width: 100px;
    max-height: 100px
}

.emoticon-containter #emoticons:not(:empty) {
    padding-bottom: 1rem!important
}

.emoticon-containter label.upload-button {
    border: 1px solid var(--color-border-outer);
    background-color: var(--color-bg-input);
    border-radius: 4px;
    padding: .3rem 1.2rem
}

.emoticon-containter input#idTitle {
    border-radius: 4px
}

.emoticon-containter .emoticon-tag {
    list-style: none;
    color: var(--color-text-muted)
}

.emoticon-containter .tag-cloud span.ion-chevron-right {
    margin-right: 6px
}

.emoticon-containter .tag-cloud a {
    text-decoration: none
}

.emoticon-containter .tag-cloud h3 {
    font-weight: 700;
    font-size: 1rem
}

.emoticon-containter .tag-cloud h4 {
    font-size: .8rem
}

.emoticon-containter .tag-cloud input#tag-input {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.emoticon-containter .tag-cloud input#tag-add-btn {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}

.emoticon-containter .tag-cloud .quick-items {
    display: block;
    margin-bottom: 20px
}

.emoticon-containter .tag-cloud .quick-items ul {
    padding: 0;
    margin: 20px 0 0;
    list-style: none
}

.emoticon-containter .tag-cloud .quick-items ul li {
    float: left;
    display: inline-block;
    position: relative;
    padding-right: 10px;
    height: 30px
}

.emoticon-containter .tag-cloud .quick-items ul li button.btn-preset-tag {
    color: var(--color-link-color);
    padding: 0
}

.emoticon-containter .tag-cloud .quick-items ul li button.btn-preset-tag:hover {
    text-decoration: none
}

.emoticon-containter .tag-cloud #tag-list {
    padding: 0;
    margin: 20px 0 0;
    list-style: none
}

.emoticon-containter .tag-cloud #tag-list ul {
    margin: 2px 0 0
}

.emoticon-containter .tag-cloud #tag-list li {
    float: left;
    display: inline-block;
    position: relative;
    padding-right: 10px;
    height: 30px
}

.emoticon-containter .tag-cloud #tag-list li button {
    color: var(--color-link-color);
    padding: 0
}

.emoticon-containter .tag-cloud #tag-list li button span.tag:before {
    content: "#"
}

.emoticon-tooltip .emoticon-inner {
    padding: .5rem;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 0
}

.emoticon-tooltip .emoticon-inner button {
    display: inline-block
}

.reply-form {
    margin: 1em 0 1em 2em
}

.reply-form.edit,.reply-form.write {
    margin-left: 0
}

.reply-form.write {
    padding: 0 .75em
}

.reply-form>.reply-form__container {
    position: relative;
    border: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    border-radius: 5px;
    color: #000;
    color: var(--color-text-color)
}

.reply-form>.reply-form__container>.reply-form__info {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    overflow: hidden
}

.reply-form>.reply-form__container>.reply-form__info>.reply-form__user-info {
    display: flex;
    padding: .5em;
    flex-grow: 1;
    overflow: hidden
}

.reply-form>.reply-form__container>.reply-form__info>.reply-form__user-info>.replay-form-title {
    display: none;
    font-size: .8em;
    line-height: 2;
    margin: 0 2em 0 .5em;
    user-select: none;
    flex-shrink: 0
}

@media screen and (min-width: 992px) {
    .reply-form>.reply-form__container>.reply-form__info>.reply-form__user-info>.replay-form-title {
        display:block
    }
}

.reply-form>.reply-form__container>.reply-form__info>.reply-form__user-info>input.reply-form-user-input {
    border: none;
    border-radius: 3px;
    max-width: 8em;
    background-color: transparent;
    text-overflow: ellipsis;
    flex-grow: 1
}

.reply-form>.reply-form__container>.reply-form__info>.reply-form__user-info>input.reply-form-user-input:focus {
    outline: 1px solid;
    outline-color: #bbb;
    outline-color: var(--color-border-outer)
}

.reply-form>.reply-form__container>.reply-form__info>.reply-form__user-info>input.reply-form-user-input:disabled {
    opacity: .5;
    user-select: none
}

.reply-form>.reply-form__container>.reply-form__info>.reply-form__user-info>input.reply-form-user-input:not(:last-of-type) {
    margin-right: .25em
}

@media screen and (min-width: 768px) {
    .reply-form>.reply-form__container>.reply-form__info>.reply-form__user-info>input.reply-form-user-input {
        max-width:12em
    }
}

.reply-form>.reply-form__container>.reply-form__info>.reply-form__user-info .reply-form__user-info__avatar {
    display: none;
    margin-right: .2em
}

.reply-form>.reply-form__container>.reply-form__info>.reply-form__user-info .reply-form__user-info__avatar>img {
    width: 1.4em;
    height: auto;
    aspect-ratio: 1
}

@media screen and (min-width: 576px) {
    .reply-form>.reply-form__container>.reply-form__info>.reply-form__user-info .reply-form__user-info__avatar {
        display:block
    }
}

.reply-form>.reply-form__container>.reply-form__info .reply-form-button-container {
    flex-shrink: 0;
    display: flex
}

@media screen and (min-width: 768px) {
    .reply-form>.reply-form__container>.reply-form__info .reply-form-button-container button {
        margin-right:.5em
    }
}

.reply-form>.reply-form__container>.reply-form__info .reply-form-button-container>.reply-form-voice-button {
    padding: 0 .6em;
    display: flex;
    align-items: center;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    color: #000;
    color: var(--color-text-color);
    transition-duration: .3s
}

.reply-form>.reply-form__container>.reply-form__info .reply-form-button-container>.reply-form-voice-button:focus {
    outline: 2px solid;
    outline-color: #0275d8;
    outline-color: var(--color-link-color)
}

.reply-form>.reply-form__container>.reply-form__info .reply-form-button-container>.reply-form-voice-button:hover {
    background-color: #eee;
    background-color: var(--color-bg-focus)
}

.reply-form>.reply-form__container>.reply-form__info .reply-form-button-container>.reply-form-voice-button>span[class^=ion-] {
    display: flex;
    align-items: center
}

.reply-form>.reply-form__container>.reply-form__info .reply-form-button-container>.reply-form-voice-button>.text {
    display: none;
    font-size: .9em
}

@media screen and (min-width: 576px) {
    .reply-form>.reply-form__container>.reply-form__info .reply-form-button-container>.reply-form-voice-button {
        padding:0 .5em
    }

    .reply-form>.reply-form__container>.reply-form__info .reply-form-button-container>.reply-form-voice-button>.text {
        display: inline
    }
}

.reply-form>.reply-form__container>.reply-form__info .reply-form-button-container>.reply-form-voice-button>span.ion-mic-a {
    font-size: 1.2em;
    margin-right: .1em
}

.reply-form>.reply-form__container>.reply-form__info .reply-form-button-container>.reply-form-arcacon-button {
    padding: 0 .6em;
    display: flex;
    align-items: center;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    color: #000;
    color: var(--color-text-color);
    transition-duration: .3s
}

.reply-form>.reply-form__container>.reply-form__info .reply-form-button-container>.reply-form-arcacon-button:focus {
    outline: 2px solid;
    outline-color: #0275d8;
    outline-color: var(--color-link-color)
}

.reply-form>.reply-form__container>.reply-form__info .reply-form-button-container>.reply-form-arcacon-button:hover {
    background-color: #eee;
    background-color: var(--color-bg-focus)
}

.reply-form>.reply-form__container>.reply-form__info .reply-form-button-container>.reply-form-arcacon-button>span[class^=ion-] {
    display: flex;
    align-items: center
}

.reply-form>.reply-form__container>.reply-form__info .reply-form-button-container>.reply-form-arcacon-button>.text {
    display: none;
    font-size: .9em
}

@media screen and (min-width: 576px) {
    .reply-form>.reply-form__container>.reply-form__info .reply-form-button-container>.reply-form-arcacon-button {
        padding:0 .5em
    }

    .reply-form>.reply-form__container>.reply-form__info .reply-form-button-container>.reply-form-arcacon-button>.text {
        display: inline
    }
}

.reply-form>.reply-form__container>.reply-form__info .reply-form-button-container>.reply-form-arcacon-button>span.ion-android-happy {
    font-size: 1.4em;
    margin-right: .2em
}

.reply-form>.reply-form__container>.reply-form-textarea-wrapper {
    position: relative;
    padding: .5em .5em 0
}

.reply-form>.reply-form__container>.reply-form-textarea-wrapper>.reply-form-textarea {
    border: none;
    width: 100%;
    height: 100%;
    min-height: 4em;
    overflow: hidden;
    resize: none;
    background-color: transparent
}

.reply-form>.reply-form__container>.reply-form-textarea-wrapper>.reply-form-textarea:focus {
    outline: 0
}

.reply-form>.reply-form__container>.reply-form-textarea-wrapper>.reply-form__submit-button-wrapper {
    position: absolute;
    bottom: 0;
    right: 0;
    display: none;
    justify-content: flex-end;
    padding-bottom: .5em;
    padding-right: .5em
}

.reply-form>.reply-form__container>.reply-form-textarea-wrapper>.reply-form__submit-button-wrapper>.reply-form__submit-button {
    padding: .25em 1.5em;
    border: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    background-color: #fff;
    background-color: var(--color-bg-main);
    border-radius: 4px;
    color: #000;
    color: var(--color-text-color);
    transition-duration: .3s
}

.reply-form>.reply-form__container>.reply-form-textarea-wrapper>.reply-form__submit-button-wrapper>.reply-form__submit-button:focus {
    outline: 2px solid;
    outline-color: #0275d8;
    outline-color: var(--color-link-color)
}

.reply-form>.reply-form__container>.reply-form-textarea-wrapper>.reply-form__submit-button-wrapper>.reply-form__submit-button:hover {
    background-color: #eee;
    background-color: var(--color-bg-focus)
}

.reply-form>.reply-form__container>.reply-form-textarea-wrapper>.reply-form-textarea:focus+.reply-form__submit-button-wrapper,.reply-form>.reply-form__container>.reply-form-textarea-wrapper>.reply-form-textarea:not(:placeholder-shown)+.reply-form__submit-button-wrapper {
    display: flex
}

.reply-form>.recaptcha-privacy {
    text-align: right;
    font-size: .7em;
    margin-top: .3em;
    word-break: break-word
}

.reply-form>.recaptcha-privacy a:link {
    color: #0275d8;
    color: var(--color-link-color)
}

.reply-form>.recaptcha-privacy a:link:focus,.reply-form>.recaptcha-privacy a:link:visited {
    color: #0275d8;
    color: var(--color-link-color)
}

.reply-form>.recaptcha-privacy a:visited {
    color: #0275d8;
    color: var(--color-link-color)
}

.reply-form>.recaptcha-privacy a:visited:focus,.reply-form>.recaptcha-privacy a:visited:visited {
    color: #0275d8;
    color: var(--color-link-color)
}

.channel-visit-history {
    background-color: #eee;
    background-color: var(--color-bg-focus);
    padding: .6em;
    margin: 0;
    font-size: .8rem;
    position: relative
}

.channel-visit-history .channel-visit-history__normal {
    display: flex;
    list-style: none;
    overflow: hidden;
    white-space: nowrap
}

.channel-visit-history .channel-visit-history__normal .channel-visit-history__head {
    margin-right: 1em;
    cursor: default;
    font-weight: 700;
    user-select: none
}

.channel-visit-history .channel-visit-history__normal .channel-visit-history__list {
    flex: 1;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 0
}

.channel-visit-history .channel-visit-history__normal .channel-visit-history__list li {
    display: inline-block;
    margin-right: 1em
}

.channel-visit-history .channel-visit-history__normal .channel-visit-history__list li span {
    padding-left: .4em;
    cursor: pointer
}

.channel-visit-history .channel-visit-history__normal .channel-visit-history__list a:focus,.channel-visit-history .channel-visit-history__normal .channel-visit-history__list a:visited {
    color: #000;
    color: var(--color-text-color)
}

.channel-visit-history .channel-visit-history__normal .channel-visit-history__list a:hover {
    text-decoration: underline
}

.channel-visit-history .channel-visit-history__normal .channel-visit-history__more-btn {
    font-size: 1.3rem;
    margin-left: 1rem;
    user-select: none;
    font-weight: 700;
    cursor: pointer;
    z-index: 101
}

.channel-visit-history .channel-visit-history__normal .channel-visit-history__more-btn:hover {
    text-decoration: underline
}

.channel-visit-history .channel-visit-history__extend {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: #eee;
    background-color: var(--color-bg-focus);
    border: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    padding: .6em;
    display: none
}

.channel-visit-history .channel-visit-history__extend.show {
    display: block
}

.channel-visit-history .channel-visit-history__extend .channel-visit-history__head {
    padding-bottom: .25rem;
    margin-bottom: .25rem;
    display: flex;
    padding-right: .6rem
}

.channel-visit-history .channel-visit-history__extend .channel-visit-history__head span:first-child {
    flex: 1;
    font-weight: 700;
    user-select: none
}

.channel-visit-history .channel-visit-history__extend .channel-visit-history__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap
}

.channel-visit-history .channel-visit-history__extend .channel-visit-history__list>li {
    background-color: #fff;
    background-color: var(--color-bg-main);
    margin: .3em;
    padding: .3em .6em;
    border-radius: 25px
}

.channel-visit-history .channel-visit-history__extend .channel-visit-history__list>li>span {
    margin-left: .4em;
    color: #bbb;
    color: var(--color-border-outer)
}

.channel-visit-history .channel-visit-history__extend .channel-visit-history__list>li>span a {
    overflow-x: hidden;
    text-overflow: ellipsis
}

.channel-visit-history .channel-visit-history__extend .channel-visit-history__list .ion-close {
    flex: 0;
    cursor: pointer
}

.channel-visit-history .channel-visit-history__extend .channel-visit-history__foot {
    display: flex;
    justify-content: flex-end;
    font-size: .6em
}

.channel-visit-history .channel-visit-history__extend .channel-visit-history__foot button.channel-visit-history__clear-btn {
    color: #000;
    color: var(--color-text-color);
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    line-height: 2
}

.channel-visit-history .channel-visit-history__extend .channel-visit-history__foot button.channel-visit-history__clear-btn:focus {
    border: none;
    outline: 0
}

.channel-visit-history .channel-visit-history__extend .channel-visit-history__foot button.channel-visit-history__clear-btn:hover {
    text-decoration: underline
}

.channel-visit-history .channel-visit-history__extend .channel-visit-history__foot button.channel-visit-history__clear-btn .ion {
    margin-left: .2em;
    cursor: pointer;
    font-size: 1.2rem
}

@media screen and (max-width: 575px) {
    .channel-visit-history {
        margin:0 -1rem;
        font-size: .8rem;
        padding: .4rem .6rem;
        margin-top: -.2rem;
        margin-bottom: -.2rem
    }

    .channel-visit-history .channel-visit-history__extend {
        padding: .5rem
    }
}

.sortable-list-wrapper {
    padding-left: .5em;
    padding-right: .5em
}

.sortable-list-wrapper .sortable-list {
    border-top: 1px solid;
    border-color: #ddd;
    border-color: var(--color-border-inner)
}

.sortable-list-wrapper .sortable-list .sortable-list__item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid;
    border-color: #ddd;
    border-color: var(--color-border-inner)
}

.sortable-list-wrapper .sortable-list .sortable-list__item>div {
    padding: .5em
}

.sortable-list-wrapper .sortable-list .sortable-list__item .ion-android-menu {
    font-size: 1.3em
}

.sortable-list-wrapper .sortable-list .sortable-list__item.sortable-drag {
    border: none
}

.sortable-list-wrapper .sortable-list__item-sample {
    display: none
}

.sortable-list-wrapper .sortable-list.permission .flexible-direction {
    display: flex;
    flex-direction: column
}

.sortable-list-wrapper .sortable-list.permission .flexible-direction .order-and-name {
    margin-bottom: .5em
}

.sortable-list-wrapper .sortable-list.permission .flexible-direction .order-and-name.drop {
    text-decoration: line-through
}

.sortable-list-wrapper .sortable-list.permission .flexible-direction .order-and-name input[name$=".name"] {
    background-color: transparent;
    max-width: 20em;
    border: none;
    border-bottom: 1px solid;
    border-color: #ddd;
    border-color: var(--color-checkbox-label-border)
}

.sortable-list-wrapper .sortable-list.permission .flexible-direction .order-and-name input[name$=".name"]:focus {
    border-color: #29a1b7;
    border-color: var(--color-checkbox-label-focus);
    border-bottom-width: 2px;
    box-shadow: none;
    outline: 0
}

.sortable-list-wrapper .sortable-list.permission .flexible-direction .permissions {
    font-size: .8em
}

.sortable-list-wrapper .sortable-list.permission .flexible-direction .permissions>input[type=checkbox] {
    width: 1px;
    height: 1px;
    position: absolute;
    visibility: hidden
}

.sortable-list-wrapper .sortable-list.permission .flexible-direction .permissions>input[type=checkbox]+label {
    padding: .2em .5em;
    border: 1px solid;
    border-color: #ddd;
    border-color: var(--color-checkbox-label-border);
    border-radius: 1em;
    cursor: pointer;
    user-select: none;
    margin: 0
}

.sortable-list-wrapper .sortable-list.permission .flexible-direction .permissions>input[type=checkbox]+label:not(:last-of-type) {
    margin: .3em .3em .3em 0
}

.sortable-list-wrapper .sortable-list.permission .flexible-direction .permissions>input[type=checkbox]+label:hover {
    border-color: #29a1b7;
    border-color: var(--color-checkbox-label-focus)
}

.sortable-list-wrapper .sortable-list.permission .flexible-direction .permissions>input[type=checkbox]:disabled+label {
    opacity: .4;
    cursor: not-allowed
}

.sortable-list-wrapper .sortable-list.permission .flexible-direction .permissions>input[type=checkbox]:disabled+label:hover {
    border-color: #bbb;
    border-color: var(--color-border-outer)
}

.sortable-list-wrapper .sortable-list.permission .flexible-direction .permissions input[type=checkbox]:checked+label {
    border: 1px solid;
    border-color: #29a1b7;
    border-color: var(--color-checkbox-label-focus);
    color: #29a1b7;
    color: var(--color-checkbox-label-focus)
}

.sortable-list-wrapper .sortable-list.permission .flexible-direction .permissions input[type=checkbox]:checked+label::before {
    font-family: Ionicons;
    content: '\f121';
    margin-right: .3em
}

@media screen and (min-width: 992px) {
    .sortable-list-wrapper .sortable-list.permission .flexible-direction {
        flex-direction:row;
        align-items: center
    }

    .sortable-list-wrapper .sortable-list.permission .flexible-direction .order-and-name {
        margin: 0 1em 0 .5em
    }

    .sortable-list-wrapper .sortable-list.permission .flexible-direction .permissions>input[type=checkbox]+label:not(:last-of-type) {
        margin: .5em .5em .5em 0
    }
}

.sortable-list-wrapper .sortable-list.permission button[data-action=sortable-list-remove-item] {
    border: none;
    background-color: transparent;
    color: #000;
    color: var(--color-text-color)
}

.sortable-list-wrapper .sortable-list.category {
    border: none
}

.sortable-list-wrapper .sortable-list.category .sortable-list__item {
    display: block;
    border: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    border-top-width: 3px
}

.sortable-list-wrapper .sortable-list.category .sortable-list__item:not(:first-child) {
    margin-top: 1em
}

.sortable-list-wrapper .sortable-list.category .sortable-list__item>.item-head {
    padding: .5em 1em;
    display: flex;
    cursor: pointer;
    transition-duration: .3s
}

.sortable-list-wrapper .sortable-list.category .sortable-list__item>.item-head:hover {
    background-color: #eee;
    background-color: var(--color-bg-focus)
}

.sortable-list-wrapper .sortable-list.category .sortable-list__item>.item-head>:not(:first-child) {
    margin-left: .8em
}

.sortable-list-wrapper .sortable-list.category .sortable-list__item>.item-head>.sortable-list__handle {
    flex-shrink: 0;
    cursor: move
}

.sortable-list-wrapper .sortable-list.category .sortable-list__item>.item-head>.category-list__id {
    flex-grow: 1
}

.sortable-list-wrapper .sortable-list.category .sortable-list__item>.item-head>.category-list__id>input[type=text] {
    border: none;
    border-bottom: 1px solid;
    border-color: #ddd;
    border-color: var(--color-border-inner);
    margin: 0;
    padding: 0 .5em;
    background-color: transparent;
    color: #000;
    color: var(--color-text-color)
}

.sortable-list-wrapper .sortable-list.category .sortable-list__item>.item-head>.category-list__id>input[type=text]:focus {
    outline: 0;
    border-color: #000;
    border-color: var(--color-opposite)
}

.sortable-list-wrapper .sortable-list.category .sortable-list__item>.item-head>.category-list__foldArrow {
    flex-shrink: 0
}

.sortable-list-wrapper .sortable-list.category .sortable-list__item>.item-body {
    display: none
}

.sortable-list-wrapper .sortable-list.category .sortable-list__item>.item-body .category-list__displayname-wrapper {
    display: flex;
    margin-bottom: 1em;
    font-size: .8em;
    max-width: 20em
}

.sortable-list-wrapper .sortable-list.category .sortable-list__item>.item-body .category-list__displayname-wrapper .category-list__input-text {
    margin-right: .5em;
    border: none;
    border-bottom: 1px solid;
    border-color: #ddd;
    border-color: var(--color-border-inner);
    flex-grow: 1;
    padding: .1em .3em;
    background-color: transparent
}

.sortable-list-wrapper .sortable-list.category .sortable-list__item>.item-body .category-list__displayname-wrapper .category-list__input-text:focus {
    box-shadow: none;
    outline: 0;
    border-color: #000;
    border-color: var(--color-opposite)
}

.sortable-list-wrapper .sortable-list.category .sortable-list__item>.item-body .category-list__displayname-wrapper .category-list__restrict-country-btn {
    flex-shrink: 0;
    padding: .3em 1em;
    border: none;
    border-radius: 3px;
    color: #fff;
    color: var(--color-settings-point-text);
    background-color: #29a1b7;
    background-color: var(--color-settings-point-bg)
}

.sortable-list-wrapper .sortable-list.category .sortable-list__item .ion-chevron-down {
    display: block
}

.sortable-list-wrapper .sortable-list.category .sortable-list__item .ion-chevron-up,.sortable-list-wrapper .sortable-list.category .sortable-list__item.extend .ion-chevron-down {
    display: none
}

.sortable-list-wrapper .sortable-list.category .sortable-list__item.extend .ion-chevron-up {
    display: block
}

.sortable-list-wrapper .sortable-list.category .permissions {
    font-size: .8em
}

.sortable-list-wrapper .sortable-list.category .permissions>input[type=checkbox] {
    width: 1px;
    height: 1px;
    position: absolute;
    visibility: hidden
}

.sortable-list-wrapper .sortable-list.category .permissions>input[type=checkbox]+label {
    padding: .2em .5em;
    border: 1px solid;
    border-color: #ddd;
    border-color: var(--color-checkbox-label-border);
    border-radius: 1em;
    cursor: pointer;
    user-select: none;
    margin: 0
}

.sortable-list-wrapper .sortable-list.category .permissions>input[type=checkbox]+label:not(:last-of-type) {
    margin: .3em .3em .3em 0
}

.sortable-list-wrapper .sortable-list.category .permissions>input[type=checkbox]+label:hover {
    border-color: #29a1b7;
    border-color: var(--color-checkbox-label-focus)
}

.sortable-list-wrapper .sortable-list.category .permissions>input[type=checkbox]:disabled+label {
    opacity: .4;
    cursor: not-allowed
}

.sortable-list-wrapper .sortable-list.category .permissions>input[type=checkbox]:disabled+label:hover {
    border-color: #bbb;
    border-color: var(--color-border-outer)
}

.sortable-list-wrapper .sortable-list.category .permissions input[type=checkbox]:checked+label {
    border: 1px solid;
    border-color: #29a1b7;
    border-color: var(--color-checkbox-label-focus);
    color: #29a1b7;
    color: var(--color-checkbox-label-focus)
}

.sortable-list-wrapper .sortable-list.category .permissions input[type=checkbox]:checked+label::before {
    font-family: Ionicons;
    content: '\f121';
    margin-right: .3em
}

.sortable-list-wrapper .sortable-list.category .category-list__remove-item-btn {
    border: none;
    background-color: transparent;
    color: #000;
    color: var(--color-text-color);
    color: red;
    color: var(--color-broken-link-color)
}

.sortable-list-wrapper .sortable-list.category .category-list__remove-item-btn:hover {
    text-decoration: underline
}

.sortable-list-wrapper .sortable-list.report-action-template .sortable-list__item {
    display: table-row
}

.sortable-list-wrapper .sortable-list.report-action-template button[data-action=sortable-list-remove-item] {
    border: none;
    background-color: transparent;
    color: #000;
    color: var(--color-text-color)
}

.sortable-list-wrapper .flex-grow-1 {
    flex-grow: 1
}

.sortable-list-wrapper .flex-shrink-0 {
    flex-shrink: 0
}

.sortable-list-wrapper .sortable-chosen {
    background-color: #eee;
    background-color: var(--color-bg-focus)
}

.sortable-list-wrapper .sortable-drag {
    background-color: #fff;
    background-color: var(--color-bg-main)
}

button[data-action=sortable-list-add-item] {
    border: none;
    background-color: transparent;
    color: #000;
    color: var(--color-text-color);
    margin: .5em 0 1em
}

button[data-action=sortable-list-add-item]:hover {
    text-decoration: underline
}

.body .board-article .board-summary {
    margin-top: -1rem
}

.body .board-article .board-summary .row {
    margin: 0;
    padding: .75rem 0;
    border-bottom: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer)
}

@media screen and (max-width: 575px) {
    .body .board-article .board-summary .row {
        border-bottom:none;
        padding: 0 0 1rem
    }

    .body .board-article .board-summary .row:first-of-type {
        padding: 1rem 0
    }
}

.body .board-article .board-summary .row:last-of-type {
    border-bottom: none;
    padding-bottom: 0
}

@media screen and (max-width: 575px) {
    .body .board-article .board-summary .row:last-of-type .summary-item-wrap:last-of-type .summary-item:last-of-type {
        border-bottom:none!important
    }
}

.body .board-article .board-summary .row .top-article-card .board-info {
    margin-bottom: .7rem
}

.body .board-article .board-summary .row .top-article-card .board-info a {
    border-bottom: 2px solid #00a495
}

.body .board-article .board-summary .row .top-article-card .board-info a:hover {
    text-decoration: none
}

.body .board-article .board-summary .row .top-article-card h3>a:hover {
    text-decoration: underline
}

.body .board-article .board-summary .row .summary-item-wrap {
    margin: 0;
    padding: .5rem .25rem 0
}

.body .board-article .board-summary .row .summary-item-wrap:first-of-type .summary-item {
    padding-left: 0
}

@media screen and (max-width: 767px) {
    .body .board-article .board-summary .row .summary-item-wrap:first-of-type .summary-item {
        margin-top:-.5rem
    }
}

.body .board-article .board-summary .row .summary-item-wrap:last-of-type .summary-item {
    border-right: none;
    padding-right: 0
}

.body .board-article .board-summary .row .summary-item-wrap .summary-item {
    border-color: #ccc;
    padding: 0 .75rem;
    margin-top: -.5rem;
    border-right: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer)
}

@media screen and (max-width: 575px) {
    .body .board-article .board-summary .row .summary-item-wrap .summary-item {
        border-right:0;
        padding: 0;
        margin-top: .5rem;
        border-bottom: 1px solid;
        border-color: #ddd;
        border-color: var(--color-border-inner);
        padding-bottom: 1rem
    }
}

.body .board-article .board-summary .row .summary-item-wrap .summary-item .item-title {
    display: block;
    margin-bottom: .3rem;
    font-size: 1.25rem;
    padding-bottom: .5rem
}

.body .board-article .board-summary .row .summary-item-wrap .summary-item .item-title span {
    padding-bottom: .25rem;
    border-bottom: 2px solid #00a495
}

.body .board-article .board-summary .row .summary-item-wrap .summary-item .item-title:hover {
    text-decoration: none
}

.body .board-article .board-summary .row .summary-item-wrap .summary-item .item-title:before {
    display: inline-block;
    font-family: Ionicons;
    content: "\f125";
    float: right;
    margin-top: .1rem
}

.body .board-article .board-summary .row .summary-item-wrap .summary-item .link-list a {
    display: block;
    padding: .2rem .3rem;
    word-wrap: break-word;
    overflow: auto;
    font-size: .93rem
}

.body .board-article .board-summary .row .summary-item-wrap .summary-item .link-list a:hover {
    text-decoration: underline
}

.body .board-article .board-summary .row .summary-item-wrap .summary-item .link-list a:last-of-type {
    border-bottom: none
}

.body .board-article .board-summary .row .summary-item-wrap .summary-item .link-list a .leaf-info {
    font-size: .73rem
}

.body .board-article .board-summary .row .summary-item-wrap .summary-item .link-list a .leaf-info time.mobile {
    display: none
}

@media screen and (max-width: 767px) {
    .body .board-article .board-summary .row .summary-item-wrap .summary-item .link-list a .leaf-info time.pc {
        display:none
    }
}

@media screen and (max-width: 767px) {
    .body .board-article .board-summary .row .summary-item-wrap .summary-item .link-list a .leaf-info time.mobile {
        display:block
    }
}

.body .board-article .board-summary .top-row {
    padding: .5rem 0 2rem
}

.body .board-article .board-summary .top-row h3 {
    margin-bottom: 1rem
}

.body .board-article .go_setting {
    border-radius: 3px;
    font-size: .8rem;
    color: var(--gray)
}

.body .board-article .my-subscribe-channels {
    padding: 0 1rem;
    display: flex;
    gap: 8px;
    flex-direction: row
}

@media screen and (max-width: 1199px) {
    .body .board-article .my-subscribe-channels {
        flex-direction:column;
        padding: 0
    }
}

.body .board-article .my-subscribe-channels .channel {
    display: inline-block;
    width: 60px;
    margin-right: 16px;
    vertical-align: top;
    position: relative;
    text-decoration: none
}

@media screen and (max-width: 575px) {
    .body .board-article .my-subscribe-channels .channel {
        width:22%;
        margin: 0 1%
    }
}

.body .board-article .my-subscribe-channels .channel .channel-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #e6e6e6;
    background-color: var(--color-channel-shortcut-icon-background)
}

.body .board-article .my-subscribe-channels .channel .channel-icon.hidden-background {
    background: 0 0
}

.body .board-article .my-subscribe-channels .channel .channel-icon img {
    border-radius: 50%
}

@media screen and (max-width: 575px) {
    .body .board-article .my-subscribe-channels .channel .channel-icon {
        width:80%;
        height: 0;
        padding-bottom: 80%;
        position: relative;
        margin: 0 auto
    }
}

.body .board-article .my-subscribe-channels .channel .channel-icon .icon-placeholder {
    position: absolute;
    width: 60px;
    height: 60px;
    text-align: center;
    font-size: 2rem;
    color: var(--color-text-color)
}

@media screen and (max-width: 575px) {
    .body .board-article .my-subscribe-channels .channel .channel-icon .icon-placeholder {
        width:100%;
        font-size: 1.5rem;
        position: absolute;
        height: 100%;
        flex-wrap: nowrap
    }
}

.body .board-article .my-subscribe-channels .channel .channel-icon .image {
    position: relative;
    width: 100%;
    height: 100%
}

@media screen and (max-width: 575px) {
    .body .board-article .my-subscribe-channels .channel .channel-icon .image {
        position:absolute
    }
}

.body .board-article .my-subscribe-channels .channel .channel-name {
    text-align: center;
    font-size: .8rem;
    margin-top: .3rem;
    color: var(--color-text-color);
    word-break: break-all
}

.body .board-article .my-subscribe-channels .add-channel .channel-icon {
    background-color: var(--color-channel-shortcut-add-icon-background)
}

.body .board-article .my-subscribe-channels .add-channel .channel-icon .icon-placeholder {
    color: var(--color-bg-main)
}

.ui-menu.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper {
    padding: .5em .75em
}

.ui-menu.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background-color: #5a5a64;
    border-color: #3d414d
}

.body {
    background-color: #eee;
    background-color: var(--color-bg-body);
    color: #000;
    color: var(--color-text-color);
    min-width: 20rem
}

.body a.text-colored-link {
    color: #0275d8;
    color: var(--color-link-color)
}

.body a.text-colored-link:focus,.body a.text-colored-link:visited {
    color: #0275d8;
    color: var(--color-link-color)
}

.body dl.arca-qna {
    padding-left: 40px
}

.body dl.arca-qna dd:before,.body dl.arca-qna dt:before {
    margin-left: -40px;
    padding-right: 3px;
    width: 40px;
    display: inline-block;
    text-align: right
}

.body dl.arca-qna dt:before {
    content: '🙋 '
}

.body dl.arca-qna dd:before {
    content: '👉 '
}

.body img.twemoji {
    display: inline;
    width: 1.1em;
    height: 1.1em;
    user-select: text
}

.body .shortkey-help {
    z-index: 11;
    left: 1.5rem;
    bottom: 2rem;
    width: 100%;
    max-width: 350px
}

.body .shortkey-help .toast-body p {
    margin-bottom: .5em
}

.body .shortkey-help .toast-body p .keyicon {
    border: 1px solid #fff;
    border-radius: 50%
}

.body #toastbox {
    z-index: 11;
    right: 0;
    bottom: 4rem;
    width: 100%;
    max-width: 350px
}

.body #toastbox .toast .toast-header small.count {
    background-color: #3d414d;
    background-color: var(--color-bg-navbar);
    padding: .05em .4em;
    margin-left: .2em;
    border-radius: 24px;
    font-size: .95em;
    color: #fff
}

.body #toastbox .toast .toast-body {
    word-wrap: break-word;
    word-break: keep-all
}

.body #toastbox .toast .toast-body a {
    color: #000;
    color: var(--color-text-color)
}

.body .arca-overlay-notice {
    padding: 4rem 0;
    background-color: rgba(128,128,128,.2)
}

.body .arca-overlay-notice:before {
    font-size: 13rem
}

.body .arca-overlay-notice,.body .arca-overlay-notice .arca-overlay-notice * {
    font-size: 2rem
}

.body .root-container {
    margin: 0 auto
}

.body .root-container.single .footer,.body .root-container.single .left-ad-area,.body .root-container.single .nav-control,.body .root-container.single .navbar-wrapper,.body .root-container.single .right-sidebar,.body .root-container.single .topbar-area {
    display: none!important
}

.body .root-container.single .board-article {
    margin-right: 0!important;
    padding: 0!important;
    background-color: initial!important;
    border: 0!important
}

.body .root-container.single .board-article>div:not(.alert) {
    padding: 0 1rem!important
}

.body .root-container.single .board-article>.alert {
    margin-top: 1rem
}

.body .page-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-left: 1rem
}

.body .navbar-wrapper {
    z-index: 1034;
    position: relative;
    background-color: #3d414d;
    background-color: var(--color-bg-navbar);
    border-bottom: 1px solid var(--color-border-navbar)
}

@media screen and (max-width: 991px) {
    .body .navbar-wrapper .navbar .search-form {
        display:none!important
    }

    .body .navbar-wrapper.mb-search-on .navbar .search-form {
        display: inherit!important
    }
}

.body .navbar-wrapper .navbar {
    border-radius: 0;
    margin: 0 auto;
    padding: .4rem 1rem .5rem
}

.body .navbar-wrapper .navbar .navbar-brand {
    margin-right: 1rem;
    padding: 0;
    height: 100%;
    line-height: 100%
}

@media screen and (max-width: 991px) {
    .body .navbar-wrapper .navbar .navbar-brand {
        margin-right:.5rem
    }
}

@media screen and (max-width: 575px) {
    .body .navbar-wrapper .navbar .navbar-brand {
        margin-right:.25rem
    }
}

.body .navbar-wrapper .navbar .navbar-brand svg {
    width: 26px;
    margin-top: 1px
}

.body .navbar-wrapper .navbar .nav-link {
    color: #fff
}

.body .navbar-wrapper .navbar .collapse {
    float: left
}

.body .navbar-wrapper .navbar .dropdown-menu {
    left: auto;
    right: 0;
    margin-top: -.3rem;
    z-index: 20001
}

.body .navbar-wrapper .navbar .dropdown-menu .displayconfig {
    cursor: pointer
}

.body .navbar-wrapper .navbar .search-form {
    display: flex;
    margin-right: 1rem;
    margin-left: auto;
    background-color: var(--color-bg-navbar)
}

@media screen and (max-width: 991px) {
    .body .navbar-wrapper .navbar .search-form {
        position:absolute;
        width: 100%;
        margin: 0 -1rem;
        top: 3.4rem;
        border-top: 1px solid #5a5a62
    }
}

@media screen and (min-width: 992px) {
    .body .navbar-wrapper .navbar .search-form:focus-within {
        background-color:rgba(255,255,255,.15)
    }
}

.body .navbar-wrapper .navbar .search-form .search-input-wrapper {
    width: 100%;
    border-bottom: 2px solid #eee
}

@media screen and (max-width: 991px) {
    .body .navbar-wrapper .navbar .search-form .search-input-wrapper {
        border-bottom:none
    }
}

.body .navbar-wrapper .navbar .search-form .icon {
    font-size: 1.3rem;
    margin: 0 0 0 .6rem;
    position: absolute;
    color: #fff;
    pointer-events: none
}

@media screen and (max-width: 991px) {
    .body .navbar-wrapper .navbar .search-form .icon {
        margin:.2rem 0 0 .6rem
    }
}

.body .navbar-wrapper .navbar .search-form input[type=search] {
    width: 5.5rem;
    background-color: transparent;
    border: none;
    padding: 0 0 0 2.2rem;
    margin: 0;
    height: 2rem;
    color: #fff;
    font-size: .95rem
}

@media screen and (max-width: 991px) {
    .body .navbar-wrapper .navbar .search-form input[type=search] {
        width:100%
    }
}

.body .navbar-wrapper .navbar .search-form input[type=search]:before {
    font-size: 1.3rem;
    margin: 0 .5rem;
    position: absolute;
    color: #fff
}

.body .navbar-wrapper .navbar .search-form input[type=search]::placeholder {
    color: #fff
}

.body .navbar-wrapper .navbar .search-form input[type=search]:focus {
    box-shadow: none;
    width: 17rem
}

@media screen and (min-width: 992px) {
    .body .navbar-wrapper .navbar .search-form input[type=search]:not(:placeholder-shown) {
        width:17rem
    }
}

@media screen and (max-width: 991px) {
    .body .navbar-wrapper .navbar .search-form input[type=search] {
        height:2.2rem
    }
}

.body .navbar-wrapper .navbar .user-menu-parent {
    padding: .25rem 0 .15rem;
    margin-left: 0
}

.body .navbar-wrapper .navbar .user-menu-parent .user-menu-link {
    padding: 0;
    font-size: 1.25rem
}

.body .navbar-wrapper .navbar .user-menu-parent .user-menu-link:after {
    margin-left: 0;
    border-top: 0;
    border-right: 0;
    border-left: 0
}

@media screen and (min-width: 768px) {
    .body .navbar-wrapper .navbar .user-menu-parent .user-menu-link .username {
        padding:0 0 0 .5rem
    }
}

.body .navbar-wrapper .navbar .user-dropdown-menu {
    right: -.25rem;
    margin-top: -.3rem
}

.body .navbar-wrapper .navbar .user-dropdown-menu .help-item {
    text-align: center;
    padding: 1rem 2rem;
    min-width: 17rem
}

.body .navbar-wrapper .navbar .user-dropdown-menu .help-text {
    font-size: .9rem;
    margin-bottom: .75rem;
    word-wrap: break-word
}

.body .navbar-wrapper .navbar .user-dropdown-menu .user-info {
    font-size: .95rem;
    padding: 3px 20px
}

.body .navbar-wrapper .navbar .user-dropdown-menu .user-info .username {
    font-size: 1.2rem;
    font-weight: 600
}

.body .navbar-wrapper .navbar .noti-menu-link {
    margin: 0 .5rem
}

.body .navbar-wrapper .navbar .noti-menu-link span {
    color: #fff
}

.body .navbar-wrapper .navbar .noti-menu-link .red-dot {
    background-color: red;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    right: 0;
    margin-right: .7rem
}

.body .navbar-wrapper .navbar .noti-dropdown-menu {
    right: -.3rem
}

.body .navbar-wrapper .navbar .noti-dropdown-menu .title {
    padding: 3px 20px;
    font-size: 1.1rem
}

.body .navbar-wrapper .navbar .noti-dropdown-menu .title #removeAllBtn {
    margin-right: -10px;
    font-size: .75rem;
    border-radius: 3px
}

.body .navbar-wrapper .navbar .noti-dropdown-menu .noti-item-list {
    width: 18rem;
    height: 14rem;
    list-style: none;
    padding: 0;
    overflow-y: scroll
}

.body .navbar-wrapper .navbar .noti-dropdown-menu .noti-item-list li.isRead {
    opacity: .4
}

.body .navbar-wrapper .navbar .noti-dropdown-menu .noti-item-list li a {
    padding: 3px 20px;
    display: block
}

.body .navbar-wrapper .navbar .noti-dropdown-menu .noti-item-list li a:hover {
    text-decoration: none
}

.body .navbar-wrapper #navbarLeftMenu {
    padding: .2rem;
    z-index: 20000
}

.body .navbar-wrapper #navbarLeftMenu .navbar-nav {
    margin: 0 1rem;
    padding: 0;
    list-style: none
}

.body .navbar-wrapper #navbarLeftMenu .navbar-nav .nav-item+.nav-item {
    margin-left: 0
}

.body .navbar-wrapper #navbarLeftMenu .navbar-nav .nav-item {
    margin-right: 1rem
}

.body .topbar-area {
    height: 1.7rem;
    padding: 0 .3rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #4c5161;
    color: #fff
}

.body .topbar-area span.topbar-text {
    margin-left: .3rem;
    letter-spacing: -.1rem;
    line-height: 1.5rem;
    font-size: .8rem
}

.body .topbar-area span.topbar-text a {
    color: #fff
}

@media screen and (max-width: 991px) {
    .body .navbar-wrapper.mb-search-on+.topbar-area {
        margin-top:2.15rem
    }
}

.body .navbar-arca-settings {
    overflow-x: auto;
    scrollbar-width: 2px;
    word-break: keep-all
}

.body .navbar-arca-settings button.navbar-toggler {
    color: #000;
    color: var(--color-text-color)
}

.body .navbar-arca-settings .nav-item {
    padding: 0;
    margin: .5rem;
    font-size: 1.1rem
}

.body .navbar-arca-settings .nav-item a {
    white-space: nowrap;
    text-decoration: none
}

.body .navbar-arca-settings .nav-item.active {
    border-bottom: 2px solid var(--color-primary-theme)
}

.body .content-wrapper {
    display: grid;
    margin: 0 auto;
    grid-template-columns: auto 1fr calc(300px + .75rem)
}

@media screen and (max-width: 991px) {
    .body .content-wrapper {
        grid-template-columns:1fr!important
    }
}

.body .content-wrapper.no-sidebar {
    grid-template-columns: 1fr!important
}

.body .content-wrapper .containe-fluid {
    border-width: 0 1px;
    border-style: solid;
    border-color: #bbb;
    border-color: var(--color-border-outer)
}

@media screen and (max-width: 991px) {
    .body .content-wrapper .containe-fluid {
        border-width:0;
        border-radius: 0
    }
}

.body .article-write>.board-title {
    margin-bottom: 1rem
}

.body .channel-setting>.board-title {
    margin: -1rem 0 .5rem -1rem
}

@media screen and (max-width: 575px) {
    .body .article-write>.board-title {
        margin:-1rem -.5rem .5rem
    }

    .body .channel-setting>.board-title {
        margin: 0 0 .5rem
    }
}

.body .board-article {
    background-color: #fff;
    background-color: var(--color-bg-main);
    padding: 1rem 0 1rem 1rem;
    min-height: 65rem;
    min-height: 100vh;
    margin: 0 .75rem 0 0;
    overflow: hidden
}

@media screen and (max-width: 991px) {
    .body .board-article {
        margin-right:0;
        padding: 1rem 0 1rem 1rem
    }
}

@media screen and (max-width: 575px) {
    .body .board-article {
        padding-left:0
    }
}

.body .board-article>div {
    padding-right: 1rem
}

@media screen and (max-width: 575px) {
    .body .board-article>div {
        padding-left:1rem
    }
}

@media screen and (min-width: 992px) {
    .body .board-article {
        border-right:1px solid;
        border-color: #bbb;
        border-color: var(--color-border-outer)
    }
}

@media screen and (max-width: 991px) {
    .body .board-article input[name^=assistants][name$=".name"] {
        min-width:8rem
    }

    .body .board-article input[name^=categories][name$=".displayName"],.body .board-article input[name^=categories][name$=".id"],.body .board-article td.ion-android-menu+td[nowrap] {
        min-width: 4rem
    }

    .body .board-article table.horizontal-scrollable {
        overflow-x: scroll
    }

    .body .board-article table.horizontal-scrollable tbody td {
        white-space: nowrap
    }
}

.body .board-article label.form-check-inline {
    margin-right: 0
}

.body .board-article label.form-check-block {
    display: block;
    padding: 0
}

.body .left-ad-area {
    float: left;
    width: 160px;
    margin: .75rem 0 0 calc(160px * -1)!important;
    position: sticky;
    top: .75rem;
    transform: translateX(-.75rem)
}

.body .left-ad-area .small-ad {
    width: 160px;
    height: 600px;
    margin: 0
}

.body .right-sidebar {
    position: relative;
    padding: .75rem .75rem .75rem 0
}

@media screen and (max-width: 991px) {
    .body .right-sidebar {
        display:none
    }
}

.body .right-sidebar .ad.fixed {
    position: fixed;
    top: 50px;
    bottom: auto
}

.body .right-sidebar .ad.abs {
    position: absolute;
    bottom: 0;
    top: auto
}

.body .right-sidebar .sticky-container {
    position: sticky;
    top: .75rem
}

.body .footer {
    margin: auto 0;
    padding: 1rem;
    text-align: center;
    border: solid #bbb;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    border-width: 1px 0 0;
    background-color: #fff;
    background-color: var(--color-bg-footer)
}

.body .footer p {
    margin: 0
}

.body .footer p.footer-current-users {
    font-size: .9rem
}

.body .footer a {
    color: #0275d8;
    color: var(--color-link-color)
}

.body .footer a:focus,.body .footer a:visited {
    color: #0275d8;
    color: var(--color-link-color)
}

.body .user-info a {
    color: #000;
    color: var(--color-text-color)
}

.body .user-info .user-icon {
    color: #777;
    color: var(--color-user-icon-public)
}

.body .user-info .user-icon.user-fixed {
    color: #777;
    color: var(--color-user-icon-fixed)
}

.body .user-info .user-icon.user-manager {
    color: #eb6111
}

.body .user-info .user-icon.user-assistants {
    color: #20639b
}

.body .user-admin-action {
    color: #777;
    color: var(--color-user-icon-fixed)
}

.body .comment-item .message .emojicon {
    color: transparent;
    width: 100px;
    height: 100px;
    display: inline-block
}

.body .comment-item .message .emojicon img {
    width: auto;
    height: 100px;
    vertical-align: top
}

.body .config-alert {
    margin-right: 1rem
}

@media screen and (max-width: 575px) {
    .body .config-alert {
        margin:0 1rem 2rem
    }
}

.body .grecaptcha-badge {
    visibility: hidden
}

html.width-1100 .body .content-wrapper,html.width-1100 .body .navbar-wrapper .navbar {
    max-width: 1100px
}

@media screen and (max-width: 1500px) {
    html.width-1100 .body .content-wrapper {
        grid-template-columns:1fr calc(300px + .75rem)
    }

    html.width-1100 .body .left-ad-area {
        display: none
    }
}

html.width-1200 .body .content-wrapper,html.width-1200 .body .navbar-wrapper .navbar {
    max-width: 1200px
}

@media screen and (max-width: 1600px) {
    html.width-1200 .body .content-wrapper {
        grid-template-columns:1fr calc(300px + .75rem)
    }

    html.width-1200 .body .left-ad-area {
        display: none
    }
}

html.width-1300 .body .content-wrapper,html.width-1300 .body .navbar-wrapper .navbar {
    max-width: 1300px
}

@media screen and (max-width: 1700px) {
    html.width-1300 .body .content-wrapper {
        grid-template-columns:1fr calc(300px + .75rem)
    }

    html.width-1300 .body .left-ad-area {
        display: none
    }
}

html.width-1500 .body .content-wrapper,html.width-1500 .body .navbar-wrapper .navbar {
    max-width: 1500px
}

@media screen and (max-width: 1900px) {
    html.width-1500 .body .content-wrapper {
        grid-template-columns:1fr calc(300px + .75rem)
    }

    html.width-1500 .body .left-ad-area {
        display: none
    }
}

html.width-1600 .body .content-wrapper,html.width-1600 .body .navbar-wrapper .navbar {
    max-width: 1600px
}

@media screen and (max-width: 2000px) {
    html.width-1600 .body .content-wrapper {
        grid-template-columns:1fr calc(300px + .75rem)
    }

    html.width-1600 .body .left-ad-area {
        display: none
    }
}

html.navbar-fixed .body .root-container:not(.single) {
    padding-top: 3.4rem
}

html.navbar-fixed .body .navbar-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    left: 0
}

html.navbar-fixed .body .left-ad-area {
    top: calc(3.4rem + .75rem)
}

html.navbar-fixed .body .right-sidebar .sticky-container {
    top: calc(3.4rem + .75rem)
}

html:not([class*=width]) .body .left-ad-area {
    display: none
}

html:not([class*=width]) .body .content-wrapper {
    grid-template-columns: 1fr calc(300px + .75rem)
}

html .arca-wrap {
    padding: 1em
}

html .arca-wrap .title {
    margin-bottom: .75rem
}

html .arca-wrap .content {
    padding: 2em
}

html .arca-wrap label.arca-label {
    font-size: 1.1em;
    font-weight: 600
}

html .arca-wrap .arca-subtitle {
    font-size: .9rem;
    font-weight: 400;
    line-height: 1;
    color: var(--color-text-muted);
    word-break: keep-all
}

html .arca-wrap .content {
    background-color: var(--color-arca-wrap-background-color);
    border-radius: 6px
}

@media screen and (max-width: 575px) {
    html .arca-wrap .content {
        padding:1em 1em 1.5em
    }
}

html.theme-dark .toast {
    background-color: transparent
}

html.theme-dark .toast .toast-header {
    color: #d3d3d3;
    color: var(--color-text-color);
    background-color: #333;
    background-color: var(--color-bg-dialog)
}

html.theme-dark .toast .toast-header button.close {
    text-shadow: none;
    color: #fff
}

html.theme-dark .toast .toast-body {
    background-color: #2d2f34;
    background-color: var(--color-bg-table)
}

html.theme-dark .toast .toast-body a {
    color: #d3d3d3;
    color: var(--color-text-color)
}

html .body.modal-sensitive .article-list .list-table.hybrid .vrow .vrow-preview img {
    display: none
}

html .body.modal-sensitive .modal-backdrop.show {
    opacity: 1;
    background-color: rgba(0,0,0,.9)
}

@supports(backdrop-filter: blur()) {
    html .body.modal-sensitive .modal-backdrop.show {
        background-color:rgba(0,0,0,.5);
        backdrop-filter: blur(30px)
    }
}

.emoticon-list tr {
    display: inline-block;
    width: inherit;
    position: relative;
    overflow: hidden;
    margin: 6px
}

.emoticon-list tr td {
    border: none;
    width: inherit;
    display: inline-block;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    border: 0 transparent!important
}

.emoticon-list tr td a img {
    max-width: 100px;
    max-height: 100px
}

@media screen and (max-width: 575px) {
    .emoticon-list tr td a img {
        width:80px;
        height: 80px
    }
}

.emoticon-list tr .remove-icon {
    position: absolute;
    top: -8px;
    right: -8px
}

.emoticon-list tr .remove-icon a {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    font-size: .8em;
    line-height: 1.3em;
    text-align: center;
    color: #fff;
    border-radius: 100%
}

.emoticon-list tr .remove-icon a.minus {
    background-color: #dc4343
}

.emoticon-list tr .remove-icon a.plus {
    background-color: var(--color-primary-theme)
}

.emoticon-expired .text-muted {
    font-weight: 400;
    font-size: .9rem
}

.emoticon-expired .btn-mana {
    margin-top: -1rem
}

@media screen and (max-width: 991px) {
    .td-text-sm {
        font-size:.85rem
    }
}

.td-text-sm input {
    margin-right: 1rem;
    width: 90%
}

@media screen and (max-width: 991px) {
    .td-text-sm input {
        font-size:.85rem
    }
}

.arca-settings-title {
    font-size: 1.2rem;
    margin-top: 1rem
}

.channel-setting-wrap {
    margin-top: -1rem;
    padding: 0!important
}

.channel-setting .image-upload-btn {
    border: 1px solid var(--color-border-outer);
    background-color: var(--color-bg-input);
    border-radius: 4px;
    padding: .3rem 1.2rem;
    cursor: pointer
}

.channel-setting #channel_image_preview {
    display: flex;
    max-height: 400px;
    overflow-x: auto
}

.channel-setting #channel_image_preview img {
    flex-direction: row;
    margin-right: .5em;
    max-height: 400px
}

.channel-image-tooltip .inner {
    padding: .5rem;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 0
}

.channel-image-tooltip .inner button {
    display: inline-block
}

span.zero-at-one-space {
    display: inline-block;
    width: .1rem
}

p.word-break-keep-all {
    word-break: keep-all
}

img.button-svg-margin {
    margin-bottom: 2px
}

.body .login-wrapper {
    display: flex;
    align-items: center;
    height: 100vh
}

.body .login-wrapper .login-box {
    display: flex;
    max-width: 40rem;
    margin: 0 auto;
    padding: 3rem;
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-border-outer);
    flex: 1
}

@media screen and (max-width: 767px) {
    .body .login-wrapper .login-box {
        padding:3rem 1rem;
        background-color: transparent;
        border: 0;
        flex-direction: column
    }
}

@media screen and (min-width: 768px) {
    .body .login-wrapper .login-box {
        position:relative
    }
}

.body .login-wrapper .login-box.has-qr-login {
    max-width: 65rem
}

.body .login-wrapper .login-box:not(.has-qr-login) .or-text-divider,.body .login-wrapper .login-box:not(.has-qr-login) .qr-login-area,.body .login-wrapper .login-box:not(.has-qr-login) .vertical-text-divider {
    display: none
}

.body .login-wrapper .login-box .normal-login-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    margin: 3rem 0
}

@media screen and (max-width: 767px) {
    .body .login-wrapper .login-box .vertical-or-text-divider {
        display:none
    }
}

.body .login-wrapper .login-box .or-text-divider {
    display: none
}

@media screen and (max-width: 767px) {
    .body .login-wrapper .login-box .or-text-divider {
        display:flex
    }
}

.body .login-wrapper .login-box .qr-login-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 20rem;
    margin: 3rem 1rem 3rem 0
}

@media screen and (max-width: 767px) {
    .body .login-wrapper .login-box .qr-login-area {
        margin-right:0;
        max-width: 100%
    }
}

.body .login-wrapper .login-box .qr-login-area #loginQRCode {
    display: block;
    margin: 0 auto;
    width: 18rem!important;
    height: 18rem!important;
    border-radius: 7px
}

.body .login-wrapper .login-box .tfa-login-area {
    max-width: 30rem;
    margin: 0 auto
}

.body .login-wrapper .login-box .brand-logo {
    display: block;
    color: var(--color-point-color);
    width: 10rem;
    margin: 0 auto 3rem
}

@media screen and (max-width: 767px) {
    .body .login-wrapper .login-box .brand-logo {
        width:8rem
    }
}

.body .login-wrapper .login-box .brand-logo svg {
    fill: var(--color-bg-main);
    margin-bottom: .5rem
}

.body .login-wrapper .login-box .label {
    font-size: 2rem;
    text-align: center;
    margin-top: .8rem
}

@media screen and (max-width: 767px) {
    .body .login-wrapper .login-box .label {
        font-size:1.7rem
    }
}

.body .login-wrapper .login-box .sub-label {
    font-size: 1.2rem;
    text-align: center
}

.body .login-wrapper .login-box .login-carousel .inner {
    position: relative;
    width: 100%;
    overflow: hidden
}

.body .login-wrapper .login-box .login-carousel .item {
    display: none;
    position: relative;
    left: 100%;
    float: left;
    width: 100%;
    margin-right: -100%;
    backface-visibility: hidden;
    transition: transform .6s ease-in-out
}

.body .login-wrapper .login-box .login-carousel .item.active {
    display: block;
    left: auto
}

.body .login-wrapper .login-box .numbers {
    margin-right: 0
}

.body .login-wrapper .login-box .numbers .col {
    padding-right: 0
}

.body .login-wrapper .login-box .numbers .col input {
    text-align: center;
    font-size: 1.9rem;
    caret-color: transparent;
    ime-mode: disabled;
    padding: .05rem
}

.body .login-wrapper .login-box .numbers .col input:invalid {
    background-image: none!important
}

.body .login-wrapper .login-box .numbers .col:nth-child(3) {
    padding-right: 20px
}

.body #externalAuthModal {
    position: absolute;
    border: 1px solid var(--color-border-outer);
    background-color: var(--color-bg-main);
    width: 40rem;
    height: 30rem;
    top: calc(50% - 15rem);
    left: calc(50% - 20rem)
}

.body #externalAuthModal .modal-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.body #externalAuthModal .icon {
    display: inline-block;
    font-size: 10rem;
    color: var(--color-point-color);
    transform: rotate(-45deg);
    margin: -4rem 0
}

.body #externalAuthModal .label {
    font-size: 2rem;
    text-align: center;
    margin-top: 2rem
}

@media screen and (max-width: 767px) {
    .body #externalAuthModal .label {
        font-size:1.7rem
    }
}

.body #externalAuthModal .sub-label {
    font-size: 1.2rem;
    text-align: center
}

.body .nav-control {
    position: fixed;
    margin: 0 1rem calc(env(safe-area-inset-bottom) + 1rem) 0;
    padding: 0;
    right: 0;
    bottom: 0;
    list-style-type: none;
    border-bottom: none;
    border-right: none;
    z-index: 1035
}

.body .nav-control li {
    float: left;
    background-color: var(--color-bg-navbar);
    border-radius: 999px;
    opacity: .7;
    margin-right: .2rem
}

.body .nav-control li:hover {
    opacity: .8
}

.body .nav-control li span {
    font-size: 1.6rem;
    line-height: 1.8;
    text-align: center;
    color: #fff;
    cursor: pointer;
    width: 2.7rem;
    height: 2.7rem;
    display: inline-block
}

.body .nav-control li span.sm {
    font-size: 1.5rem;
    line-height: 1.9
}

.body .nav-control li:first-of-type a {
    border-left: none
}

.device-list .device-item {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--color-border-inner)
}

@media screen and (max-width: 767px) {
    .device-list .device-item {
        align-items:initial;
        flex-direction: column;
        padding: 0
    }
}

.device-list .device-item .info {
    display: flex;
    align-items: center;
    margin-right: auto
}

@media screen and (max-width: 767px) {
    .device-list .device-item .info {
        border-bottom:1px solid var(--color-border-inner);
        padding: .7rem;
        margin-right: 0
    }
}

.device-list .device-item .info .icon {
    font-size: 2.5rem;
    text-align: center;
    width: 3rem;
    margin-right: 1rem
}

.device-list .device-item .info .name {
    width: 13rem
}

@media screen and (max-width: 767px) {
    .device-list .device-item .info .name {
        width:7rem
    }
}

.device-list .device-item .info .name .is-current-device {
    margin-left: 2em
}

@media screen and (max-width: 767px) {
    .device-list .device-item .info .name .is-current-device {
        margin-left:.5em
    }
}

.device-list .device-item .info .detail {
    display: flex;
    flex-direction: column;
    font-size: .9em
}

.device-list .device-item .info .detail .r {
    display: flex
}

@media screen and (max-width: 767px) {
    .device-list .device-item .info .detail .r {
        flex-direction:column
    }
}

.device-list .device-item .info .detail .r>span {
    margin-right: 1.5em
}

@media screen and (max-width: 767px) {
    .device-list .device-item .info .detail .r>span {
        margin-right:0
    }
}

.device-list .device-item .info .detail [class$=-title] {
    margin-right: 1em
}

@media screen and (max-width: 767px) {
    .device-list .device-item .info .detail .last-date-title {
        display:none
    }
}

.device-list .device-item .actions {
    display: flex;
    justify-content: end;
    min-width: 7rem
}

@media screen and (max-width: 767px) {
    .device-list .device-item .actions {
        padding:.7em
    }

    .device-list .device-item .actions .btn {
        font-size: .9em;
        padding: .3em .7em
    }

    .device-list .device-item .actions .verb {
        display: none
    }
}

.body .sidebar .sidebar-item {
    background-color: #fff;
    background-color: var(--color-bg-main);
    padding: 1rem;
    margin-bottom: .75rem;
    border: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    border-radius: 6px
}

.body .sidebar .sidebar-item .item-title {
    margin-bottom: .6rem;
    font-size: 1.3rem
}

.body .sidebar .sidebar-item .link-list a {
    font-size: .9rem;
    display: block;
    padding: .15rem 5.5rem .15rem 0;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: normal;
    white-space: nowrap
}

.body .sidebar .sidebar-item .link-list a:hover {
    text-decoration: underline
}

.body .sidebar .sidebar-item .link-list a span {
    float: right;
    margin-right: -5.5rem
}

.body .sidebar .sidebar-item.no-date .link-list a {
    padding: .15rem 0
}

.body .sidebar .sidebar-item.short-date .link-list a {
    padding: .15rem 3.2rem .15rem 0
}

.body .sidebar .sidebar-item.short-date .link-list span {
    margin-right: -3.2rem
}

.body .sidebar .sidebar-item#wikiRecent .link-list a {
    padding-right: 3.5rem
}

.body .sidebar .sidebar-item#wikiRecent .link-list a span {
    margin-right: -3.5rem
}

.body .sidebar .sidebar-item#newsRank .link-list a {
    padding-right: .15rem
}

.body .sidebar .sidebar-by {
    margin: 0 1px 1px;
    display: block;
    text-align: right;
    font-size: 12px
}

.body .board-article .terms-row {
    margin: -1rem 0 2rem
}

.body .board-article .terms-row .checkbox {
    margin-top: .75rem
}

@keyframes highlight-target-fade {
    0% {
        background-color: var(--color-highlight-color)
    }

    100% {
        background-color: transparent
    }
}

@keyframes opacity-target-fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes opacity-target-fade-out {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes opacity-target-fade-out-in {
    0% {
        opacity: 1
    }

    50% {
        opacity: .3
    }

    100% {
        opacity: 1
    }
}

.body :target {
    animation: highlight-target-fade 2.5s;
    animation-timing-function: ease-out
}

.body .sep:before {
    content: '|';
    font-size: 1.1em;
    font-weight: 300;
    margin: 0 .5em;
    line-height: .9em
}

.body .btns {
    margin-top: .75rem;
    text-align: right
}

.body .btns .btn-primary,.body .btns .btn-success {
    min-width: 6rem
}

.body .btns .grecaptcha-badge {
    float: left
}

@media screen and (max-width: 575px) {
    .body .btns .grecaptcha-badge {
        margin-bottom:1rem
    }
}

.body .leaf-info {
    background-color: #3d414d;
    background-color: var(--color-bg-badge);
    color: #fff;
    font-family: Monospace;
    font-size: .8em;
    border-radius: .3rem;
    padding: 0 .3rem;
    margin-top: .2rem;
    border: 1px solid var(--color-border-badge)
}

.body .scrollbox {
    height: 15rem;
    border: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    overflow-y: scroll;
    word-wrap: break-word;
    padding: .25rem
}

.body .overflow-hidden {
    overflow: hidden
}

.body tbody.ui-sortable>tr>td:first-of-type:before {
    font-size: 1.3em
}

.body .table.align-middle td {
    vertical-align: middle
}

.body .clearfix {
    clear: both
}

.body .pre-wrap {
    white-space: pre-wrap;
    word-break: break-all;
    font-family: monospace
}

.body .text-divider {
    display: flex;
    align-items: center
}

.body .text-divider::after,.body .text-divider::before {
    content: '';
    height: 1px;
    background-color: silver;
    flex-grow: 1
}

.body .text-divider::before {
    margin-right: 1rem
}

.body .text-divider::after {
    margin-left: .75rem
}

.body .vertical-text-divider {
    display: flex;
    align-items: center;
    writing-mode: vertical-rl;
    text-orientation: upright
}

.body .vertical-text-divider::after,.body .vertical-text-divider::before {
    content: '';
    width: 1px;
    background-color: silver;
    flex-grow: 1
}

.body .vertical-text-divider::before {
    margin-bottom: 1rem
}

.body .vertical-text-divider::after {
    margin-top: 1rem
}

.body .batch-comment-checkbox-all+.custom-control-label::before,.body .removeCommentIds+.custom-control-label::before {
    border-radius: 100px
}

.body .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.body .hide-scrollbar::-webkit-scrollbar {
    display: none
}

@keyframes highlight-target-fade {
    0% {
        background-color: var(--color-highlight-color)
    }

    100% {
        background-color: transparent
    }
}

@keyframes opacity-target-fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes opacity-target-fade-out {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes opacity-target-fade-out-in {
    0% {
        opacity: 1
    }

    50% {
        opacity: .3
    }

    100% {
        opacity: 1
    }
}

.body :target {
    animation: highlight-target-fade 2.5s;
    animation-timing-function: ease-out
}

.body .sep:before {
    content: '|';
    font-size: 1.1em;
    font-weight: 300;
    margin: 0 .5em;
    line-height: .9em
}

.body .btns {
    margin-top: .75rem;
    text-align: right
}

.body .btns .btn-primary,.body .btns .btn-success {
    min-width: 6rem
}

.body .btns .grecaptcha-badge {
    float: left
}

@media screen and (max-width: 575px) {
    .body .btns .grecaptcha-badge {
        margin-bottom:1rem
    }
}

.body .leaf-info {
    background-color: #3d414d;
    background-color: var(--color-bg-badge);
    color: #fff;
    font-family: Monospace;
    font-size: .8em;
    border-radius: .3rem;
    padding: 0 .3rem;
    margin-top: .2rem;
    border: 1px solid var(--color-border-badge)
}

.body .scrollbox {
    height: 15rem;
    border: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    overflow-y: scroll;
    word-wrap: break-word;
    padding: .25rem
}

.body .overflow-hidden {
    overflow: hidden
}

.body tbody.ui-sortable>tr>td:first-of-type:before {
    font-size: 1.3em
}

.body .table.align-middle td {
    vertical-align: middle
}

.body .clearfix {
    clear: both
}

.body .pre-wrap {
    white-space: pre-wrap;
    word-break: break-all;
    font-family: monospace
}

.body .text-divider {
    display: flex;
    align-items: center
}

.body .text-divider::after,.body .text-divider::before {
    content: '';
    height: 1px;
    background-color: silver;
    flex-grow: 1
}

.body .text-divider::before {
    margin-right: 1rem
}

.body .text-divider::after {
    margin-left: .75rem
}

.body .vertical-text-divider {
    display: flex;
    align-items: center;
    writing-mode: vertical-rl;
    text-orientation: upright
}

.body .vertical-text-divider::after,.body .vertical-text-divider::before {
    content: '';
    width: 1px;
    background-color: silver;
    flex-grow: 1
}

.body .vertical-text-divider::before {
    margin-bottom: 1rem
}

.body .vertical-text-divider::after {
    margin-top: 1rem
}

.body .batch-comment-checkbox-all+.custom-control-label::before,.body .removeCommentIds+.custom-control-label::before {
    border-radius: 100px
}

.body .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.body .hide-scrollbar::-webkit-scrollbar {
    display: none
}

.user-notification {
    padding: .5rem
}

.user-notification .empty .image {
    margin: 0 auto
}

.user-notification .empty .image img {
    width: 200px;
    height: 200px
}

.user-notification .title-block h3 {
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--color-text-color)
}

.user-notification .title-block .ion-ios-gear {
    font-size: 1.5rem
}

.user-notification .title-block h4 {
    font-weight: 400;
    font-size: 1rem;
    color: #666;
    color: var(--color-text-muted)
}

.user-notification button {
    border-radius: 3px
}

.user-notification .notification-items {
    padding: 0;
    margin-top: 1rem;
    position: relative
}

.user-notification .notification-items .empty {
    text-align: center
}

.user-notification .notification-items .empty p {
    color: #666;
    color: var(--color-text-muted)
}

.user-notification .notification-items .row.section {
    border-bottom: 1px solid var(--color-border-inner);
    padding-top: .8em;
    min-height: 5em
}

.user-notification .notification-items .row.section:last-child {
    border-bottom: 0
}

.user-notification .notification-items .row .vrow-icon {
    width: 48px;
    text-align: right
}

.user-notification .notification-items .row .vrow-icon .new-dot {
    width: 10px;
    position: absolute;
    height: 10px;
    background-color: #fbd100;
    background-color: var(--color-notification);
    border-radius: 50%
}

.user-notification .notification-items .read {
    opacity: .5;
    color: var(--color-text-color)!important
}

.user-notification .notification-items .createdAt {
    font-size: .8rem
}

.user-notification .notification-items .item-buttons {
    text-align: right
}

@media screen and (max-width: 767px) {
    .user-notification .notification-items .item-buttons {
        text-align:left
    }
}

.user-notification .notification-items .comment-emoticon {
    width: 100px;
    height: 100px;
    margin: .5rem 0
}

.user-notification .notification-items .new-notification-badge {
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 10
}

.user-notification .notification-items .new-notification-badge .text {
    background-color: var(--color-primary-theme);
    border-radius: 30px;
    color: #fff;
    width: 110px;
    font-size: 1rem;
    margin: 0 auto;
    padding: .2rem;
    box-shadow: 0 2px 3px #bababa
}

.user-notification .notification-items input[name=notification-item] {
    margin-left: -30px;
    opacity: 0;
    position: absolute
}

.user-notification .action-items {
    margin-bottom: 1.5rem
}

.user-notification .action-items input[name=item-check-all] {
    margin-left: -10px;
    opacity: 0
}

.user-notification .action-items .btn-toggle-check-item {
    border-radius: 3px
}

.user-notification .action-items .item-list {
    display: inline-block
}

.user-notification img.profile-image {
    width: 48px;
    height: 48px;
    background-color: #fdfdfd
}

.user-notification .navbar-arca-settings {
    padding: 0
}

.user-notification .navbar-arca-settings .nav-item:first-child {
    margin-left: 0
}

.user-notification .notification-more {
    background-color: #f5f5f5;
    background-color: var(--color-bg-table);
    color: #000;
    color: var(--color-text-color);
    padding: .5rem 2rem
}

.theme-dark .user-notification .notification-items .new-notification-badge .text {
    box-shadow: 0 2px 3px #363636
}

.theme-dark .user-notification img.profile-image {
    background-color: #242424
}

.theme-black .user-notification img.profile-image {
    background-color: #0a0a0a
}

@keyframes highlight-target-fade {
    0% {
        background-color: var(--color-highlight-color)
    }

    100% {
        background-color: transparent
    }
}

@keyframes opacity-target-fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes opacity-target-fade-out {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes opacity-target-fade-out-in {
    0% {
        opacity: 1
    }

    50% {
        opacity: .3
    }

    100% {
        opacity: 1
    }
}

.body :target {
    animation: highlight-target-fade 2.5s;
    animation-timing-function: ease-out
}

.body .sep:before {
    content: '|';
    font-size: 1.1em;
    font-weight: 300;
    margin: 0 .5em;
    line-height: .9em
}

.body .btns {
    margin-top: .75rem;
    text-align: right
}

.body .btns .btn-primary,.body .btns .btn-success {
    min-width: 6rem
}

.body .btns .grecaptcha-badge {
    float: left
}

@media screen and (max-width: 575px) {
    .body .btns .grecaptcha-badge {
        margin-bottom:1rem
    }
}

.body .leaf-info {
    background-color: #3d414d;
    background-color: var(--color-bg-badge);
    color: #fff;
    font-family: Monospace;
    font-size: .8em;
    border-radius: .3rem;
    padding: 0 .3rem;
    margin-top: .2rem;
    border: 1px solid var(--color-border-badge)
}

.body .scrollbox {
    height: 15rem;
    border: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    overflow-y: scroll;
    word-wrap: break-word;
    padding: .25rem
}

.body .overflow-hidden {
    overflow: hidden
}

.body tbody.ui-sortable>tr>td:first-of-type:before {
    font-size: 1.3em
}

.body .table.align-middle td {
    vertical-align: middle
}

.body .clearfix {
    clear: both
}

.body .pre-wrap {
    white-space: pre-wrap;
    word-break: break-all;
    font-family: monospace
}

.body .text-divider {
    display: flex;
    align-items: center
}

.body .text-divider::after,.body .text-divider::before {
    content: '';
    height: 1px;
    background-color: silver;
    flex-grow: 1
}

.body .text-divider::before {
    margin-right: 1rem
}

.body .text-divider::after {
    margin-left: .75rem
}

.body .vertical-text-divider {
    display: flex;
    align-items: center;
    writing-mode: vertical-rl;
    text-orientation: upright
}

.body .vertical-text-divider::after,.body .vertical-text-divider::before {
    content: '';
    width: 1px;
    background-color: silver;
    flex-grow: 1
}

.body .vertical-text-divider::before {
    margin-bottom: 1rem
}

.body .vertical-text-divider::after {
    margin-top: 1rem
}

.body .batch-comment-checkbox-all+.custom-control-label::before,.body .removeCommentIds+.custom-control-label::before {
    border-radius: 100px
}

.body .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.body .hide-scrollbar::-webkit-scrollbar {
    display: none
}

.user-header {
    position: relative;
    color: var(--color-bg-dialog)
}

.user-header .layer {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: rgba(0,0,0,.3);
    z-index: 1;
    margin-bottom: -200px
}

@media screen and (max-width: 575px) {
    .user-header .layer {
        height:140px;
        margin-bottom: -140px
    }
}

.user-header .img-wrapper {
    width: 100%
}

.user-header .img-wrapper img {
    width: 100%;
    height: 200px;
    object-fit: cover
}

@media screen and (max-width: 575px) {
    .user-header .img-wrapper img {
        height:140px
    }
}

.user-header .profile-wrapper {
    width: 64px;
    height: 64px;
    margin-bottom: .5rem
}

.user-header .profile-wrapper img {
    width: 100%;
    height: 100%
}

@media screen and (max-width: 575px) {
    .user-header .profile-wrapper {
        width:48px;
        height: 48px
    }
}

.user-header .user-title {
    bottom: 0;
    z-index: 2
}

.user-header .user-title h4,.user-header .user-title p {
    color: #fff;
    text-shadow: 0 0 2px #000
}

.user-header .btn-edit {
    z-index: 2;
    top: 10px;
    right: 15px;
    color: #fff;
    text-shadow: 0 0 2px #000
}

.user-body {
    margin-bottom: 100px
}

.user-activites {
    display: flex;
    justify-content: center
}

.user-activites .block-row {
    float: left;
    border-top: 1px solid var(--color-bg-main)
}

.user-activites .block-row .block-part {
    width: 14px;
    height: 14px;
    border-left: 1px solid var(--color-bg-main);
    border-bottom: 1px solid var(--color-bg-main)
}

.user-activites .block-row .block-part.pattern-0 {
    background-color: #f8f8f8;
    background-color: var(--color-tile-pattern-0)
}

.user-activites .block-row .block-part.pattern-1 {
    background-color: #ebe5fa;
    background-color: var(--color-tile-pattern-1)
}

.user-activites .block-row .block-part.pattern-2 {
    background-color: #cdc2fc;
    background-color: var(--color-tile-pattern-2)
}

.user-activites .block-row .block-part.pattern-3 {
    background-color: #9280e5;
    background-color: var(--color-tile-pattern-3)
}

.user-activites .block-row .block-part.pattern-4 {
    background-color: #5439c3;
    background-color: var(--color-tile-pattern-4)
}

.user-activites .block-row .block-part.pattern-5 {
    background-color: #161a33;
    background-color: var(--color-tile-pattern-5)
}

.user-activites .block-row .block-part.checked {
    background-color: #000
}

.user-activites .block-row:last-child {
    border-right: 1px solid var(--color-bg-main)
}

@media screen and (max-width: 575px) {
    .user-activites .block-row:nth-child(-n+29) {
        display:none
    }
}

.user-recent {
    position: relative
}

@media screen and (max-width: 575px) {
    .user-recent .col-date,.user-recent .col-title {
        width:100%!important
    }
}

.user-recent .emoticon {
    width: 20px
}

.user-recent .hover-preview {
    background-color: #fff;
    background-color: var(--color-bg-main);
    position: absolute;
    z-index: 1;
    padding: 5px;
    border: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    border-radius: 5px;
    width: 100px;
    height: 100px;
    box-sizing: content-box;
    display: none;
    left: 9em
}

.user-recent .hover-preview img {
    object-fit: contain;
    width: 100%;
    height: 100%
}

.user-recent:hover .hover-preview {
    display: block;
    z-index: 100
}

.body.wiki .ui-autocomplete {
    z-index: 1035
}

.body.wiki .navbar .wiki-name {
    color: #fff;
    padding: .5rem 1rem .5rem 0;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 15rem
}

@media screen and (max-width: 767px) {
    .body.wiki .navbar .wiki-name {
        max-width:8rem
    }
}

@media screen and (max-width: 575px) {
    .body.wiki .navbar .wiki-name {
        margin-left:.5rem
    }
}

.body.wiki .navbar .wiki-name:hover {
    text-decoration: none
}

@media screen and (max-width: 575px) {
    .body.wiki .navbar .nav .nav-link {
        padding-left:.75rem!important;
        padding-right: .75rem!important
    }
}

.body.wiki .navbar .wiki-search-form {
    display: flex;
    margin-right: 1rem;
    margin-left: auto
}

@media screen and (max-width: 1199px) {
    .body.wiki .navbar .wiki-search-form {
        position:absolute;
        width: 100%;
        margin: 0 -1rem;
        top: 3.5rem;
        border-left: 1px solid var(--color-border-outer);
        border-right: 1px solid var(--color-border-outer)
    }

    .body.wiki .navbar .wiki-search-form .input-group {
        width: 100%
    }
}

@media screen and (max-width: 991px) {
    .body.wiki .navbar .wiki-search-form {
        top:5.15rem;
        border-left: 0;
        border-right: 0
    }
}

.body.wiki .navbar .wiki-search-form input {
    border: 1px solid var(--color-border-outer)
}

@media screen and (max-width: 1199px) {
    .body.wiki .navbar .wiki-search-form input {
        border-top:0;
        border-left: 0
    }
}

.body.wiki .navbar .wiki-search-form .btn {
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-border-outer)
}

@media screen and (max-width: 1199px) {
    .body.wiki .navbar .wiki-search-form .btn {
        border-top:0
    }
}

@media screen and (max-width: 1199px) {
    .body.wiki .navbar .wiki-search-form #wikiGoBtn {
        border-right:0
    }
}

@media screen and (max-width: 1199px) {
    .body.wiki .content-wrapper {
        margin-top:2.4rem
    }
}

.wiki-document-wrap {
    padding: .4rem 1.4rem .4rem .4rem
}

.wiki-document-wrap .wiki-document-toolbar {
    float: right;
    display: flex
}

.wiki-document-wrap .wiki-document-toolbar .wiki-document-toolbar-item {
    border: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer)
}

.wiki-document-wrap .wiki-document-toolbar .wiki-document-toolbar-item:hover {
    background-color: rgba(0,0,0,.2)
}

.wiki-document-wrap .wiki-document-toolbar .wiki-document-toolbar-item:not(:last-child) {
    border-right: none
}

.wiki-document-wrap .wiki-document-title {
    margin: 0 0 2rem;
    font-weight: 700
}

.wiki-document-wrap .wiki-document-title small {
    font-size: .5em
}

.wiki-document-wrap .wiki-document-last-modified {
    text-align: right;
    font-size: .85rem;
    margin-top: -1.8rem
}

.wiki-document-wrap .wiki-document-container form fieldset {
    margin-bottom: 1rem
}

.wiki-document-wrap .wiki-document-container .wiki-document-category {
    display: flex;
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    padding: 2px 5px;
    margin-bottom: 1em;
    border-radius: 5px
}

.wiki-document-wrap .wiki-document-container .wiki-document-category>h2 {
    font-size: inherit;
    font-weight: 400;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    word-break: keep-all
}

.wiki-document-wrap .wiki-document-container .wiki-document-category>h2:after {
    content: ":"
}

.wiki-document-wrap .wiki-document-container .wiki-document-category>ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap
}

.wiki-document-wrap .wiki-document-container .wiki-document-category>ul>li a:hover {
    text-decoration: underline
}

.wiki-document-wrap .wiki-document-container .wiki-document-category>ul>li:first-child {
    margin-left: .3rem
}

.wiki-document-wrap .wiki-document-container .wiki-document-category>ul>li:not(:last-child):after {
    content: '|';
    color: var(--color-text-color);
    margin-right: .3rem;
    margin-left: .3rem
}

.wiki-document-wrap .wiki-document-container .wiki-heading {
    margin: 1.2em 0 .8em;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    cursor: pointer;
    font-weight: 700
}

.wiki-document-wrap .wiki-document-container .wiki-heading:before {
    float: left;
    font-family: Ionicons;
    font-weight: 400;
    font-size: .8em;
    line-height: 1.8em;
    text-align: center;
    margin: 0 .5rem 0 .2rem;
    width: .9em;
    color: #666;
    content: ""
}

.wiki-document-wrap .wiki-document-container .wiki-heading.wiki-heading-folded {
    opacity: .5
}

.wiki-document-wrap .wiki-document-container .wiki-heading.wiki-heading-folded:before {
    content: ""
}

.wiki-document-wrap .wiki-document-container .wiki-heading>a {
    text-decoration: none
}

.wiki-document-wrap .wiki-document-container h1.wiki-heading {
    font-size: 2em
}

.wiki-document-wrap .wiki-document-container h2.wiki-heading {
    font-size: 1.8em
}

.wiki-document-wrap .wiki-document-container h3.wiki-heading {
    font-size: 1.6em
}

.wiki-document-wrap .wiki-document-container h4.wiki-heading {
    font-size: 1.4em
}

.wiki-document-wrap .wiki-document-container h5.wiki-heading {
    font-size: 1.2em
}

.wiki-document-wrap .wiki-document-container h6.wiki-heading {
    font-size: 1em
}

.wiki-document-wrap .wiki-document-container .wiki-heading-content.wiki-heading-content-folded {
    display: none
}

.wiki-document-wrap .wiki-document-container .wiki-paragraph {
    margin-bottom: 1rem
}

.wiki-document-wrap .wiki-document-container .wiki-size.size-up-1 {
    font-size: 1.28888889em
}

.wiki-document-wrap .wiki-document-container .wiki-size.size-up-2 {
    font-size: 1.38888889em
}

.wiki-document-wrap .wiki-document-container .wiki-size.size-up-3 {
    font-size: 1.48144444em
}

.wiki-document-wrap .wiki-document-container .wiki-size.size-up-4 {
    font-size: 1.574em
}

.wiki-document-wrap .wiki-document-container .wiki-size.size-up-5 {
    font-size: 1.66666667em
}

.wiki-document-wrap .wiki-document-container .wiki-size.size-down-1 {
    font-size: .92588889em
}

.wiki-document-wrap .wiki-document-container .wiki-size.size-down-2 {
    font-size: .83333333em
}

.wiki-document-wrap .wiki-document-container .wiki-size.size-down-3 {
    font-size: .74066667em
}

.wiki-document-wrap .wiki-document-container .wiki-size.size-down-4 {
    font-size: .64811111em
}

.wiki-document-wrap .wiki-document-container .wiki-size.size-down-5 {
    font-size: .62222222em
}

.wiki-document-wrap .wiki-document-container .wiki-edit-section {
    float: right;
    font-size: .8rem
}

@media print {
    .wiki-document-wrap .wiki-document-container .wiki-edit-section {
        display: none
    }
}

.wiki-document-wrap .wiki-document-container del {
    color: gray
}

.wiki-document-wrap .wiki-document-container del:hover {
    color: grey
}

.wiki-document-wrap .wiki-document-container code {
    color: inherit;
    padding: 2px;
    background-color: transparent;
    border: none;
    border-radius: 0
}

.wiki-document-wrap .wiki-document-container pre {
    padding: 7px;
    background-color: var(--color-bg-table);
    border: 1px solid var(--color-border-outer);
    border-radius: 3px;
    overflow-x: auto
}

.wiki-document-wrap .wiki-document-container pre code {
    padding: 0;
    background: 0 0;
    border: none
}

.wiki-document-wrap .wiki-document-container a {
    color: var(--color-link-color);
    text-decoration: none
}

.wiki-document-wrap .wiki-document-container a:hover {
    text-decoration: underline
}

.wiki-document-wrap .wiki-document-container .not-exist {
    color: var(--color-broken-link-color)
}

.wiki-document-wrap .wiki-document-container .wiki-self-link {
    font-weight: 700
}

.wiki-document-wrap .wiki-document-container .wiki-link-external {
    color: #090
}

.wiki-document-wrap .wiki-document-container .wiki-link-external:before {
    padding: 0 .15em;
    background: green;
    color: #fff;
    content: "\f1fe";
    font-family: Ionicons!important
}

.wiki-document-wrap .wiki-document-container img {
    display: inline-block;
    max-width: 100%
}

.wiki-document-wrap .wiki-document-container .wiki-table img {
    display: inline-block;
    max-width: none
}

.wiki-document-wrap .wiki-document-container .wiki-file-image {
    margin-bottom: 20px
}

.wiki-document-wrap .wiki-document-container .wiki-lazy-loading {
    background-color: #888
}

.wiki-document-wrap .wiki-document-container .wiki-lazy-loading-error {
    background-color: #a00
}

.wiki-document-wrap .wiki-document-container .wiki-image-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    font-size: 0
}

.wiki-document-wrap .wiki-document-container .wiki-image {
    max-width: 100%;
    width: 100%
}

.wiki-document-wrap .wiki-document-container .wiki-image-loading {
    display: none
}

.wiki-document-wrap .wiki-document-container .wiki-image-align-bottom,.wiki-document-wrap .wiki-document-container .wiki-image-align-center,.wiki-document-wrap .wiki-document-container .wiki-image-align-left,.wiki-document-wrap .wiki-document-container .wiki-image-align-middle,.wiki-document-wrap .wiki-document-container .wiki-image-align-normal,.wiki-document-wrap .wiki-document-container .wiki-image-align-right,.wiki-document-wrap .wiki-document-container .wiki-image-align-top {
    display: inline-block;
    font-size: 0;
    vertical-align: middle;
    max-width: 100%
}

.wiki-document-wrap .wiki-document-container .wiki-image-align-left {
    text-align: left;
    float: left
}

.wiki-document-wrap .wiki-document-container .wiki-image-align-right {
    text-align: right;
    float: right
}

.wiki-document-wrap .wiki-document-container .wiki-image-align-center,.wiki-document-wrap .wiki-document-container .wiki-image-align-middle {
    display: block;
    text-align: center
}

.wiki-document-wrap .wiki-document-container .wiki-image-align-top {
    vertical-align: top
}

.wiki-document-wrap .wiki-document-container .wiki-image-align-bottom {
    vertical-align: bottom
}

.wiki-document-wrap .wiki-document-container .wiki-list {
    margin: .4em 0 .4em 1.5em;
    padding: 0 0 0 .5em
}

.wiki-document-wrap .wiki-document-container .wiki-list li {
    margin: .4em 0;
    list-style: inherit!important;
    list-style-type: inherit!important
}

.wiki-document-wrap .wiki-document-container .wiki-list li .wiki-paragraph {
    margin-bottom: 0
}

.wiki-document-wrap .wiki-document-container .wiki-list-decimal {
    list-style: decimal
}

.wiki-document-wrap .wiki-document-container .wiki-list-alpha {
    list-style: lower-alpha
}

.wiki-document-wrap .wiki-document-container .wiki-list-upper-alpha {
    list-style: upper-alpha
}

.wiki-document-wrap .wiki-document-container .wiki-list-roman {
    list-style: lower-roman
}

.wiki-document-wrap .wiki-document-container .wiki-list-upper-roman {
    list-style: upper-roman
}

.wiki-document-wrap .wiki-document-container .wiki-fn-content {
    font-size: .8em;
    vertical-align: super;
    white-space: nowrap
}

.wiki-document-wrap .wiki-document-container .wiki-popper {
    position: absolute;
    background: #fff;
    max-width: 50%;
    border-radius: 3px;
    box-shadow: 0 0 2px rgba(0,0,0,.5);
    padding: 15px;
    word-break: break-all;
    z-index: 1
}

.wiki-document-wrap .wiki-document-container .wiki-popper[x-placement^=top] {
    margin-bottom: 5px
}

.wiki-document-wrap .wiki-document-container .wiki-popper[x-placement^=top] .wiki-popper-arrow {
    border-width: 5px 5px 0;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    bottom: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0
}

.wiki-document-wrap .wiki-document-container .wiki-popper[x-placement^=bottom] {
    margin-top: 5px
}

.wiki-document-wrap .wiki-document-container .wiki-popper[x-placement^=bottom] .wiki-popper-arrow {
    border-width: 0 5px 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    top: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0
}

.wiki-document-wrap .wiki-document-container .wiki-popper[x-placement^=left] {
    margin-right: 5px
}

.wiki-document-wrap .wiki-document-container .wiki-popper[x-placement^=left] .wiki-popper-arrow {
    border-width: 5px 0 5px 5px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    right: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0
}

.wiki-document-wrap .wiki-document-container .wiki-popper[x-placement^=right] {
    margin-left: 5px
}

.wiki-document-wrap .wiki-document-container .wiki-popper[x-placement^=right] .wiki-popper-arrow {
    border-width: 5px 5px 5px 0;
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
    left: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0
}

.wiki-document-wrap .wiki-document-container .wiki-popper .wiki-popper-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 5px;
    border-color: #ddd
}

.wiki-document-wrap .wiki-document-container .wiki-macro-footnote {
    margin: 1.5em 0;
    padding: .5em 0;
    border-top: 1px solid #777
}

.wiki-document-wrap .wiki-document-container .footnote-list {
    line-height: 2em;
    display: block
}

.wiki-document-wrap .wiki-document-container .wiki-indent {
    padding-left: 10px
}

.wiki-document-wrap .wiki-document-container hr {
    margin: .5em 0;
    border-top: .0625rem solid var(--color-border-outer)
}

.wiki-document-wrap .wiki-document-container .wiki-macro-toc {
    border: 1px solid var(--color-border-inner);
    display: inline-block;
    padding: 12px 20px 18px 0;
    margin-left: 5px;
    font-size: .9rem
}

.wiki-document-wrap .wiki-document-container .wiki-macro-toc>.toc-indect:first-of-type {
    margin-top: 12px
}

.wiki-document-wrap .wiki-document-container .wiki-macro-toc:before {
    content: "목차";
    font-size: 18px;
    margin-left: 14px
}

.wiki-document-wrap .wiki-document-container .toc-indent {
    padding-left: 20px
}

.wiki-document-wrap .wiki-document-container .toc-item {
    display: block
}

.wiki-document-wrap .wiki-document-container .wiki-table-wrap {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    margin: 10px 0
}

.wiki-document-wrap .wiki-document-container .wiki-table-wrap.table-center {
    margin: 10px auto
}

.wiki-document-wrap .wiki-document-container .wiki-table-wrap.table-center .wiki-table {
    margin: auto
}

.wiki-document-wrap .wiki-document-container .wiki-table {
    background-color: var(--color-bg-table);
    border-collapse: collapse
}

.wiki-document-wrap .wiki-document-container .wiki-table td {
    padding: 5px 10px;
    border: 1px solid var(--color-border-inner);
    word-wrap: break-word
}

.wiki-document-wrap .wiki-document-container .wiki-table td .wiki-paragraph {
    margin-bottom: 0
}

.wiki-document-wrap .wiki-document-container .table-right {
    margin-left: 20px;
    margin-bottom: 20px;
    float: right
}

@media screen and (max-width: 420px) {
    .wiki-document-wrap .wiki-document-container .table-right {
        float:none;
        margin: 10px 0
    }
}

.wiki-document-wrap .wiki-document-container dl.wiki-folding {
    margin: 0
}

.wiki-document-wrap .wiki-document-container dl.wiki-folding dt {
    cursor: pointer;
    font-weight: 700;
    user-select: none
}

.wiki-document-wrap .wiki-document-container dl.wiki-folding dd {
    display: none;
    margin: 0;
    overflow: hidden
}

.wiki-document-wrap .wiki-document-container iframe {
    display: block;
    max-width: 100%
}

.wiki-document-wrap .wiki-document-container video {
    max-width: 100%
}

.wiki-document-wrap .wiki-document-container em {
    font-style: italic
}

.wiki-document-wrap .wiki-document-container .wiki-quote {
    padding: 1em calc(2em + 25px) 1em 1em;
    margin: 1em 0;
    background: var(--color-bg-table);
    display: table;
    border: 2px dashed var(--color-border-inner);
    border-left: 5px solid var(--color-wiki-point-color);
    width: 100%
}

.wiki-document-wrap .wiki-document-container .wiki-quote .wiki-paragraph {
    margin-bottom: 0
}

.wiki-document-wrap .wiki-document-container .wiki-quote .wiki-indent {
    padding-left: 0
}

.wiki-document-wrap .wiki-document-container>footer {
    display: block;
    border-top: 1px solid grey;
    margin: 1.5rem 0 0;
    padding: .7rem 0 0;
    text-align: right
}

.wiki-document-wrap .wiki-document-container>footer .wiki-license>img {
    width: 100px;
    height: auto;
    border-width: 0
}

.theme-dark .wiki-document-wrap .wiki-document-toolbar .wiki-document-toolbar-item {
    border-color: var(--color-border-inner)
}

.theme-dark .wiki-document-wrap .wiki-document-container .wiki-heading {
    border-bottom-color: #383b40
}

.theme-dark .wiki-document-wrap .wiki-document-container .wiki-popper {
    background: #383b40;
    box-shadow: 0 0 2px hsla(0,0%,100%,.5)
}

.theme-dark .wiki-document-wrap .wiki-document-container .wiki-popper .wiki-popper-arrow {
    border-color: #ccc
}

.wiki-document-wrap.edit .wiki-document-title small {
    font-size: .5em
}

.wiki-document-wrap.edit .wiki-document-container {
    margin-top: 2rem
}

.wiki-document-wrap.edit .wiki-document-container form .editor-toolbar {
    height: 36px;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    border-bottom: 1px solid #ddd;
    border-color: var(--color-border-outer);
    margin-top: 0
}

.wiki-document-wrap.edit .wiki-document-container form .editor-toolbar::after,.wiki-document-wrap.edit .wiki-document-container form .editor-toolbar::before {
    content: '';
    display: table
}

.wiki-document-wrap.edit .wiki-document-container form .editor-toolbar li {
    float: left;
    margin-bottom: -1px
}

.wiki-document-wrap.edit .wiki-document-container form .editor-toolbar li.editor-toolbox {
    float: right
}

.wiki-document-wrap.edit .wiki-document-container form .editor-toolbar li.editor-toolbox>div {
    display: inline-block
}

.wiki-document-wrap.edit .wiki-document-container form .editor-toolbar li.editor-toolbox>div+div {
    margin-left: -4px
}

.wiki-document-wrap.edit .wiki-document-container form .editor-toolbar li+li {
    margin-left: .2rem
}

.wiki-document-wrap.edit .wiki-document-container form .editor-toolbar li button {
    background: 0 0;
    cursor: pointer;
    font-size: .9rem;
    display: block;
    padding: .5em 1em;
    border: 1px solid transparent;
    border-radius: .25rem .25rem 0 0
}

.wiki-document-wrap.edit .wiki-document-container form .editor-toolbar li button.a {
    color: #55595c;
    background-color: #fff;
    border-color: #ddd #ddd transparent
}

.wiki-document-wrap.edit .wiki-document-container form .editor {
    border: 1px solid #d3d3d3;
    border-color: var(--color-border-outer);
    border-top: none
}

.wiki-document-wrap.edit .wiki-document-container form .editor .namu-editor {
    width: 100%;
    height: 30rem
}

.wiki-document-wrap.edit .wiki-document-container form .editor .raw-editor #editorContent {
    width: 100%;
    height: 30rem;
    font-family: D2Coding,Consolas,나눔고딕코딩,courier new,monospace;
    font-size: 14px
}

.wiki-document-wrap.edit .wiki-document-container form .editor .preview {
    width: 100%;
    height: 30rem
}

.wiki-document-wrap.edit .wiki-document-container form .editor .preview iframe {
    width: 100%;
    height: 100%;
    border: none
}

.theme-dark .wiki-document-wrap.edit .wiki-document-container form .editor-toolbar li button {
    color: #ddd;
    background-color: #27292d;
    border-color: #383b40
}

.theme-dark .wiki-document-wrap.edit .wiki-document-container form .editor-toolbar li button.a {
    border-color: var(--color-border-outer);
    background-color: var(--color-border-inner);
    color: var(--color-text-color)
}

.wiki-document-wrap.diff .monaco-diff-editor {
    min-height: 50em
}

.wiki-document-wrap.upload fieldset+fieldset {
    margin-top: 1.5rem
}

.wiki-document-wrap.upload input[name=fileFakePath]+.input-group-append>.btn {
    padding: 0
}

.wiki-document-wrap.upload input[name=fileFakePath]+.input-group-append>.btn>label {
    margin: 0;
    padding: .375rem .75rem;
    cursor: pointer
}

.wiki-document-wrap.upload #fileDesc {
    min-height: 30vh
}

.wiki-document-wrap.edit fieldset,.wiki-document-wrap.upload fieldset {
    margin-top: 1rem
}

.wiki-document-wrap.edit .form-control-sm[type=text][name^=iplog],.wiki-document-wrap.upload .form-control-sm[type=text][name^=iplog] {
    text-align: center
}

.wiki-document-wrap.edit .form-control-sm[type=text][name^=iplog]:focus,.wiki-document-wrap.upload .form-control-sm[type=text][name^=iplog]:focus {
    text-align: left!important
}

.wiki-document-wrap.edit .form-control-sm[type=text][name^=iplog]:invalid:focus,.wiki-document-wrap.upload .form-control-sm[type=text][name^=iplog]:invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 .2rem rgba(220,53,69,.25)
}

.wiki-document-wrap.edit button[type=submit],.wiki-document-wrap.upload button[type=submit] {
    float: right
}

.wiki-document-wrap.history .wiki-document-container ul>li .actions {
    font-size: .8em
}

.wiki-document-wrap.history .wiki-document-container ul>li .actions>a+a::before {
    content: '|';
    color: var(--color-text-color);
    margin-right: .3em
}

.wiki-document-wrap.recent .recent-table tr.second-row td {
    border-top: none;
    padding-top: 0;
    padding-left: 1.5rem
}

.wiki-document-wrap.revert .wiki-document-container form textarea {
    width: 100%;
    min-height: 30vh
}

.wiki-document-wrap.search-result .wiki-search-form {
    display: flex;
    width: 100%;
    margin-bottom: 1.5rem
}

@media screen and (min-width: 768px) {
    .wiki-document-wrap.search-result .wiki-search-form {
        width:576px
    }
}

.wiki-document-wrap.search-result .wiki-search-form #searchKeywordInput {
    flex: 1
}

.wiki-document-wrap.search-result .search-summary .sep:before {
    content: "/"
}

.wiki-document-wrap.search-result .result-item {
    display: block;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border-inner);
    color: inherit
}

.wiki-document-wrap.search-result .result-item:hover {
    text-decoration: none
}

.wiki-document-wrap.search-result .result-item:first-child {
    padding-top: 0
}

.wiki-document-wrap.search-result .result-item .title {
    font-size: 1.5rem;
    margin-bottom: .25rem
}

.wiki-document-wrap.search-result .result-item .title .icon {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    padding-left: .05em;
    margin-right: .5em;
    background-color: var(--color-bg-badge);
    border-radius: 100%;
    color: #fff;
    text-align: center;
    line-height: 1.3em
}

.wiki-document-wrap.search-result .result-item .description .search-highlight {
    padding: 0 .2em;
    border-radius: 3px;
    margin: 0 .1em;
    background-color: var(--color-text-highlight);
    color: #000
}

@media(prefers-color-scheme: dark) {
    .html:not(.theme-light) .wiki-document-wrap.search-result .result-item .description .search-highlight {
        color:var(--color-text-color-reverse)
    }
}

html.theme-dark .wiki-document-wrap.search-result .result-item .description .search-highlight {
    color: var(--color-text-color-reverse)
}

.wiki-document-wrap.error .wiki-document-container .history {
    margin-top: 3rem
}

.wiki-document-wrap.error .wiki-document-container .history>p:first-child {
    font-weight: 700
}

.body .article-write {
    min-height: 78rem
}

@media screen and (max-width: 575px) {
    .body .article-write {
        min-height:50rem;
        margin-left: -.5rem;
        margin-right: -.5rem
    }
}

.body .article-write .dark-theme.fr-toolbar.fr-top {
    border-color: #bbb;
    border-color: var(--color-border-outer)
}

.body .article-write .write-head {
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    padding: .5rem .75rem;
    margin-bottom: 1rem;
    font-size: 1.1rem
}

.body .article-write .sub-row {
    border-top: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    padding: .6rem .75rem
}

.body .article-write .sub-row label {
    margin-bottom: .2rem
}

.body .article-write .sub-row>input {
    width: calc(100% - 3rem);
    float: right
}

.body .article-write .sub-row.second {
    border-bottom: 1px solid;
    border-color: #bbb;
    border-color: var(--color-border-outer);
    margin-bottom: .2rem
}

.body .article-write .write-head+.sub-row {
    border-top: none;
    margin-top: -1rem
}

.body .article-write form input[name=category] {
    width: 0;
    display: none
}

.body .article-write form input[name=category]:checked+label {
    background-color: #00a495;
    border-color: #00a495;
    color: #fff
}

.body .article-write form input[name=category]+label {
    border: 1px solid transparent;
    border-radius: 100px;
    padding: 0 10px;
    cursor: pointer
}

.body .article-write form input[name=category]+label:hover {
    border-color: #00a495
}

.body .article-write form textarea[name=content] {
    height: 32rem;
    border-color: #ccc;
    border-radius: 10px;
    resize: none
}

.body .article-write .btns {
    margin-bottom: 2rem
}

.body .article-write .ck-editor__editable {
    min-height: 400px!important
}

.body .article-write .form-group {
    margin-bottom: 10px
}

.body .article-write .form-group label {
    margin-left: 0
}

.body .article-write .fr-toolbar .fr-btn-grp {
    margin: 0 10px 0 5px
}

.body .article-write .fr-toolbar .namlacon {
    display: block;
    width: 100%;
    height: 400px
}

.body .article-write .fr-toolbar .creation {
    display: block;
    width: 600px;
    max-width: 100%;
    padding: 10px
}

.body .article-write .fr-modal .fr-command.fr-btn,.body .article-write .fr-popup .fr-command.fr-btn,.body .article-write .fr-toolbar .fr-command.fr-btn {
    margin: 0
}

.body .article-write .fr-popup {
    max-width: 100%
}

.body .article-write .fr-view p {
    margin: 0;
    line-height: 2
}

.body .article-write .fr-view img.fr-dii {
    margin: 0;
    padding: 0
}

.body .article-write .fr-box.fr-basic .fr-element.fr-view {
    font-size: inherit;
    line-height: inherit;
    font-family: inherit
}

.body .article-write .fr-box.fr-basic .fr-element.fr-view img.arca-emoticon {
    max-width: 100px;
    max-height: 100px
}

.body .article-write .fr-box .btn-mana.btn-namlacon {
    background-color: transparent
}

.body .article-write .fr-wrapper.show-placeholder .fr-placeholder {
    white-space: normal
}

.body .article-write .write-body iframe.arca-vote {
    display: block;
    margin: 2em auto;
    width: 100%;
    max-width: 40em;
    height: 150px;
    border: none;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)
}

.body .article-write .write-body iframe.safeframe,.body .article-write .write-body iframe.tweet {
    margin: 2em auto;
    width: 100%;
    max-width: 40em;
    border: none;
    border-radius: 5px
}

.body .article-write .write-body iframe.twitch {
    margin: 2em auto;
    border: none;
    border-radius: 5px;
    overflow: hidden
}

.body .article-write .write-body div.iframe-content {
    position: relative;
    width: 100%;
    height: fit-content
}

.body .article-write .write-body div.iframe-content div.iframe-overlay {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    z-index: 2;
    cursor: pointer;
    align-items: center;
    justify-content: center
}

.body .article-write .hidden-preview-checkbox {
    padding-top: 1rem;
    padding-left: .5rem
}

.body .article-write .voteCreateForm .options>.option>.input-group-append {
    display: none
}

.body .article-write .voteCreateForm .options>.option:last-of-type>.input-group-append {
    display: flex
}

.body .article-write .voteCreateForm .options>.option:nth-of-type(n+10)~button.form-control {
    display: none
}

html,html.theme-light {
    --color-bg-navbar: #3d414d;
    --color-bg-body: #eee;
    --color-bg-main: #fff;
    --color-bg-primary: hsl(240, 50%, 30%);
    --color-bg-best: hsl(5, 90%, 60%);
    --color-bg-focus: #eee;
    --color-bg-dropdown: #fff;
    --color-bg-dialog: #fff;
    --color-bg-input: #fff;
    --color-bg-badge: #3d414d;
    --color-bg-footer: #fff;
    --color-bg-table: #f5f5f5;
    --color-bg-link-card: #F9F9F9;
    --color-bg-link-card-thumbnail: #EFEFEF;
    --color-link-card-focus: #eee;
    --color-text-color: #000000;
    --color-text-color-reverse: #d3d3d3;
    --color-text-muted: #666666;
    --color-text-highlight: yellow;
    --color-link-color: #0275d8;
    --color-broken-link-color: red;
    --color-visited-article: #bbb;
    --color-border-outer: #bbb;
    --color-border-inner: #ddd;
    --color-border-navbar: #3d414d;
    --color-btn-hover: #007bff;
    --color-primary-theme: #007bff;
    --color-primary-theme-border: #007bff;
    --color-highlight-color: #fff4cc;
    --color-arca-wrap-background-color: #F9F9F9;
    --color-user-highlight: #efdf25cf;
    --color-board-title-text: #666666;
    --color-board-category: #42464f;
    --color-board-category-text: #ffffff;
    --color-board-hybrid-split-line: #eeeeee;
    --color-board-hybrid-badge-text-color: #005078;
    --color-board-hybrid-title-text-color: #0275d8;
    --color-user-icon-fixed: #777;
    --color-user-icon-public: #777;
    --color-opposite: #000000;
    --color-settings-point-bg: #29a1b7;
    --color-settings-point-text: #ffffff;
    --color-checkbox-label-text: #666666;
    --color-checkbox-label-border: #dddddd;
    --color-checkbox-label-focus: #29a1b7;
    --color-channel-shortcut-icon-background: #e6e6e6;
    --color-channel-shortcut-add-icon-background: #8bbdea;
    --color-point-color: #3d414d;
    --color-wiki-point-color: #71bc6d;
    --color-notification: #fbd100;
    --color-notification-tint: #fbd100;
    --image-fallback-link-card: url('/static/assets/images/linkcard-light.png');
    --color-tile-pattern-0: #f8f8f8;
    --color-tile-pattern-1: #EBE5FA;
    --color-tile-pattern-2: #CDC2FC;
    --color-tile-pattern-3: #9280E5;
    --color-tile-pattern-4: #5439C3;
    --color-tile-pattern-5: #161A33;
    --deal-status-live: #f54d3d;
    --deal-table-border: #b3b3b3
}

html input::-webkit-calendar-picker-indicator,html.theme-light input::-webkit-calendar-picker-indicator {
    filter: invert(0)
}

html.theme-dark {
    --color-bg-navbar: #242424;
    --color-bg-body: #111;
    --color-bg-main: #222;
    --color-bg-focus: #333;
    --color-bg-dropdown: #222;
    --color-bg-primary: hsl(240, 50%, 40%);
    --color-bg-best: hsl(10, 80%, 40%);
    --color-bg-dialog: #333;
    --color-bg-input: #111;
    --color-bg-badge: #444;
    --color-bg-footer: #111;
    --color-bg-table: #2d2f34;
    --color-bg-link-card: #333333;
    --color-bg-link-card-thumbnail: #444444;
    --color-link-card-focus: #2a2a2a;
    --color-text-color: #d3d3d3;
    --color-text-color-reverse: #000000;
    --color-text-muted: #6d6d6d;
    --color-text-highlight: yellow;
    --color-link-color: #ec9f19;
    --color-broken-link-color: #dc4343;
    --color-visited-article: #909090;
    --color-border-outer: #43494c;
    --color-border-inner: #5a5a64;
    --color-border-navbar: #43494c;
    --color-wiki-point-color: #666c75;
    --color-btn-hover: #3F58BE;
    --color-primary-theme: #3d59bc;
    --color-primary-theme-border: #3d59bc;
    --color-highlight-color: #534512;
    --color-arca-wrap-background-color: #333;
    --color-user-highlight: #91fb4159;
    --color-board-title-text: #d3d3d3;
    --color-board-category: #42464f;
    --color-board-category-text: #dddddd;
    --color-board-hybrid-split-line: #444444;
    --color-board-hybrid-badge-text-color: #ec9f25;
    --color-board-hybrid-title-text-color: #d3d3d3;
    --color-user-icon-fixed: #777;
    --color-user-icon-public: #777;
    --color-opposite: #ffffff;
    --color-settings-point-bg: #29a1b7;
    --color-settings-point-text: #eeeeee;
    --color-checkbox-label-text: #dddddd;
    --color-checkbox-label-border: #555555;
    --color-checkbox-label-focus: #29a1b7;
    --color-channel-shortcut-icon-background: #666666;
    --color-channel-shortcut-add-icon-background: #356793;
    --color-point-color: #d6d7d9;
    --color-notification: #ABD152;
    --color-notification-tint: #c3f69d;
    --image-fallback-link-card: url('/static/assets/images/linkcard-dark.png');
    --color-tile-pattern-0: #2D3034;
    --color-tile-pattern-1: #47439D;
    --color-tile-pattern-2: #5C57E5;
    --color-tile-pattern-3: #8080FF;
    --color-tile-pattern-4: #BFCBFF;
    --color-tile-pattern-5: #FCFCFF;
    --deal-status-live: #eb4763;
    --deal-table-border: #4D4D4D
}

html.theme-dark input::-webkit-calendar-picker-indicator {
    filter: invert(1)
}

html.theme-dark:not(.theme-light).theme-black {
    --color-bg-navbar: #000;
    --color-bg-body: #000;
    --color-bg-main: #000;
    --color-bg-primary: hsl(238, 40%, 30%);
    --color-bg-best: hsl(10, 70%, 40%);
    --color-bg-focus: #1e2024;
    --color-bg-dropdown: #000;
    --color-bg-dialog: #000;
    --color-bg-input: #000;
    --color-bg-badge: #000;
    --color-bg-footer: #000;
    --color-bg-table: #2d2f34;
    --color-bg-link-card: #1E1E1E;
    --color-bg-link-card-thumbnail: #444444;
    --color-link-card-focus: #1e2024;
    --color-text-color: #ccc;
    --color-text-color-reverse: #000000;
    --color-text-muted: #666666;
    --color-text-highlight: yellow;
    --color-link-color: #ec9f19;
    --color-broken-link-color: #dc4343;
    --color-border-outer: #43494c;
    --color-border-inner: #5a5a64;
    --color-border-navbar: #43494c;
    --color-border-badge: #5a5a64;
    --color-wiki-point-color: #666c75;
    --color-btn-hover: #3F58BE;
    --color-primary-theme: #3d59bc;
    --color-primary-theme-border: #3d59bc;
    --color-highlight-color: #534512;
    --color-user-highlight: #91fb4159;
    --color-board-title-text: #ccc;
    --color-board-category: #42464f;
    --color-board-category-text: #dddddd;
    --color-board-hybrid-split-line: #444444;
    --color-board-hybrid-badge-text-color: #ec9f25;
    --color-board-hybrid-title-text-color: #d3d3d3;
    --color-user-icon-fixed: #777;
    --color-user-icon-public: #777;
    --color-opposite: #ffffff;
    --color-settings-point-bg: #29a1b7;
    --color-settings-point-text: #eeeeee;
    --color-checkbox-label-text: #dddddd;
    --color-checkbox-label-border: #555555;
    --color-checkbox-label-focus: #29a1b7;
    --color-channel-shortcut-icon-background: #666666;
    --color-channel-shortcut-add-icon-background: #356793;
    --color-notification: #ABD152;
    --color-notification-tint: #c3f69d;
    --image-fallback-link-card: url('/static/assets/images/linkcard-dark.png')
}

html.theme-dark:not(.theme-light).theme-black .body .modal-content {
    border-color: #43494c
}

@media(prefers-color-scheme: dark) {
    html {
        --color-bg-navbar:#242424;
        --color-bg-body: #111;
        --color-bg-main: #222;
        --color-bg-focus: #333;
        --color-bg-primary: hsl(240, 50%, 40%);
        --color-bg-best: hsl(10, 80%, 40%);
        --color-bg-dropdown: #222;
        --color-bg-dialog: #333;
        --color-bg-input: #111;
        --color-bg-badge: #444;
        --color-bg-footer: #111;
        --color-bg-table: #2d2f34;
        --color-bg-link-card: #333333;
        --color-bg-link-card-thumbnail: #444444;
        --color-link-card-focus: #2a2a2a;
        --color-text-color: #d3d3d3;
        --color-text-color-reverse: #000000;
        --color-text-muted: #6d6d6d;
        --color-text-highlight: yellow;
        --color-link-color: #ec9f19;
        --color-visited-article: #909090;
        --color-border-outer: #43494c;
        --color-border-inner: #5a5a64;
        --color-border-navbar: #43494c;
        --color-wiki-point-color: #666c75;
        --color-btn-hover: #3F58BE;
        --color-primary-theme: #3d59bc;
        --color-primary-theme-border: #3d59bc;
        --color-highlight-color: #534512;
        --color-point-color: #d6d7d9;
        --color-arca-wrap-background-color: #333;
        --color-user-highlight: #91fb4159;
        --color-board-title-text: #d3d3d3;
        --color-board-category: #42464f;
        --color-board-category-text: #dddddd;
        --color-board-hybrid-split-line: #444444;
        --color-board-hybrid-badge-text-color: #ec9f25;
        --color-board-hybrid-title-text-color: #d3d3d3;
        --color-user-icon-fixed: #777;
        --color-user-icon-public: #777;
        --color-opposite: #ffffff;
        --color-settings-point-bg: #29a1b7;
        --color-settings-point-text: #eeeeee;
        --color-checkbox-label-text: #dddddd;
        --color-checkbox-label-border: #555555;
        --color-checkbox-label-focus: #29a1b7;
        --color-channel-shortcut-icon-background: #666666;
        --color-channel-shortcut-add-icon-background: #356793;
        --image-fallback-link-card: url('/static/assets/images/linkcard-dark.png');
        --color-tile-pattern-0: #2D3034;
        --color-tile-pattern-1: #47439D;
        --color-tile-pattern-2: #5C57E5;
        --color-tile-pattern-3: #8080FF;
        --color-tile-pattern-4: #BFCBFF;
        --deal-status-live: #eb4763;
        --deal-table-border: #4D4D4D
    }

    html input::-webkit-calendar-picker-indicator {
        filter: invert(1)
    }

    html:not(.theme-light).theme-black {
        --color-bg-navbar: #000;
        --color-bg-body: #000;
        --color-bg-main: #000;
        --color-bg-focus: #1e2024;
        --color-bg-primary: hsl(238, 40%, 30%);
        --color-bg-best: hsl(10, 70%, 40%);
        --color-bg-dropdown: #000;
        --color-bg-dialog: #000;
        --color-bg-input: #000;
        --color-bg-badge: #000;
        --color-bg-footer: #000;
        --color-bg-table: #2d2f34;
        --color-bg-link-card: #1E1E1E;
        --color-bg-link-card-thumbnail: #444444;
        --color-link-card-focus: #1e2024;
        --color-text-color: #ccc;
        --color-text-color-reverse: #000000;
        --color-text-muted: #666666;
        --color-text-highlight: yellow;
        --color-link-color: #ec9f19;
        --color-border-outer: #43494c;
        --color-border-inner: #5a5a64;
        --color-border-navbar: #43494c;
        --color-border-badge: #5a5a64;
        --color-wiki-point-color: #666c75;
        --color-btn-hover: #3F58BE;
        --color-primary-theme: #3d59bc;
        --color-primary-theme-border: #3d59bc;
        --color-highlight-color: #534512;
        --color-user-highlight: #91fb4159;
        --color-board-title-text: #ccc;
        --color-board-category: #42464f;
        --color-board-category-text: #dddddd;
        --color-board-hybrid-split-line: #444444;
        --color-board-hybrid-badge-text-color: #ec9f25;
        --color-board-hybrid-title-text-color: #d3d3d3;
        --color-user-icon-fixed: #777;
        --color-user-icon-public: #777;
        --color-opposite: #ffffff;
        --color-settings-point-bg: #29a1b7;
        --color-settings-point-text: #eeeeee;
        --color-checkbox-label-text: #dddddd;
        --color-checkbox-label-border: #555555;
        --color-checkbox-label-focus: #29a1b7;
        --color-channel-shortcut-icon-background: #666666;
        --color-channel-shortcut-add-icon-background: #356793;
        --image-fallback-link-card: url('/static/assets/images/linkcard-dark.png')
    }

    html:not(.theme-light).theme-black .body .modal-content {
        border-color: #43494c
    }
}