.overlay {
    position: fixed;
    top: 5%; /* Adjust the value to change the vertical position */
    left: 5%; /* Adjust the value to change the horizontal position */
    width: 150px;
    height: 150px;
    background-color: rgba(255, 255, 255, 0.90); /* White with 5% transparency */
    border-radius: 20px; /* Adjust the value to change the roundness of the corners */
  }

  .build-filter{
    background-color: #cccccc;
    margin: 2px;
    margin-left: 10px;
    /*height:100px;*/
    display:flex;
    flex-direction: column;
  }

  .build-filter-row{
    display:flex;
    /*overflow-y: clip;*/
    padding:0;
    margin:0;
  }


  .filter-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    background-color: #f2f2f2; /* Change the background color as needed */
    border: 1px black solid;
    overflow: hidden;
    cursor:pointer;
    margin:1px;
    flex:1;
}

.build-filter-row[data-height="1"] {
    max-height: 70px;
}

.build-filter-row[data-height="2"] {
  max-height: 30px;

}

.build-filter-column{
  flex:1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 10px;
  margin-right: 10px;
}

.build-filter-column .filter-button-container {
  display:inline-block;
  min-width:40px;
  text-align: center;
}

.filter-column-container{
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  padding:0;
  margin:0;
}





.filter-button-container.clicked {
  
  background-color: #b88f51; /* Change the background color as needed */

}

.filter-button-container i{
  font-size: 25px;
  color: #868585;
  margin: 20px;
}

.filter-button-container img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
}

.filter-button-text-large {
  display:none;
}

.filter-column-header {
  margin-bottom: 5px;
  text-align:center;
  font-size: smaller;
}

.build-filter.hidden {
    display: none;
}


@media screen and (min-width: 768px) {
  /* Styles for screens 768px wide and larger */
  .filter-button-text-large {
    display:block;
  }
  .filter-button-text-small {
    display:none;
  }
}

@media (max-width: 550px) {
  .filter-button-text-large, .filter-button-text-small {
    display:none;
  }
}