.purchase_wrapper{
    .purchase_content_wrapper{
        .purchase_filter_section{
            float: left;
            width:290px;
            background: #fff;
            h5{
                padding: 20px;
                margin: 0px;
                color: #9ba8b7;
                font-size: 15px;
            }
            h6{
                color: #262626;
                padding: 15px;
                margin-top: 10px;
                margin-bottom: 10px;
                border-left:8px solid #fef160;
                padding-top: 0px;
                padding-bottom: 0px;
                font-size: 18px;
                background: url("/assets/images/asset_down_arrow.png");
                background-repeat: no-repeat;
                background-position: right 15px top 2px;
                cursor: pointer;
                select{
                    width: 100%;
                    border:1px solid #929db6;
                    background: url("/assets/images/asset_down_arrow.png");
                    background-repeat: no-repeat;
                    background-position: right 10px top 10px;
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    height:40px;
                    padding:10px;
                    margin-bottom: 10px;
                    &:focus{
                        outline: none;
                    }
                }
            }
            ul{
                margin: 0px;
                padding:0px;
                padding-top: 10px;
                padding-bottom: 10px;
                li{
                    list-style: none;
                    padding-left: 25px;
                    padding-right: 25px;
                    margin-bottom: 10px;
                    .custom_checkbox_filter{
                        .custom_checkbox {
                            position: absolute; // take it out of document flow
                            opacity: 0; // hide it
                          
                            & + label {
                              position: relative;
                              cursor: pointer;
                              padding: 0;
                            }
                          
                            // Box.
                            & + label:before {
                              content: '';
                              margin-right: 15px;
                              display: inline-block;
                              vertical-align: text-top;
                              width: 22px;
                              height: 22px;
                              background: white;
                              border:1px solid #898989;
                              box-shadow: none;
                              border-radius: 6px;
                            }
                          
                            // Box hover
                            &:hover + label:before {
                              background: #2655bf;
                            }
                            
                            // Box focus
                            &:focus + label:before {
                                border:1px solid #898989;
                                box-shadow: none;
                                border-radius: 6px;
                            }
                          
                            // Box checked
                            &:checked + label:before {
                              background: #2655bf;
                              border:1px solid #898989;
                              box-shadow: none;
                            }
                            
                            // Disabled state label.
                            &:disabled + label {
                              color: #b8b8b8;
                              cursor: auto;
                            }
                          
                            // Disabled box.
                            &:disabled + label:before {
                              box-shadow: none;
                              background: #ddd;
                            }
                          
                            // Checkmark. Could be replaced with an image
                            &:checked + label:after {
                              content: '';
                              position: absolute;
                              left: 5px;
                              top: 11px;
                              background: white;
                              width: 2px;
                              height: 2px;
                              box-shadow: 
                                2px 0 0 white,
                                4px 0 0 white,
                                4px -2px 0 white,
                                4px -4px 0 white,
                                4px -6px 0 white,
                                4px -8px 0 white;
                              transform: rotate(45deg);
                            }
                          }
                    }
                   
                }
                .more{
                    text-align: right;
                    color: #2655bf;
                    padding: 15px;
                    cursor: pointer;
                }

                .color_select{
                    padding:15px;
                    #custom_check_button {
                        width: 30px;
                        height: 30px;
                        border-radius: 0px !important;
                        overflow: auto;
                        position: relative;
                        outline: none;
                        color: #908d8d;
                        -webkit-border-radius: 5px !important;
                        -moz-border-radius: 5px !important;
                        -ms-border-radius: 5px !important;
                        -o-border-radius: 5px !important;
                        display: inline-block;
                        margin: 4px;
                    
                    }
                    #custom_check_button p {
                        margin: 0px;
                        position: absolute;
                        color: #908d8d;
                        left: 0px;
                        right: 0px;
                        top: 0px;
                        bottom: 0px;
                        padding:0px;
                        cursor: pointer;
                        img{
                            width:100%;
                            height:100%;
                            object-fit: cover;
                            object-position: center;
                            -webkit-border-radius: 5px !important;
                        -moz-border-radius: 5px !important;
                        -ms-border-radius: 5px !important;
                        -o-border-radius: 5px !important;
                        }
                    }
                    #custom_check_button label {
                        width: 100%;
                    }
                    #custom_check_button label span {
                        text-align: center;
                        display: block;
                    }
                    #custom_check_button label input {
                        position: absolute;
                        top: -20px;
                    }
                    #custom_check_button input:checked+p {
                        border:2px solid #262626;
                        color: #fff;
                        border-radius: 0px !important;
                        margin: 0px;
                        -webkit-border-radius: 5px !important;
                        -moz-border-radius: 5px !important;
                        -ms-border-radius: 5px !important;
                        -o-border-radius: 5px !important;
                    }
                }
            }
        }
        .purchase_content_section{
            float:right;
            width:calc(100% - 310px);
            margin-left: 10px;
            background: #fff;
            height: 100vh;
            padding:20px;
            .search_list_header{
                p{
                    margin:0px;
                    padding:0px;
                    font-size: 17px;
                    height: 40px

                }

                select{
                    background: url("/assets/images/asset_sort.png"),url("/assets/images/asset_down_arrow.png");
                    background-repeat: no-repeat;
                    background-position:left 10px top 10px,right 10px top 10px;
                    height:40px;
                    border:none;
                    font-size: 17px;
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    padding-right: 40px;
                    padding-left: 40px;
                    &:focus{
                        outline: none;
                    }
                }
            }
            .search_listing_content{
                width:100%;
                ul{
                    margin:0px;
                    padding:0px;
                    li{
                        list-style: none;
                        padding:10px;
                        width: calc(100% - 80%);
                        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;  } 
                            }
                        }
                    }
                }
            }
            .pagination{
                width:100%;
                ul{
                    margin:0px;
                    padding:0px;
                    width: 100%;
                    text-align: center;
                    li{
                        display: inline-block;
                        padding:7px;
                        cursor: pointer;
                        width: 40px;
                        height: 40px;
                        background-position: center !important;
                        background-repeat: no-repeat !important;
                        background-size: cover !important;
                        border-radius: 50%;
                        margin: 4px;
                    }
                    .select{
                        background-color: #fef160;
                    }
                    .prev{
                        background: url("/assets/images/asset_left.png");
                        content: none;
                    }
                    .next{
                        background: url("/assets/images/asset_right.png");
                        content: none;
                    }
                }
            }
        }
    }
}