.topic-summary { display: flex; flex-flow: row wrap; justify-content: space-around; align-items: center; align-content: center; margin-bottom: 5px; padding: 10px 0; border-width: 1px 0; border-style: solid; border-color: rgba(99, 99, 99, 0.5); }
.topic-average { flex-grow: 1; box-sizing: border-box; padding: 0 5px; text-align: center; min-width: 250px; }
.topic-average .rating-value { display: flex; align-self: center; justify-content: center; align-items: center; font-weight: bold; }
.topic-average .rating-value .big { font-size: 64px; font-weight: 100; line-height: 64px; }
.topic-bars { flex-grow: 1; box-sizing: border-box; display: inline-block; text-align: center; min-width: 350px; padding: 5px 20px; }
.topic-bar { display: grid; width: 100%; max-width: 100%; grid-template-columns: 13% 71% 16%; justify-items: center; align-items: center; }
.topic-average .label-review { font-size: 0.8em; }
.topic-average .label-no-review { padding: 10px 0; }
.topic-bar .bar-star-n { display: flex; line-height: 26px; align-items: center; }
.topic-bar .bar-star-n .star { width: 32px; position: unset; background-repeat: no-repeat; background-position: center; }
.topic-bar .bar-progress { width: 100%; max-width: 100%; height: 12px; }
.topic-bar .bar-progress > span { width: 50%; max-width: 100%; background-color: red; height: 100%; display: block; }
.topic-bar .bar-total { padding: 0 10px; font-size: 0.95em; border-radius: 6px; border: 1px solid rgba(99, 99, 99, 0.5); }
.topic-add-review { flex-grow: 1; box-sizing: border-box; text-align: center; padding: 5px; min-width: 250px; }
.topic-form { text-align: left; max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in; }
.topic-form.offline { margin-bottom: 0; }
.topic-form.visible { max-height: 1000px; width: 100%; }
.fill { min-width: 200px; }
.topic-summary.comments .topic-total-review { flex-grow: 1; box-sizing: border-box; padding: 5px; min-width: 250px; text-align: center; }
.topic-summary.comments .topic-total-review > div { text-align: center; }
.topic-summary.comments .topic-total-review .topic-number-review { font-size: 64px; font-weight: 100; line-height: 64px; }
.topic-summary.comments .topic-space { flex-grow: 1; box-sizing: border-box; padding: 5px; min-width: 250px; visibility: hidden; }
.topic-summary.comments .topic-review-c { display: inline-block; }
.topic-summary.comments .topic-total-review .label-review { font-size: 0.8em; }
.topic-summary.star .topic-star { flex-grow: 1; box-sizing: border-box; padding: 5px; min-width: 250px; }
.topic-summary.star .topic-star .box-star { display: inline-block; text-align: left; }
.topic-summary.star .topic-star .enter_rating { margin-bottom: 7px; }
.imCaptFrame { position: absolute; float: right; margin: 0; padding: 0; top: 5px;}
.topic-form-row { position: relative; padding-top: 5px; }
.topic-star-container-big, .topic-star-container-small { display: inline-block; position: relative; background-repeat: repeat-x; background-position: left top; }
.topic-star-container-big { width: 160px; height: 34px; }
.topic-star-container-small { width: 80px; height: 16px; }
.topic-star-fixer-big, .topic-star-fixer-small { display: block; position: absolute; top: 0; left: 0; background-repeat: repeat-x; background-position: left top; }
.topic-star-fixer-big { height: 34px; }
.topic-star-fixer-small { height: 16px; }
.variable-star-rating { cursor: pointer; }
.blog-topic { padding: 10px; }
.comments-and-ratings-topic-form { width: 80%; }
.topic-form-row { min-width: 240px; display: flex; flex-wrap: wrap; }
.topic-form-row .topic-form-item { flex-grow: 1; min-width: 240px; margin-right: 25px; padding-top: 0.3em; padding-bottom: 0.3em; box-sizing: border-box; width: 40%;}
.topic-form-row .topic-form-item.second-column.empty-column { padding: 0; }
.topic-form-row .topic-form-item.rating { display: flex; align-items: center; }
.topic-form-row .topic-form-item.rating label { margin-bottom: 0; width: auto; margin-right: 1em; }
.topic-form-row .topic-form-item label { display: block; width: 100%; margin-bottom: 0.5em; }
.topic-form-row .topic-form-item input { width: 100%; }
.topic-comment { box-sizing: border-box; margin: 0 0 10px 0; padding: 10px; border-radius: 10px 10px 10px 10px; border: 1px solid rgba(99, 99, 99, 0.5); }
.topic-comment-count { font-weight: bold; margin: 10px 0 7px; }
.topic-comment-user { margin-bottom: 5px; font-weight: bold; }
.topic-comment-user > span { word-wrap: break-word; overflow: hidden; }
.topic-comment-avatar .avatar-img { border-radius: 50%; }
.topic-comment-abuse { margin: 5px 0 0 0; border: none; text-align: right; visibility: hidden; }
.topic-comment:hover .topic-comment-abuse, .topic-comment .topic-comment-abuse.mobile { visibility: visible; }
.topic-comment-abuse:hover { text-decoration: underline; }
.topic-comment-abuse > a { font-size: 0.8em; text-decoration: none; color: rgba(64, 64, 64, 0.7); }
.topic-comment-date { margin-bottom: 5px; display: block; }
.topic-comment-info-body { display: flex; }
.topic-comment-info-body .topic-comment-body { word-wrap: break-word; overflow: hidden; }
.topic-comments { margin: 30px auto 0 auto; }
.topic-comments.one-columns .topic-comment-info-body .topic-comment-info { width: 18%; min-width: 90px; }
.topic-comments.one-columns .topic-comment-info-body .topic-comment-body { width: 82%; margin-left: 0.5em; }
.topic-comments.one-columns .topic-comment-info-body .topic-comment-avatar { width: 80px; text-align: center; margin-bottom: 10px; }
.topic-comments.multiple-columns:after { content: ''; display: block; clear: both; }
.topic-comments.multiple-columns { visibility: hidden; }
.topic-comments.multiple-columns.visible { visibility: visible; }
.topic-comments.multiple-columns { box-sizing: border-box; width: 100% !important; max-width: 100%; }
.topic-comments.multiple-columns .topic-comment { min-width: calc(min(230px, 100%)); box-sizing: border-box; padding: 0; }
.topic-comments.multiple-columns .topic-comment .topic-comment-info-body { padding: 10px; flex-direction: column; }
.topic-comments.multiple-columns .topic-comment .topic-comment-info-body .topic-comment-info { display: flex; flex-direction: row-reverse; justify-content: space-between; }
.topic-comments.multiple-columns .topic-comment .topic-comment-info-body .topic-comment-info .topic-comment-avatar { display: flex; align-items: center; margin: 0 20px 0 0; }
.topic-comments.multiple-columns .topic-comment .topic-comment-abuse { padding: 0 10px 10px 10px; }
.topic-comments.multiple-columns .topic-comment-body { margin: 15px 0 0 0; }