:root{
    /* --content:#3b7ddd; */
    --content:#1e56a9;
    --black:#181717;
    --white:#ffffff;
    --bg-color:#e7e7e7;
    
    /* --txt-color:#6c757d; */
    --txt-color:#495057;
    
    /* --link-color:#3b7ddd; */
    --link-color:#1e56a9;
    --link-hover-color:#2f64b1;
    
    --border-radius:5px;
    --big-border-radius:30px;
}

.review{
    margin-top:8px;
    padding:24px;
    word-break:break-word;
    word-wrap:break-word;
    overflow-wrap:break-word;
    border:1px solid #E4E4E4;
    border-radius:2px;
}
.review aside{
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid #dcdce6;
    padding-bottom:16px;
    color:black;
    font-weight:bold;
    
    float:none;
    width:auto;
}
.review aside .user_site{
    display:flex;
    flex-direction:column;
}
.review section{
    border-bottom:1px solid #dcdce6;
    padding-bottom:16px;
}
.review .published{
    color:green;
}
.review .not_published{
    color:red;
}
.review .header,
.review_form .header{
    margin-top:16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.review .content{
    margin-top:16px;
}
.review .content h2{
    font-size:18px;
    font-weight:bold;
    margin:0;
}
.review .content p{
    margin-top:8px;
    font-size:1rem;
    line-height:1.5rem;
}
.review .reply .content,
.review .reply .header,
.review_form .reply .content,
.review_form .reply .header
{
    margin-top:0;
}
.review .reply .icon,
.review_form .reply .icon{
    padding:3px 12px 0px;
}
.review .reply .label{
    padding-left:12px;
}

.review .rating{
    font-size:150%;
}
.review .rating > span:after{
    content:"\2606";
    color:#ccc;
}
.review .rating > .star:after{
    content:"\2605";
    /* color:#ffc700; */
    color:#B38C00;
}

.review .publishing,
.review .action{
    margin-top:16px;
}

.review .dateList{
    display:none;
    position:absolute;
    list-style-type:none;
    padding:12px;
    border:1px solid #e8e8eb;
    border-radius:2px;
    box-shadow:0 12px 20px 0 rgb(0 0 50 / 12%);
    background:white;
}
.review .dateList li{
    position:relative;
    display:block;
    padding-left:16px;
    height:20px;
}
.review .dateList li:before{
    position:absolute;
    left:0;
    top:4px;
    height:20px;
    width:1px;
    background-color:#c5c5d6;
    content:"";
}
.review .dateList li:last-child:before{
    height:8px;
}
.review .dateList li:after{
    position:absolute;
    left:-4px;
    top:4px;
    width:8px;
    height:8px;
    border:1px solid;
    border-radius:50%;
    background-color:#fff;
    content:"";
}
.review .dateList li:first-child:after{
    background-color:currentColor;
}

.pagination{
    margin-top:32px;
    margin-bottom:16px;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.reviews{
    font-size:20px;
    font-weight:bold;
    padding:12px 24px;
    border:1px solid #E4E4E4;
    border-radius:2px;
    margin-bottom:8px;
}

.reviews .ratings{
    display:flex;
    align-items:center
}

.reviews .note{
    margin-left:16px;
}

.reviews .stars{
    display:inline-block;
    position:relative;
    font-size:50pt;
    height:1em;
    line-height:1em;
}
.reviews .stars:before{
    content:"\2606\2606\2606\2606\2606";
}
.reviews .stars .percent{
    position:absolute;
    overflow:hidden;
    top:0;
    left:0;
}
.reviews .stars .percent:after{
    content:"\2605\2605\2605\2605\2605";
    /* color:#ffc700; */
    color:#B38C00;
}

#review_filter{
    padding:12px 24px;
    border:1px solid #E4E4E4;
    border-radius:2px;
    margin-bottom:8px;
}

#rating_filter{
    display:table;
}
#rating_filter label{
    display:table-row;
}
#rating_filter label > *{
    display:table-cell;
    vertical-align:middle;
    padding-right:5px;
    line-height: 1.75rem;
}
#rating_filter label > *:last-child{
    padding-right:0;
}

.bar_container{
    width:100%;
}
.bar{
    position:relative;
    height:1em;
    width:100%;
    background-color:#f2f2f2;
    border-radius:2px;
}
.bar .bar_value{
    position:absolute;
    top:0;
    left:0;
    background-color:#16749A;
    width:100%;
    height:100%;
    border-radius:2px;
}
.rating_value{
    text-align:right;
}

.review_form{
    display:flex;
    /* flex-direction:column; */
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    padding:0 20px;
    box-shadow:0px 2px 6px 0px rgb(0 0 0 / 10%);
    margin-bottom:16px;
    background-color:#fff;
}



.review_form > *{
    flex-basis:100%;
    padding:30px;
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    align-items:center;
}

.review_form textarea{
    resize:auto;
    width:100%;
    height:300px;
}

.review_form .rating{
    display:flex;
    width:100%;
    justify-content:center;
    overflow:hidden;
    flex-direction:row-reverse;
    height:150px;
    position:relative;
}
.review_form .rating-0{
    filter:grayscale(100%);
}
.review_form .rating > input{
    display:none;
}
.review_form .rating:not(:checked) > input{
    position:absolute;
    top:-9999px;
}
.review_form .rating:not(:checked) > label{
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
    
    margin-top:auto;
}
.review_form .rating:not(:checked) > label:before{
    content:'\2606 ';
}
.review_form .rating > input:checked ~ label{
    /* color:#ffc700; */
    color:#B38C00;
}
.review_form .rating > input:checked ~ label:before,
.review_form .rating > label:hover:before,
.review_form .rating > label:hover ~ label:before{
    content:'\2605 ';
}
.review_form .rating:not(:checked) > label:hover,
.review_form .rating:not(:checked) > label:hover ~ label{
    color:#deb217;
}
.review_form .rating > input:checked + label:hover,
.review_form .rating > input:checked + label:hover ~ label,
.review_form .rating > input:checked ~ label:hover,
.review_form .rating > input:checked ~ label:hover ~ label,
.review_form .rating > label:hover ~ input:checked ~ label{
    color:#c59b08;
}

.emoji-wrapper{
    width:100%;
    text-align:center;
    height:100px;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
}

.emoji-wrapper:before,
.emoji-wrapper:after{
    content:"";
    height:15px;
    width:100%;
    position:absolute;
    left:0;
    z-index:1;
}

.emoji-wrapper:before{
    top:0;
    background:linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,0) 100%);
}

.emoji-wrapper:after{
    bottom:0;
    background:linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,0) 100%);
}

.emoji{
    display:flex;
    flex-direction:column;
    align-items:center;
    transition:.3s;
}

.emoji > svg{
    margin:15px 0; 
    width:70px;
    height:70px;
    flex-shrink:0;
}

.review_form .rating input[value="1"]:checked ~ .emoji-wrapper > .emoji{transform:translateY(-100px);}
.review_form .rating input[value="2"]:checked ~ .emoji-wrapper > .emoji{transform:translateY(-200px);}
.review_form .rating input[value="3"]:checked ~ .emoji-wrapper > .emoji{transform:translateY(-300px);}
.review_form .rating input[value="4"]:checked ~ .emoji-wrapper > .emoji{transform:translateY(-400px);}
.review_form .rating input[value="5"]:checked ~ .emoji-wrapper > .emoji{transform:translateY(-500px);}

#review-text{
    display:block;
    border-radius:2px;
    overflow-x:hidden;
    overflow-y:auto;
    width:100%;
    height:200px;
    resize:none;
    border:1px solid #C5C5D6;
    color:#1B1B21;
    font-size:1rem;
    line-height:1.5rem;
    box-sizing:border-box;
    margin:0;
    letter-spacing:0.5px;
    padding:10px 16px;
}

#review-title{
    box-sizing:border-box;
    margin:0;
    font-weight:400;
    letter-spacing:0.5px;
    border-radius:2px;
    padding:11px 16px 10px 16px;
    color:#1B1B21;
    border:1px solid #C5C5D6;
    display:block;
    width:100%;
    height:48px;
    background:#FFFFFF;
    font-size:1rem;
    line-height:3rem;
}

#reviews_widget{
    display:flex;
    font-weight:normal;
    font-size:15px;
    padding:10px 20px;
    margin:0;
    border:0;
    border-radius:0;
    background:var(--bg-color);
    color:var(--txt-color);
    
    height:250px;
    overflow:hidden;
    box-sizing:border-box;
}
#reviews_widget_left{
    display:flex;
    flex-direction:column;
    align-self:center;
    align-items:center;
    width:200px;
    flex-shrink:0;
    border-radius:var(--big-border-radius);
    background:var(--white);
    padding:10px;
}
#reviews_widget_left .reviews_score{
    font-weight:bold;
    font-size:24px;
    color:var(--content)
}
#reviews_widget_left .stars{
    font-size:40px;
}
#reviews_widget_left .summary{
    text-align:center;
}
#reviews_widget_left .summary a{
    display:block;
}
#reviews_widget_right{
    overflow:hidden;
    position:relative;
    /* height:150px; */
    border-radius:var(--big-border-radius);
    background:var(--white);
    padding:20px 30px;
    margin-left:30px;
    
    display:flex;
    align-items:center;
}
#reviews_widget_wrapper{
    overflow:hidden;
}
#reviews_widget_content{
    display:flex;
    transition-timing-function:ease;
    transition-duration:1s;
}
#reviews_widget_content .review{
    display:inline-block;
    flex-shrink:0;
    box-sizing:border-box;
    width:310px;
    padding:0 35px 0 0;
    border:0;
    border-radius:0;
    cursor:pointer;
}
#reviews_widget_content .review:last-child{
    margin-right:0;
}
#reviews_widget_content .review .header{
    margin:0;
}
#reviews_widget_content .review .header > div{
    flex:0 1 auto;
    overflow:hidden;
}
#reviews_widget_content .review .header > img{
    flex:0 0 auto;
}
#reviews_widget_content .review .content{
    margin-top:3px;
}
#reviews_widget_content .review .text{
    margin-top:5px;
    /* max-height:54px; */
    max-height:2.4em;
    overflow:hidden;
}
#reviews_widget_content .review .title{
    font-weight:bold;
    color:var(--content);
}
#reviews_widget_content .review .user{
    display:block;
    margin-right:5px;
    color:var(--black);
    white-space:nowrap;
    overflow:hidden;
}
#reviews_widget_content .review .date{
    white-space:nowrap;
}

#reviews_widget_arrow_left,
#reviews_widget_arrow_right{
    display:flex;
    align-items:center;
    position:absolute;
    box-sizing: border-box;
    top:0;
    width:40px;
    padding:0 8px;
    height:100%;
}
#reviews_widget_arrow_left span,
#reviews_widget_arrow_right span{
    cursor:pointer;
    /* color:#8c8c8c; */
    color:#333;
    font-weight:bolder;
}
#reviews_widget_arrow_left.disable span,
#reviews_widget_arrow_right.disable span{
    cursor:default;
    /* color:#d1d1d1; */
    color:#595959;
    font-weight:lighter;
}
#reviews_widget_arrow_left{
    left:0;
}
#reviews_widget_arrow_right{
    right:0;
    justify-content:flex-end;
}

@media only screen and (max-width:576px){
    #reviews_widget{
        flex-direction:column;
        height:370px;
    }
    #reviews_widget_right{
        margin-left:0;
        margin-top:10px;
    }
    #reviews_widget_content .review{
        width:250px;
    }
}