/* comment system */
.comment-inner {
    padding:              0 8px 0 0;
}

/**
 * comment displays
 */
.comment-inner .disp-item {
    padding:             8px;
    border-top:          1px solid #DDD;
}
.comment-inner .disp-div>div.hidden {
    display:            none;
}

.comment-inner .disp-item-root {
    margin-bottom:       5px;
}

.comment-inner .disp-item-root .head {
    display:  flex;
    justify-content: space-between;
    margin-bottom:     5px;
}

.comment-inner .disp-item-root .head-left {
    display: flex;
    align-items: center;
}

.comment-inner .disp-item-root .text {
    padding-left:      35px;
    margin:            0 8px 0 0;
    font-size:        0.7em;
}

.comment-inner .disp-item-root .username {
    font-weight:       bold;
    color:              rgba(0, 60, 255, 0.719);
    font-size:         0.85em;
    padding-right:     15px;
    box-sizing:        border-box;
}

.comment-inner .disp-item .time {
    color:             #666;
    font-size:          0.65em;
}

.comment-inner .disp-item .level-div {
    color:             #666;
    font-size:          0.65em;
    margin-left:        15px;
}

.comment-inner .disp-item .rep {
    color:             #666;
    font-size:         0.7em;
    margin-right:      5px;
}
.comment-inner .disp-item .rep:hover {
    color:              rgba(0, 60, 255, 0.719);
}
.comment-inner .disp-item .repto {
    font-style:         italic;
    margin-right:       10px;
    color:              rgba(0, 60, 255, 0.719);
}

.comment-inner .disp-item-children {
    margin-left:         35px;
    margin-top:          5px;
    padding-left:        8px;
    padding-top:         3px;
    background-color:    rgba(226, 225, 225, 0.315);

}

.comment-inner .disp-item-child {
    margin:             5px 0px 2px 0px;
}
.comment-inner .disp-item-children>div.hidden {
    display:            none;
}

.comment-inner .disp-item-child .head {
    display:  flex;
    justify-content: space-between;
    margin-bottom:      5px;
}

.comment-inner .disp-item-child .head-left {
    display: flex;
    align-items: center;
}

.comment-inner .disp-item-child .username {
    font-weight:       bold;
    color:              rgb(0, 0, 0);
    font-size:         0.85em;
    padding-right:     15px;
    box-sizing:        border-box;
}

.comment-inner .disp-item-child .text {
    margin-right:      8px;
    font-size:        0.7em;
}
.comment-inner .expdiv {
    text-align: center;
    font-size:         0.7em;
}
.comment-inner .hidbt, .comment-inner .expbt {
    display:            none;
    color:              #666;
}
.comment-inner .hidbt:hover, .comment-inner .expbt:hover {
    color:              rgba(0, 60, 255, 0.719);
}
.comment-inner .expdiv .chosen {
    display:            block;
    padding:             5px 0;
}

.comment-inner .expdiv-bot {
    text-align: center;
    background-color: rgba(226, 225, 225, 0.281);
    margin-right:     8px;
    line-height:           2.0em;
    font-size:        0.9em;
}
.comment-inner .hidbt-bot, .comment-inner .expbt-bot {
    display:            none;
    color:              #666;
}
.comment-inner .hidbt-bot:hover, .comment-inner .expbt-bot:hover {
    color:              rgba(0, 60, 255, 0.719);
}
.comment-inner .expdiv-bot .chosen {
    display:            block;
    padding:             5px 0;
}


.comment-inner .comment-div .head{
    margin-bottom:      5px;
}
.comment-inner .comment-div .head-label {
    font-size:          1.15em;
    color:              rgba(0, 60, 255, 0.719);
}
.comment-inner .comment-div .hint .no-sign {
    display:                        inline-block;
    width:                          1.4em;
    height:                         1.4em;

    background-image:               url("/static/comment/image_site/warning-circle-red.svg");
    background-repeat:              no-repeat;   
    background-size:                1.4em;

    margin-right:                   5px;
}
.comment-inner .comment-div .hint {
    font-size:                      0.8em;
    color:                          red;
    display: flex;
    align-items: center;
}
.comment-inner .comment-div .repto {
    display:            flex;
    align-items: center;
    margin:             3px 0;
}
.comment-inner .comment-div .repto-name {
    font-style:         italic;
    color:              rgba(0, 60, 255, 0.719);
    font-size:          0.8em;
    margin-right:       10px;
}
.comment-inner .comment-div .repto-cancel {
    display:                        inline-block;
    width:                          1.0em;
    height:                         1.0em;

    background-image:               url("/static/humanverify/image_site/close-square-blue.svg");
    background-repeat:              no-repeat;   
    background-size:                0.95em;
}

.comment-inner .comment-div .repto-cancel:hover {
    background-image:               url("/static/humanverify/image_site/close-square-black.svg");
}
.comment-inner .comment-div .hidden {
    display:            none;
}
.comment-inner .comment-div .input-text {
    display:            flex;
    width:              100%;
}
@media only screen and (min-device-width: 768px){
    .comment-inner .comment-div .textarea {
        height:             80px;
        font-size:          0.8em;
    }
    .comment-inner .comment-div .submit {
        min-width:          80px;
        height:             80px;
    }
}
@media only screen and (max-device-width: 767px){
    .comment-inner .comment-div .textarea {
        height:             15vw;
        font-size:          16px
    }
    .comment-inner .comment-div .submit {
        min-width:          15vw;
        height:             15vw;
    }
}
.comment-inner .comment-div .textarea {
    display:            inline-block;
    border:             solid 2px  #DDD;
    border-right: none;
    box-sizing:         border-box;
    resize:             none;
    margin: 0;
    padding: 5px;
    width:     100%;
    
    white-space: pre-wrap;
}
.comment-inner .comment-div .textarea:focus {
    border:             solid 2px rgba(0, 110, 255, 0.397);
    border-right: none;
}

@media only screen and (min-device-width: 768px){
    .comment-inner .comment-div .name-input, .comment-inner .comment-div .email-input {
        width:              150px;
        font-size:          0.8em;
    }
    .comment-inner .comment-div .info {
        font-size:          0.8em;
        display:            flex;
        margin:             8px 0;
    }
    .comment-inner .comment-div .info-left {
        margin-right:       20px;
    }
}
@media only screen and (max-device-width: 767px){
    .comment-inner .comment-div .name-input, .comment-inner .comment-div .email-input {
        width:              40vw;
        font-size:          25px;
        
        line-height:        28px;
        height:             28px;
        margin:             5px 5px;
        display:            block;
    }
    .comment-inner .comment-div .info {
        font-size:          25px;
        margin:             8px 0;
        display: flex;
    }
    .comment-inner .comment-div .info-left {
        margin-right:       20px;
    }
}

.comment-inner .comment-div .name, .comment-inner .comment-div .email {
    color:             #666;
}

.comment-inner .comment-div .submit {
    display:            inline-block;
    box-sizing: border-box;
    background-color:   rgba(0, 110, 255, 0.651);
    border-top-right-radius:      5px;
    border-bottom-right-radius:      5px;

    display: flex;
    align-items: center;
    justify-content:  center;
    color: white;
}
.comment-inner .comment-div .submit:hover {
    background-color:   rgba(0, 17, 255, 0.651);
}