/* тайтл над комментариями - "N ответов на".
 * также применяется для заголовка "Написать комментарий" над формой
 */
.commts-tittle {
    font-size: 28px;
    margin-bottom: 35px;
}

.commts-comment {
    margin-top: 15px;
}

/* стили для дочерних комментариев - сбрасывает
 * отступ и диск стандартного ul, плюс выравнивание margin'ов
 */
.commts-comment .children {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
    margin-top: 15px;
}

/* ul в котором лежат ВСЕ комментарии */
.commts-list {
    list-style-type: none;
    padding: 0;
}

/* враппер div всего отдельного комментария
 * (применяется также на комментариях дочерних)
 */
.commts-content {
    display: flex;
    flex-direction: column;
    background: #f5f8fd;
    padding: 30px 30px 25px 30px;
    border-top-left-radius: 55px;
    border-bottom-right-radius: 20px;
}

/* враппер div всей меты комментария: аватар, автор, дата и
 * кнопка Ответить. нужен чтобы раскидать флексами всё
 */
.commts-meta-wrap {
    display: flex;
    flex-direction: row;
    margin-bottom: 15px;
}

/* враппер div мета-данных комментария: автор и дата; */
.commts-meta {
    display: flex;
    flex-direction: column;
}

/* враппер span автора комментария */
.commts-author {
    font-weight: bold;
    margin-bottom: 10px;
}

/* враппер span даты комментария */
.commts-date {
    font-style: italic;
    color: gray;
}

/* враппер div кнопки "Ответить" в комментарии */
.commts-reply {
    margin-left: auto;
}


/* стили кнопки "Ответить" в комментарии */
.commts-reply-link {
    background: transparent;
    color: #222;
    text-decoration: underline;
}

/* враппер поля комментариев */
.commts-comment-form {
    margin-bottom: 25px;
}

/* стили поля комментария */
.commts-comment-field {
    border: none;
    width: 100%;
    padding: 15px 20px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    transition: box-shadow 0.3s ease;
}

/* стили поля комментария в момент курсора в нем */
.commts-comment-field:focus {
    border: none;
    outline: none;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
    transition: box-shadow 0.3s ease;
}

/* враппер кнопки Отправить */
.commts-submit-form {

}

/* кнопка отправки комментария */
.commts-submit-button {
    display: block;
    margin-left: auto;
    border: none;
    border-radius: 35px;
    padding: 15px 50px;
    color: #fff;
    background: #353a3d;
    font-size: 16px;
    cursor: pointer;
}

/* текст перед полем комментариев для незарегистрированных юзеров:
 * по умолчанию: Ваш адрес email не будет опубликован. Обязательные поля помечены */
.commts-note-before {

}

/* поле Автор - внешний враппер в теге p */
.commts-form-author {

}

/* поле Автор - сам input text */
.commts-form-author-field {
    width: 100%;
    border: none;
    padding: 15px 20px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* поле Email - внешний враппер в теге p */
.commts-form-email {

}

/* поле Email - сам input text */
.commts-form-email-field {
    width: 100%;
    border: none;
    padding: 15px 20px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* поле URL - внешний враппер в теге p */
.commts-form-url {

}

/* поле URL - сам input text */
.commts-form-url-field {
    width: 100%;
    border: none;
    padding: 15px 20px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* поле Соглашение с сохранением данным - внешний враппер в теге p */
.commts-form-cookies {
    display: flex;
    align-items: center;
    height: 3rem;
}

/* поле Соглашение с сохранением данных - сам input checkbox */
.commts-form-cookies-checkbox {
    height: 20px;
    width: 20px;
    margin-right: 10px;
}

/* label сообщения про сохранениям данных - сброс стандартного margin-bottom */
.commts-form-cookies-label {
    margin-bottom: 0;
}