@keyframes load_c {
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
}

.remove-comment-modal{display: grid;grid-template: auto 50px / repeat(2, 1fr);grid-column-gap: 10px;grid-row-gap: 20px;}
.remove-comment-modal p{grid-column-end: span 2;text-align: center;}
.remove-comment-modal button{border-radius: 5px;}
.remove-comment-modal .cancel-remove{border: 1px solid #b3b3b3;color: #444;}
.remove-comment-modal .accept-remove{background-color: var(--liked-color);color: #fff;}

#comments{padding-bottom: 150px;}

#comments .nowrite{width: var(--wrap-width);margin: 0 auto 30px auto;}
#comments .nowrite a{font-weight: bold;text-decoration: underline;}

#comment-form-wrap{/*display: none;bottom: 0;*/display: flex;bottom: -240px;transition: bottom .3s; justify-content: center;position: fixed;z-index: 2;padding: 0 0 10px 0;width: calc(100% - var(--aside-width));background-image: linear-gradient(0deg, #fdf8ef 30%, #fdf8ef00);}
body.altcg #comment-form-wrap{background-image: linear-gradient(0deg, #fff 30%, #fdf8ef00);}
body.comment-form #comment-form-wrap{/*display: flex;*/bottom: 0;}
#comment-form{position: relative;width: var(--wrap-width);height: auto;}
#comment-form .to-comment{padding: 0 7px 0 7px;}
#comment-form .to-comment .tc-wrap{position: relative;height: 30px;padding: 0 40px 0 10px;margin: 0 0 10px 0;border-radius: 15px;background-color: #e3e3e3;box-shadow: 0 0 7px 4px #fdf8ef;display: inline-flex;align-items: center;}
#comment-form .to-comment .tc-remove{position: absolute;right: 8px;top: 5px;width: 20px;height: 20px;}
#comment-form .to-comment .tc-remove svg line{stroke: #d78778;}
#comment-form .to-comment span{}
#comment-form .to-comment span a{}
#comment-form .comment-edit{}
#comment-form .comment-edit .ce-wrap{position: relative;display: inline-flex;align-items: center;padding: 10px 10px;margin: 0 0 10px 0;border-radius: 15px;background-color: #e3e3e3;box-shadow: 0 0 7px 4px #fdf8ef;}
#comment-form .comment-edit .ce-wrap span{display: inline-block;margin-right: 10px;}
#comment-form .comment-edit .ce-close{display: inline-block;width: 20px;height: 20px;}
#comment-form .comment-edit .ce-close svg{}
#comment-form .comment-edit .ce-close svg line{stroke: #d78778;}
#comment-form .c-attach{margin: 0 0 10px 0;}
#comment-form .c-attach .ca-wrap{position: relative;display: inline-flex;align-items: center;height: 50px;background-color: #e3e3e3;padding: 3px 12px 3px 15px;border-radius: 25px;}
#comment-form .c-attach .ca-remove{position: relative;display: inline-block;margin-left: 10px;width: 20px;height: 20px;}
#comment-form .c-attach .ca-remove svg{width: 100%;height: 100%;}
#comment-form .c-attach .ca-remove svg line{stroke: #d78778;}
#comment-form .c-attach span{margin-right: 10px;}
#comment-form .c-attach img{position: relative;height: 100%;min-width: 20px;background-color: #444;width: auto;border-radius: 6px;}
#comment-area{position: relative;display: flex;align-items: center;z-index: 1;width: 100%;height: 170px;padding: 5px 10px 5px 10px;background-color: #dbdbdb;border-radius: 15px;border-bottom-right-radius: 0;}
#comment-area .comment-attach{position: relative;margin-right: 16px;display: flex;align-items: center;justify-content: center;}
#comment-area .comment-attach .ca-remove{position: absolute;z-index: 2;right: 0;top: 0;width: 24px;height: 24px;background-color: #E67777;}
#comment-area .comment-attach .ca-remove svg{width: 100%;height: 100%;}
#comment-area .comment-attach img{position: relative;z-index: 1;max-height: 90px;max-width: 90px;object-fit: contain;}
#comment-area textarea{width: 100%;height: 100%;padding: 0;margin: 0;color: #000;}
#comment-frame{width: 100%;min-width: 200px;height: 100%;border: 0;}
#comment-form button[type=submit]{position: absolute;width: 40px;height: 40px;z-index: 2;right: 15px;bottom: 40px;}
#comment-form button[type=submit] svg{}
#comment-form button[type=submit] svg .loader{display: none;}
#comment-form button[type=submit] svg .save{display: none;}
#comment-form button[type=submit] svg path{fill: var(--color-1);}
#comment-form.load button[type=submit] svg{animation: load_c 1s linear infinite;}
#comment-form.load button[type=submit] svg .loader{display: block;}
#comment-form.load button[type=submit] svg .plane,
#comment-form.load button[type=submit] svg .save{display: none !important;}
#comment-form-wrap.edit #comment-form button[type=submit] svg .plane{display: none;}
#comment-form-wrap.edit #comment-form button[type=submit] svg .save{display: block;}

#comment-img-btn{position: absolute;z-index: 2;width: 30px;height: 30px;right: 12px;bottom: 4px;cursor: pointer;}
#comment-img-btn svg{width: 100%;height: 100%;}
#comment-img-btn input[type=file]{display: none;}

#comment-user-btn{position: absolute;z-index: 2;width: 24px;height: 24px;right: 50px;bottom: 15px;cursor: pointer;}
#comment-user-btn svg{width: 100%;height: 100%;}
#comment-user-btn svg path{fill: #6f6f6f;}

#comment-users-wrap{}
#comment-users-wrap .cu-wrap{position: relative;display: block;width: 100%;height: 40px;margin: 0 0 14px 0;}
#comment-users-wrap [name="cuq"]{width: 100%;height: 100%;background-color: #eee;border-radius: 7px;border: 1px solid #cecece;padding: 0 7px;}
#comment-users-list{position: relative;display: grid;grid-template-columns: repeat(3, 1fr);grid-column-gap: 7px;grid-row-gap: 14px; width: 100%;height: 300px;overflow: hidden;overflow-y: auto;}
#comment-users-list.load{opacity: .5;}
#comment-users-list .user-item{position: relative;display: flex;flex-direction: column;align-items: center; cursor: pointer;}
#comment-users-list .user-item .av{width: 50px;height: 50px;margin-bottom: 4px;background-color: #e3e3e3;}
#comment-users-list .user-item .name{font-size: .8em;white-space: nowrap;max-width: 110px;overflow: hidden;text-overflow: ellipsis;text-align: center;}

#comment-tag-btn{position: absolute;z-index: 2;width: 22px;height: 22px;right: 65px;bottom: 46px;cursor: pointer;}
#comment-tag-btn svg{width: 100%;height: 100%;}
#comment-tag-btn svg path{fill: #6f6f6f;}

#comments .comments-title{position: relative;width: 100%;overflow: hidden;margin-bottom: 50px;}
#comments .comments-title .ct-wrap{position: relative;width: var(--wrap-width);margin: 0 auto;}
#comments .comments-title .ct-wrap::after{content: '';position: absolute;width: calc( var(--wrap-width) + 20vw);height: 10px;left: 0;bottom: 0;background-color: var(--color-1);}
#comments .comments-title .ct-wrap h3{display: inline-block;padding: 10px;margin: 0;background-color: var(--color-1);color: var(--color-4);font-size: 1.1em;}
#comments .comments-title .ct-wrap h3 span{font-weight: normal;}
#comments-list{width: var(--wrap-width);margin: 0 auto;}
#comments-list .more-reply{display: block;padding-left: 70px;margin-bottom: 30px;}
.comment{position: relative;display: grid;grid-template: auto / 50px calc(100% - 70px);grid-gap: 20px;margin-bottom: 30px;}
.comment.moderate{}
.comment.moderate .c-avatar,
.comment.moderate .c-head,
.comment.moderate .c-text{opacity: 0.4;}
.comment.edit{opacity: .4;}
.comment.on-comment{padding-left: 70px;grid-template: auto / 40px 1fr;grid-gap: 12px;margin-bottom: 15px;}
.comment .c-avatar{position: relative;width: 100%;height: 50px;}
.comment.on-comment .c-avatar{height: 40px;}
.comment .c-avatar .av{position: relative;width: 100%;height: 100%;}
.comment .c-content{position: relative;display: flex;flex-direction: column;}
.comment .c-content .userlink, .comment .c-content .link, .comment .c-content .tag{color: var(--link-color);}
.comment .c-moderate{margin-bottom: 10px;color: #da4e4e;}
.comment.on-comment .c-moderate{margin-bottom: 7px;}
.comment .c-head{margin-bottom: 10px;}
.comment.on-comment .c-head{margin-bottom: 7px;}
.comment .c-head .c-username{font-weight: bold;margin-right: 10px;}
.comment .c-head .c-datetime{opacity: .5;}
.comment .c-post{margin-bottom: 10px;}
.comment .c-post a{display: block;color: #245326;text-decoration: underline;}
.comment .c-attach{margin-bottom: 10px;}
.comment .c-attach img{height: 130px;width: auto;background-color: #e3e3e3;}
.comment .c-text{position: relative;margin-bottom: 15px;white-space: pre-line;word-wrap: break-word;word-wrap: anywhere;}
.comment.on-comment .c-text{margin-bottom: 10px;}
.comment .c-text li{display: list-item;}
.comment .c-text ol, .comment .c-text ul{margin: 0 0 7px 0;}
.comment .c-text ol{list-style: decimal;}
.comment .c-text ul{list-style: circle;}
.comment .c-text img{max-width: 100%;}
.comment .c-text .yt-attach{margin: 26px 0 0 0;}
.comment .c-text .yt-attach iframe{width: 500px;height: 330px;}
.comment .c-bottom{display: flex;align-items: center;}
.comment .c-bottom .c-likes{display: flex;align-items: center;margin-right: 20px;cursor: pointer;}
.comment .c-bottom .c-likes.load{opacity: .3;}
.comment .c-bottom .c-likes svg{width: 20px;height: 20px;margin-right: 5px;}
.comment .c-bottom .c-likes span{color: #DFD9C2;}
.comment .c-bottom .c-likes.liked svg path{fill: var(--liked-color);}
.comment .c-bottom .c-likes.liked span{color: var(--liked-color);}
.comment .c-bottom .c-action{color: #000;margin-right: 15px;}
.comment .c-bottom .c-repl-count{color: #000;opacity: .5;margin-right: 20px;}
.comment .c-bottom .c-complaint{color: var(--liked-color);margin-right: 15px;}
.comment .c-bottom .c-edit{color: var(--link-color);margin-right: 15px;}
.comment .c-bottom .c-remove{color: var(--liked-color);margin-right: 15px;}
.more-comments{display: block;}
.more-comments.prev{margin-bottom: 24px;}
.more-comments.next{margin-top: 24px;}
.nocomments{margin: 14px 0;}

@media screen and (max-width: 1205px) {
    #comment-form{padding-right: 50px;}
    #comment-form button[type="submit"]{right: 60px;}
    #comment-img-btn{right: 61px;}
    #comment-user-btn{right: 97px;}
}
@media screen and (max-width: 1024px) {
    #comment-form{padding-right: 0;}
    #comment-form button[type="submit"]{right: 15px;}
    #comment-img-btn{right: 12px;}
    #comment-user-btn{right: 50px;}
}
@media screen and (max-width: 840px) {
    /*body.auth-on #up{bottom: 130px;}
    body.auth-on #up.hide{transform: translateY(180px) !important;}*/
    #comment-form-wrap{justify-content: flex-start;padding: 0 10px 10px 10px;}
    body.btn-up #comment-form-wrap{padding-right: 62px;}
    #comment-form{width: 100%;}
}
@media screen and (max-width: 700px) {
    .comment .c-text .yt-attach iframe{width: 70vw;height: 48vw;}
}
@media screen and (max-width: 600px) {
    /*body.auth-on #up{bottom: 140px;}
    body.auth-on #up.hide{transform: translateY(200px) !important;}*/
    #comment-form-wrap{z-index: 5;padding: 0;}
    body.btn-up #comment-form-wrap{padding-right: 0;}
    #comment-area{border-radius: 0;padding: 10px 13px 10px 13px;height: 180px;}
    #comment-form-wrap.admin #comment-area{height: 205px;border-radius: 0;padding: 5px 10px 5px 10px;}
    #comment-form-wrap.focus{display: flex !important;z-index: 8;}
    #comment-form button[type="submit"]{width: 32px;height: 32px;right: 8px;bottom: 12px;}
    #comment-img-btn{right: 8px;bottom: 47px;}
    #comment-user-btn{right: 11px;bottom: 82px;}
    .comment{grid-template: auto / 34px calc(100% - 70px);grid-gap: 10px;}
    .comment.on-comment{padding-left: 40px;}
    .comment .c-avatar{height: 34px;}
    .comment .c-bottom{flex-wrap: wrap;}
    .comment .c-bottom .c-likes{margin-right: 12px;}
    .comment .c-bottom .c-action{margin-right: 8px;}
    .comment .c-bottom .c-complaint{margin-right: 10px;}
    .comment .c-bottom .c-likes,
    .comment .c-bottom .c-remove,
    .comment .c-bottom .c-edit,
    .comment .c-bottom .c-action,
    .comment .c-bottom .c-complaint{margin-bottom: 10px;}
}
@media screen and (max-width: 500px) {

}