.product p {
    font-size: 0.9em;
}
.product {
    background-color:rgb(250, 250, 250);
    padding-top:2em;
    padding-bottom: 4em;
    min-height:80vh;
}

/*.product input {
    display:none;
}*/
.product .img {
    width:100px;
}
.product .product-item {
    background-color: white;
    overflow:hidden;
    border:1px solid transparent;
}

/*make the productlist as a same size*/

.productlist-item {
    display:block;
}
.product-image .images_list {
    height:300px;
}
.product-thumb {
    height:100px;
}


.productlist-image {
    height:0;
    position:relative;
    padding-bottom:100%;
    overflow:hidden;
}

.productlist-image img {
    height:90%;
    max-width:initial;
    position:absolute;
    top:0;
    left:50%;
    transform: translateX(-50%);
}

/*---------*/


.product .product-item h3, .product .product-item p {
    text-align: left;
    margin:0;
    padding:0.3em 0.5em;
}
.product .product-item h3 {
    color:#e8a52f;
}
.filter {
    padding:5px;
}
.filter hr {
    width:75%;
}

.product-item {
    transition: 0.4s ease;
}
.product-item:hover {
    box-shadow: 0 2px 4px 0 rgba(192,192,192,0.2), 0 3px 10px 0 rgba(192,192,192,0.2);
    transform: scale(1.01);
  
}
.img-bottom {
    overflow:hidden;
  
}
.product-item:hover h3{
    color:black;
  
}

.filter {
    display:flex;
    
}



/*this is checkbow way to show the filter function*/
/* .filter {
    margin-left:1em;
} */
/*#sofa:checked + label {
    color:white;
   
    background-color: #e8a52f;
}
#sofa:checked ~ .chair {
    display:none;
}
#chair:checked + label {
    color:white;
  
    background-color: #e8a52f;
    padding:5px;
}
#chair:checked ~ .sofa {
    display:none;
}

#reset:checked + label {
    color:white;
   
    background-color: #e8a52f;
    padding:5px;
}
#reset:checked ~.sofa, chair {
    display:block;;
}*/



.product .product-item .color {
    text-align: left;
    margin:0.3em 0.5em;
    margin-bottom:0;
    height:16px;
    width:16px;
    border:8px solid;
    border-radius: 10px;
    margin-bottom:10px;
}

/*This is form*/


.back {
    position:absolute;
    top:5%;
    right:7%;
}

.container.form {
    height:100vh;

}
.formContainer {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: 95%;
    max-width:400px;
    background-color:#fbfbfb;
    border-radius: 5px;
}

/*.signup table  {
    border-collapse:separate; 
    border-spacing:10px 10px;
    width:350px;
    padding:0px;
    margin:20px;

}*/

select.icon.
.signup tr {
    margin:10px;
}
.signup td {
    border:1px solid gray;
    border-radius: 5px;
    margin:10px;
    background-color:white;

}

.form input, .form button {
    border:none;
    width:100%;
    border-radius: 5px;
    font-size:14px;
    height:42px;
}
.form button {
    cursor: pointer;
}

.formHeader {
    background-color:#30353d;
    border-radius:3px 3px 0 0;
    height:80px;
    width: 100%;
    max-width:400px;
    border:1px solid #30353d; 
}
.formHeader h1 {
    color:white;
}
.formHeader h1, .formTitle h2{
    padding:5px 15px;
    text-align: center;
    margin-bottom:2px;
}
.formTitle h3 {
    text-align: center;
    margin:0;
}


.signup .subBtn {
    background-color:#30353d;;
}
.signup .subBtn:hover {
    background-color:#51565c;
}
.signup .submitForm {
    background-color:#30353d;;
    color:white;
    font-size: 1.1em;
    height:50px;
}
.signup .submitForm:hover {
    background-color:#51565c;
}
.formFooter {
    margin:15px;
    text-align: center;
}
.formFooter a p{
    font-weight:light;
}
input::-webkit-input-placeholder {
color: lightgray; 
}


/*This is product_list_ajax*/


.row.flex {
        align-items: flex-start;
    }
    .filter-bar.bar {
        padding-left: 1em;
    }
    .filter-bar ul li {
        margin:0.6em 0;
        font-size: 0.9em;
        text-align: left;
        cursor: pointer;
    }
    .list {
        border-bottom: 1px solid lightgray; 
        padding-bottom:2em;
        padding-top: 1em;
        text-align: center;
    }
    .content.gutters {
        border-left: 1px solid lightgray;
    }
    .row.flex {
        margin-top: 1em;
    }



    /*This is select style */
    .handler {
        margin-top:0.5em;
        margin:0.2em;
        width:100%;
        overflow:hidden;
     
    }
    .left-hidden {
        display:none;
    }

    .select-style {
        float:right;
        border: 1px solid #ccc;
        width: 120px;
        border-radius: 2px;
        overflow: hidden;
        background: url("../img/select_icon.png") no-repeat 95% 50%;
        background-size: 20px;
        background-color:#f4f4f4;
        margin-top:1em;
    }

    .select-style .js-sort {
        padding: 3px 3px;
        width: 120%;
        border: none;
        box-shadow: none;
        background: transparent;
        background-image: none;
        -webkit-appearance: none;
    }


    .select-style .js-sort:focus {
        outline: none;
    }
    .js-filter {
        cursor: pointer;
    }
    


/*-----------------------------------------*/
@media (max-width:800px) {

    /*-----------This is add new product ------------*/
    #addnew {
        display:none;
    }

     .list {
        padding-bottom:1em;
        padding-top: 0.5em;
        border-bottom: none;
    }
    .product {
        padding-top:0.5em;
        padding-bottom: 2em;
    }
    .product .filter ul  {
        display:inline-block;
        margin:0.2em;
    }
    .product .filter ul {
        text-align: left;
        margin:0;

    }
    .gutters>[class*='col-'] {
    margin-top: 20px;
    padding-left: 8px;
    padding-right: 8px;
}
    

/*-----------filter----------------*/

    .filter-bar li h2 {
            display:none;
        }
     .filter-bar ul li {

        text-align: center;
        background-color:#f4f4f4;
        padding:0.6em 0.4em;
        border:0.5px solid lightgray;
    }
    .filter-bar li.title {
        display:none;
    }
    .filter-bar.bar {
    padding-left: 0;
    }
     .content.gutters {
    
        border-left: none;
    }

    .filter-bar ul li{
        display:inline-block;
        margin:0;

    }
    .left-hidden {
        display:inline;
    }
    .handler.right-hidden {
        display:none;
    }
    .filter-bar input {
        display:none;
    }
    .card.col-sm-6.col-md-9 {
        display:none;
    }
    .select-style {
        margin-top:0;
        border:none;
    }





}
@media (max-width:500px) {
    .card.col-sm-6.col-md-9 {
        display:none;
    }
    .gutters>.filter {
        margin-bottom:5px;
 

    }
    .formContainer {
    position:fixed;
}


/*----------filter-------------*/


    .filter-bar li h2, .title.hidden {
            display:none;
        }

    .handler select{
            width:100%;
        }
    .handler .right-hidden {
        width:100%;
    }
     .container .list {
        display:none;
                    
    }
    .select-style {
        /*width: 100%;*/
        margin-top:0;
        border:none;
    }
/*form-------------------------*/
/*.formContainer {
    top:40%;
}*/

}
@media(max-width:320px) {
    
    .formTitle h2 {
    display:none;
}

}