.jtl-search-color {

  a.color {
    height:  24px;
    width:   24px;
    border:  1px solid $colorFontMuted;
    cursor:  pointer;
    display: block;
    &:hover {
      border-color: $colorLinkHover;
    }
    span {
      display: none;
    }
  }

  &.active a.color {
    border:  1px solid $colorActive;
  }

  a.red {
    background-color: #CD3700;
  }

  a.black {
    background-color: #000;
  }

  a.blue {
    background-color: #3A5FCD;
  }

  a.brown {
    background-color: #8B7355;
  }

  a.gray {
    background-color: #BEBEBE;
  }

  a.green {
    background-color: #008B00;
  }

  a.orange {
    background-color: #FF8C00;
  }

  a.violet {
    background-color: #DDA0DD;
  }

  a.white {
    background-color: #FFFFFF;
  }

  a.yellow {
    background-color: #EEDD82;
  }
}
.jtl-search-slider {
  padding: 20px 25px 10px 25px;

  .dropdown-menu & {
    padding: 5px 40px 0 10px;
  }
}
.jtl-search-colors {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 20px 15px 20px;
  .dropdown-menu & {
    padding: 10px 10px 5px 10px;
  }
  .jtl-search-color {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
  }
}
.jtl-search-tinyboxes {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 20px 15px 20px;
  .btn.jtl-search-tiny {
    width: auto;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
  }
}
@include media-breakpoint-only(xs) {
  .jtl_search_results.jtl_search_results {
    width: auto;
  }
}