:root {
  --dark1: #1E1E1E;
  --dark2: #252526;
  --dark3: #333333;
  --dark-link: #724490;
  --dark-link-h: #a163ca;
  --dark-title: #E7E7CD;
  --dark-text: #9D9D9D;
  --dark-text-sec: #777777;
  --dark-text-dim: #555555;
  --text: black;
  --text-sec: #dark;
  --text-dim: lightgray;
  --link: #724490;
  --link-h: #a163ca;
}

.pagination * {
  font-size: 14px;
}

.pagination {
  display: inline-block;
  border-radius: 2rem !important;
  overflow: hidden;
  border: 1px solid lightgray;
  box-shadow: 0 .125rem .25rem #00000013 !important;
  padding: 0 10px;
}
.pagination > li {
  display:inline
}
.pagination a {
  position:relative;
  float:left;
  padding:6px 12px;
  margin-left:-1px;
  line-height:1.42857143;
  text-decoration:none;
  background-color: white;
}
.dark .pagination a {
  background-color: transparent;
}

.pagination a {
  color: var(--link);
}
.pagination li:not(:first-child) a {
  border-left: 1px solid lightgray;
}

.pagination a:hover {
  color: var(--link-h)
}
.pagination .disabled a {
  cursor: default;
  color: var(--text-dim)
}
.pagination .disabled a:hover {
  color: var(--text-dim)
}

.dark .pagination {
  border: 1px solid rgb(100, 100, 100);
}
.dark .pagination a {
  color: var(--dark-link)
}
.dark .pagination a:hover {
  color: var(--dark-link-h)
}
.dark .pagination .disabled a {
  color: var(--dark-text-dim)
}

.pagination span:not(.pagination-text) {
  font-size: 1.2rem;
  vertical-align: middle;
  display: none;
}

@media only screen and (max-width: 575px) {

  .pagination-text {
    display: none;
  }
  .pagination span:not(.pagination-text) {
    display: inline;
  }

}