.filter-link-container {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;

  button.filter-button {
    height: 48px;
    padding: 4px 12px;
    background-color: white !important;
    margin-right: 20px;
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;

    &.green {
      border: 2px $zim_green solid;
      color: $zim_green;

      &.active {
        background-color: $zim_green !important;
      }
    }

    &.yellow {
      border: 2px $zim_yellow solid;
      color: $zim_yellow;

      &.active {
        background-color: $zim_yellow !important;
      }
    }

    &.lime {
      border: 2px $zim_lime solid;
      color: $zim_lime;

      &.active {
        background-color: $zim_lime !important;
      }
    }

    &.orange {
      border: 2px $zim_orange solid;
      color: $zim_orange;

      &.active {
        background-color: $zim_orange !important;
      }
    }

    &.navy {
      border: 2px $ensa_navy solid;
      color: $ensa_navy;

      &.active {
        background-color: $ensa_navy !important;
      }
    }

    i {
      display: none;
      color: white;
      font-size: 1em;
      float: left;
      margin-right: 8px;
    }

    &.active {
      border: none;
      color: #FFF;

      i {
        display: block;
      }
    }
  }
}

.faq_type_EN {
  color: $zim_green;
  border-color: $zim_green;
}

.faq_type_FR {
  color: $zim_yellow;
  border-color: $zim_yellow;
}

.faq_type_IN {
  color: $zim_lime;
  border-color: $zim_lime;
}

.faq_type_UO {
  color: $zim_orange;
  border-color: $zim_orange;
}

.faq_type_NO {
  color: $zim_green;
  white-space: nowrap;
}

.filter-cancel-None {
  display: none;
}

// for this case only we need to have specific width that only target this page,
// so we use 1240px rather than the usual $breakpoint_medium
@media only screen and (max-width: 1240px) {
  .filter-link-container {
    display: block;

    button.filter-button {
      margin-bottom: 8px;
      width: calc(100% - 20px);
    }
  }
}