.filter-options{
  position: fixed;
  top: 10px;
  left: 10px;
}

.filter-container{
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  padding: 10px 200px;
  background: rgba(85, 85, 85, 0.904);
  transform: translateY(10px);
  color: #fff;
  text-align: center;
  box-shadow: #0005 0 0 10px;
  opacity: 0;
  z-index: 150;
}

.filter-container > .filter-title{
  font-size: 30px;
}

.filter-type-select{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75%;
  margin: auto;
}

.filter-type-select > div{
  width: 100%;
  border: #fff 4px solid;
  border-left: #fff 2px solid;
  border-right: #fff 2px solid;
  padding: 5px 0;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.filter-type-select > div:first-child{
  border-left: #fff 4px solid;
  border-radius: 10px 0 0 10px;
}

.filter-type-select > div:last-child{
  border-right: #fff 4px solid;
  border-radius: 0 10px 10px 0;
}

.filter-type-select > .selected-filter{
  background: #00ccff55;
}

.filter-search{
  margin-top: 10px;
  padding: 5px;
  border: #fff 4px solid;
  border-radius: 10px;
  background: #0008;
  outline: none;
  color: white;
  font-size: 15px;
  font-family: 'Rubik';
  width: calc(75% - 18px);
}