.purchase_wrapper{
    .ratting_div{
        width:100%;
        background: #fff;
        margin-bottom: 30px;
        padding:30px;
        .auto_part_container{
            width:200px;
            height:200px;
            border:1px solid #eee;
            text-align: center;
            padding: 15px;
            float: left;
            img{
                width:100%;
                height:100%;
                object-position: center;
                object-fit:100%;
            }
        }
        h3{
            margin:0px;
            padding:0px;
            font-size: 16px;
            padding-top: 10px;
        }
        p{
            margin:0px;
            padding:0px;
            color: #92a1b1;
            padding-top: 4px;
        }

        .ratting_inner{
           p{
            color: #000000;
            margin: 0px;
            padding:0px;
            font-size: 20px;
            border-left:6px solid #fef160;
            padding-left: 20px;
            width: 100%;
            margin-bottom: 20px;
           } 
           hr{
               margin: 0px;
               margin-bottom: 20px;
               margin-top: 20px;
           }
           .submit_btn{
               background: #2655bf;
               color: #fff;
               border:none;
               height:50px;
               padding-left: 8%;
               padding-right: 8%;
               font-size: 18px;
           }
           .title_input{
               border:none;
               width: 100%;
               height:50px;
               font-size: 20px;
               padding-left: 20px;
               font-weight: 300;
               &:focus{
                   outline: none;
               }
               &::placeholder{
                   color: #cad2db;
                   font-weight: 300;
               }
           }
           .ratting_star{
            .rating { 
                border: none;
                float: left;
              }
              
              .rating > input { display: none; } 
              .rating > label:before { 
                margin: 6px;
                font-size: 30px;
                font-family: FontAwesome;
                display: inline-block;
                content: "\f005";
              }
              
              .rating > .half:before { 
                content: "\f089";
                position: absolute;
              }
              
              .rating > label { 
                color: #ddd; 
               float: right; 
               margin:0px;
              }
              
              /***** CSS Magic to Highlight Stars on Hover *****/
              
              .rating > input:checked ~ label, /* show gold star when clicked */
              .rating:not(:checked) > label:hover, /* hover current star */
              .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
              
              .rating > input:checked + label:hover, /* hover current star when changing rating */
              .rating > input:checked ~ label:hover,
              .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
              .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
           }
        }
    }
    .bottom_product_list{
        background: #fff;
        position: relative;
        padding-bottom:50px;

        h4{
            color: #262626;
            margin: 0px;
            padding:15px;
            font-size: 16px;
            padding-bottom: 0px;
            span{
                color: #92a1b1;
            }
        }
        .leftRs{
            position: absolute;
            left:10px;
            top: 35%;
            width:50px;
            height:50px;
            border-radius: 50px;
            background: url("/assets/images/asset_left.png");
            border:none;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            &:focus{
                outline: none;
            }

        }
        .rightRs{
            position: absolute;
            right:10px;
            top: 35%;
            width:50px;
            height:50px;
            border-radius: 50px;
            background: url("/assets/images/asset_right.png");
            border:none;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            &:focus{
                outline: none;
            }

        }
        li{
            list-style: none;
            padding:10px;
            width:100%;
            display: inline-block;  
            .inner_div_product{
                border:1px solid #eeeeee;
                min-height: 300px;
                padding: 15px;
                margin:0 auto;
                width:100%;
                .product_wrapper{
                    text-align: center;
                    padding: 10px;
                    img{
                        height: 180px;
                        width: auto;
                    }
                }
                h5{
                    padding:0px;
                    margin:0px;
                    color: #424242;
                    font-size: 16px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    padding-bottom: 5px;
                }
                p{
                    padding:0px;
                    margin:0px;
                    color: #a3afbd;
                    font-size: 14px;
                    
                }

                .star_ratting{
                    padding-top: 2px;
                    span{
                        float: right;
                        color: #000000;
                    }
                    .rating { 
                        border: none;
                        float: left;
                      }
                      
                      .rating > input { display: none; } 
                      .rating > label:before { 
                        margin: 2px;
                        font-size: 16px;
                        font-family: FontAwesome;
                        display: inline-block;
                        content: "\f005";
                      }
                      
                      .rating > .half:before { 
                        content: "\f089";
                        position: absolute;
                      }
                      
                      .rating > label { 
                        color: #ddd; 
                       float: right; 
                       margin:0px;
                      }
                      
                      /***** CSS Magic to Highlight Stars on Hover *****/
                      
                      .rating > input:checked ~ label, /* show gold star when clicked */
                      .rating:not(:checked) > label:hover, /* hover current star */
                      .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
                      
                      .rating > input:checked + label:hover, /* hover current star when changing rating */
                      .rating > input:checked ~ label:hover,
                      .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
                      .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
                }
            }
        }
    }
}