.comment .title-main-comment{
    position: relative;
    margin-bottom: 15px;
    padding-bottom: 2px;
}
.comment .title-main-comment:before{
    position: absolute;
    content: '';
    height: 1px;
    bottom: -2px;
    z-index: -1;
    left: 0;
    right: 0;
    background-color: #DADADA;
}
.comment .title-main-comment a{
    color: #121212;
    border-bottom: 2px solid #B41616;
    padding-right: 5px;
    white-space: nowrap;
    overflow: hidden;
    font-weight: bold;
    font-size: 22px;
    line-height: 20px;
    text-transform: capitalize;
    padding-bottom: 2px;
}
.comments {
    font-size: 15px;
    font-family: "SF Pro Display";
}

.comments .cmt-avatar {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    float: left;
}

.comments li .cmt-content {
    margin-left: 10px;
    width: 100%;
}

.comments li {
    display: flex;
}

.comments li::after {
    content: '';
    position: absolute;
    left: 10px;
    border-bottom: dotted 1px #555;
}

.comments .cmt-author {
    margin-right: 6px;
}

.comments .cmt-author span {
    margin-left: 10px;
}

.comments .cmt-author span:hover {
    color: #1dae7e;
    cursor: pointer;
}

.comments .cmt-author span.date,
.comments .cmt-author span.date:hover {
    color: #787676;
    cursor: unset;
}

.comments .cmt-content {

    margin-bottom: 10px;
}

.comments .cmt-content p {
    margin-bottom: 10px;
    padding-bottom: 10px;
    margin-top: 5px;
    border-bottom: dotted 1px #555;
}

ul.pagination {
    justify-content: flex-end;
}

ul.pagination li a,
ul.pagination li span {
    font-size: 15px;
    padding: 3px;
    color: #333;
}

ul.pagination li a:hover,
ul.pagination li.active a {
    color: #1dae7e;
}

.wrap-comment {
    padding: 10px;
    background: rgba(196, 196, 196, 0.2);
}

.wrap-comment .new-com-bt {
    background-color: #fff;
    height: 55px;
    font-size: 14px;
    border: solid 1px #3333;
    padding: 10px;
}

.wrap-comment .input-cm,
.wrap-comment input.jsch {
    width: 180px;
    font-size: 14px;
    height: 28px;
    margin-right: 10px;
    padding: 6px;
    border: #c4c4c4 1px solid;
}

.wrap-comment textarea {
    width: 100%;
    margin-top: 15px;
    font-size: 14px;
    resize: none;
    padding: 18px 20px;
    color: #AEAEAE;
    border-color: #c4c4c4;
}
.wrap-comment textarea:focus {
    outline: unset;
}
.wrap-comment textarea::placeholder {
    color: #AEAEAE;
}

.wrap-comment .gr-input{
    display: flex;
    align-items: center;
    flex-wrap:wrap;
}

.wrap-comment .gr-input input{
    width: 30%;
    height: 35px;
    border: #c4c4c4 1px solid;
    padding-left: 20px;
    color: #AEAEAE;
    font-size: 14px;
    margin-right: 15px;
}
.wrap-comment .gr-input input::placeholder{
    color: #AEAEAE;
}

.wrap-comment .bt-add-com:hover,
.wrap-comment .bt-cancel-com:hover {
    cursor: pointer;
}


.wrap-comment .bt-add-com,
.wrap-comment .bt-cancel-com {
    width: fit-content;
    float: left;
    padding: 5px 10px;
    font-size: 14px;
    margin: 5px;
    font-weight: 500;
    border-radius: 5px;
}

.wrap-comment .bt-add-com {
    width: 167px;
    height: 35px;
    background: #0E3997;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    text-transform: uppercase;
    color: #fff;
}

.wrap-comment .bt-cancel-com {
    border: solid 1px #aeabab;
    width: 167px;
    height: 35px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

@media (max-width: 480px) {
    .wrap-comment .bt-add-com {
        width: 130px;    }

    .wrap-comment .bt-cancel-com {
        width: 50px;
    }
    .wrap-comment .gr-input input{
        width: 48%;
        margin-right: 0;
	min-width: 215px;
    }
    .wrap-comment .gr-input input[type="text"]{
        margin-bottom: 10px;
    }
    .wrap-comment .gr-input{
        justify-content: space-between;
    }
}

.wrap-comment .new-com-cnt,
.new-com-bt {
    background-color: #fff;
    padding-left: 20px;
    display: none;
}
.wrap-comment .new-com-cnt{
    padding: 20px;
}

.wrap-comment .new-com-cnt.reply {
    display: block;
}

.wrap-comment p.text-success {
    font-size: 14px;
}

.wrap-comment .clear {
    clear: both;
}

.new-com-cnt.reply {
    margin-left: 45px;
    margin-bottom: 22px;
}

.wrap-comment .close {
    display: inline-block;
    margin-top: 0;
    margin-right: 0;
    width: 9px;
    height: 9px;
    background-repeat: no-repeat !important;
    background-image: url(img/remove-icon-small.png) !important;
}

.wrap-comment .close {
    float: right;
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
    filter: alpha(opacity=20);
}

.wrap-comment button.close {
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
    -webkit-appearance: none;
}

.wrap-comment .alert .close {
    position: relative;
    top: -2px;
    right: -10px;
    line-height: 20px;
}

.wrap-comment .alert-success {
    color: #468847;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.wrap-comment .fade.in {
    opacity: 1;
}

.wrap-comment .alert.rep {
    margin-left: 45px;
}

.wrap-comment .fas.fa-thumbs-up {
    color: #1dae7e;
}

.comments .cmt-author span.like-count-comment {
    margin-left: 0;
}