.comment-section {
    padding: 3px 3px 20px 3px;
    margin-bottom: 50px;
    font-family: Roboto, sans-serif !important;
}

comment-section textarea:focus-within {
    border-color: deepskyblue;
}
.comment-section .btn-comment {
    background: #365899;
}
.comment-section .btn-comment:hover {
    background: #365899c2;
    border-color: #365899c2;
}

.comment-section .action {
    display: inline;
}
.comment-section .attach-icon {
    width: 12px;
    fill: #ff0000;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
}

.comment-section .btn-reply,
.comment-section .btn-del,
.comment-section .btn-tag,
.comment-section .btn-spoil,
.comment-section .btn-attached,
.comment-section .btn-report-cmt {
    color: rgba(255, 255, 255, .5);
    font-size: 13px;
    cursor: pointer;
    margin: 5px;
    width: 80px;
}

.comment-section .btn-reply:hover,
.comment-section .btn-del:hover,
.comment-section .btn-tag:hover,
.comment-section .btn-spoil:hover,
.comment-section .btn-attached:hover,
.comment-section .btn-report-cmt:hover,
.comment-section .btn-tag:hover {
    color: rgba(255, 255, 255, .85);
}

.comment-section > .title {
    font-size: 25px;
    font-weight: 300;
    margin: 15px 0 10px 0;
}

.comment-section .input {
    text-align: center;
    position: relative;
}

.comment-section .input-2 {
    margin: 20px;
}
.comment-section > .comment {
    width: 95%;
    margin: auto;
}
.comment-section .comment-spoil {
    font-style: italic;
    font-size: 14px;
}
.comment-section .view-comment-spoil {
    color: #2196f3;
    text-decoration: underline;
    cursor: pointer;
}
.comment-section > .comment.active .btn-tag {
    visibility: visible;
}

.comment-section .link-tag {
    font-size: 14px;
    color: #2196f3;
}

.comment-section > .comment > .user {
    padding: 5px 4px;
}

.comment-section > .comment > .p-comment {
    padding: 8px 8px 8px 10px;
    background: #a9a9a94d;
    border-radius: 5px;
    word-break: break-word;
    user-select: text;
}

.comment-section > .comment > .c-comment {
    padding: 0 0 0 25px;
    word-break: break-word;
}

.comment-section > .comment > .c-comment > .comment {
    padding: 8px 0 8px 10px;
    background: #a9a9a940;
    border-radius: 5px;
    user-select: text;
}

.comment-section > .comment > .c-comment > .user {
    padding: 5px 4px;
}

.comment-section > .comment > .user > .name,
.comment-section > .comment > .c-comment > .user > .name {
    font-weight: 500;
    margin-right: 5px;
    color: rgb(204, 68, 75);
}

.comment-section > .comment > .user > .rank,
.comment-section > .comment > .c-comment > .user > .rank {
    color: white;
    border-radius: 5px;
    font-size: 14px;
    padding: 0 3px;
    margin-right: 5px;
    text-transform: capitalize;
}

.comment-section > .comment .rank.rank-4 {
    background: #7f69ea;
}

.comment-section > .comment .rank.rank-3 {
    background: #4caf50;
}

.comment-section > .comment .rank.rank-2 {
    background: #369899;
}

.comment-section > .comment .rank.rank-1 {
    background: #ff2ca1ba;
}

.comment-section > .comment .rank.rank-0 {
    background: #2196f39c;
}

.comment-section > .comment > .user > .name.your,
.comment-section > .comment > .c-comment > .user > .name.your {
    color: blue;
}

.comment-section > .comment > .user > .name > .chapter {
    color: #2673b1;
    font-size: 15px;
    font-weight: 400;
}

.comment-section > .comment > .user > .time,
.comment-section > .comment > .c-comment > .user > .time {
    color: #808080cf;
    font-size: 12px;
}

.comment-section .input > textarea {
    width: 98%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 70px;
    padding-left: 10px;
    padding-right: 90px;
    padding-top: 5px;
    font-size: 16px;
    max-height: 175px;
    resize: none;
    border-radius: 10px;
}

.comment-section .input > .btn-comment {
    position: absolute;
    right: 20px;
    top: 5px;
    z-index: 20000;
}
.comment-section > .btn-more {
    padding: 5px 10px;
    text-align: center;
    margin: 10px auto 5px auto;
    width: 95%;
    font-size: 20px;
    color: #fff;
    box-sizing: border-box;
}

.comment-section > .btn-more:hover {
    cursor: pointer;
    background: #ffffff1c !important;
}

.comment-section .comment .hide {
    display: none;
}
.comment-section .comment .hide-comment {
    padding: 10px 0 10px 25px;
    word-break: break-word;
    font-size: 13px;
    cursor: pointer;
    color: #2196f3;
    text-decoration: underline;
    font-style: italic;
}

.comment-section .comment .hide-comment:hover {
    color: #ff2ca1ba;
}

.comment-section .btn-more .lds-loading {
    top: -21px !important;
    height: 24px !important;
}