.pagination-item {
  border-radius: 50%;
  background-color: white;
  text-align: center;
  line-height: 46px;
  border: 2px solid rgba(255, 255, 255, 0);
  color: #cecece;
  font-size: 1.2em;
  cursor: pointer;
}

.pagination-holder {
  width: 50px;
  height: 50px;
  display: block;
  position: relative;
}

.pagination-holder.dark .pagination-item {
  background-color: #f0f3f6;
  color: #bddcfb;
}

.pagination-item:first {
  color: #dddddd;
}

.pagination-item.active {
  border: 2px solid #26ade4;
}

.pagination-item:hover:not(.active) {
  border: 2px solid #26ade4;
}

.pagination-item:hover.cursor-not-allowed {
  border: 2px solid rgba(255, 255, 255, 0);
}

.text-selected .pagination-item.active {
  font-weight: 600;
  color: #26ade4;
}

.pagination-item-title {
  display: block;
  margin-left: -100%;
  margin-right: -100%;
  text-align: center;
  font-size: small;
}

/* //pagination in user layout */
@media (min-width: 768px) {
  .pagination-contents .previous-button {
    text-align: right;
  }

  .pagination-contents .next-button {
    text-align: left;
  }
}

@media (max-width: 768px) {
  .pagination-contents .col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .pagination-contents .previous-button {
    /* text-align: center;
    width: 100%;
    margin-bottom: 16px; */
    display: none;
  }

  .pagination-contents .next-button {
    /* text-align: center;
    width: 100%;
    margin-top: 53px; */
    display: none;
  }
}

@media (max-width: 400px) {
  .spacer-horizontal.big {
    width: 15vw;
  }
}

@media (max-width: 380px) {
  .spacer-horizontal.big {
    width: 12vw;
  }
}

@media (max-width: 360px) {
  .spacer-horizontal.big {
    width: 10vw;
  }
  .pagination-item-title {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: small;
  }
}

@media (max-width: 300px) {
  .spacer-horizontal.big {
    width: 3vw;
  }
}

/* //pagination in user layout - end */

.spacer-horizontal {
  display: block;
  height: 1px;
  background-color: white;
  margin: 0px;
  width: 60px;
  font-size: 80%;
  font-weight: normal;
  margin-top: 23px;
}

.spacer-horizontal.small {
  height: 1px;
}

.spacer-horizontal.mid {
  height: 2px;
}

.spacer-horizontal.big {
  height: 3px;
}

.spacer-horizontal.dark {
  background-color: #f0f3f6;
  color: #bddcfb;
}

.spacer-horizontal.active {
  background-color: #26ade4;
}

.chevron {
  color: black;
}

.previous-button,
.next-button {
  transform: translate(10px, 10px);
}