.pagination {
   display: flex;
   justify-content: flex-end;
   column-gap: 5px;
   width: 100%;
   margin: 20px 0;
}

.pagination > .groub {
   display: flex;
}

.pagination > .groub .item {
   display: flex;
   border: 1px solid #d0d0d0;
   border-left: 0;
   padding: 5px 10px;
   color: #666;
   background-color: #fff;
   font-size: 13px;
   font-weight: 300;
}

.pagination > .groub .item:first-child {
   border-left: 1px solid #d0d0d0;
   border-top-left-radius: 2px;
   border-bottom-left-radius: 2px;
}

.pagination > .groub .item:last-child {
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
}

.pagination > .groub .next,
.pagination > .groub .perv  {
   display: flex;
   font-size: 12px;
   margin: unset;
}

.pagination > .groub .item span {
   align-self: center;
}

.pagination > .groub .next i, .pagination > .groub .perv i {
   align-self: center;
}

.pagination > .groub .page:hover,
.pagination > .groub .next:hover,
.pagination > .groub .last:hover,
.pagination > .groub .first:hover,
.pagination > .groub .perv:hover {
   cursor: pointer;
   background-color: #eaf9ff;
   z-index: 1;
}

.pagination > .groub .bnt_go:hover {
   cursor: pointer;
   background-color: #d0d0d0;
   z-index: 1;
}

.pagination > .groub .bnt_go,
.pagination > .groub .displaying {
   background-color: #eaeaea;
}

.pagination > .groub .active {
   background-color: #2185d0;
   color: #fff;
   z-index: 1;
}

.pagination > .groub .pagination_input,
.ui.form > .pagination > .groub input[type=number] {
   font-weight: 300;
   border: 1px solid #d0d0d0;
   border-radius: 2px;
   padding: 0 5px;
   width: 60px;
   text-align: center;
   color: #666;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
}

.pagination > .groub .pagination_input:focus,
   .ui.form > .pagination > .groub input[type=number]:focus {
   border-color: #85b7d9;
}

.pagination > .groub .displaying {
   font-weight: 300;
}