#preview {
    background-color: #fff;
    height: 969px;
    display: flex;
    flex-wrap: wrap;
}

.logo img {
    height: 80px;
}

.commentsBg {
    background-color: #fff;
}

.sectionViewComments {
    background-color: #789654;
    border-radius: 0px 50px 50px 0px;
}

.commentRightSection {
    padding: 0px 0px 20px 0px;
}

.previewRightHead {
    padding: 20px 0px;
    border-bottom: 2px solid rgba(201, 201, 201, 0.29);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.previewRightHead .previewRightHeadTitle {
}

.previewRightHead .previewRightHeadTitle .title {
    font-size: 38px;
    line-height: 39px;
    color: #000;
}

.previewRightHead .previewRightHeadTitle .subTitle {
    display: flex;
}

.previewRightHead .previewRightHeadTitle .subTitle .image {
    height: 18px;
    margin-right: 5px;
}

.previewRightHead .previewRightHeadTitle .subTitle .name {
    font-size: 20px;
    line-height: 23px;
    color: #000;
}

.previewRightHead .more {
    font-size: 14px;
    line-height: 15px;
    color: #27E3FE;
}

.previewRightTabsContent {
    /*background-color: rgba(153, 127, 99, 0.51);*/
    /*height: 400px;*/
    margin-bottom: 0px;
}

.sectionCommentHeader {
    display: flex;
    align-items: center;
}

.newCommentModule {
    /*background-color: #eee;*/
    margin-bottom: 16px;
    margin-top: 8px;
}

.newCommentModule .list {
    /*overflow: auto;*/
}

.newCommentModule .list .items {
}

.newCommentModule  .item {
    margin-bottom: 8px;
}

.newCommentModule .list .items .itemHotelCommnetAndRating {
    display: flex;
}

.newCommentModule .commentItemLeft {
    /*background-color: #987;*/
}

.newCommentModule .commentItemLeft .commentItemLeftImage {
}

.newCommentModule .commentItemLeft .commentItemLeftImage .personImage {
    border: 10px solid #fff;
    border-radius: 8px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
    margin-right: 16px;

}

.newCommentModule .commentItemLeft .commentItemLeftImage .personImage img {
    width: 45px;
    height: 45px;
    border-radius: 3px;

}

.newCommentModule .commentItemLeft .commentItemLeftProgress {
    height: 100%;
}

.newCommentModule .commentItemLeft .commentItemLeftProgressLine {
    background-color: #eee;
    height: 100%;
    width: 1px;
    margin: auto;
}

.newCommentModule .commentItemRight {
    flex-grow: 1;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 10px;
}

.newCommentModule .commentItemRight .commentItemRightHeader {
    display: flex;
    justify-content: space-between;
}

.newCommentModule .commentItemRight .commentItemRightHeader .commentItemRightHeaderTitle {
    padding: 10px;
}

.newCommentModule .commentItemRight .commentItemRightHeader .commentItemRightHeaderTitle .time {
    font-size: 12px;
    line-height: 14px;
    color: #A8A8A8;
}

.newCommentModule .commentItemRight .commentItemRightHeader .commentItemRightHeaderTitle .name {
    font-size: 15px;
    line-height: 15px;
    color: #0A0A0A;
}

.newCommentModule .commentItemRight .commentItemRightHeader .commentItemRightHeaderTitle .city {
    font-size: 15px;
    line-height: 15px;
    color: #818181;
}

.newCommentModule .commentItemRight .commentItemRightHeader .commentItemRightHeaderButon {
    padding: 10px;
}



.newCommentModule .commentItemRight .commentItemRightBody {
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    background-color: #fff;
    padding: 15px;
}

.newCommentModule .commentItemRight .commentItemRightBody .commentItemRightBodyHeader {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.newCommentModule .commentItemRight .commentItemRightBody .commentItemRightBodyHeader .title {
    color: #555;
}

.newCommentModule .commentItemRight .commentItemRightBody .commentItemRightBodyHeader .rating {
}

.newCommentModule .commentItemRight .commentItemRightBody .commentItemRightBodyBody {
    padding: 0px 0px 10px 0px;
}

.newCommentModule .commentItemRight .commentItemRightBody .commentItemRightBodyBody .text {
    font-size: 15px;
    line-height: 15px;
    letter-spacing: 1px;
    color: #555;
}

.newCommentModule .commentItemRight .commentItemRightBody .commentItemRightBodyBody .more {
    font-size: 15px;
    line-height: 15px;
    color: #7B5CFC;
}

.newCommentModule .commentItemRight .commentItemRightBody .commentItemRightBodyFoot {
    display: flex;
    align-items: center;
}

.newCommentModule .commentItemRight .commentItemRightBody .commentItemRightBodyFoot img {
    height: 15px;
    margin-right: 5px;
}

.newCommentModule .commentItemRight .commentItemRightBody .commentItemRightBodyFoot .number {
    font-size: 15px;
    line-height: 15px;
    color: #818181;
}

.newCommentModule .list .items .itemHotelCommnet {
    display: flex;
}

.newCommentModule .list .items .itemRoomRating {
}

.newCommentModule .commentPlace {
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    margin-top: 16px;
    overflow: hidden;
}

.newCommentModule .commentPlace .commentPlaceText {

    padding: 8px 8px 6px 8px;
    background-color: #fff;
}

.newCommentModule .commentPlace .commentPlaceText textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: none;
    border-radius: 12px;
    margin-bottom: 0px;
    height: 100px;
}

.newCommentModule .commentPlace .commentPlaceTextButton {
}

.newCommentModule .commentPlace .commentPlaceTextButton button:hover {
    background-color: #1fb8ce;
}

.newCommentModule .commentPlace .commentPlaceTextButton button {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    border-radius: 0px 0px 12px 12px;
    border: none;
    margin-top: 0;
    background-color: #27E3FE;
    font-size: 16px;
    line-height: 16px;
    color: #FFFFFF;
}

.newCommentModule .commentPlace .commentPlaceTextButton button img {
}

.newCommentModule .commentItemRightBodyLeft {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
}

.newCommentModule .commentItemRightBodyLeft .image {
    width: 80px;
}

.newCommentModule .commentItemRightBodyRight {
    padding: 0px 15px;
}

.newCommentModule .commentItemRightBodyRight .title {

    font-size: 15px;
    line-height: 17px;

    color: #585858;
}

.newCommentModule .commentItemRightBodyRight .subTitle {
    font-size: 11px;
    line-height: 10px;

    color: #959595;
}

.newCommentModule .commentItemRight .commentRoomView {
    display: flex;
}

.previewoBttomPanel {
    margin: 30px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.previewoBttomPanel .previewCopyright {
    font-size: 15px;
    line-height: 18px;
    color: #333;
}

.ratingModule {
    margin-bottom: 16px;
}

.ratingModule .coustAndRatingSectionHead {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 8px;
}




.setRatingModule{
    margin-bottom: 16px;
    margin-top: 8px;
    padding: 8px;
}


.setRatingModule .stars{
    display: flex;
    justify-content: center;
    margin: auto;
    width: 200px;
    /*background-color: rgba(152, 117, 104, 0.65);*/
}
.setRatingModule .stars .star{
    margin: 3px;
}

.setRatingModule .stars .star img{
    width: 30px;
    height: 30px;
}

.ratingModule .coustAndRatingSectionHead .leftSection {
}

.ratingModule .coustAndRatingSectionHead .leftSection .rating {
}

.ratingModule .coustAndRatingSectionHead .leftSection .coast {
}

.ratingModule .coustAndRatingSectionHead .rightSection {
}

.ratingModule .coustAndRatingSectionBody {
}

.ratingModule .coustAndRatingSectionBody .coustAndRatingView {
}

.ratingModule .coustAndRatingSectionBody .coustAndRatingView .list {
}

.ratingModule .coustAndRatingSectionBody .coustAndRatingView .list .ltems {
}

.ratingModule .coustAndRatingSectionBody .coustAndRatingView .list .ltems .item {
    display: flex;
    height: 15px;
}

.ratingModule .coustAndRatingSectionBody .coustAndRatingView .list .ltems .item .imageRating {
    width: 76px;
    text-align: right;
    margin-top: -8px;
}

.ratingModule .coustAndRatingSectionBody .coustAndRatingView .list .ltems .item .imageRating img {
    height: 12px;

}

.ratingModule .coustAndRatingSectionBody .coustAndRatingView .list .ltems .item .valueRating {
    flex-grow: 1;
    padding: 6px;
    margin-top: -3px;
}

.ratingModule .coustAndRatingSectionBody .coustAndRatingView .list .ltems .item .valueRating .valueRatingTrak {
    background-color: #eee;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.ratingModule .coustAndRatingSectionBody .coustAndRatingView .list .ltems .item .valueRating .valueRatingTrak .valueRatingTrakValue {
    background-color: #7B5CFC;
    height: 100%;
    box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 768px) {
}

@media screen and (max-width: 645px) {
    .sectionViewComments {
        padding: 10px 15px 30px 15px;
    }

    .newCommentModule .list {
        overflow: unset;
    }
}