@mobile:  ~"(max-width: 767px)";
@tablet:  ~"(min-width: 768px) and (max-width: 979px)";
@normal:  ~"(min-width: 980px) and (max-width: 1199px)";
@wide:    ~"(min-width: 1200px)";

.review-container {
    background-color: #f6f6f6;
    padding: 50px 0px 50px;

    h2 {
        text-align: center;
        font-weight: bold;
        margin: auto;

        @media @mobile {
            margin: auto 25px;
        }
    }

    .review-content {
        margin: 0px 12% 0px 12%;

        @media @mobile {
            margin: auto;
        }

        .review-summary-container {
            margin-bottom: 50px;

            @media @mobile {
                margin-bottom: 30px;
            }

            .overall-rating-col{
                text-align: center;
                margin: 30px auto;

                @media @mobile {
                    margin-bottom: 30px;
                }

                .overall-rating-title {
                    font-size: 60px;

                    @media @mobile {
                        font-size: 72px;
                    }
                }

                .star-rating-container-large {
                    margin: 0px auto 10px;
                }
            }

            .rating-distribution-col {
                background-color: #146e7d;
                color: #fff;
                padding: 20px 25px;
                min-height: 180px;
                position: relative;
                max-width: 440px;
                margin: auto;

                h5 {
                    text-align: center;
                }

                .glyphicon-star {
                    margin-left: 5px;
                }

                .distribution-outer {
                    height: 6px;
                    position: relative;
                    margin-top: 6px;
                    margin-left: 50px;
                    margin-right: 35px;
                    margin-bottom: 6px;

                    .distribution-inner {
                        height: 100%;
                        background: white;
                    }
                }
            }
        }

        .clinic-review-list {
            @media @mobile {
                padding: 0px 20px;
            }

            .review-item {
                border: 1px solid #939292;
                position: relative;
                padding: 20px;
                background-color: #fff;
                border-radius: 10px;
                margin-bottom: 20px;

                @media @mobile {
                    padding: 20px 30px;
                }
                
                &:last-child {
                    border-bottom: none;
                    margin-bottom: 20px;
                }

                .first-char {
                    position: absolute;
                    left: -25px;
                    top: 8px;
                    width: 50px;
                    height: 50px;
                    text-align: center;
                    background-color: #1c458e;
                    color: #fff;
                    padding: 8px 0px;
                    border-radius: 100%;
                    font-size: 24px;
                    font-weight: bold;

                    @media @mobile {
                        display: none;
                    }
                }

                .review-right-item {
                    display: inline-block;
                    padding: 0px 20px;

                    @media @mobile {
                        padding: 0px;
                        width: 95%;
                    }

                    .reviewer-posted-date {
                        font-size: 12px;
                        padding: 2px 10px;
                        color: #666666;
                    }

                    .reviewer-name {
                        font-size: 18px;
                        line-height: 23px;
                        clear: both;

                        a.review-item-link {
                            color: #333;

                            &::after {
                                font-family: 'Glyphicons Halflings';
                                font-style: normal;
                                font-weight: 400;
                                line-height: 1;
                                -webkit-font-smoothing: antialiased;
                                -moz-osx-font-smoothing: grayscale;
                                content: "\e144";
                                font-size: 10px;
                                background: #d1d1d1;
                                border-radius: 50%;
                                padding: 5px;
                                color: #fff;
                                display: inline-block;
                            }

                            &:hover {
                                text-decoration: none;

                                &::after {
                                    background: #bbb;
                                }
                            }

                            &.review-item-link-modal {
                                color: #fff;

                                &::after {
                                    background: #666;
                                }

                                &:hover {
                                    &::after {
                                        background: #999;
                                    }
                                }
                            }
                        }

                        .author {
                            margin: 3px 0px 15px;
                            display: inline-block;
                            font-size: 14px;
                            font-weight: bold;
                        }

                        .rating {
                            background-color: #fe5a5e;
                            color: #fff;
                            font-size: 12px;
                            padding: 1px 10px;
                            border-radius: 10px;
                            margin-left: 30px;

                            @media @mobile {
                                float: right;
                            }
                        }

                        .label-reviews {
                            background-color: white;
                            margin: 0;
                            border: 1px solid #D4D0CF;
                            font-weight: bold;
                            font-size: 9px;
                            float: right;
                            position: relative;
                            display: inline-block;
                            line-height: 1;
                            padding: 4px 4px 2px 8px;
                            text-transform: uppercase;
                            text-align: center;
                            text-decoration: none;
                            white-space: nowrap;

                            &::before {
                                width: 15px;
                                border-right: 1px solid #D4D0CF;
                                content: ' ';
                                -moz-transform: skewX(20deg);
                                -ms-transform: skewX(20deg);
                                -webkit-transform: skewX(20deg);
                                transform: skewX(20deg);
                                top: 0px;
                                height: 50%;
                                left: -13px;
                                background-color: white;
                                position: absolute;
                            }

                            &::after {
                                left: -13px;
                                right: -3px;
                                height: 50%;
                                width: 15px;
                                border-right: 1px solid #D4D0CF;
                                -moz-transform: skewX(-20deg);
                                -ms-transform: skewX(-20deg);
                                -webkit-transform: skewX(-20deg);
                                transform: skewX(-20deg);
                                top: inherit;
                                bottom: 0px;
                                background-color: white;
                                content: '';
                                position: absolute;
                            }
                        }
                    }

                    .review-service-and-price {
                        font-size: 12px;
                        margin-bottom: -5px;
                    }

                    .review-text {
                        margin: 10px 0px 20px;
                    }

                    .expandable-trigger-more {
                        margin-left: 17px;
                    }
                }
            }

            .btn-more-reviews {
                display: block;
                margin: auto;
                background-color: #182450;
                color: #fff;
                padding: 15px 50px;
                margin-top: 40px;
                border-radius: 14px;

                @media @mobile {
                    padding: 10px 30px;
                }
            }
        }
    }
}