@charset "UTF-8";

.feedback_year {margin: 0 0 10px;}

.feedback_year > .caption {position: relative;margin: 7px -10px 11px;padding: 0 10px;}
.feedback_year > .caption:before {display: block;content: "";position: absolute;left: 0;right: 0;height: 1px;top: 50%;background: #CAD9D2;}
.feedback_year > .caption span {display: inline-block;border: 1px solid #CAD9D2;background: #e5ede9;height: 32px;line-height: 30px;min-width: 51px;border-radius: 16px;padding: 0 9px;font-size: 14px;/* font-weight: 500; */color: #8DA398;position: relative;z-index: 1;}

.feedback_month {position: relative;height: 56px;border-radius: 14px;padding-left: 51px;margin-right: -10px;}
.feedback_month .caption {position: absolute;left: 0;top: 0;height: 51px;width: 51px;background: #fff;color: #8DA398;border-radius: 14px;text-align: center;display: flex;flex-flow: column;justify-content: center;}
.feedback_month .caption .title {display: block;font-size: 18px;line-height: 21px;}
.feedback_month .caption em {display: block;font-size: 12px;line-height: 12px;/* font-weight: 500; */margin-top: 2px;}


.feedbacks {}
.feedbacks .ul {padding: 0 3px 5px 7px;display: inline-flex;align-items: center;height: 56px;}
.feedbacks .li {display: inline-block;vertical-align: top;margin-right: 7px;}
.feedbacks .li:last-child {/*margin-right: 0;*/}

.feedbacks .item {display: block;position: relative;cursor: pointer;padding-left: 23px;}

.feedbacks .item .avatar {width: 18px;height: 18px;border: 1px solid #A8AEAB;position: absolute;bottom: 1px;left: 0;z-index: 1;}

.feedbacks .item .h,
.feedbacks .item .f {display: none;}

.feedbacks .item .content {background: #fff;border-radius: 14px;padding: 8px 12px 8px 33px;position: relative;font-size: 14px;line-height: 15px;border: 1px solid #e5ede9;max-width: 250px;}
.feedbacks .item .content:before {content: "";display: block;position: absolute;bottom: 3px;left: -14px;width: 20px;height: 13px;background: url(../../i/profile/corners.svg) 0px 1px no-repeat;}
.feedbacks .item .content:after {content: "";display: block;width: 18px;height: 18px;border-radius: 8px;position: absolute;left: 10px;top: 50%;margin-top: -9px;background-image: url(../../i/profile/feedback.svg);background-repeat: no-repeat;background-position: -61px -26px;}
.feedbacks .item[data-mark="high"] .content:after {background-position-x: -21px;}
.feedbacks .item[data-mark="low"] .content:after {background-position-x: -101px;}

.feedbacks .item .txt {overflow: hidden;max-width: 100%;text-overflow: ellipsis;white-space: nowrap;}


.feedbacks .item.viewed {opacity: .75;}
.feedbacks .item.selected {/* background: #fff; */opacity: 1;z-index: 10;}
.feedbacks .item:hover {opacity: 1;z-index: 2;}
.feedbacks .item:hover .content {box-shadow: -4px 4px 10px rgba(0, 0, 0, .1);}

.feedbacks .item.selected .content {box-shadow:none;}


.feedbacks .nav.prev {
	background: -moz-linear-gradient(90deg,rgba(229,237,233,1) 0,rgba(229,237,233,0) 100%);
	background: -webkit-linear-gradient(90deg,rgba(229,237,233,1) 0,rgba(229,237,233,0) 100%);
	background: linear-gradient(90deg,rgba(229,237,233,1) 0,rgba(229,237,233,0) 100%);
}
.feedbacks .nav.next {
	background: -moz-linear-gradient(90deg,rgba(229,237,233,0) 0,rgba(229,237,233,1) 100%);
	background: -webkit-linear-gradient(90deg,rgba(229,237,233,0) 0,rgba(229,237,233,1) 100%);
	background: linear-gradient(90deg,rgba(229,237,233,0) 0,rgba(229,237,233,1) 100%);
}
.feedbacks .scroll_slider.w_placeholder .nav.next {/* visibility: hidden; */opacity: 0;}

/* компенсация поля в 5px снизу в строке месяца для отображения для тени у отзыва */
.feedbacks .scroll_slider .nav b {margin-top: -20px;}









.feedbacks .li.more {line-height: 70px;position: relative;width: 36px;opacity: 0;z-index: 10;min-width: auto;}


.feedbacks .scroll_slider.nav_end .li.more {opacity: 1;}
/*
.feedbacks .li.more b {display: inline-block;vertical-align: middle;padding: 10px 10px 10px;font-size: 14px;text-align: center;line-height: initial;border-radius: 10px;background: #e9edeb;cursor: pointer;}
*/

.feedbacks b.load_more span {display: none;}
.feedbacks b.load_more {display: inline-block;vertical-align: middle;position: absolute;background-color: #fff;opacity: .9;width: 36px;height: 36px;line-height: 36px;top: 50%;margin-top: -18px;left: 0;border-radius: 50%;box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);cursor: pointer;transition: right .25s ease;}
.feedbacks b.load_more:before {content: "";display: block;position: absolute;width: 16px;height: 20px;top: 50%;margin-top: -10px;left: 50%;margin-left: -8px;background: url(../../i/profile/common.svg?v=2) -327px -23px no-repeat;}
.feedbacks b.load_more:hover {opacity: 1;}
.feedbacks b.load_more:hover:before {transform: translateX(1px);}

.feedbacks b.load_more.pending {pointer-events: none;box-shadow: none;opacity: .75;/* right: 2px; */}
.feedbacks b.load_more.pending:before {background: url(../../i/profile/loader.svg) 50% 50% no-repeat;}



#feedback_details {display: none;position: absolute;z-index: 90;padding-left: 23px;/* opacity: .5; */}
#feedback_details .w:after {content: "";display: block;position: absolute;bottom: 3px;left: -14px;width: 23px;height: 13px;background: url(../../i/profile/corners.svg) 0px 1px no-repeat;z-index: 2;}


#feedback_details .w {display: block;position: absolute;bottom: 0;width: 215px;max-width: 320px;background: #fff;padding: 16px 19px 16px;border-radius: 14px;font-size: 12px;line-height: 18px;box-shadow: 4px 9px 31px rgba(0, 0, 0, 0.15);border: 1px solid #CCDBD3;z-index: 1;/* overflow: hidden; */}
#feedback_details .close {display: block;width: 29px;height: 29px;position: absolute;top: 8px;right: 8px;border-radius: 8px;cursor: pointer;border: 1px solid #E5EDE9;background: url(../../i/profile/feedback.svg?v=2) -258px -22px no-repeat;z-index: 5;}
#feedback_details .close:hover {background-color: #F4F6F5;border-color: transparent;}


#feedback_details .h {margin-bottom: 6px;color: #65646E;position: relative;padding-left: 20px;}
#feedback_details .h:before {content: "";display: block;width: 18px;height: 18px;position: absolute;top: 50%;margin-top: -10px;left: -2px;border-radius: 8px;box-sizing: border-box;background: url(../../i/profile/feedback.svg?v=2) -61px -26px no-repeat;}
#feedback_details[data-mark="high"] .h:before {background-position-x: -21px;}
#feedback_details[data-mark="low"] .h:before {background-position-x: -101px;}


#feedback_details .date {display: inline-block;white-space: nowrap;}

#feedback_details .content {display: block;font-size: 14px;line-height: 20px;overflow: hidden;max-height: 120px;overflow-y: auto;margin-right: -15px;padding-right: 15px;/* max-width: 250px; */}
#feedback_details .f {margin-top: 6px;white-space: nowrap;display: flex;flex-flow: row;}


#feedback_details .username {display: inline-block;margin-right: 6px;vertical-align: top;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 6.6em;max-width: 12ch;flex-shrink: 1;}

#feedback_details .rating {display: inline-block;vertical-align: top;position: relative;padding-left: 14px;color: #6E6D7A;flex-shrink: 0;}
#feedback_details .rating:before {content: "";display: block;width: 10px;height: 14px;position: absolute;top: 50%;margin-top: -7px;left: 0;box-sizing: border-box;background: url(../../i/profile/feedback.svg?v=2) -186px -29px no-repeat;}

#feedback_details .rating span + span:before {content: " | ";color: #C9CFCF;margin-left: 1px;}
#feedback_details .rating .green {color: #2AA000;}
#feedback_details .rating .red {color: #FB382C;}



/*
#feedback_details .txt {overflow: hidden;max-height: 119px;overflow-y: auto;margin-right: -15px;padding-right: 15px;}
#feedback_details .txt {scrollbar-color: #aaa #585858; scrollbar-width: thin;}
#feedback_details .txt::-webkit-scrollbar {width: 11px;}
#feedback_details .txt::-webkit-scrollbar-track {background: #585858;}
#feedback_details .txt::-webkit-scrollbar-thumb {background: rgba(255, 255, 255, 0.25); border: 2px solid #585858; border-radius: 6px;}
#feedback_details .txt::-webkit-scrollbar-thumb:hover {background: rgba(255, 255, 255, 0.5);}
/**/

@media only screen and (min-width: 721px) {
	
}

@media only screen and (max-width: 720px) {
	.feedbacks .scroll_slider .nav {display: none;}
}

@media only screen and (max-width: 520px) {
	/*
	#feedback_details .w {max-width: 260px;max-width: calc(100vw - 80px);}
	/**/

	/* если "облачко" деталей отображается по центру экрана, не добавляем лишний отступ, чтобы его вместить у края экрана: "*/
	.feedbacks .ul {padding-right: 3px !important;}
	
	#feedback_details {position: fixed;top: 0 !important;bottom: 0 !important;left: 0 !important;right: 0 !important;padding: 0 !important;background: rgba(70, 70, 70, .75);z-index: 9000;pointer-events: none;}
	#feedback_details .w {max-width: calc(100vw - 20px);bottom: auto;top: 50%;left: 50%;transform: translate(-50%, -50%);pointer-events: all;}
	#feedback_details .w:after {content: none;}
}