.comm { margin: 20px 0 20px 0; background: #fff; padding: 25px 50px; border-radius: 3px; }

.comm__item { padding: 40px 271px 25px 65px; border-top: 1px solid #e5e5e5; position: relative; }
.comm__item:first-child { border-top: 0; }
.comm__item--reply { margin: -30px 0 0 40px; border-top: 0; }

.comm__rating { position: absolute; top: 37px; right: 0; padding: 0 60px 0 0; }
.comm__rating-pos { font: 400 14px/17px geometria; text-align: right; color: #999; }
.comm__rating-value { font: 500 14px/17px geometria; display: inline-block; vertical-align: middle; }
.comm__rating-mark { position: absolute; top: 0; right: 0; font: 600 27px/25px geometria; color: #fff; width: 50px; height: 50px; text-align: center; padding: 13px 0 0 0; border-radius: 5px; }
.comm__rating-mark--5 { background-color: #33cc00}
.comm__rating-mark--4 { background-color: #b0e020; }
.comm__rating-mark--3 { background-color: #ffcc00; }
.comm__rating-mark--2 { background-color: #ff6c00; }
.comm__rating-mark--1 { background-color: #f00; }

.comm__header { position: relative; margin: 0 0 10px 0; padding: 0 175px 0 0; }
.comm__avatar { position: absolute; width: 51px; height: 51px; background: no-repeat 50% / cover; margin: -8px 0 0 -67px; border-radius: 8px; }

.comm__avatar--empty { background: #f3f3f3 url(i2/avatar.svg) no-repeat 50% 50% / 30px auto; }


.comm__name { font: 700 17px/17px geometria; display: inline-block; vertical-align: baseline; color: #0077FF; border-bottom: 1px solid; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.comm__trust { background-color: #d3f5ee; padding: 0 7px; font: 600 10px/24px geometria; height: 22px; color: #00735F; border-radius: 3px; text-transform: uppercase; letter-spacing: .05em; margin: -1px 0 0 28px; position: absolute; }
.comm__trust:after { content: attr(data-full); }
.comm__date { font: 400 12px/12px geometria; color: #9F9F9F; margin: 5px 0 0 0; }
.comm__text { font: 400 17px/23px geometria; margin: 0 0 15px 0; }

.comm__text p,
.comm__text ul,
.comm__text ol { margin: 0 0 10px 0 }

.comm__images { font: 0/0 a; margin: 0 0 20px 0; }
.comm__image { display: inline-block; vertical-align: baseline; width: 45px; height: 45px; border-radius: 8px; background: #f3f3f3 no-repeat 50% / cover; cursor: pointer; position: relative; overflow: hidden; transition: background-color 200ms; }
.comm__image + .comm__image { margin: 0 0 0 15px; }

.comm__dish-reviews { padding: 0 0 0 15px; position: relative; }
.comm__dish-reviews:before { content: ''; position: absolute; background-color: #ddd; width: 1px; left: 0; top: 2px; bottom: 4px; }
.comm__dish-reviews:after { content: attr(data-text); position: absolute; top: 5px; left: -85px; width: 65px; text-align: right; font: 400 13px/15px geometria; color: #333; }
.comm__dish-review { margin: 0 0 7px 0; position: relative; }
.comm__dish-mark { width: 71px; height: 16px; position: absolute; background: no-repeat; margin: 1px 0 0 8px; }
.comm__dish-mark--positive { background-image: url(i2/positive.svg); }
.comm__dish-mark--negative { background-image: url(i2/negative.svg); }
.comm__dish-mark--5 { background-position: 0 50%; }
.comm__dish-mark--4 { background-position: -14px 50%; }
.comm__dish-mark--3 { background-position: -28px 50%; }
.comm__dish-mark--2 { background-position: 0 50%; }
.comm__dish-mark--1 { background-position: -14px 50%; }
.comm__dish-name { font: 700 15px/19px geometria; display: inline-block; vertical-align: baseline; margin: 0 0 3px 0 }
.comm__dish-text { font: 400 15px/19px geometria; color: #333; }
.comm__dish-text--no-comment { opacity: .3; }

.comm__reply { color: rgb(1, 144, 11); font: 14px/14px geometria; margin: 0 0 10px 0; border-bottom: 1px solid rgba(0, 153, 51, .2); display: inline-block; vertical-align: baseline; cursor: pointer; }
.comm__dish-reviews + .comm__reply { margin-top: 15px; }
.comm__reply:hover { border-bottom-color: rgb(1, 144, 11); }


.comm__form { position: relative; margin: 0 0 20px 0 }

.comm__form-textarea { display: block; width: 100%; border: 1px solid #ddd; border-radius: 3px; font: 400 17px/18px geometria, arial; padding: 11px; cursor: default; resize: none; }
.comm__form-textarea:hover { box-shadow: 0 0 0 1px #79befc; border-color: #79befc; }


/* HOVER */
.comm__name:hover { color: #f00; }
.comm__image:hover:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.15) url(i2/eye.svg) no-repeat 50% / 18px;  }


.comm__more-wrap { text-align: center; }
.comm__more { cursor: pointer; transition: background-color 200ms; width: 225px; height: 45px; border-radius: 3px; background: #0baf59; border: 0; font: 600 20px/45px geometria, arial; color: #fff; }
.comm__more:before { content: attr(data-text); }
.comm__more:hover { background-color: #0BA351; }
.comm__more--hide {  display: none; }