.custom-filtering-chip {
  background: rgba(0,0,0,.4);
  color: #fff;
  border-radius: 20px;
  padding: 2px 6px 2px 12px;
  height: 24px;
  margin-right: 5px;
}

.remove-chip-btn {
  margin-top: -1px;
  font-size: 22px;
}

::ng-deep html[dir=rtl] .custom-filtering-chip {
  margin-right: unset !important;
  margin-left: 5px;
  padding: 2px 12px 2px 6px;
}

.more-chip:hover {
  cursor: pointer;
}

.more-icon {
  transform: rotate(90deg);
}

.more-icon-removal {
  vertical-align: middle;
  float: right;
}

::ng-deep html[dir=rtl] .more-icon-removal {
  float: right;
}

.more-item-container {
  padding: 2px 10px;
  float: right;
  clear: both;
}

::ng-deep html[dir=rtl] .more-item-container {
  float: left;
}

.more-item-container > span {
  margin-top: 6px !important;
  display: inline-block;
}

.custom-filtering-chip .mat-icon {
  color: #fff;
  vertical-align: middle;
}

.custom-filtering-chip:focus {
  outline: none;
}

.custom-filtering-chip > span {
  vertical-align: middle;
  font-weight: 300;
}

.hide-applied-filters-btn mat-icon {
  transform: rotate(270deg);
  background: #ccc;
  color: #fff;
  border-radius: 100%;
}

::ng-deep .mat-mdc-menu-panel.filtering-display-mat-menu {
  max-width: none !important;
  min-height: 20px !important;
  margin-top: 10px !important;
}

@media screen and (max-width: 1280px) {
  .space-chips {
    margin-top: 5px;
  }
}
