/* <select> wrapper DIV */
.custom_select {
  position: relative;
  width: 125px;
}

/* Hides default select */
.custom_select select {
  display: none;
}

/* Adds custom default arrow icon to dropdown */
.select_selected:after {
  position: absolute;
  content: '';
  top: 17px;
  right: 0px;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/* Dropdown items: */
.select_items div {
  color: var(--grey1);
  padding: 10px;
  cursor: pointer;
}

/* Selected dropdown item */
.select_selected {
  color: white;
  padding: 10px 10px 10px 0px;
  cursor: pointer;
  border-bottom: 1px solid var(--grey2);
  background-color: inherit;
  transition: 0.4s all;
}

/* text content inside filter */
.select_selected > p {
  height: 19px;
  overflow: hidden;
}

/* Selected dropdown item (hover) */
.select_selected:hover {
  border-bottom: 1px solid var(--grey1);
  transition: 0.4s all;
}

/* Dropdown items (options) */
.select_items {
  position: absolute;
  background-color: white;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  transition: 0.4s all;
  max-height: 400px;
  overflow: auto;
}

/* Hides the items when dropdown is closed */
.select_hide {
  display: none;
}

/* Selected item in dropdown */
.select_items div.same_as_selected,
.select_items div.same_as_selected:hover {
  color: var(--green2);
}

/* Dropdown items during hover */
.select_items div:hover {
  color: var(--grey2);
  transition: 0.4s all;
}

/* Competition filter section */
.filter_section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

/* Show more matches button */
#show-more-matches {
  cursor: pointer;
}

@media screen and (max-width: 1050px) {
  /* Competition filter section */
  .filter_section {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 479px) {
  /* <select> wrapper DIV */
  .custom_select {
    width: 100%;
  }

  /* Filter dropdown */
  .select_selected {
    padding: 10px 30px 10px 0px;
  }
}