﻿.nucleus-paging-control
{
  padding: 4px 8px 4px 8px;
	background-color: #5d81a0;
	margin-bottom: 2px;
	display: flex;
	gap: 4px;
	align-items: center;
	font-size: 0.9rem;
	justify-content: flex-end;
}

.nucleus-paging-control.compact
{
	font-size: 0.8rem;
	padding: 4px 4px 4px 4px;
	gap: 2px;	
}

.nucleus-paging-control .nucleus-pagingcontrol-pagebutton:hover, .nucleus-paging-control .nucleus-pagingcontrol-pagebutton:active
{
  background-color: #357fbe;
  color: White;
}

.nucleus-paging-control .nucleus-pagingcontrol-pagebutton.disabled
{
	visibility: hidden;
}

.nucleus-paging-control .nucleus-pagingcontrol-left
{
	display: flex;
	margin-right: auto;
	gap: 4px;
}

.nucleus-paging-control .nucleus-paging-control-summary
{
	flex-grow: 2;
}

.nucleus-paging-control:not(.compact) .nucleus-paging-control-summary
{
	min-width: 12rem;
	align-self: center;
}

.nucleus-paging-control span, .nucleus-paging-control label
{
  color: white;
}

.nucleus-paging-control label
{
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}

.nucleus-paging-control.compact label
{
	margin-left: 0.25rem;
	margin-right: 0.25rem;
}

.nucleus-paging-control .nucleus-pagingcontrol-pagebutton, .nucleus-paging-control .nucleus-pagingcontrol-pagedropdown, .nucleus-paging-control .nucleus-pagingcontrol-pagesizedropdown
{
	padding: 2px 6px 2px 6px;
	border: solid 1px #DDDDDD;
	background-color: White;
	color: Black;
	cursor: pointer;
	text-decoration: none;
	border-radius: 0;
}

.nucleus-paging-control button:focus
{
	outline: solid;
}

.nucleus-paging-control .nucleus-pagingcontrol-pagebutton.Current
{
	background-color: #DDDDDD;
}

.nucleus-paging-control .nucleus-pagingcontrol-pagedropdown
{
	margin-left: 1rem;
}

.nucleus-paging-control.compact .nucleus-pagingcontrol-pagedropdown
{
  margin-left: 0;
	margin-right: 0.5rem;
}

.nucleus-paging-control .nucleus-pagingcontrol-pagesizedropdown, .nucleus-paging-control .nucleus-pagingcontrol-pagedropdown
{
	padding: 2px 26px 2px 6px;
	border: solid 1px #DDDDDD;	
}

.nucleus-paging-control.compact .nucleus-pagingcontrol-pagedropdown, .nucleus-paging-control.compact .nucleus-pagingcontrol-pagesizedropdown
{
	padding: 2px 22px 2px 4px;
}

/*  Responsive UI  */
@media screen and (max-width: 1134px),
       screen and (max-height: 600px)
{
  .nucleus-pagingcontrol-left
  {
    display: none!important;
  }
}