@import url('https://fonts.googleapis.com/css?family=Roboto');
/* Form */
.collapsible {
    background-color: #fafafa;
    color: black;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    outline: none;
    font-size: 15px;
    border: 1px solid #e5e5e5;
}

.content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
}

/* Widget */
.gr-box-rating {
    position: sticky;
    width: 250px;
    height: 75px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
}

.gr-box-rating-info {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gr-box-rating-photo {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
    margin-top: 12.5px;
    margin-left: 5px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.gr-box-rating-name {
	font-family: Roboto;
    margin-top: 10px;
    margin-left: 8px;
    position: absolute;
    font-size: 18px; 
    color: #8b8b8b;
    overflow: hidden;
    max-height: 30px;
    max-width: 200px;
}

.gr-box-rating-rating {
    margin-top: 35px;
    margin-left: 8px;
    position: absolute;
    font-size: 18px;
    color: #8b8b8b;
    overflow: hidden;
    max-height: 30px;
}

.gr-box-rating-stars {
    margin-left: 6px;
    display: inline-block;
    width: calc(20px * 4);
    height: 20px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="-40 -40 80 80"><path fill="#ffd055" stroke="#ffd055" stroke-width="2"  d="M 0.000 20.000 L 23.511 32.361 L 19.021 6.180 L 38.042 -12.361 L 11.756 -16.180 L 0.000 -40.000 L -11.756 -16.180 L -38.042 -12.361 L -19.021 6.180 L -23.511 32.361 L 0.000 20.000 "/></svg>');
    position:relative;
}

.gr-box-rating-stars:before {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width: calc(20px * 5);
    z-index: -1;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="-40 -40 80 80"><path fill="#d8d8d8" stroke="#d8d8d8" stroke-width="2"  d="M 0.000 20.000 L 23.511 32.361 L 19.021 6.180 L 38.042 -12.361 L 11.756 -16.180 L 0.000 -40.000 L -11.756 -16.180 L -38.042 -12.361 L -19.021 6.180 L -23.511 32.361 L 0.000 20.000 "/></svg>');
}