/* Общие стили для контейнера комментария */
.cpr-comment-container {
    padding: 0 5px; /* Внутренний отступ по бокам */
    display: block; /* Блочный элемент */
    color: #666; /* Основной цвет текста */
    line-height: 1.1; /* Межстрочный интервал */
    font-size: 11px; /* Размер шрифта */
    font-family: Tahoma, sans-serif; /* Семейство шрифтов */
}

/* Стили ссылок в контейнере комментария */
.cpr-comment-container a {
    color: #666; /* Цвет текста ссылки */
    text-decoration: none; /* Убирает подчеркивание */
    font-weight: bold; /* Жирный текст */
}

/* Стили для ссылки при наведении */
.cpr-comment-container a:hover {
    color: #44bbff; /* Цвет ссылки при наведении */
}

/* Стили для контейнера аватара */
.cpr-avatar-container {
    float: left; /* Обтекание по левому краю */
    border: 1px solid #d2d2d2; /* Граница вокруг аватара */
    padding: 2px; /* Внутренний отступ */
    position: absolute; /* Абсолютное позиционирование */
    border-radius: 50%; /* Закругление границ до круга */
}

/* Стили для изображения аватара */
.cpr-avatar-container img {
    width: 55px; /* Ширина изображения */
    height: 55px; /* Высота изображения */
    border-radius: 50%; /* Закругление границ до круга */
    transition: opacity 0.3s ease; /* Плавный переход при изменении непрозрачности */
}

/* Стили для изображения аватара при наведении */
.cpr-avatar-container a:hover img {
    opacity: 0.6; /* Уменьшение непрозрачности при наведении */
}

/* Стили для ссылки имени пользователя */
.cpr-username-link {
    font-size: 11px; /* Размер шрифта */
    padding: 2px 0; /* Внутренний отступ сверху и снизу */
}

/* Стили для текста комментария */
.cpr-comment-text {
    padding-left: 65px; /* Внутренний отступ слева для выравнивания с аватаром */
    word-break: break-word; /* Перенос слов, которые выходят за границы контейнера */
    overflow-wrap: break-word; /* Альтернативный способ переноса */
}

/* Стили для отображения даты комментария */
.cpr-comment-date {
    font-size: 10px; /* Размер шрифта для даты */
    color: #adadad; /* Цвет текста даты */
}

/* Стили для блока оценки комментария */
.cpr-comment-rating {
    padding: 5px 7px 5px 5px; /* Внутренние отступы для элемента */
    float: right; /* Обтекание по правому краю */
    font-size: 7pt; /* Размер шрифта */
    font-weight: bold; /* Жирный текст */
    color: #666; /* Цвет текста */
    clear: both; /* Отмена обтекания */
    display: flex; /* Flex-контейнер для размещения стрелок и рейтинга в одном ряду */
    align-items: center; /* Вертикальное выравнивание элементов */
}

/* Стили для изображения оценки (стрелка вверх/вниз) */
.cpr-comment-rating img {
    margin: 0 5px; /* Отступ между стрелками и цифрой */
}

/* Стили для цифры рейтинга */
.cpr-comment-rating span {
    color: #318bbf; /* Цвет текста цифры рейтинга */
}

/* Стили для выделения текста (например, имени пользователя) */
.cpr-comment-highlight,
.cpr-comment-highlight-p {
    font-weight: bold; /* Жирный текст */
    color: #666; /* Цвет текста */
}

/* Стили для заголовка комментария (имя пользователя, дата и панель модерации) */
.cpr-comment-header {
    display: flex; /* Flex-контейнер для размещения имени пользователя и панели модерации в одном ряду */
    justify-content: space-between; /* Распределение пространства между элементами */
    align-items: center; /* Вертикальное выравнивание элементов */
}

/* Стили для панели модерации (например, кнопки оценки) */
.cpr-comment-moderation-panel {
    display: flex; /* Flex-контейнер для размещения кнопок оценки в одном ряду */
    align-items: center; /* Вертикальное выравнивание элементов */
}

/* Обертка для цифры рейтинга */
.u-rate-wrapper {
    margin: 0 10px; /* Отступы вокруг цифры рейтинга для увеличения пространства */
}

/* Стили для ссылки на профиль пользователя */
.cpr-profile-link {
    text-decoration: none; /* Убирает подчеркивание */
    color: #318bbf; /* Цвет ссылки на профиль */
}

/* Стили для ссылки на профиль при наведении */
.cpr-profile-link:hover {
    color: #44bbff; /* Цвет ссылки при наведении */
}

/* Стили для ссылки "Ответить" */
.cpr-answer-link {
    text-decoration: none; /* Убирает подчеркивание */
    color: #666; /* Цвет ссылки */
}

/* Стили для ссылки "Ответить" при наведении */
.cpr-answer-link:hover {
    color: #44bbff; /* Цвет ссылки при наведении */
}