﻿#comments-container {
    padding-right: 6vw;
    /*background-color: red;*/
    padding-top: 1vw;
}

#comments-title {
    font-size: 1.25vw;
    color: #282828;
    box-sizing: border-box;
    height: 3.65vw;
    /* background-color: yellow; */
    font-weight: 600;
    padding-top: 1vw;
    position: relative;
}

    #comments-title:after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        /* transform: translateX(-50%); */
        width: 90%;
        height: 0.11vw;
        background-image: linear-gradient(to left, rgba(128, 128, 128, 0.3), transparent);
    }

#comments-content {
    height: 3.8vw;
    /* background-color: blue; */
    position: relative;
    font-size: 0;
    box-sizing: border-box;
    padding-top: 0.7vw;
}

    #comments-content > div {
        display: inline-block;
        vertical-align: top;
    }

    #comments-content::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 90%;
        height: 0.11vw;
        background-image: linear-gradient(to left, rgba(128, 128, 128, 0.3), transparent);
    }

    #comments-content > div:nth-child(1) {
        color: #282828;
        font-size: 1.27vw;
        font-weight: 600;
        width: 5vw;
        /*background-color: red;*/
    }

    #comments-content > div:nth-child(2) {
        width: 11vw;
    }

        #comments-content > div:nth-child(2) > img {
            width: 100%;
        }

    #comments-content > div:nth-child(3) {
        font-size: 0.87vw;
        font-weight: 500;
        box-sizing: border-box;
        padding-top: 0.6vw;
    }

    #comments-content > div:nth-child(4) {
        /* background-color: yellow; */
        width: 24vw;
        height: 100%;
        box-sizing: border-box;
        padding-right: 6.8vw;
        font-size: 1vw;
        padding-top: 0.4vw;
        font-weight: 500;
    }

    #comments-content > div:nth-child(5) {
        /*background-color: yellow;*/
        height: 100%;
        width: 21.2vw;
        box-sizing: border-box;
        padding-right: 1.2vw;
    }

#new-comment {
    background-color: #00b262;
    font-size: 1.24vw;
    border-radius: 1vw;
    color: white;
    padding-right: 3.8vw;
    box-sizing: border-box;
    height: 2.2vw;
    cursor: pointer;
}

#comments {
}

.comment {
}

.comment-info {
    font-size: 0;
    color: #848484;
    font-weight: 500;
    height: 4vw;
    box-sizing: border-box;
    padding-top: 1.2vw;
    padding-right: 0.2vw;
}

    .comment-info > div {
        display: inline-block;
        vertical-align: top;
        font-size: 0.98vw;
    }

.commenter {
}

.rate {
    background-image: url(../../images/boxmaker/desktop/product-details/star.png);
    width: 3vw;
    background-repeat: no-repeat;
    background-position: right 0.2vw top 0;
    background-size: 1.2vw;
    box-sizing: border-box;
    /* width: 4vw; */
    /* background-color: green; */
    text-align: left;
    padding-left: 0.5vw;
}

.comment-text {
    /*background-color: yellow;*/
    color: #282828;
    font-size: 1.22vw;
    font-weight: 500;
    text-align: justify;
}

.reply {
    border: 0.11vw solid #848484;
    /* height: 6vw; */
    border-radius: 1vw;
    margin-top: 1vw;
    width: 67.8vw;
    padding-right: 1vw;
    padding-bottom: 0.7vw;
    box-sizing: border-box;
    text-align: justify;
    padding-left: 1vw;
}

.reply-title {
    color: #00b262;
    font-size: 1.1vw;
    /*background-color: yellow;*/
    /*padding-right: 1vw;*/
    height: 2vw;
    padding-top: 0.4vw;
}

.reply-text {
    font-size: 1.18vw;
    color: #282828;
    /* visibility: hidden; */
    font-weight: 500;
}
