//
// pagination
// --------------------------------------------------
.uiPageIterator p {
	display: inline-block;
	margin: 3px 10px 0 0;
	vertical-align: middle;
	> span {
		color: @textColor;
	}
	> .pagesTotalNumber {
		font-weight: bold;
	}

}

.uiPageIterator ul {
	.box-shadow(0 0 0 rgba(0,0,0,.05));
	vertical-align: middle;
}

.uiPageIterator label {
	line-height: 26px;
}

.uiPageIterator ul > li > a,
.uiPageIterator ul > li.disabled > a,
.uiPageIterator ul > li.disabled > a:hover {
	#gradient > .vertical(@pageIteratorStartColor, @pageIteratorEndColor);
    min-width: 16px;
    padding: 2px 4px;
	margin: @pageIteratorMargin;
	text-align: center;
	color: @textColor;
}

.uiPageIterator ul > li > a:hover,.uiPageIterator ul > li.disabled > a:hover,
.uiPageIterator ul > .active > a{
  background-color:  @pageIteratorHoverBackground;
  background-position: @pageIteratorBackgroundPosition;
  .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
}

.uiPageIterator ul > li.disabled { 
    i {.opacity(50);}
}

.uiPageIterator ul > .active > a {
	color: @pageIteratorColor;
	font-weight: bold;
	background-color: @pageIteratorActiveBackground;
}

/*** Just for Arrow icon - should be changed after writing a mixin for icon in core ***/

.uiPageIterator ul > li.disabled > a > [class^="uiIcon"],
.uiPageIterator ul > li.disabled > a:hover > [class^="uiIcon"],
.uiPageIterator ul > li.disabled > a:active > [class^="uiIcon"] {
	
}

.table + .pageIteratorBorder {
	border: 1px solid @borderColor;
	border-top: 0;
	margin: -20px 0 20px 0;
	padding: 10px;
	.uiPageIterator  {
		margin: 0;
	}
}

.uiPageIterator > .selectbox{
    box-shadow: 0 0 0 transparent inset;
    .size(26px, auto);
    line-height: 18px;
    outline: medium none;
    border: 1px solid @borderColor;
    border-radius: 4px;
    display: inline-block;
    line-height: 20px;
    overflow: hidden;
    vertical-align: middle;
}

.uiPageIterator {
	[class^="uiIcon"]{
		font-size: @sizeIcon12x12;
		top: -1px;
	}
}