.filter-box{
  width: 280px;
  background: rgba($primary-color, .95);
  label, h3, small {
    color: $button-text-color;
  }
  position: absolute;
  left: 0;
  height: 100vh;
  @include depth(2);
  padding: $size-small;
  @include media-breakpoint-up(sm){
    padding: $size-medium;
  }
  h3{
    margin-bottom: 0;
  }
  .btn-toggle{
    margin: 0;
    span{
      background: $white;
    }
  }
  .btn-outline-secondary{
    border-color: $danger !important;
    color: $danger !important;
    &:hover{
      background: $danger !important;
      color: $white !important;
    }
  }
  transform: translateX(-280 - $main-margin - 30);
  top: -$main-margin + 15;
  @include media-breakpoint-down(xl) {
    transform: translateX(-280 - $main-margin-lg - 30);
    top: -$main-margin-lg + 10;
  }
  @include media-breakpoint-down(lg) {
    transform: translateX(-280 - $main-margin-md - 30);
    top: -$main-margin-md + 10;
  }
  @include media-breakpoint-down(sm) {
    transform: translateX(-280 - $main-margin-xs - 30);
    top: -$main-margin-xs;
  }
  transition: transform 0.5s $sidearEasing;
  &.open{
    transform: translateX(-$main-margin);
    @include media-breakpoint-down(xl) {
      transform: translateX(-$main-margin-lg);
    }
    @include media-breakpoint-down(lg) {
      transform: translateX(-$main-margin-md);
    }
    @include media-breakpoint-down(sm) {
      transform: translateX(-$main-margin-xs);
    }
  }
  .row{
    margin: 0;
  }
  .col{
    padding: 0;
  }
  .form-control{
    padding: .5rem;
  }
  .react-select__value-container{
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
  }
  form{
    .btn{
      &:first-child{
        margin-right: $size-small;
      }
    }
  }
}

.filter-header{
  padding-bottom: $size-small;
  margin-bottom: $size-small;
  border-bottom: 1px solid $separator-color;
}

.header-filter{
  .search-sm {
    position: relative;

    input {
      background: none;
      outline: none !important;
      border: 1px solid $secondary-color;
      border-radius: 3px;
      padding: 0.25rem 0.75rem 0.25rem 0.75rem;
      font-size: 0.76rem;
      line-height: 1.3;
      color: $primary-color;
      &::placeholder{
        font-style: italic;
      }
    }

    &:after {
      font-family: "simple-line-icons";
      content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%20%3D%20%220%200%20512%20512%22%3E%20%3Cpath%20fill%20%3D%20%22%23575057%22%20d%3D%22M508.5%20481.6l-129-129c-2.3-2.3-5.3-3.5-8.5-3.5h-10.3C395%20312%20416%20262.5%20416%20208%20416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c54.5%200%20104-21%20141.1-55.2V371c0%203.2%201.3%206.2%203.5%208.5l129%20129c4.7%204.7%2012.3%204.7%2017%200l9.9-9.9c4.7-4.7%204.7-12.3%200-17zM208%20384c-97.3%200-176-78.7-176-176S110.7%2032%20208%2032s176%2078.7%20176%20176-78.7%20176-176%20176z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
      font-size: 14px;
      border-radius: 10px;
      color: $secondary-color;
      position: absolute;
      width: 15px;
      right: 5px;
      text-align: center;
      cursor: pointer;
      top: 5px;
    }
  }
}