.pagination {

.page-item .page-link {
  border: 0;
  border-radius: 30px !important;
  transition: all .3s;
  margin: 0 3px;
  min-width: 30px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
  text-transform: uppercase;
  outline: none;

  &:hover,
  &:focus {
      background-color: rgba($white, 0.1);
      color: $white;
      border: none;
      box-shadow: none;
  }
}

.arrow-margin-left,
.arrow-margin-right {
    position: absolute;
}

.arrow-margin-right {
    right: 0;
}

.arrow-margin-left {
    left: 0;
}

.page-item.active > .page-link {
    color: $white;
    box-shadow: $box-shadow;

    &,
    &:focus,
    &:hover{
      @include diagonal-gradient($primary, $primary-states);

        color: $white;
    }
}

.page-item.disabled > .page-link{
    opacity: .5;
}

// Colors
&.pagination-info{
    .page-item.active > .page-link{
        &,
        &:focus,
        &:hover{
            @include diagonal-gradient($info, $info-states);
        }
    }
}

&.pagination-success{
    .page-item.active > .page-link{
        &,
        &:focus,
        &:hover{
            @include diagonal-gradient($success, $success-states);
        }
    }
}

&.pagination-primary{
    .page-item.active > .page-link{
        &,
        &:focus,
        &:hover{
          @include diagonal-gradient($primary, $primary-states);

        }
    }
}

&.pagination-warning{
    .page-item.active > .page-link{
        &,
        &:focus,
        &:hover{
          @include diagonal-gradient($warning, $warning-states);

        }
    }
}

&.pagination-danger{
    .page-item.active > .page-link{
        &,
        &:focus,
        &:hover{
          @include diagonal-gradient($danger, $danger-states);

        }
    }
}

&.pagination-neutral{
    .page-item > .page-link{
        color: $white;

        &:focus,
        &:hover{
            background-color: $opacity-2;
            color: $white;
        }
    }

    .page-item.active > .page-link{
        &,
        &:focus,
        &:hover{
            background-color: $white;
            border-color: $white;
            color: $brand-primary;
        }
    }
}

}

@include media-breakpoint-down(sm){

div.dataTables_paginate ul.pagination {
  .page-item:first-of-type,
  .page-item:nth-of-type(2),
  .page-item:nth-of-type(8),
  .page-item:last-of-type {
     display: none !important;
   }
}

}