.mainAreaExporter {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 140px;
}

body {
    max-width: 100% !important;
}

.blockRevArea {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inMainAreaExporter {
    max-width: 1240px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 24px;
}

.areaCardCompany {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 41px;
    width: 100%;
}

.inAreaCardCompany {
    display: flex;
    max-width: 1240px;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.topAreaCompany {
    display: flex;
    gap: 24px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.blocklogoCompany {
    display: flex;
    gap: 16px;
    align-items: center;
}

.logoCompanyCard {
    width: 92px;
    height: 92px;
    border-radius: 200px;
    overflow: hidden;
}

.logoCompanyCard img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.blockTitleCompnay {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.titleCompany {
    color: #282828;
    font-family: Montserrat;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 48px;
}

.tagsCompnay {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.itemTagCompany {
    display: flex;
    padding: 4px 16px 6px 16px;
    align-items: center;
    color: #FFF7FC;
    font-family: Montserrat;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-radius: 31px;
    align-items: center;
    box-sizing: border-box;
    justify-content: center;
}

.colorGreen {
    background: linear-gradient(90deg, #0DA200 0%, #0B8600 100%);
}

.colorOrange {
    border-radius: 31px;
    background: linear-gradient(90deg, #EA6129 0%, #D3450A 100%);
}

.likeSislike {
    display: flex;
    flex-direction: column;
}

.btnLike {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #008300;
    padding: 10px 16px;
    box-sizing: border-box;
    color: #FFF7FC;
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    gap: 8px;
    cursor: pointer;
}

.btnDisLike {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #C30000;
    padding: 10px 16px;
    box-sizing: border-box;
    color: #FFF7FC;
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    gap: 8px;
    cursor: pointer;
}

.blockInfoCompanyCard {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.inBlockINfoCompanyCard {
    display: grid;
    grid-template-columns: 0.67fr 0.33fr;
    width: 100%;
    max-width: 1240px;
    align-items: start;
    gap: 24px;

}

.leftPartCardCompany {
    border-radius: 12px;
    background: #FFF;
    padding: 16px;
    box-sizing: border-box;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.12);
}

.blockCopmanyLeftTop {
    display: grid;
    grid-template-columns: 0.6fr 0.55fr;
    gap: 16px;
}

.blockImageCompany {
    width: 100%;
    border-radius: 8px;
    max-height: 230px;
    height: 100%;
    overflow: hidden;
}

.blockImageCompany img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.blockInfoCardCompany {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.titleCard {
    color: #282828;
    font-family: "Montserrat Alternates";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;

}

.blockItemsParamsCompany {
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 8px;
}

.itemCompanyParam {
    display: flex;
    gap: 4px;
}

.nameParamCompany {
    color: #282828;
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;

}

.valueParamCompany {
    color: #282828;
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.blockDescCompanyCard {
    display: flex;
    margin-top: 24px;
    flex-direction: column;
    width: 100%;
}

.inblockDescCompanyCard {
    width: 100%;
    max-width: 1240px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.descCard {
    color: #282828;
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.cardsReviews {
    display: flex;
    max-width: 1240px;
    margin-top: 24px;
    width: 100%;
    flex-direction: column;
}

.inCardsReviews {
    max-width: 1240px;
    width: 100%;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    display: flex;
}

.cardsReviewsCompany {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
}

.itemReviewCompany {
    display: flex;
    padding: 16px 20px;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex: 1 0 0;
    border-radius: 8px;
    border: 1px solid #DADADA;
    box-sizing: border-box;
}

.titleReviewsCompany {
    color: #282828;
    font-family: "Montserrat Alternates";
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.blockReviewsParams {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 12px 0 24px;
    margin: 0;
}

.blockReviewsParams li {
    color: #282828;
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;

}

.blockReviewsParams li::before {
    gap: 2px;
}

.infoUpdateCard {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #636363;
    font-family: Montserrat;
    font-size: 12px;
    width: 100%;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.rightPartCardCompany {
    display: flex;
    flex-direction: column;
}

.inRightPartCardCompany {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 12px;
    border-radius: 12px;
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    background: #FFF;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.12);
}

.titleRightPart {
    color: #282828;

    font-family: "Montserrat Alternates";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.blockItemsParamsCompany {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blockCompanyRating {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 12px;
}

.blockRatingCards {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}

.topCardsCompany {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.itemCardCompany {
    display: flex;
    width: 100%;
    height: 44px;
    padding: 10px 4px 10px 0;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    color: #282828;
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #DADADA;
    background: #FFF;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.10);
}

.logoRating {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logoRating img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.bottomCardsCompany {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.blockBtnsUrls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.btnWeb {
    display: flex;
    padding: 12px 4px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    box-sizing: border-box;
    border-radius: 8px;
    background: linear-gradient(90deg, #EA6129 0%, #D3450A 100%);
    color: #FFF7FC;
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.btnTelegram {
    display: flex;
    padding: 10px 4px 10px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    background: linear-gradient(91deg, #2EA5DE 6.14%, #0B78B2 88.49%);
    box-sizing: border-box;
    color: #FFF7FC;
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.btnWeb:hover {
    background: linear-gradient(90deg, #f06832 0%, #e45316 100%);

}

.btnTelegram:hover {
    background: linear-gradient(91deg, #3eacdf 6.14%, #1786c2 88.49%);
}





.commenctsCompanies {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 48px;
}

.inCommenctsCompanies {
    width: 100%;
    max-width: 1240px;
    display: flex;
    flex-direction: column;
}

.topBlockTitleComments {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
}

.blockTitleComments {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.titleComments {
    color: #282828;
    font-family: "Montserrat Alternates";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.amountComments {
    color: #636363;
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.sorterComments {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    border-radius: 42px;
    border: 1px solid #DADADA;
    padding: 8px 32px;
    gap: 4px;
    box-sizing: border-box;
}

.sorterComments:hover {
    background: #bdbdbd;
}

.currentSelector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    color: #282828;
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.currentSelector span {
    gap: 4px;
}

.selectSorterComments {
    display: none;
    position: absolute;
    width: 100%;
    top: 42px;
    left: 0;
    flex-direction: column;
    border-radius: 16px;
    background: #FFF;
    overflow: hidden;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.12);
}

.selectSorterComments.active {
    display: flex;
}

.currentSelector svg {
    transition: transform .15s ease;
}

.selectSorterComments.active~.currentSelector svg {
    transform: rotate(180deg);
}


.itemselectSortComments {
    color: #282828;
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    line-height: 20px;
    display: flex;
    box-sizing: border-box;
    padding: 8px 0;
    justify-content: center;
    cursor: pointer;
    align-items: center;
    gap: 8px;
    align-self: stretch;

}

.itemselectSortComments:hover {
    background: #F6F6F6;
}

.blockCardsCheckReviews {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 16px;
}

.cardReviewItem {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #282828;
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    padding: 12px 4px;
    box-sizing: border-box;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid #DADADA;
    background: #FFF;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.10);
}

.cardReviewItem:hover {
    background: #d8d8d8;
}

.imageRev {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 200px;
}

.imageRev img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.nameReview {
    color: #282828;
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;

}

.blockItemsReviews {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
}

.itemReview {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    box-sizing: border-box;
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.12);
}

.topAreaReview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.blockUserInfoRev {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logoRevType {
    width: 24px;
    height: 24px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logoRevType img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
}

.nameUserReview {
    color: #282828;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.dateReview {
    color: #636363;
    font-family: Montserrat;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.amountStars {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottomAreaTextComment {
    color: #282828;
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.paginationCommanents {
    margin-top: 20px;
    display: flex;
    width: 100%;
    align-items: center;
}

.inPagComments {
    display: flex;
    width: 100%;
    gap: 4px;
    align-items: center;

}

.firstPageArrow,
.prevPageArrow,
.nextPageArrow,
.itemPage {
    display: flex;

    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 41px;
    height: 38px;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid #E34F13;
    color: #282828;
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.firstPageArrow:hover,
.prevPageArrow:hover,
.itemPage:hover,
.nextPageArrow:hover {
    color: white;
    background: #E34F13;
}

.separatorPag {
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.blockPagePagComments {
    display: flex;
    gap: 4px;
    align-items: center;
}

.sendCommentAbouCompany {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
}

.inSendCommentAboutCompany {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    margin-top: 48px;
    box-sizing: border-box;
    padding: 16px 20px;
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.12);
}

.titleSendComment {
    color: #282828;
    font-family: "Montserrat Alternates";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 16px;
}

.formSendComment {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    gap: 16px;
    flex-direction: column;
}

.topInputs input {
    display: flex;
    padding: 12px 20px;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 12px;
    border: 1px solid #DADADA;
    background: #FFF;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.10);
    color: #282828;

    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.bottomAreaInput {
    margin-top: 16px;
}

.bottomAreaInput textarea {
    border-radius: 12px;
    border: 1px solid #DADADA;
    background: #FFF;
    padding: 12px 20px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.10);
    color: #282828;

    font-family: Montserrat;
    font-size: 15px;
    box-sizing: border-box;
    font-style: normal;
    display: flex;
    width: 100%;
    font-weight: 400;
    line-height: 20px;
}

.topInputs {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
}

.selectStarAndBtnSend {
    display: flex;
    gap: 22px;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.selectStars {
    display: flex;
    align-items: center;
    gap: 1px;
}

.btnSendComment {
    display: flex;
    align-items: center;
    justify-content: center;
    display: flex;
    max-width: 307px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    padding: 12px 4px;
    border: none;
    align-items: center;
    border-radius: 8px;
    background: linear-gradient(90deg, #EA6129 0%, #D3450A 100%);
    color: #FFF7FC;
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.btnSendComment:hover {
    background: linear-gradient(90deg, #eb6936 0%, #d45b26 100%);
}

button.btnSendCode {
    background: #5f8b5a;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    padding: 4px 12px;
    box-sizing: border-box;
    border: none;
    height: 32px;
}

button.btnSendCode:hover {
    background: #70a76a;
}

.inputConfirmCode {
    border: 1px solid #DADADA;
    background: #FFF;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.10);
    border-radius: 8px;
    padding: 4px 12px;
    height: 32px;
    font-family: Montserrat;
    font-size: 13px;
    box-sizing: border-box;
}

.selectStars {
    display: flex;
    gap: 6px;
    align-items: center;
}

.staritemSelect {
    cursor: pointer;
    user-select: none;
    line-height: 0;
}

.staritemSelect .svgFilled,
.staritemSelect .svgEmpty {
    display: block;
}

.staritemSelect .svgFilled {
    display: none;
}

/* по умолчанию пустая */
.staritemSelect .svgEmpty {
    display: block;
}

.staritemSelect.is-active .svgFilled {
    display: block;
}

/* активная = заполненная */
.staritemSelect.is-active .svgEmpty {
    display: none;
}

.staritemSelect:hover {
    transform: translateY(-1px);
    transition: transform .12s ease;
}

.reviewsWrap.is-loading {
    opacity: .6;
    pointer-events: none;
}

.reviewsAjaxTarget,
.reviewsWrap {
    width: 100%;
}

.company-votes__message {
    margin-top: 10px;
    font-size: 14px;
    opacity: .9;
}

.counterLike.is-bumped,
.counterDis.is-bumped {
    transform: scale(1.15);
    transition: transform .2s ease;
}

.company-votes__message {
    margin-top: 10px;

    line-height: 1.3;
    opacity: .9;
    font-family: Montserrat;
    font-size: 13px;
}

.counterLike.is-bumped,
.counterDis.is-bumped {
    transform: scale(1.15);
    transition: transform .2s ease;
}

.blockLikesFlex {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.company-votes__buttons {
    display: flex;
    gap: 12px;
}

.btnLike,
.btnDisLike {
    border: none;
}

.confirmCodeRow {
    display: flex;
    gap: 4px;
    width: 100%;
}

@media screen and (max-width: 1280px) {
    .mainAreaExporter {
        padding: 0 16px;
        box-sizing: border-box;
    }
}



@media screen and (max-width: 1120px) {
    .inBlockINfoCompanyCard {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        width: 100%;
        max-width: 1240px;
        align-items: start;
        gap: 24px;
    }

}


@media screen and (max-width: 860px) {
    .inBlockINfoCompanyCard {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        width: 100%;
        max-width: 1240px;
        align-items: start;
        gap: 24px;
    }

    .blockImageCompany {
        max-height: inherit;
    }

    .blockCopmanyLeftTop {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
    }

    .cardsReviewsCompany {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 8px;
        width: 100%;
    }

    .titleCard,
    .titleRightPart {
        font-size: 18px;
    }

    .nameParamCompany,
    .descCard,
    .blockReviewsParams li,
    .nameParamCompany,
    .valueParamCompany {
        font-size: 14px;
        line-height: normal;
    }

    .titleReviewsCompany {
        font-size: 16px;
    }

    .infoUpdateCard {
        font-size: 11px;
    }

    .titleCompany {
        font-size: 32px;
        line-height: normal;
    }
}

@media screen and (max-width: 670px) {
    .topBlockTitleComments {
        display: flex;
        justify-content: space-between;
        gap: 24px;
        align-items: flex-start;
        flex-direction: column;
    }

    .blockCardsCheckReviews {
        grid-template-columns: repeat(1, 1fr);
    }

    .selectStarAndBtnSend {
        display: flex;
        gap: 22px;
        align-items: flex-start;
        justify-content: flex-end;
        width: 100%;
        flex-direction: column;
    }

    .blockRevArea {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .btnSendComment {
        max-width: 100%;
    }

    .topInputs {
        flex-direction: column;
    }

    .confirmCodeRow {
        display: flex;
        gap: 4px;
        flex-direction: column-reverse;
    }

    .topAreaCompany {
        display: flex;
        gap: 24px;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 24px;
        flex-direction: column;
    }

    .logoCompanyCard {
        width: 74px;
        height: 74px;
        border-radius: 200px;
        overflow: hidden;
    }

    .titleCompany {
        font-size: 28px;
        line-height: normal;
    }
}

@media screen and (max-width: 450px) {
    .topAreaReview {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 4px;
        flex-direction: column;
    }

    .btnDisLike {
        font-size: 14px;
        gap: 4px;
    }

    .itemCompanyParam {
        display: flex;
        gap: 4px;
        flex-direction: column;
    }

    .cardsReviews {
        margin-top: 12px;
    }

    .itemReviewCompany {
        font-size: 8px;
    }

    .itemReviewCompany {
        padding: 8px 12px;
    }
}