.box-background{
    width:fit-content;
    margin-left:20px;
    cursor: pointer;
    margin-right:20px;

}
.title-box{  
    width:100%;
    justify-content: center;
    display:inline-flex;
    flex-wrap: wrap;
}
.container{
    justify-content: center;
    z-index: -10;
}
.menuItem{
    margin:6px;
    cursor: pointer;
    display:block;
    transition: 0.2s;
    user-select: none;
}
.color-box{
    height:30px;
    width:30px;
    background-repeat: no-repeat;
    background-position: center;
    cursor:pointer;
    margin:2px;
    margin-top:0px;
    margin-bottom:0px;
    display:inline-flex;
    border-radius:2px;
    opacity:0.7;
    transition: 0.2s;
    user-select: none;
}
form{
    width:100%;
}
input{
    border:none;
    background:none;
}
.hiddenObj{
display:none;
visibility: hidden;
width:0px;
}
.color-box-preview{
    display:inline-flex;
    position: absolute;
    border-top: solid 1px #313131;
    top: 0;
    transform: translate(-10px,10px);
    margin-top: 5px;
    padding-top: 5px;
}
.color-box-filter-preview{
    height:20px;
    width:20px;
    margin:2px;
}
.color-box:hover{
opacity:1;
}
.menuItem:hover{
    font-weight:500;
}
.current-filter{
    position: absolute;
    display:inline-flex;
    top: 0;
    min-width:50px;
    transform: translate(-10px,10px);
    margin-top: 5px;
    user-select: none;
    padding-top: 5px;
    border-top: solid 1px #313131;
    line-height: 12px;
}
#cost{
    transform:translateX(-340px);
}
#Text-thin{
    user-select: none;
    transition: 0.2s;
}
.header{
    background-color: black;
}
i {
    margin-bottom:3px;
    border: solid #313131;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 3px;
    user-select: none;
}
.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.dropdownMenu{
    height:0px;
    user-select: none;
    display:none;
    margin-top:40px;
    margin-left:73px;
    padding:5px;
    position: absolute;
    background-color:white;
    z-index:26;
    width:180px;
}
#category{
    transform:translateX(160px);
}
#color{
    transform:translateX(-5px);
}
#popularity{
    transform:translateX(-180px);
}
@media only screen and (max-width:450px){
    #cost{
        transform:translateX(0px);
    }
    #popularity{
        transform:translate(0px,55px);
    }
    #color {
        transform: translate(0px,116px);
    }
    #category{
        transform:translate(0px, 180px);
    }
    .dropdownMenu{
        margin-left:0px;
    }
    #filter{
        transform:translateY(60px);
    }
}