/* @font-face {
    font-family  : Poppins;
    font-style   : normal;
    font-weight  : 400;
    font-display : swap;
    src          : url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family  : Poppins;
    font-style   : normal;
    font-weight  : 600;
    font-display : swap;
    src          : url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
} */

.section_reviews p {
    margin     : 0;
    user-select: none;
    background : #fff
}

.section_reviews {
    display          : flex;
    flex-direction   : column;
    flex-wrap        : wrap;
    box-sizing       : border-box;
    overflow         : hidden;
    /* background    : #fff; */
    margin           : 0 10% 50px 10%
}

.nolist {
    display: none !important;
    opacity: 0
}

.review_late_shown {
    animation: showReview .75s ease forwards;
    opacity  : 0
}

.review {
    box-sizing : border-box;
    display    : block;
    padding    : 5px;
    width      : 20%;
    font-family: Poppins, sans-serif;
    opacity    : 1;
}

@media screen and (max-width:1149px) {
    .review {
        width: 25%
    }
}

@media screen and (max-width: 922px) {
    .yr_topbar {
        padding-top  : 15px !important;
        margin-bottom: 15px !important;
        margin-top   : 35px !important;
    }
}



@media screen and (max-width:768px) {
    .review {
        width: 33.333%
    }
}

@media screen and (max-width:496px) {
    .review {
        width: 50%
    }
}

@media screen and (max-width:319px) {
    .review {
        width: 100%
    }
}

.review_content {
    font-family  : Poppins, sans-serif;
    box-shadow   : 0 0 3px rgb(0 0 0 / 20%);
    box-sizing   : border-box;
    border-radius: 5px;
    overflow     : hidden;
    background   : #fff
}

.review_content > img {
    display         : block;
    cursor          : zoom-in;
    width           : 100%;
    object-fit      : fill;
    margin          : 0;
    padding         : 0;
    background-color: #d3d3d3
}

.ratingStar{
    height: 14px;
    width: 15px;
    margin-right: 3px
}

.ratingStarBig{
    height: 20px;
    width: 21px;
    margin-right: 3px
}

.review_content:hover img {
    opacity: .9
}

.review_content:hover {
    background: #f6f6f6
}

.review_content .name {
    padding    : 10px 10px 2px 10px;
    font-weight: 600;
    cursor     : text;
    user-select: text;
    font-size  : 16px
}

.review_content .date {
    cursor     : text;
    user-select: text;
    padding    : 0 10px 4px 10px;
    font-weight: 400;
    font-size  : 11px;
    color      : #767676;
    background : 0 0
}

.review_name_i {
    margin-left : 8px;
    margin-right: 4px;
    font-size   : 14px;
    color       : #000;
    cursor      : default
}

.zoom_review_content .review_name_i {
    font-size: 16px
}

.review_star_i {
    font-size     : 12px;
    letter-spacing: -5px;
    font-weight   : 600;
    cursor        : pointer;
    margin-right  : 5px
}

.icons {
    padding: 0 10px
}

.review_text {
    padding    : 5px 10px 10px 10px;
    font-size  : 14px;
    font-weight: 400;
    cursor     : pointer;
    line-height: 19px;
    background : 0 0;
    user-select: text
}

.stop-scrolling {
    /* height    : 100vh; */
    overflow  : hidden;
    /* min-height: 100vh; */
    position: relative!important;
}

body.stop-scrolling::after{
    content         : '';
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background-color: white;
    z-index: 221;
    pointer-events: none;
}

.img_zoom {
    position  : fixed;
    visibility: hidden;
    width     : 100%;
    height    : 100%;
    background: #000;
    top       : 0;
    left      : 0;
    z-index   : 251;
    overflow  : hidden
}

.showing {
    animation: fadeIn .5s forwards
}

.hiding {
    animation: fadeIn .5s forwards reverse
}

@keyframes fadeIn {
    0% {
        visibility: hidden;
        opacity   : 0
    }

    1% {
        visibility: visible
    }

    100% {
        visibility: visible;
        opacity   : .7
    }
}

@keyframes showReview {
    0% {
        opacity: 0
    }

    25% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes zum {
    0% {
        visibility: hidden;
        opacity   : 0;
        transform : scale(0) translate(-50%, -50%)
    }

    1% {
        visibility: visible;
        transform : scale(0) translate(-50%, -50%)
    }

    100% {
        visibility: visible;
        opacity   : 1;
        transform : scale(1) translate(-50%, -50%)
    }
}

.zoom_review_container {
    display         : flex;
    overflow        : hidden;
    position        : fixed;
    opacity         : 1 !important;
    min-width       : 810px;
    height          : 94%;
    background      : #fff;
    left            : 50%;
    top             : 50%;
    border-radius   : 1.5vh;
    transform       : translate(-50%, calc(-50% - 8px));
    transform-origin: top left;
    font-family     : Poppins, sans-serif;
    visibility      : hidden;
    background-color: #fff;
    z-index         : 251
}

.zoomin {
    animation: zum .2s cubic-bezier(.165, .84, .44, 1) forwards
}

.zoomout {
    animation: zum .2s cubic-bezier(.165, .84, .44, 1) forwards reverse
}

.zoom_review_container img#zoomify_img {
    flex-basis: 54%;
    flex-grow : 1;
    max-width : 54%;
    max-height: 100%;
    object-fit: contain;
    width     : auto;
    height    : 100%;
    display   : block;
    box-sizing: border-box;
    opacity   : 0
}

@media screen and (max-width:768px) {
    .zoom_review_container {
        flex-direction: column;
        height        : 101%;
        min-width     : 100%;
        overflow      : scroll;
        font-family   : Poppins, sans-serif;
        border-radius : 0
    }

    .zoom_review_container img#zoomify_img {
        max-width: 100vw
    }
}

#review_content {
    display      : flex;
    flex-wrap    : wrap;
    background   : #fff;
    flex-basis   : 46%;
    flex-grow    : 1;
    color        : #000;
    align-content: flex-start;
    box-sizing   : border-box;
    padding      : 25px;
    overflow-x   : auto;
    word-break   : break-word;
    align-items  : center
}

#review_content span {
    flex-basis: 50%
}

#review_content span:first-of-type {
    user-select: text;
    font-size  : 2.75vh
}

#review_content span:nth-of-type(2n) {
    text-align: right
}

#review_content p {
    margin-top : 15px;
    user-select: text;
    font-size  : 2.75vh
}

.zoom_small {
    cursor     : text;
    user-select: text;
    font-weight: 400;
    font-size  : 1.9vh;
    color      : #767676
}

.zoom_stars i {
    font-size     : 2.2vh;
    letter-spacing: -2px;
    line-height   : 50%;
    cursor        : default
}

#closeZoomBtn {
    position     : absolute;
    background   : rgb(0, 0, 0, .4);
    width        : 35px;
    height       : 35px;
    top          : 15px;
    left         : 15px;
    border-radius: 8px;
    cursor       : pointer;
    transition   : background .15s ease;
    color        : #fff;
    overflow     : hidden;
    z-index      : 251;
    background-image: url(../assets/img/svg_verify.svg);
}

#closeZoomBtn:hover {
    background-color: rgb(0, 0, 0, .75)
}

#zoomify_text {
    overflow  : auto;
    word-wrap : break-word;
    max-height: 60vh;
    flex-grow : 1
}

#zoomify_text::-webkit-scrollbar {
    width : 8px;
    height: 10px
}

#zoomify_text::-webkit-scrollbar-thumb {
    -webkit-border-radius: 8px;
    -moz-border-radius   : 8px;
    border-radius        : 8px;
    background           : #ccc
}

.zoomify_no_img {
    min-width     : unset;
    max-width     : 70vh;
    flex-direction: column
}

@media screen and (max-width:768px) {
    #zoomify_text::-webkit-scrollbar {
        width: 5px
    }

    #zoomify_text {
        max-height: 75vh
    }

    #review_content span:first-of-type {
        font-size: 16px
    }

    #review_content p {
        font-size    : 16px;
        margin-bottom: 50px;
    }

    .zoomify_no_img {
        max-width: unset;
        min-width: 100%
    }

    #review_content {
        overflow      : visible;
        padding-bottom: 50px;
        background    : #fff;
        height        : unset;
        min-height    : auto
    }

    #zoomify_name {
        line-height: 100%
    }
}

.zoomify_no_img>.zoom_review_content {
    margin-top: 65px
}

.zoomify_no_img .zoomify_separator {
    display : block;
    position: absolute
}

.zoomify_no_img > img#zoomify_img {
    display: none!important;
}

.zoomify_separator {
    height    : 65px;
    width     : 100%;
    background: #fff;
    box-shadow: 0 2px 12px rgb(0 0 0 / 8%);
    z-index   : 10;
    display   : none
}

@keyframes zifd {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.zoomify_img_fade {
    animation: zifd .4s cubic-bezier(.77, .52, .26, .85) forwards
}

.yr_topbar {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-between;
    align-items    : center;
    padding-left   : 5px;
    width          : 100%;
    height         : 75px;
    margin-top     : 50px;
    margin-bottom  : 5px;
    padding        : 0 calc(10% + 5px);
    box-sizing     : border-box
}

.yr_topbar_qtd {
    font-family: Poppins, sans-serif;
    font-size  : 16px
}

.yr_topbar_qtd svg:last-of-type {
    margin-right: 5px
}

.yr_topbar_qtd_ico {
    font-size: 20px
}

.yr_topbar_qtd_ico:last-of-type {
    margin-right: 5px
}

#btnShowMore {
    width    : 100%;
    margin   : 5px calc(5% + 5px);
    flex-grow: unset !important;
}

.yr_topbar_addnew {
    font-family  : Poppins, sans-serif;
    height       : 40px;
    transition   : background .25s;
    border       : 1px solid #e9e9e9;
    background   : #fff;
    border-radius: 4px;
    padding      : 6px 12px;
    cursor       : pointer;
    font-size    : 16px;
    margin       : 10px 0;
    color        : black;
}

.yr_topbar_addnew:last-of-type {
    padding-top: 8px
}

.yr_topbar_addnew:hover {
    background: #e9e9e9
}

.yr_topbar_addnew:last-of-type {
    margin-left: 8px
}

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

@media screen and (max-width:768px) {
    #zoomify_date {
        font-size: 12px
    }

    .yr_tbright {
        flex-basis     : 100%;
        justify-content: space-between
    }

    .yr_topbar {
        padding: 0 calc(5% + 5px)
    }

    .yr_topbar_addnew:first-child {
        flex-grow: 1
    }

    .yr_topbar_addnew:last-of-type {
        padding-top: 8px
    }

    .section_reviews {
        margin: 0 5%
    }
}

@media screen and (min-width: 922px) {
    .stop-scrolling {
        margin-right: 18px;
    }
}