.pagination {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
@media only screen and (max-width: 767px) {
  .pagination {
    margin-top: 30px;
    gap: 4px;
  }
}
.pagination > li {
  display: none;
}
.pagination > li.page, .pagination > li.prev, .pagination > li.next, .pagination > li.first, .pagination > li.last {
  display: block;
}
.pagination > li.page > span,
.pagination > li.page > a, .pagination > li.prev > span,
.pagination > li.prev > a, .pagination > li.next > span,
.pagination > li.next > a, .pagination > li.first > span,
.pagination > li.first > a, .pagination > li.last > span,
.pagination > li.last > a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  width: 44px;
  height: 44px;
  background-color: #f6fbfc;
  border-radius: 5px;
  border: 1px solid #cddde5;
  transition: 0.5s;
}
@media only screen and (max-width: 767px) {
  .pagination > li.page > span,
  .pagination > li.page > a, .pagination > li.prev > span,
  .pagination > li.prev > a, .pagination > li.next > span,
  .pagination > li.next > a, .pagination > li.first > span,
  .pagination > li.first > a, .pagination > li.last > span,
  .pagination > li.last > a {
    width: 40px;
    height: 40px;
  }
}
.pagination > li.page.active > span, .pagination > li.prev.active > span, .pagination > li.next.active > span, .pagination > li.first.active > span, .pagination > li.last.active > span {
  background-color: #004098;
  border: 1px solid #004098;
  color: white;
}
.pagination > li.prev > span,
.pagination > li.prev > a, .pagination > li.next > span,
.pagination > li.next > a, .pagination > li.first > span,
.pagination > li.first > a, .pagination > li.last > span,
.pagination > li.last > a {
  background-color: transparent;
  border: none;
}
.pagination > li.prev.disabled, .pagination > li.next.disabled, .pagination > li.first.disabled, .pagination > li.last.disabled {
  display: none;
}
.pagination > li.prev svg {
  transform: scaleX(-1);
}