#comments_container {
    margin-top: 8rem;
    margin-bottom: 15rem;
    display: flex;
    flex-direction: column;
    width: 40%;
    height: auto;
}


.textarea_wrap,
.textarea_wrap_reply {
    border: 1.2px solid var(--main-color);
    border-radius: 5px;
    width: 100%;
    height: 100px;
}

.textarea_wrap_reply {
    height: 50px;
}

.textarea_wrap_reply .add_btn {
    align-self: flex-end;
}

#spec_char_toolbar {
    display: flex;
    flex-direction: row;
}

#smilyes_wrap {
    cursor: pointer;
    color: var(--main-color);
    border: 1px solid var(--main-color);
    border-radius: 5px;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#smilyes_list_container {
    position: absolute;
    transform: translate(1%, -100%);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    column-gap: 1rem;
    row-gap: 1rem;
    background-color: white;
    /*border: 1px solid black;*/
}

.smilye {
    cursor: pointer;
}

#com_send_btn {
    align-self: flex-end;
}

#comments_container textarea {
    width: 100%;
    height: 100%;
    border: none;
    resize: none;
    font-size: large;
}



#com_reps_container {
    /*background-color: white;*/
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
}

#com_reps_container>div {
    width: 100%;
}

#com_reps_container .reply_btn,
#com_reps_container .reply_btn_active {
    text-align: end;
}


.user_comment {
    display: flex;
    flex-direction: row;
    margin-top: 15px;
    word-break: break-word;
}

.user_comment p {
    white-space: break-spaces;
    word-break: break-word;
}

.user_com_photo {
    width: 23px;
    height: 23px;
}

.com_rep_container {
    border: 1px solid var(--main-color);
    width: 90%;
    min-width: 350px;
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    border-radius: 20px;
    margin-bottom: 1rem;
    box-sizing: border-box;
    padding: 1rem;
    background-color: white;
}

.com_rep_container div[id^="reply_container_n"] {
    display: flex;
    flex-direction: column;
}

.com_btns_wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#isSpoiler {
    accent-color: var(--main-color);
}

.com_form_close_btn{
    text-align: end;
    cursor: pointer;
}

@media only screen and (max-width: 1010px) {
    #chaps_container {
        width: 52%;
    }

    #comments_container {
        width: 52%;
    }
}

@media only screen and (max-width: 460px) {
    .com_rep_container {
        min-width: 250px;
    }
}

@media only screen and (max-width: 320px) {
    .com_rep_container {
        min-width: auto;
        width: 100%;
    }
}