.right > .info{ background-color: var(--white-bg); border: 1px solid var(--main-blue-border); padding: 20px; border-radius: 3px; margin-bottom: 5px;}
.right > .info h2{ font-size: 20px; font-weight: 600; margin-bottom: 7px;}
.right > .info p{ font-size: 12px; line-height: 1.3;}
 
.evaluations{ display: flex; flex-direction: column; gap: 5px;}
.evaluations .evaluation{ border-radius: 3px; padding: 20px; background-color: var(--white-bg); border: 1px solid var(--main-blue-border); display: flex; align-items: center; justify-content: space-between;}
.evaluations .evaluation .left{ min-width: 385px; gap: 15px; display: flex;}
.evaluations .evaluation .left .img-area{ box-shadow: 0 0 3px 0 rgba(var(--black-o), .2); width: 120px; min-width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 10px;}
.evaluations .evaluation .left .img-area img{ width: 100%;}
.evaluations .evaluation .left .detail{ display: flex; flex-direction: column; gap: 5px;}
.evaluations .evaluation .left .detail p{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--black-txt); font-size: 13px; max-width: 250px;}
.evaluations .evaluation .left .detail .star{ display: flex; align-items: center; gap: 5px;}
.evaluations .evaluation .left .detail .star .stars-outer::before,
.evaluations .evaluation .left .detail .star .stars-inner::before{ font-size: 15px;}
.evaluations .evaluation .left .detail .star .count{ color: var(--black-txt); font-size: 13px; font-weight: 600;}
.evaluations .evaluation .left .detail .info{ }
.evaluations .evaluation .left .detail .info span{ font-size: 11px;}
.evaluations .evaluation .left .detail .info span b{ color: rgba(var(--black-o), .8);}
.evaluations .evaluation .left .detail > a{ font-size: 11px; font-weight: 600; transition: all .2s ease; width: fit-content; text-decoration: none; padding: 7px 20px; border-radius: 3px;}
/* .evaluations .evaluation:hover .left .detail > a{ opacity: 1;} */
/* .evaluations .evaluation .right{ display: flex; gap: 5px; flex-direction: column; align-items: center;}
.evaluations .evaluation .right > a{ margin-bottom: 5px; transition: all .2s ease; display: inline-block; text-align: center; border-radius: 3px; padding: 7px 20px; text-decoration: none; font-size: 13px; font-weight: 600;}
.evaluations .evaluation .right > span{ color: var(--black-txt); font-size: 11px; line-height: 1; font-weight: 500;}
.evaluations .evaluation .right > span b{ font-weight: 600;} */

.evaluations .evaluation .right{ transition: all .2s ease; max-height: 150px; overflow-y: auto; padding-right: 10px; width: 100%; max-width: 446px;}
.evaluations .evaluation .right::-webkit-scrollbar{ border-radius: 10px; background-color: #f0f0f0; width: 6px;}
.evaluations .evaluation .right::-webkit-scrollbar-thumb{ border-radius: 10px; background-color: var(--main-blue-txt);}
.evaluations .evaluation .right .comments{ display: flex; flex-direction: column; gap: 30px; max-width: 430px;}
/* .evaluations .evaluation:hover .right{ opacity: 1;} */
.evaluations .evaluation .right .comments .comment{ display: flex; gap: 5px;}
.evaluations .evaluation .right .comments .comment:first-child{ padding-top: 10px;}
.evaluations .evaluation .right .comments .comment .img-area{ }
.evaluations .evaluation .right .comments .comment .img-area .img{ width: 35px; height: 35px; background-color: var(--main-blue-bg); border-radius: 50%; display: flex; overflow: hidden; align-items: center; justify-content: center; font-size: 13px;}
.evaluations .evaluation .right .comments .comment .img-area .img img{ width: 100%;}
.evaluations .evaluation .right .comments .comment .detail-area{ width: calc(100% - 40px); display: flex; gap: 7px; flex-direction: column;}
.evaluations .evaluation .right .comments .comment .detail-area .detail{ display: flex; align-items: center;}
.evaluations .evaluation .right .comments .comment .detail-area .detail .star{ margin-right: 10px;}
.evaluations .evaluation .right .comments .comment .detail-area .detail .star .stars-inner::before,
.evaluations .evaluation .right .comments .comment .detail-area .detail .star .stars-outer::before{ font-size: 10px;}
.evaluations .evaluation .right .comments .comment .detail-area .detail .star span{ display: none;}
.evaluations .evaluation .right .comments .comment .detail-area .detail .date{ font-size: 10px; font-weight: 500; color: rgba(var(--black-o), .7);}
.evaluations .evaluation .right .comments .comment .detail-area .detail .date::after{ content: '|'; margin: 0 7px;}
.evaluations .evaluation .right .comments .comment .detail-area .detail .user-name{ font-size: 10px; font-weight: 500; color: rgba(var(--black-o), .7);}
.evaluations .evaluation .right .comments .comment .detail-area .txt{ border-radius: 7px; width: 100%; max-width: 400px; background-color: var(--main-blue-bg); padding: 15px 20px 10px;}
.evaluations .evaluation .right .comments .comment .detail-area .txt .body{ font-size: 11px; line-height: 1.5;}
.evaluations .evaluation .right .comments .comment .detail-area .txt .body p{ margin-bottom: 10px;}
.evaluations .evaluation .right .comments .comment .detail-area .txt .footer{ font-size: 11px; border-top: .1px solid rgba(var(--black-o), .4); padding-top: 5px; margin-top: 10px;}
.evaluations .evaluation .right .comments .comment .detail-area .other{ display: flex; align-items: center; justify-content: space-between;}
.evaluations .evaluation .right .comments .comment .detail-area .other .imgs-area{ width: calc(100% - 40px);}
.evaluations .evaluation .right .comments .comment .detail-area .other .imgs-area .img-slider{ overflow-y: auto;}
.evaluations .evaluation .right .comments .comment .detail-area .other .imgs-area .img-slider.active,
.evaluations .evaluation .right .comments .comment .detail-area .other .imgs-area .img-slider.active > div .img{ cursor: grab;}
.evaluations .evaluation .right .comments .comment .detail-area .other .imgs-area .img-slider::-webkit-scrollbar{ border-radius: 6px; height: 6px; background-color: rgba(var(--black-o), .05);}
.evaluations .evaluation .right .comments .comment .detail-area .other .imgs-area .img-slider::-webkit-scrollbar-thumb{ border-radius: 6px; background-color: rgba(var(--black-o), .15);}
.evaluations .evaluation .right .comments .comment .detail-area .other .imgs-area .img-slider > div{ padding-bottom: 5px; display: flex; gap: 3px; flex-wrap: nowrap;}
.evaluations .evaluation .right .comments .comment .detail-area .other .imgs-area .img-slider > div .img{ min-width: 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 3px;}
.evaluations .evaluation .right .comments .comment .detail-area .other .imgs-area .img-slider > div .img img{ width: 100%;}
.evaluations .evaluation .right .comments .comment .detail-area .other > span{ cursor: pointer; display: inline-block; text-align: end; font-size: 11px; font-weight: 500;}


@media screen and (max-width: 768px) {
    .evaluations .evaluation{ flex-direction: column; gap: 15px;}
    .evaluations .evaluation .left{ width: 100%; min-width: unset;}
    .evaluations .evaluation .right{ width: 100%; max-width: unset;}
    .evaluations .evaluation .right{ max-height: 300px;}
    .evaluations .evaluation .right .comments{ max-width: unset;}
    .evaluations .evaluation .right .comments .comment{ position: relative;}
    .evaluations .evaluation .right .comments .comment .img-area{ position: absolute;}
    .evaluations .evaluation .right .comments .comment .img-area .img{ width: 45px; height: 45px; font-size: 15px;}
    .evaluations .evaluation .right .comments .comment .detail-area{ width: 100%;}
    .evaluations .evaluation .right .comments .comment .detail-area .txt{ max-width: unset;}
    .evaluations .evaluation .right .comments .comment .detail-area .detail{ margin-bottom: 5px; padding-left: 50px; padding-top: 7px; display: grid; grid-template-columns: 61px 1fr; gap: 3px 0;}
    .evaluations .evaluation .right .comments .comment .detail-area .txt .body{ font-size: 12px;}
    .evaluations .evaluation .right .comments .comment .detail-area .detail .user-name{ font-size: 13px; grid-row-start: 1; white-space: nowrap;}
    .evaluations .evaluation .right .comments .comment .detail-area .detail .star{ grid-column-start: 1;}
    .evaluations .evaluation .right .comments .comment .detail-area .detail .date::after{ display: none;}
    header > div .logo-area .open-left-nav{ display: none !important;}
    header > div .logo-area .go-back{ display: inline-block !important;}
}