/* app.comment.css */
#comment-container {
    --comment-added-bg: #e7f4ff;
    --comment-added-border: #0030b9;
    --comment-border:#a8a8a8;
    --comment-header-fg:#002266;
    --comment-footer-fg:#a0a0a0;
    --comment-fg:#5c5c5c;
    --comment-max-width: 562px;
    --comment-level-indent: 28px;
}

.comment-title {
    align-items: center;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 10px;
    margin-right: 10px;
    max-width: var(--comment-max-width);
}

#comment-form {
    margin:16px 0;
    max-width: var(--comment-max-width);
}

#comment-form-btn-zone {
    margin: 8px 0;
    text-align: right;
}

#comment-zone-load {
    margin-bottom: 240px;
}

.comment-wrapper {
    color: var(--comment-fg);
    margin-bottom: 1rem;
    padding: .5rem;
    max-width: var(--comment-max-width);
}

.comment-wrapper p {
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 5px;
}

.comment-wrapper blockquote {
    margin-bottom: 5px;
}

.comment-header {
    color: var(--comment-header-fg);
    display: flex;
    border-bottom: var(--border-default);
    margin-bottom: 1rem;
}

.comment-added {
    background-color: var(--comment-added-bg);
    border: 1px solid var(--comment-added-border);
    border-radius: 5px;
}

.comment-footer {
    align-items: flex-end;
    color: var(--comment-footer-fg);
    column-gap: 5px;
    display: grid;
    font-size: 12px;
    grid-template-columns: 20px auto;
    text-transform: uppercase;
}

.comment-footer a {
    color: var(--comment-footer-fg);
}

.comment-footer .bi {
    color: var(--comment-footer-fg);
    font-size: 14px;
}

.comment-footer .bi::before {
    font-weight: bold !important;
}

.comment-level-1 {
    margin-left: var(--comment-level-indent);
    max-width: calc(var(--comment-max-width) - var(--comment-level-indent));
}
.comment-level-2 {
    margin-left: calc(var(--comment-level-indent) * 2);
    max-width: calc(var(--comment-max-width) - var(--comment-level-indent) * 2);
}
.comment-level-3 {
    margin-left: calc(var(--comment-level-indent) * 3);
    max-width: calc(var(--comment-max-width) - var(--comment-level-indent) * 3);
}
.comment-level-4 {
    margin-left: calc(var(--comment-level-indent) * 4);
    max-width: calc(var(--comment-max-width) - var(--comment-level-indent) * 4);
}
.comment-level-5 {
    margin-left: calc(var(--comment-level-indent) * 5);
    max-width: calc(var(--comment-max-width) - var(--comment-level-indent) * 5);
}
.comment-level-6, .comment-level-7, .comment-level-8, .comment-level-9 {
    margin-left: calc(var(--comment-level-indent) * 6);
    max-width: calc(var(--comment-max-width) - var(--comment-level-indent) * 6);
}

/* ck editor, make a single size */
#editor.editor-sm + .ck .ck-content {min-height:180px;max-height:180px}
/* ck editor, make min / max size*/
#editor.editor-comment + .ck .ck-content {min-height:72px;max-height:320px}